About

 Top Next

W3Schools Tutor is a compiled form of the website that can be browsed without having internet :)

W3Schools Siterip and Compilation contains more than 50 tutors ready made and prudent for Beginners or Novices to gain a conceptual idea about the web and web related programming concepts.

I regret to say that this compilation is not a complete rip :(, but still it will solve the purpose of reader. As this site is huge and contains many unwanted materials like links to other domains, unwanted media and affiliated pages etc. If you want to get more than log on to the online help at http://www.w3schools.com.

Site ripped with | WinHTTP Tracker 3.40
HTML Pages Edited with | Macromedia Dreamweaver 2004 MX
Code, Links, HTML Tags cleaned with | Funduc Search & Replace 5.5
Final cleanup with | HTMLTrim 0.2.8

DISCLAIMER:

The associated media and "online" or electronic documentation in this compiled book are subject to their original author(s) / web administrator(s). I take no responsibility for any kind of special, incidental, indirect or consequential damages whatsoever (including, without limitation, damages for loss of business profits, business interruption, loss of business information, or any other financial loss) arising out of the use of or this book. The user acknowledges that any use of this book will be at the user's own risk and I take no responsibility whatsoever arising from the use or application of this electronic documentation. No part of this electronic documentation (comprising any media, images or documentation) should be reverse engineered, reproduced, modified or released in any form without the prior consent of its original author(s) / web administrator(s). Who abides the LAW these days...:)

Website ripped and compiled by AKM


ADO Introduction

Introduction to ADO

 Top Previous Next

ADO can be used to access databases from your web pages.

What you should already know

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

· WWW, HTML and the basics of building Web pages
· Active Server Pages (ASP)
· Structured Query Language (SQL)

If you want to study these subjects first, go to our Page

What is ADO?

· ADO is a Microsoft technology
· ADO stands for ActiveX Data Objects
· ADO is a Microsoft Active-X component
· ADO is automatically installed with Microsoft IIS
· ADO is a programming interface to access data in a database

Accessing a Database from an ASP Page

The common way to access a database from inside an ASP page is to:

1. Create an ADO connection to a database
2. Open the database connection
3. Create an ADO recordset
4. Open the recordset
5. Extract the data you need from the recordset
6. Close the recordset
7. Close the connection


ADO - Add DataBase Record

Adding a Record

fname | [TEditFormControlObj]
lname | [TEditFormControlObj]
phone | [TEditFormControlObj]
email | [TEditFormControlObj]
homepage | [TEditFormControlObj]

View source on how to create input fields based on the fields in the database table.

Note: If you click on "Add Record" a new page will open. On the new page you may look at the source on how to add a record to a database table.


ADO - List Database Records

List Database Table

Click on a button to modify a record.

NO | FNAME | LNAME | PHONE | EMAIL | HOMEPAGE | DATEADDED
 | Terje | Beck | 55 66 77 99 | tertje@somewere.com | www.amazon.com | 1/18/2001 7:45:47 AM
 | Jan | Refsnes | 66 77 88 | jani@w3schools.com | http:/www.w3schools.com | 7/11/2000 1:01:56 PM
 | Torleif | Rasmussen | 77 88 99 | N/A | N/A | 4/26/2000 3:46:41 AM
 | anton | chek | 83833 | apa@kabar.com | www.yahoo.com | 4/25/2000 7:17:45 AM
 | stale | refsnes | 555-12234 | refsnes@hotmail.com | http://www.w3schools.com | 5/31/2000 11:14:33 AM
 | hari | prawin | 98410-95897 | hari@hari.com | www.hari.com | 1/18/2001 7:47:58 AM
 | Hege | Refsnes | N/A | hege@somewhere.com | N/A | 3/22/2001 1:35:01 PM

View source on how to list a database table in an HTML table

Note: If you click on a button in the "no" column a new page will open. On the new page you may look at the source on how to create input fields based on the fields from one record in the database table.


ADO AbsolutePage and AbsolutePosition Properties

ADO AbsolutePage and AbsolutePosition Property

AbsolutePage

The AbsolutePage property sets or returns a long value that specifies the page number in the Recordset object. It sets or returns a value from 1 to the number of pages in the Recordset, or it returns a value. The value is 1 when the current record is the first record in the Recordset.

Tip: To get the total number of pages in the Recordset, use the PageCount property.

Tip: To divide the Recordset into a series of pages, use the PageSize property.

Note: This property can only be used if the AbsolutePage, PageCount, and PageSize properties are supported by the provider.

AbsolutePosition

The AbsolutePosition property sets or returns a long value that specifies the ordinal (numeric) position of the current record in the Recordset object. It sets or returns a value from 1 to the number of records in the Recordset, or it returns a PositionEnum value. The value is 1 when the current record is the first record in the Recordset.

When you set this property to a number, you will be moved to the record at the numeric position.

Tip: To get the total number of records in the Recordset, use the RecordCount property.

Note: Do not use this property to uniquely identify a record!

Syntax

objRecordset.AbsolutePage

objRecordset.AbsolutePosition

PositionEnum Values

Constant | Value | Description
adPosUnknown | -1 | Indicates that the Recordset is empty, the current position is unknown, or the provider does not support the AbsolutePage or AbsolutePosition property
adPosBOF | -2 | Indicates that the current record pointer is before the first record (BOF)
adPosEOF | -3 | Indicates that the current record pointer is after the last record (EOF)


ADO ActiveCommand and ActiveConnection Properties

ActiveCommand

The ActiveCommand property returns a variant that contains the Command object associated with the Recordset object.

Note: If the Recordset object was not created by a Command object, Null is returned.

ActiveConnection

The ActiveConnection property sets or returns a string or variant that contains the Connection object associated with the Recordset object. If the connection is closed, this property sets or returns a definition for a connection.

Syntax

objRecordset.ActiveCommand

objRecordset.ActiveConnection


ADO ActiveConnection Property

The ActiveConnection property tells which Connection object the Command object belongs to.

If the connection is closed, it sets or returns a definition for a connection. If the connection is open it sets or returns the current Connection object.

Syntax

objcommand.ActiveConnection

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set comm=Server.CreateObject("ADODB.Command")

comm.ActiveConnection=conn

response.write(comm.ActiveConnection)

conn.close

%>


ADO ActiveConnection Property

The ActiveConnection property sets or returns a string or variant that tells which Connection object the Record object belongs to.

If the connection is closed, it sets or returns a string definition for a connection. If the connection is open it sets or returns a variant that is a reference to the current Connection object.

Tip: The ActiveConnection parameter of the Open method of the Record object can also be used to set this property.

Syntax

objrecord.ActiveConnection


ADO Add Records

We may use the SQL INSERT INTO command to add a record to a table in a database.

Add a Record to a Table in a Database

We want to add a new record to the Customers table in the Northwind database. We first create a form that contains the fields we want to collect data from:

<html>

<body>

<form method="post" action="demo_add.asp">

<table>

<tr>

<td>CustomerID:</td>

<td><input name="custid"></td>

</tr><tr>

<td>Company Name:</td>

<td><input name="compname"></td>

</tr><tr>

<td>Contact Name:</td>

<td><input name="contname"></td>

</tr><tr>

<td>Address:</td>

<td><input name="address"></td>

</tr><tr>

<td>City:</td>

<td><input name="city"></td>

</tr><tr>

<td>Postal Code:</td>

<td><input name="postcode"></td>

</tr><tr>

<td>Country:</td>

<td><input name="country"></td>

</tr>

</table>

<br /><br />

<input type="submit" value="Add New">

<input type="reset" value="Cancel">

</form>

</body>

</html>

When the user presses the submit button the form is sent to a file called "demo_add.asp". The "demo_add.asp" file contains the code that will add a new record to the Customers table:

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

sql="INSERT INTO customers (customerID,companyname,"

sql=sql & "contactname,address,city,postalcode,country)"

sql=sql & " VALUES "

sql=sql & "('" & Request.Form("custid") & "',"

sql=sql & "'" & Request.Form("compname") & "',"

sql=sql & "'" & Request.Form("contname") & "',"

sql=sql & "'" & Request.Form("address") & "',"

sql=sql & "'" & Request.Form("city") & "',"

sql=sql & "'" & Request.Form("postcode") & "',"

sql=sql & "'" & Request.Form("country") & "')"

on error resume next

conn.Execute sql,recaffected

if err<>0 then

Response.Write("No update permissions!")

else

Response.Write("<h3>" & recaffected & " record added</h3>")

end if

conn.close

%>

</body>

</html>

Important

If you use the SQL INSERT command be aware of the following:

· If the table contains a primary key, make sure to append a unique, non-Null value to the primary key field (if not, the provider may not append the record, or an error occurs)
· If the table contains an AutoNumber field, do not include this field in the SQL INSERT command (the value of this field will be taken care of automatically by the provider)

What about Fields With no Data?

In a MS Access database, you can enter zero-length strings ("") in Text, Hyperlink, and Memo fields IF you set the AllowZeroLength property to Yes.

Note: Not all databases support zero-length strings and may cause an error when a record with blank fields is added. It is important to check what data types your database supports.


ADO AddNew Method

The AddNew method creates a new record for an updateable Recordset object.

After you call this method, the new record will be the current record.

Syntax

objRecordset.AddNew fieldlist,values

Parameter | Description
fieldlist | Optional. A field name, or an array of field names, or the numeric position of the fields in the new record
values | Optional. A value, or an array of values for the fields in the new record

Example

<%

rs.AddNew "ProductName","Chang"

%>

or

<%

varfields=Array("ProductName","Prize","Quantity")

varvalues=Array("Chang","19","24-12 oz bottles")

rs.AddNew varfields,varvalues

%>


ADO AppendChunk Method

The AppendChunk method is used to append long binary or character data to a Parameter or Field object.

Tip: Use this method to manipulate long values in portions.

Object

Description of the AppendChunk Method

Parameter

You can use the AppendChunk method for a Parameter object if the Attributes property is set to adFldLong.

First time you call the AppendChunk method on a Parameter object it overwrites any existing data. The next AppendChunk calls add data to existing parameter data.

Field

You can use the AppendChunk method for a Field object if the Attributes property is set to adFldLong.

First time you call the AppendChunk method on a Field object it overwrites any existing data. The next AppendChunk calls add data to existing data. If you append data to one field and then set or read the value of another field in the current record, ADO assumes that you are finished appending data to the first field. If you then call the AppendChunk method on the first field again, ADO will overwrite the existing data. Accessing fields in other Recordset objects that are not clones of the first Recordset object will not disrupt AppendChunk operations. There must be a current record when you call the AppendChunk method on a Field object.

Note: This method does not work on Field objects of a Record object.

Syntax

objectname.AppendChunk data

Parameter | Description
data | The data to append


ADO Attributes Property

The Attributes property sets or returns a long value that indicates one or more characteristics of an object.

Note: When setting multiple attributes, it is possible to sum the values.

Object | Description of the Attributes Property
Connection | The Attributes property has read/write permissions on a Connection object. Its value can be the sum of one or more values. Default value is 0
Parameter | The Attributes property has read/write permissions on a Parameter object. Its value can be the sum of one or more ParameterAttributesEnum values. Default value is adParamSigned
Field | The Attributes property has read/write permissions when used to create a Recordset, but it has read-only permissions when you open an existing Recordset. Its value can be the sum of one or more values
Property | The Attributes property is read-only for a Property object. Its value can be the sum of one or more PropertyAttributesEnum values

Syntax

object.Attributes

Example

For a Connection object:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

response.write(conn.Attributes)

conn.close

%>

For a Field object:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.Recordset")

rs.open "Select * from orders", conn

set f=Server.CreateObject("ADODB.Field")

'Display the field attributes of the Orders Table

for each f in rs.Fields

response.write("Attr:" & f.Attributes & "<br />")

response.write("Name:" & f.Name & "<br />")

response.write("Value:" & f.Value & "<br />")

Next

rs.Close

conn.close

set rs=nothing

set conn=nothing

%>

For a Property object:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.Recordset")

rs.open "Select * from orders", conn

set prop=Server.CreateObject("ADODB.Property")

'Display the property attributes of the Orders Table

for each prop in rs.Properties

response.write("Attr:" & prop.Attributes & "<br />")

response.write("Name:" & prop.Name & "<br />")

response.write("Value:" & prop.Value & "<br />")

next

rs.close

conn.close

set rs=nothing

set conn=nothing

%>

XactAttributeEnum Values

Constant | Value | Description
adXactAbortRetaining | 262144 | When calling RollbackTrans it automatically starts a new transaction.
adXactCommitRetaining | 131072 | When calling CommitTrans it automatically starts a new transaction.

ParameterAttributesEnum Values

Constant | Value | Description
adParamSigned | 16 | The parameter will accept signed values.
adParamNullable | 64 | The parameter will accept null values.
adParamLong | 128 | The parameter will accept long binary data.

FieldAttributeEnum Values

Constant | Value | Description
adFldCacheDeferred | 0x1000 | Provider caches the field values and reads from the cache.
adFldFixed | 0x10 | Field contains fixed-length data.
adFldIsChapter | 0x2000 | Field contains a chapter value that specifies a child recordset.
adFldIsCollection | 0x40000 | The field specifies that the resource represented by the record is a collection of resources
adFldIsDefaultStream | 0x20000 | Field contains the default stream for the resource represented by the record.
adFldIsNullable | 0x20 | Field accepts null values.
adFldIsRowURL | 0x10000 | Field contains the URL that names the resource from the data store represented by the record.
adFldLong | 0x80 | Field is a long binary field.
adFldMayBeNull | 0x40 | You can read null values from the field.
adFldMayDefer | 0x2 | Field values are not retrieved from the data source with the whole record, but only when you explicitly access them.
adFldNegativeScale | 0x4000 | Field represents a numeric value from a column that supports negative scale values.
adFldRowID | 0x100 | Field contains a persistent row identifier that cannot be written to and has no meaningful value except to identify the row (such as a unique id)
adFldRowVersion | 0x200 | Field contains some kind of time/date stamp used to track updates.
adFldUnknownUpdatable | 0x8 | The provider cannot determine if you can write to the field.
adFldUnspecified | -1 0xFFFFFFFF | Provider does not specify the field attributes.
adFldUpdatable | 0x4 | You can write to the field.

PropertyAttributesEnum Values

Constant | Value | Description
adPropNotSupported | 0 | The property is not supported by the provider.
adPropRequired | 1 | The user must specify a value for this property before the data source is initialized.
adPropOptional | 2 | The user does not need to specify a value for this property before the data source is initialized.
adPropRead | 512 | The user can read the property.
adPropWrite | 1024 | The user can set the property.


ADO BeginTrans, CommitTrans, and RollbackTrans Methods

These 3 methods is used with the Connection object to save or cancel changes made to the data source.

Note: Not all providers support transactions.

Note: These 3 methods are not available on a client-side Connection object.

BeginTrans

The BeginTrans method starts a new transaction.

This method can also be used to return a long value that is the level of nested transactions. A top level transaction has a return value of 1. Each additional level increments by one.

CommitTrans

The CommitTrans method saves all changes made since the last BeginTrans method call, and ends the current transaction.

Since transactions can be nested, all lower-level transactions must be resolved before you can resolve higher-level transactions.

RollbackTrans

The RollbackTrans method cancels all changes made since the last BeginTrans method call, and ends the transaction.

Since transactions can be nested, all lower-level transactions must be resolved before you can resolve higher-level transactions.

Syntax

level=objconn.BeginTrans()

objconn.BeginTrans

objconn.CommitTrans

objconn.RollbackTrans


ADO BeginTransComplete, CommitTransComplete, and RollbackTransComplete Events

An event is a subroutine that can be called automatically after a specific operation has occurred.

· The BeginTransComplete event can be fired after a BeginTrans call is completed.
· The CommitTransComplete event can be fired after a CommitTrans call is completed.
· The RollbackTransComplete event can be fired after a RollbackTrans call is completed

Syntax

BeginTransComplete translevel,objerror,status,objconn

CommitTransComplete objerror,status,objconn

RollbackTransComplete objerror,status,objconn

Parameter | Description
translevel | The transaction level of the BeginTrans method that fired the event
objerror | An Error object that contains the errors that occurred Note: The EventStatusEnum value must be set to adStatusErrorsOccurred to create the Error object
status | Specifies the status of the execution of an event. Takes an value
objconn | The Connection object that fired the event

EventStatusEnum Values

Constant | Value | Description
adStatusOK | 1 | The operation that fired the event was successful
adStatusErrorsOccurred | 2 | The operation that fired the event failed
adStatusCantDeny | 3 | Cannot cancel the pending operation
adStatusCancel | 4 | Cancels the operation that fired the event
adStatusUnwantedEvent | 5 | Prevents subsequent notifications before the event method has finished executing


ADO Bookmark Property

The Bookmark property specifies a bookmark. The bookmark saves the position of the current record.

To save the bookmark for the current record, assign the value of the Bookmark property to a variable. To return to the "bookmarked" record, set the Bookmark property to the value of that variable.

Note: The Bookmark property is available only in Recordset objects that support bookmarks.

Syntax

objRecordset.Bookmark

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("northwind.mdb"))

set rs = Server.CreateObject("ADODB.recordset")

sql="SELECT Companyname, Contactname FROM Customers"

rs.Open sql, conn

rs.MoveFirst

'Store bookmark of the current record

bkmark=rs.Bookmark

rs.MoveLast

'Go to the bookmarked record

rs.Bookmark=bkmark

rs.Close

conn.Close

%>


ADO CacheSize Property

The CacheSize property sets or returns a long value that specifies the number of records that can be cached locally in memory. The value must be greater than 0.

Note: You can change this property any time, as long as the Recordset exists, but remember that the cached content will not change until the next retrieval from the database.

The default value for this property is 1. This means that only one record is fetched and cached at a time. For large databases, this is not efficient. A larger value will speed up operations, but remember that cached records may not show recent changes made to the database. To avoid this you can call the Resync method regularly, which will update the cache.

Syntax

objRecordset.CacheSize


ADO Cancel Method

The Cancel method cancels an execution of a method call.

The Cancel method cancels different tasks for each object. The table below shows what task is cancelled when this method is called:

Object | Cancelled task
Command | Execute. Note: The Options parameter of the Execute method must be set to adAsyncExecute or adAsyncFetch, before the Cancel method is called, otherwise a run-time error will occur
Connection | Execute or Open. Note: The Options parameter of the Open method must be set to adSyncConnect, or the Options parameter of the Execute method be set to adAsyncExecute or adAsyncFetch, before the Cancel method is called, otherwise a run-time error will occur
Record | CopyRecord, DeleteRecord, MoveRecord, or Open Note: The Options parameter of the Execute method must be set to adAsyncExecute or adAsyncFetch, before the Cancel method is called, otherwise a run-time error will occur
Recordset | Open
Stream | Open

Syntax

object.Cancel


ADO CancelBatch Method

The CancelBatch method cancels a batch update. The Recordset must be in batch update mode when calling this method.

Since you do not know what the current record will be after calling this property, you will have to move to a known record. For example, you could call the MoveFirst or MoveLast method, after a call to this method.

If this method fails, the provider will not stop the execution, but it will send a warning to the Errors Collection.

Syntax

objRecordset.CancelBatch affectrec

Parameter | Description
affectrec | Optional. An AffectEnum value that indicates which records this method will affect

AffectEnum Values

Constant | Value | Description
adAffectCurrent | 1 | Affects only the current record
adAffectGroup | 2 | Affects only records that satisfy the Filter setting (Filter must be set to a FilterGroupEnum value or an array of Bookmarks)
adAffectAll | 3 | Affects all records if there is no Filter. Affects only visible records in the current chapter if Filter is set to a string criteria. Affect all rows of the Recordset if Filter is set to a FilterGroupEnum value or an array of Bookmarks
adAffectAllChapters | 4 | Affects all records in all child Recordset, including those hidden by a currently applied filter


ADO CancelUpdate Method

The CancelUpdate method cancels changes made to a record of a Recordset object, or the Fields collection of a Record object, before calling the Update method.

Recordset object

This method is used to cancel any changes made to the current record or to a newly added record. This method can only be called before the Update method of the Recordset is called.

Record object

This method is used to cancel any changes (insertions or deletions) of Field objects.

Syntax

objRecordset.CancelUpdate

objRecord.Fields.CancelUpdate


ADO CharSet Property

The CharSet property sets or returns a value that specifies into which character-set the contents of the Stream are to be translated (when stored in the Stream object’s buffer). Default is "Unicode".

This property is used for converting data going into the Stream or coming out of the Stream. For example, if the Stream contains ISO-8859-1 data and that data is copied to a BSTR, the Stream object will convert the data to Unicode. The reverse is also true.

Note: This property is only used with text Stream objects (type is adTypeText).

Note: For an open Stream object, the current position must be at the beginning of the Stream (0) to set this property.

Syntax

objStream.Charset


ADO Clone Method

The Clone method allows you to create a duplicate Recordset from an existing Recordset. You can use this method to create multiple, duplicate Recordset, particularly if you want to edit more than one current record in a set of records. This method is much more efficient than creating, opening, and closing a new Recordset equal to the original.

When you clone a Recordset you actually just create a new pointer to the same Recordset, therefore any changes you make to one Recordset will be visible in all of its clones. However, if you execute a Requery on the original Recordset, the clones will no longer be synchronized to the original.

The provider must support bookmarks on the Recordset object to create clones. Bookmarks are interchangeable; a bookmark reference from one Recordset object refers to the same record in any of its clones.

Note: The filter of the original Recordset will not be applied to the clone. To copy an existing filter: objRecordsetNew.Filter=objRecordsetOriginal.Filter

Note: When you close the original Recordset none of the copies will be closed. You will have to close the clones one by one.

Syntax

Set objRecordsetClone=objRecordset.Clone(locktype)

Parameter | Description
objRecordsetClone | The clone Recordset to be created
objRecordset | The Recordset to be cloned
locktype | Optional. A LockTypeEnum value that specifies the lock type

LockTypeEnum Values

Constant | Value | Description
adLockUnspecified | -1 | The clone is created with the same lock type as the original Recordset
adLockReadOnly | 1 | The clone is a read-only Recordset


ADO Close Method

The Close method is used to close a Connection object, a Record object, a Recordset object, or a Stream object to free system resources.

Note: When an object is closed, it will not be removed from the memory. It is possible to change the property settings and open it again later.

Syntax

object.Close

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs=Server.CreateObject("ADODB.recordset")

rs.Open "Customers", conn

rs.Close

conn.Close

%>


ADO Command Object

Command Object

The ADO Command object is used to execute a single query against a database. The query can perform actions like creating, adding, retrieving, deleting or updating records.

If the query is used to retrieve data, the data will be returned as a RecordSet object. This means that the retrieved data can be manipulated by properties, collections, methods, and events of the Recordset object.

The major feature of the Command object is the ability to use stored queries and procedures with parameters.

ProgID

set objCommand=Server.CreateObject("ADODB.command")

Properties

Property | Description
ActiveConnection | Sets or returns a definition for a connection if the connection is closed, or the current Connection object if the connection is open
 | Sets or returns a provider command
CommandTimeout | Sets or returns the number of seconds to wait while attempting to execute a command
CommandType | Sets or returns the type of a Command object
Name | Sets or returns the name of a Command object
Prepared | Sets or returns a Boolean value that, if set to True, indicates that the command should save a prepared version of the query before the first execution
State | Returns a value that describes if the Command object is open, closed, connecting, executing or retrieving data

Methods

Method | Description
Cancel | Cancels an execution of a method
CreateParameter | Creates a new Parameter object
Execute | Executes the query, SQL statement or procedure in the CommandText property

Collections

Collection | Description
Parameters | Contains all the Parameter objects of a Command Object
Properties | Contains all the Property objects of a Command Object


ADO CommandText Property

The CommandText property sets or returns a string that contains a provider command, like a SQL statement, a table name, a relative URL, or a stored procedure call.

Syntax

objcommand.CommandText

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set comm=Server.CreateObject("ADODB.Command")

comm.CommandText="orders"

response.write(comm.CommandText)

conn.close

%>


ADO CommandTimeout Property

The CommandTimeout property sets or returns the number of seconds to wait while attempting to execute a command, before canceling the attempt and generate an error. Default is 30.

Syntax

object.CommandTimeout

Example

For a Command object:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set comm=Server.CreateObject("ADODB.Command")

comm.CommandTimeout=10

response.write(comm.CommandTimeout)

conn.close

%>

For a Connection object:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

conn.CommandTimeout=10

response.write(conn.CommandTimeout)

conn.close

%>


ADO CommandType Property

The CommandType property sets or returns a CommandTypeEnum value that defines the type of the Command object. Default is adCmdUnknown.

If you do not specify the type, ADO will need to contact the provider to determine the type of the command. However, if you do specify the type, ADO will be able to process the command faster.

Syntax

objcommand.CommandType

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set comm=Server.CreateObject("ADODB.Command")

comm.CommandText="orders"

comm.CommandType=adCmdTable

response.write(comm.CommandType)

conn.close

%>

CommandTypeEnum Values

Constant | Value | Description
adCmdUnspecified | -1 | Does not specify the command type argument.
adCmdText | 1 | Evaluates CommandText as a textual definition of a command or stored procedure call.
adCmdTable | 2 | Evaluates CommandText as a table name whose columns are all returned by an internally generated SQL query.
adCmdStoredProc | 4 | Evaluates CommandText as a stored procedure name.
adCmdUnknown | 8 | Default. Indicates that the type of command in the CommandText property is not known.
adCmdFile | 256 | Evaluates CommandText as the file name of a persistently stored Recordset. Used with Recordset.Open or Requery only.
adCmdTableDirect | 512 | Evaluates CommandText as a table name whose columns are all returned. Used with Recordset.Open or Requery only. To use the Seek method, the Recordset must be opened with adCmdTableDirect. This value cannot be combined with the ExecuteOptionEnum value adAsyncExecute.


ADO CompareBookmarks Method

The CompareBookmarks method compares two bookmarks. This method returns a CompareEnum value that indicates the bookmark's relative row positions.

Note: The two bookmarks must be within the same Recordset, or within a Recordset and its clone.

Note: You can use this method only if the provider support bookmarks.

Syntax

result=objRecordset.CompareBookmarks(mark1,mark2)

Parameter | Description
mark1 | The bookmark of the first row
mark2 | The bookmark of the second row

CompareEnum Values

Constant | Value | Description
adCompareLessThan | 0 | The first bookmark is before the second
adCompareEqual | 1 | The bookmarks are equal
adCompareGreaterThan | 2 | The first bookmark is after the second
adCompareNotEqual | 3 | The bookmarks are not equal
adCompareNotComparable | 4 | The bookmarks cannot be compared


ADO Connection Object

Connection Object

The ADO Connection Object is used to create an open connection to a data source. Through this connection, you can access and manipulate a database.

If you want to access a database multiple times, you should establish a connection using the Connection object. You can also make a connection to a database by passing a connection string via a Command or Recordset object. However, this type of connection is only good for one specific, single query.

ProgID

set objConnection=Server.CreateObject("ADODB.connection")

Properties

Property | Description
Attributes | Sets or returns the attributes of a Connection object
CommandTimeout | Sets or returns the number of seconds to wait while attempting to execute a command
ConnectionString | Sets or returns the details used to create a connection to a data source
ConnectionTimeout | Sets or returns the number of seconds to wait for a connection to open
CursorLocation | Sets or returns the location of the cursor service
DefaultDatabase | Sets or returns the default database name
IsolationLevel | Sets or returns the isolation level
 | Sets or returns the provider access permission
Provider | Sets or returns the provider name
State | Returns a value describing if the connection is open or closed
Version | Returns the ADO version number

Methods

Method | Description
BeginTrans | Begins a new transaction
Cancel | Cancels an execution
 | Closes a connection
CommitTrans | Saves any changes and ends the current transaction
 | Executes a query, statement, procedure or provider specific text
Open | Opens a connection
OpenSchema | Returns schema information from the provider about the data source
RollbackTrans | Cancels any changes in the current transaction and ends the transaction

Events

Note: You cannot handle events using VBScript or JScript (only Visual Basic, Visual C++, and Visual J++ languages can handle events).

Event | Description
BeginTransComplete | Triggered after the BeginTrans operation
CommitTransComplete | Triggered after the CommitTrans operation
ConnectComplete | Triggered after a connection starts
Disconnect | Triggered after a connection ends
ExecuteComplete | Triggered after a command has finished executing
 | Triggered if a warning occurs during a ConnectionEvent operation
RollbackTransComplete | Triggered after the RollbackTrans operation
WillConnect | Triggered before a connection starts
WillExecute | Triggered before a command is executed

Collections

Collection | Description
Errors | Contains all the Error objects of the Connection object
Properties | Contains all the Property objects of the Connection object


ADO ConnectionString Property

The ConnectionString property sets or returns the details used to create a connection to a data source.

Note: You can not use both the Provider and File Name parameters.

Syntax

objconn.ConnectionString="para1=value;para2=value;etc;"

The ConnectionString property has these parameters:

Parameter | Description
Provider | The provider to use for the connection
File Name | A provider-specific file that contains connection information
Remote Provider | The provider to use when opening a client-side connection
Remote Server | A path name of the server to use when opening a client-side connection
url | An absolute URL identifying a resource, such as a file or directory

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0"

conn.open server.mappath("database.mdb")

conn.close

%>


ADO ConnectionTimeout Property

The ConnectionTimeout property sets or returns the number of seconds to wait for a connection to open, before canceling the attempt and generate an error. Default is 15 seconds.

Syntax

objconn.ConnectionTimeout

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0"

conn.ConnectionTimeout=30

conn.open server.mappath("database.mdb")

conn.close

%>


ADO CopyTo Method

The CopyTo method is used to copy a specified number of characters or bytes from an open Stream object into another open Stream object.

The type of the two Stream objects should be the same. However, text Stream objects can be copied into binary Stream objects, but not vice-versa, and the CharSet property of the destination Stream object can be different than the source Stream object.

Syntax

objStream.CopyTo dest,numchars

Parameter

Description

dest

Required. Where to copy the Stream (contains a reference to an open Stream object)

numchars

Optional. An integer that specifies the number of characters or bytes to be copied from the current position in the source Stream to the destination Stream. Default is -1 (will copy all data from the current position to EOS)

Note: If the specified number is greater than the available number of bytes/characters until EOS, then only bytes/characters from the current position to EOS are copied


ADO CreateParameter Method

The CreateParameter method creates and returns a Parameter object containing the specified properties like name, type, direction, size, and value.

Note: This method does not automatically add the new Parameter to the collection. To add the Parameter to the Parameters Collection, use the Append property.

Syntax

Set objparameter=objcommand.CreateParameter

(name,type,direction,size,value)

Parameter | Description
name | Optional. The name of the Parameter object.
type | Optional. One of the DataTypeEnum contatants that specifies the data type for the Parameter object. Default is adEmpty. If you choose a variable-length data type, you will also need to specify the Size parameter or the Size property. If you specify adDecimal or adNumeric data type, you must also set the NumericScale and the Precision properties of the Parameter object.
direction | Optional. One of the ParameterDirectionEnum constants that defines the direction of the Parameter object. Default is adParamInput.
size | Optional. Specifies the length of a variable-length data type, if such a type was declared in the Type parameter. Default is zero.
value | Optional. The value of the Parameter object

DataTypeEnum Values

Specifies the data type of a Field, Parameter, or Property object

Constant | Value | Description
adEmpty | 0 | No value
adSmallInt | 2 | A 2-byte signed integer.
adInteger | 3 | A 4-byte signed integer.
adSingle | 4 | A single-precision floating-point value.
adDouble | 5 | A double-precision floating-point value.
adCurrency | 6 | A currency value
adDate | 7 | The number of days since December 30, 1899 + the fraction of a day.
adBSTR | 8 | A null-terminated character string.
adIDispatch | 9 | A pointer to an IDispatch interface on a COM object. Note: Currently not supported by ADO.
adError | 10 | A 32-bit error code
adBoolean | 11 | A boolean value.
adVariant | 12 | An Automation Variant. Note: Currently not supported by ADO.
adIUnknown | 13 | A pointer to an IUnknown interface on a COM object. Note: Currently not supported by ADO.
adDecimal | 14 | An exact numeric value with a fixed precision and scale.
adTinyInt | 16 | A 1-byte signed integer.
adUnsignedTinyInt | 17 | A 1-byte unsigned integer.
adUnsignedSmallInt | 18 | A 2-byte unsigned integer.
adUnsignedInt | 19 | A 4-byte unsigned integer.
adBigInt | 20 | An 8-byte signed integer.
adUnsignedBigInt | 21 | An 8-byte unsigned integer.
adFileTime | 64 | The number of 100-nanosecond intervals since January 1,1601
adGUID | 72 | A globally unique identifier (GUID)
adBinary | 128 | A binary value.
adChar | 129 | A string value.
adWChar | 130 | A null-terminated Unicode character string.
adNumeric | 131 | An exact numeric value with a fixed precision and scale.
adUserDefined | 132 | A user-defined variable.
adDBDate | 133 | A date value (yyyymmdd).
adDBTime | 134 | A time value (hhmmss).
adDBTimeStamp | 135 | A date/time stamp (yyyymmddhhmmss plus a fraction in billionths).
adChapter | 136 | A 4-byte chapter value that identifies rows in a child rowset
adPropVariant | 138 | An Automation PROPVARIANT.
adVarNumeric | 139 | A numeric value (Parameter object only).
adVarChar | 200 | A string value (Parameter object only).
adLongVarChar | 201 | A long string value.
adVarWChar | 202 | A null-terminated Unicode character string.
adLongVarWChar | 203 | A long null-terminated Unicode string value.
adVarBinary | 204 | A binary value (Parameter object only).
adLongVarBinary | 205 | A long binary value.
AdArray | 0x2000 | A flag value combined with another data type constant. Indicates an array of that other data type.

ParameterDirectionEnum Values

Specifies whether the Parameter represents an input parameter, an output parameter, both an input and an output parameter, or the return value from a stored procedure.

Constant | Value | Description
adParamUnknown | 0 | Direction is unknown
adParamInput | 1 | Input parameter
adParamOutput | 2 | Output parameter
adParamInputOutput | 3 | Both input and output parameter
adParamReturnValue | 4 | Return value


ADO CursorLocation Property

The CursorLocation property sets or returns a long value that indicates the location of the cursor service. It can be set to one of the CursorLocationEnum values. Default value is AdUseServer.

A cursor is used to:

· control record navigation
· control the visibility of changes in the database
· control the updatability of data

Note: A Recordset object inherits this setting from the associated Connection object.

Note: This property is read-only on an open Recordset object, and read/write on a Connection object or on a closed Recordset object.

Syntax

objConnection.CursorLocation

objRecordset.CursorLocation

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("northwind.mdb"))

set rs=Server.CreateObject("ADODB.recordset")

sql="SELECT * FROM Customers"

rs.CursorLocation=adUseClient

rs.CursorType=adOpenStatic

rs.LockType=adLockBatchOptimistic

rs.Open sql,conn

rs.Close

conn.Close

%>

CursorLocationEnum Values

Constant | Value | Description
adUseNone | 1 | OBSOLETE (appears only for backward compatibility). Does not use cursor services
adUseServer | 2 | Default. Uses a server-side cursor
adUseClient | 3 | Uses a client-side cursor supplied by a local cursor library. For backward compatibility, the synonym adUseClientBatch is also supported


ADO CursorType Property

The CursorType property sets or returns the cursor type to use when opening a Recordset object. This property can take a CursorTypeEnum value. Default is adOpenForwardOnly.

Note: If the CursorLocation property is set to adUseClient, the only valid setting for the CursorType property is adOpenStatic.

Note: No error will occur if an unsupported value is set, the provider will just change to a supported CursorType instead.

Syntax

objRecordset.CursorType

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("northwind.mdb"))

set rs = Server.CreateObject("ADODB.recordset")

sql="SELECT * FROM Customers"

rs.CursorLocation = adUseClient

rs.CursorType = adOpenStatic

rs.LockType = adLockBatchOptimistic

rs.Open sql, conn

%>

CursorTypeEnum Values

Constant | Value | Description
adOpenUnspecified | -1 | Does not specify the type of cursor.
adOpenForwardOnly | 0 | Default. Uses a forward-only cursor. Identical to a static cursor, except that you can only scroll forward through records. This improves performance when you need to make only one pass through a Recordset.
adOpenKeyset | 1 | Uses a keyset cursor. Like a dynamic cursor, except that you can't see records that other users add, although records that other users delete are inaccessible from your Recordset. Data changes by other users are still visible.
adOpenDynamic | 2 | Uses a dynamic cursor. Additions, changes, and deletions by other users are visible, and all types of movement through the Recordset are allowed, except for bookmarks, if the provider doesn't support them.
adOpenStatic | 3 | Uses a static cursor. A static copy of a set of records that you can use to find data or generate reports. Additions, changes, or deletions by other users are not visible.


ADO Data Types

The table below shows the ADO Data Type mapping between Access, SQL Server, and Oracle:

DataType Enum | Value | Access | SQLServer | Oracle
adBigInt | 20 |  | BigInt (SQL Server 2000 +) |
adBinary | 128 |  | Binary TimeStamp | Raw *
adBoolean | 11 | YesNo | Bit |
adChar | 129 |  | Char | Char
adCurrency | 6 | Currency | Money SmallMoney |
adDate | 7 | Date | DateTime |
adDBTimeStamp | 135 | DateTime (Access 97 (ODBC)) | DateTime SmallDateTime | Date
adDecimal | 14 |  |  | Decimal *
adDouble | 5 | Double | Float | Float
adGUID | 72 | ReplicationID (Access 97 (OLEDB)), (Access 2000 (OLEDB)) | UniqueIdentifier (SQL Server 7.0 +) |
adIDispatch | 9 |  |  |
adInteger | 3 | AutoNumber Integer Long | Identity (SQL Server 6.5) Int | Int *
adLongVarBinary | 205 | OLEObject | Image | Long Raw * Blob (Oracle 8.1.x)
adLongVarChar | 201 | Memo (Access 97) Hyperlink (Access 97) | Text | Long * Clob (Oracle 8.1.x)
adLongVarWChar | 203 | Memo (Access 2000 (OLEDB)) Hyperlink (Access 2000 (OLEDB)) | NText (SQL Server 7.0 +) | NClob (Oracle 8.1.x)
adNumeric | 131 | Decimal (Access 2000 (OLEDB)) | Decimal Numeric | Decimal Integer Number SmallInt
adSingle | 4 | Single | Real |
adSmallInt | 2 | Integer | SmallInt |
adUnsignedTinyInt | 17 | Byte | TinyInt |
adVarBinary | 204 | ReplicationID (Access 97) | VarBinary |
adVarChar | 200 | Text (Access 97) | VarChar | VarChar
adVariant | 12 |  | Sql_Variant (SQL Server 2000 +) | VarChar2
adVarWChar | 202 | Text (Access 2000 (OLEDB)) | NVarChar (SQL Server 7.0 +) | NVarChar2
adWChar | 130 |  | NChar (SQL Server 7.0 +) |

* In Oracle 8.0.x - decimal and int are equal to number and number(10).


ADO Database Connection

Before a database can be accessed from a web page, a database connection has to be established.

Create a DSN-less Database Connection

The easiest way to connect to a database is to use a DSN-less connection. A DSN-less connection can be used against any Microsoft Access database on your web site.

If you have a database called "northwind.mdb" located in a web directory like "c:/webdata/", you can connect to the database with the following ASP code:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

%>

Note, from the example above, that you have to specify the Microsoft Access database driver (Provider) and the physical path to the database on your computer.

Create an ODBC Database Connection

If you have an ODBC database called "northwind" you can connect to the database with the following ASP code:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Open "northwind"

%>

With an ODBC connection, you can connect to any database, on any computer in your network, as long as an ODBC connection is available.

An ODBC Connection to an MS Access Database

Here is how to create a connection to a MS Access Database:

1. Open the ODBC icon in your Control Panel.
2. Choose the System DSN tab.
3. Click on Add in the System DSN tab.
4. Select the Microsoft Access Driver. Click Finish.
5. In the next screen, click Select to locate the database.
6. Give the database a Data Source Name (DSN).
7. Click OK.

Note that this configuration has to be done on the computer where your web site is located. If you are running Personal Web Server (PWS) or Internet Information Server (IIS) on your own computer, the instructions above will work, but if your web site is located on a remote server, you have to have physical access to that server, or ask your web host to do this for you.

The ADO Connection Object

The ADO Connection object is used to create an open connection to a data source. Through this connection, you can access and manipulate a database.

View all methods and properties of the Connection object.


ADO DataMember Property

The DataMember property sets or returns a string value that contains the name of the data member that will be retrieved from the object referenced by the DataSource property. The name is not case sensitive.

This property is used to create data-bound controls with the Data Environment in Visual Basic 6.

Note: The DataMember and DataSource properties must be used in conjunction.

Syntax

objRecordset.DataMember


ADO DataSource Property

The DataSource property specifies an object containing data to be represented as a Recordset object

The DataSource property is used to create data-bound controls with the Data Environment in Visual Basic 6.

Note: The DataMember and DataSource properties must be used in conjunction.

Syntax

objRecordset.DataSource


ADO DefaultDatabase Property

The DefaultDatabase property sets or returns a string value that is the default database for a specific server-side connection.

Syntax

objconn.DefaultDatabase

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.DefaultDatabase="northwind"

set rs=Server.CreateObject("ADODB.Recordset")

rs.Open "customers",conn

....

rs.Close

conn.close

%>


ADO DefinedSize and ActualSize Properties

The DefinedSize property returns a long value that indicates the defined size of a field (in bytes).

The ActualSize property is a read-only property. It returns a long value that indicates the actual length of a field's value. If ADO cannot determine the length of the Field object's value, it returns adUnknown.

The DefinedSize property defines how long a field's value can be, while ActualSize tells how long it really is.

Syntax

objrs.Fields(number).DefinedSize

objrs.Fields(number).ActualSize

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs=Server.CreateObject("ADODB.Recordset")

rs.open "Select * from orders", conn

response.write(rs.Fields(0).DefinedSize)

response.write(rs.Fields(0).ActualSize)

rs.Close

conn.close

%>


ADO Delete Method

The Delete method removes an object from the Parameters collection.

Note: This method works only in the Parameters collection of a Command object.

Syntax

objparameter.Delete index

Parameter | Description
index | The name or index (ordinal position in the collection) of the object you want to delete


ADO Delete Method

The Delete method is used to delete the current record or a group of records. After deleting a record, the deleted record remains current until you move to a different record.

Note: If you are in batch update mode the deletion happens when you call the UpdateBatch method.

Note: To use this method assure that the Recordset object allows record deletion.

Note: If this method fails, the provider will not stop the execution, but it will send a warning to the Errors Collection.

Syntax

objRecordset.Delete affectrecords

Parameter | Description
affectrecords | An AffectEnum value that specifies which records this method will delete. Default is adAffectCurrent

AffectEnum Values

Constant | Value | Description
adAffectCurrent | 1 | Deletes only the current record
adAffectGroup | 2 | Deletes only records that satisfy the Filter setting (Filter must be set to a FilterGroupEnum value or an array of Bookmarks)


ADO Delete Records

We may use the SQL DELETE command to delete a record in a table in a database.

Delete a Record in a Table

We want to delete a record in the Customers table in the Northwind database. We first create a table that lists all records in the Customers table:

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs=Server.CreateObject("ADODB.Recordset")

rs.open "SELECT * FROM customers",conn

%>

<h2>List Database</h2>

<table border="1" width="100%">

<tr>

<%

for each x in rs.Fields

response.write("<th>" & ucase(x.name) & "</th>")

next

%>

</tr>

<% do until rs.EOF %>

<tr>

<form method="post" action="demo_delete.asp">

<%

for each x in rs.Fields

if x.name="customerID" then%>

  <td>

  <input type="submit" name="customerID" value="<%=x.value%>">

  </td>

<%else%>

  <td><%Response.Write(x.value)%></td>

<%end if

next

%>

</form>

<%rs.MoveNext%>

</tr>

<%

loop

conn.close

%>

</table>

</body>

</html>

If the user clicks on the button in the "customerID" column he or she will be taken to a new file called "demo_delete.asp". The "demo_delete.asp" file contains the source code on how to create input fields based on the fields from one record in the database table. It also contains a "Delete record" button that will delete the current record:

<html>

<body>

<h2>Delete Record</h2>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

cid=Request.Form("customerID")

if Request.form("companyname")="" then

set rs=Server.CreateObject("ADODB.Recordset")

rs.open "SELECT * FROM customers WHERE customerID='" & cid & "'",conn

%>

<form method="post" action="demo_delete.asp">

<table>

<%for each x in rs.Fields%>

<tr>

<td><%=x.name%></td>

<td><input name="<%=x.name%>" value="<%=x.value%>"></td>

<%next%>

</tr>

</table>

<br /><br />

<input type="submit" value="Delete record">

</form>

<%

else

sql="DELETE FROM customers"

sql=sql & " WHERE customerID='" & cid & "'"

on error resume next

conn.Execute sql

if err<>0 then

  response.write("No update permissions!")

else

  response.write("Record " & cid & " was deleted!")

end if

end if

conn.close

%>

</body>

</html>


ADO DeleteRecord Method

The DeleteRecord method deletes a file or directory.

Tip: Close the Record object after calling this method to prevent unpredictable behaviors of the Record.

Syntax

objrecord.DeleteRecord(src,async)

Parameter | Description
src | Optional. The URL of the file or directory that will be deleted
async | Optional. A Boolean value that, when True, sets the delete operation to be asynchronous


ADO Demonstration

To demonstrate a small real life ADO application, we have put together a few ADO demos.

Read this First

If you try to update the database, you will get the error message: "You do not have permission to update this database". You get this error because you don't have write access to our server.

BUT, if you copy the code and run it on your own system, you might get the same error. That is because the system might see you as an anonymous internet user when you access the file via your browser. In that case, you have to change the access-rights to get access to the file.

How to change the access-rights of your Access database?

Open Windows Explorer, find the .mdb file. Right-click on the .mdb file and select Properties. Go to the Security tab and set the access-rights here.

List, Edit, Update, and Delete Database Records

List, edit, update, and delete database records

Add a New Record to a Database


ADO Description Property

The Description property returns a string that contains a description of the error.

This is the default property for the Error object. Both the provider and ADO can be the source of the error.

The provider should pass error information to ADO. When an error occurs, ADO should create an Error object, which contains error information. ADO should also add the Error object to the Errors Collection.

Syntax

strErrorText=objErr.Description

Example

<%

for each objErr in objConn.Errors

response.write("<p>")

response.write("Description: ")

response.write(objErr.Description & "<br />")

response.write("Help context: ")

response.write(objErr.HelpContext & "<br />")

response.write("Help file: ")

response.write(objErr.HelpFile & "<br />")

response.write("Native error: ")

response.write(objErr.NativeError & "<br />")

response.write("Error number: ")

response.write(objErr.Number & "<br />")

response.write("Error source: ")

response.write(objErr.Source & "<br />")

response.write("SQL state: ")

response.write(objErr.SQLState & "<br />")

response.write("</p>")

next

%>


ADO Direction Property

The Direction property sets or returns a ParameterDirectionEnum value that specifies how a parameter is passed to or from a procedure. Default value is adParamInput.

Is it an input parameter, an output parameter, an input and an output parameter, or a return value from a procedure?

Syntax

objparameter.Direction

Example

<%

set comm=Server.CreateObject("ADODB.Command")

set para=Server.CreateObject("ADODB.Parameter")

para.Type=adVarChar

para.Size=25

para.Direction=adParamInput

para.Value=varfname

comm.Parameters.Append para

%>

ParameterDirectionEnum Values

Constant | Value | Description
adParamUnknown | 0 | Direction unknown
adParamInput | 1 | Default. Input parameter
adParamInputOutput | 3 | Input and output parameter
adParamOutput | 2 | Output parameter
adParamReturnValue | 4 | Return value


ADO Display

The most common way to display data from a recordset, is to display the data in an HTML table.

Examples

How to first create a database connection, then a recordset, and then display the data in HTML.

Display records in an HTML table

How to display the data from the database table in an HTML table.

table

How to add headers to the HTML table to make it more readable.

Add colors to the HTML table

How to add colors to the HTML table to make it look nice.

Display the Field Names and Field Values

We have a database named "Northwind" and we want to display the data from the "Customers" table (remember to save the file with an .asp extension):

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.recordset")

rs.Open "SELECT * FROM Customers", conn

do until rs.EOF

for each x in rs.Fields

  Response.Write(x.name)

  Response.Write(" = ")

  Response.Write(x.value & "<br />")

next

Response.Write("<br />")

rs.MoveNext

loop

rs.close

conn.close

%>

</body>

</html>

Here is the result:

CustomerID = ALFKI

CompanyName = Alfreds Futterkiste

ContactName = Maria Anders

ContactTitle = Sales Representative

Address = Obere Str. 57

City = Berlin

PostalCode = 12209

Country = Germany

CustomerID = BERGS

CompanyName = Berglunds snabbköp

ContactName = Christina Berglund

ContactTitle = Order Administrator

Address = Berguvsvägen 8

City = Luleå

PostalCode = S-958 22

Country = Sweden

CustomerID = CENTC

CompanyName = Centro comercial Moctezuma

ContactName = Francisco Chang

ContactTitle = Marketing Manager

Address = Sierras de Granada 9993

City = México D.F.

PostalCode = 05022

Country = Mexico

....

....

....

Display the Field Names and Field Values in an HTML Table

We can also display the data from the "Customers" table inside an HTML table with the following lines (remember to save the file with an .asp extension):

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.recordset")

rs.Open "SELECT Companyname, Contactname FROM Customers", conn

%>

<table border="1" width="100%">

<%do until rs.EOF%>

 <tr>

 <%for each x in rs.Fields%>

    <td><%Response.Write(x.value)%></td>

 <%next

 rs.MoveNext%>

 </tr>

<%loop

rs.close

conn.close

%>

</table>

</body>

</html>

Here is the result:

Alfreds Futterkiste | Maria Anders
Berglunds snabbköp | Christina Berglund
Centro comercial Moctezuma | Francisco Chang
Ernst Handel | Roland Mendel
FISSA Fabrica Inter. Salchichas S.A. | Diego Roel
Galería del gastrónomo | Eduardo Saavedra
Island Trading | Helen Bennett
Königlich Essen | Philip Cramer
Laughing Bacchus Wine Cellars | Yoshi Tannamuri
Magazzini Alimentari Riuniti | Giovanni Rovelli
North/South | Simon Crowther
Paris spécialités | Marie Bertrand
Rattlesnake Canyon Grocery | Paula Wilson
Simons bistro | Jytte Petersen
The Big Cheese | Liz Nixon
Vaffeljernet | Palle Ibsen
Wolski Zajazd | Zbyszek Piestrzeniewicz

Add Headers to the HTML Table

We want to add headers to the HTML table to make it more readable (remember to save the file with an .asp extension):

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.recordset")

sql="SELECT Companyname, Contactname FROM Customers"

rs.Open sql, conn

%>

<table border="1" width="100%">

<tr>

<%for each x in rs.Fields

  response.write("<th>" & x.name & "</th>")

next%>

</tr>

<%do until rs.EOF%>

  <tr>

  <%for each x in rs.Fields%>

    <td><%Response.Write(x.value)%></td>

  <%next

  rs.MoveNext%>

  </tr>

<%loop

rs.close

conn.close

%>

</table>

</body>

</html>

Here is the result:

Companyname | Contactname
Alfreds Futterkiste | Maria Anders
Berglunds snabbköp | Christina Berglund
Centro comercial Moctezuma | Francisco Chang
Ernst Handel | Roland Mendel
FISSA Fabrica Inter. Salchichas S.A. | Diego Roel
Galería del gastrónomo | Eduardo Saavedra
Island Trading | Helen Bennett
Königlich Essen | Philip Cramer
Laughing Bacchus Wine Cellars | Yoshi Tannamuri
Magazzini Alimentari Riuniti | Giovanni Rovelli
North/South | Simon Crowther
Paris spécialités | Marie Bertrand
Rattlesnake Canyon Grocery | Paula Wilson
Simons bistro | Jytte Petersen
The Big Cheese | Liz Nixon
Vaffeljernet | Palle Ibsen
Wolski Zajazd | Zbyszek Piestrzeniewicz


ADO EditMode Property

The EditMode property returns an EditModeEnum value that specifies the editing status of the current record.

Syntax

objRecordset.EditMode

EditModeEnum Values

Constant | Value | Description
adEditNone | 0 | No editing operation is in progress
adEditInProgress | 1 | The current record has been edited but not saved
adEditAdd | 2 | The current record in the copy buffer is a new record and has not been saved in the database
adEditDelete | 4 | The current record has been deleted


ADO EndOfRecordset Event

An event is a subroutine that can be called automatically after a specific operation has occurred.

The EndOfRecordset event is triggered when you try to move to a record after the last record in a Recordset. This event can occur if the record pointer is at the end of the Recordset and the MoveNext method is called.

Tip: You can use this event to retrieve more records from a database and append them to the end of the Recordset, and then repeat the MoveNext call.

Note: Before this method returns, set the status parameter to adStatusUnwantedEvent to prevent subsequent notifications.

Syntax

EndOfRecordset(moredata,status,objrs)

Parameter | Description
moredata | A boolean value that if true it allows to append more data to the end of the Recordset
status | An value that indicates the status of the execution of the event
objrs | The name of the Recordset Object that triggered this event

EventStatusEnum Values

Constant | Value | Description
adStatusOK | 1 | The operation that caused the event was successful
adStatusErrorsOccurred | 2 | The operation that caused the event failed
adStatusCantDeny | 3 | The operation that caused the event cannot be cancelled
adStatusCancel | 4 | The operation that caused the event is cancelled
adStatusUnwantedEvent | 5 | Prevents subsequent notifications before the event method has finished executing


ADO EOS Property

The EOS property returns a boolean value that indicates whether the current position is at the end of the stream. True indicates that the current position is at the end of the stream.

Tip: To set the current position to the end of the stream, use the SetEOS method.

Tip: To determine the current position of the stream, use the Position property.

Syntax

objStream.EOS


ADO Error Object

Error Object

The ADO Error object contains details about data access errors that have been generated during a single operation.

ADO generates one Error object for each error. Each Error object contains details of the specific error, and are stored in the Errors collection. To access the errors, you must refer to a specific connection.

To loop through the Errors collection:

<%

for each objErr in objConn.Errors

response.write("<p>")

response.write("Description: ")

response.write(objErr.Description & "<br />")

response.write("Help context: ")

response.write(objErr.HelpContext & "<br />")

response.write("Help file: ")

response.write(objErr.HelpFile & "<br />")

response.write("Native error: ")

response.write(objErr.NativeError & "<br />")

response.write("Error number: ")

response.write(objErr.Number & "<br />")

response.write("Error source: ")

response.write(objErr.Source & "<br />")

response.write("SQL state: ")

response.write(objErr.SQLState & "<br />")

response.write("</p>")

next

%>

Syntax

objErr.property

Properties

Property | Description
Description | Returns an error description
HelpContext | Returns the context ID of a topic in the Microsoft Windows help system
HelpFile | Returns the full path of the help file in the Microsoft Windows help system
 | Returns an error code from the provider or the data source
Number | Returns a unique number that identifies the error
Source | Returns the name of the object or application that generated the error
SQLState | Returns a 5-character SQL error code


ADO Examples

Display

Display records

Display records in an HTML table

Add headers to the HTML table

Add colors to the HTML table

Queries

"Companyname" starts with an A

Display records where "Companyname" is > E

customers

Let the user choose filter

Sort

Sort the records on a specified fieldname ascending

Sort the records on a specified fieldname descending

Let the user choose what

Recordset Object

GetRows


ADO Execute Method

The Execute method executes the query, SQL statement or procedure specified in the CommandText property of the Command object.

The results are stored in a new Recordset object if it is a row-returning query. A closed Recordset object will be returned if it is not a row-returning query.

Syntax for row-returning

Set rs=objcommand.Execute(ra,parameters,options)

Syntax for non-row-returning

objcommand.Execute ra,parameters,options

Parameter | Description
ra | Optional. Returns the number of records affected by a query. For a row-returning query, use the RecordCount property of the Recordset object to count of how many records are in the object.
parameters | Optional. Parameter values passed with an SQL statement. Used to change, update, or insert new parameter values into the Parameters Collection.
options | Optional. Sets how the provider should evaluate the CommandText property. Can be one or more or ExecuteOptionEnum values. Default is adCmdUnspecified.

Example

<%

Set objcommand.Text="SELECT * FROM Customers"

objCommand.Execute

%>

or

<%

Set objcommand.Text="Customers"

objCommand.Execute(,,adCmdTableDirect)

%>

CommandTypeEnum Values

Constant | Value | Description
adCmdUnspecified | -1 | Does not specify the command type argument.
adCmdText | 1 | Evaluates CommandText as a textual definition of a command or stored procedure call.
adCmdTable | 2 | Evaluates CommandText as a table name whose columns are all returned by an internally generated SQL query.
adCmdStoredProc | 4 | Evaluates CommandText as a stored procedure name.
adCmdUnknown | 8 | Indicates that the type of command in the CommandText property is not known.
adCmdFile | 256 | Evaluates CommandText as the file name of a persistently stored Recordset. Used with Recordset.Open or Requery only.
adCmdTableDirect | 512 | Evaluates CommandText as a table name whose columns are all returned. Used with Recordset.Open or Requery only. To use the Seek method, the Recordset must be opened with adCmdTableDirect. This value cannot be combined with the ExecuteOptionEnum value adAsyncExecute.

ExecuteOptionEnum Values

Constant | Value | Description
adOptionUnspecified | -1 | Indicates that the command is unspecified.
adAsyncExecute |  | Indicates that the command should execute asynchronously. This value cannot be combined with the CommandTypeEnum value adCmdTableDirect.
adAsyncFetch |  | Indicates that the remaining rows after the initial quantity specified in the CacheSize property should be retrieved asynchronously.
adAsyncFetchNonBlocking |  | Indicates that the main thread never blocks while retrieving. If the requested row has not been retrieved, the current row automatically moves to the end of the file. If you open a Recordset from a Stream containing a persistently stored Recordset, adAsyncFetchNonBlocking will not have an effect; the operation will be synchronous and blocking. adAsynchFetchNonBlocking has no effect when the adCmdTableDirect option is used to open the Recordset.
adExecuteNoRecords |  | Indicates that the command text is a command or stored procedure that does not return rows (for example, a command that only inserts data). If any rows are retrieved, they are discarded and not returned. adExecuteNoRecords can only be passed as an optional parameter to the Command or Connection Execute method.
adExecuteStream |  | Indicates that the results of a command execution should be returned as a stream. adExecuteStream can only be passed as an optional parameter to the Command Execute method.
adExecuteRecord |  | Indicates that the CommandText is a command or stored procedure that returns a single row which should be returned as a Record object.


ADO Execute Method

The Execute method executes a specified query, SQL statement, stored procedure, or provider-specific text.

The results are stored in a new Recordset object if it is a row-returning query. A closed Recordset object will be returned if it is not a row-returning query.

Note: The returned Recordset is always a read-only, forward-only Recordset!

Tip: To create a Recordset with more functionality, first create a Recordset object. Set the desired properties, and then use the Recordset object's Open method to execute the query.

Syntax for row-returning

Set objrs=objconn.Execute(commandtext,ra,options)

Syntax for non-row-returning

objconn.Execute commandtext,ra,options

Parameter | Description
commandtext | Required. The SQL statement, stored procedure, or provider-specific text to execute
ra | Optional. The number of records affected by the query
options | Optional. Sets how the provider should evaluate the commandtext parameter. Can be one or more or values. Default is adCmdUnspecified

Example

<%

sql="SELECT companyname FROM Customers"

Set rs=conn.Execute(sql)

%>

CommandTypeEnum Values

Constant | Value | Description
adCmdUnspecified | -1 | Does not specify the command type argument.
adCmdText | 1 | Evaluates CommandText as a textual definition of a command or stored procedure call.
adCmdTable | 2 | Evaluates CommandText as a table name whose columns are all returned by an internally generated SQL query.
adCmdStoredProc | 4 | Evaluates CommandText as a stored procedure name.
adCmdUnknown | 8 | Indicates that the type of command in the CommandText property is not known.
adCmdFile | 256 | Evaluates CommandText as the file name of a persistently stored Recordset. Used with Recordset.Open or Requery only.
adCmdTableDirect | 512 | Evaluates CommandText as a table name whose columns are all returned. Used with Recordset.Open or Requery only. To use the Seek method, the Recordset must be opened with adCmdTableDirect. This value cannot be combined with the ExecuteOptionEnum value adAsyncExecute.

ExecuteOptionEnum Values

Constant | Value | Description
adOptionUnspecified | -1 | Indicates that the command is unspecified.
adAsyncExecute |  | Indicates that the command should execute asynchronously. This value cannot be combined with the CommandTypeEnum value adCmdTableDirect.
adAsyncFetch |  | Indicates that the remaining rows after the initial quantity specified in the CacheSize property should be retrieved asynchronously.
adAsyncFetchNonBlocking |  | Indicates that the main thread never blocks while retrieving. If the requested row has not been retrieved, the current row automatically moves to the end of the file. If you open a Recordset from a Stream containing a persistently stored Recordset, adAsyncFetchNonBlocking will not have an effect; the operation will be synchronous and blocking. adAsynchFetchNonBlocking has no effect when the adCmdTableDirect option is used to open the Recordset.
adExecuteNoRecords |  | Indicates that the command text is a command or stored procedure that does not return rows (for example, a command that only inserts data). If any rows are retrieved, they are discarded and not returned. adExecuteNoRecords can only be passed as an optional parameter to the Command or Connection Execute method.
adExecuteStream |  | Indicates that the results of a command execution should be returned as a stream. adExecuteStream can only be passed as an optional parameter to the Command Execute method.
adExecuteRecord |  | Indicates that the CommandText is a command or stored procedure that returns a single row which should be returned as a Record object.


ADO FetchComplete Event

The FetchComplete event is triggered after all the records in an asynchronous operation have been fetched into the Recordset.

Syntax

FetchComplete objErr,status,objRs

Parameter | Description
objErr | The name of an Error object that describes the error if status is set to adStatusErrorsOccurred, otherwise it is not set
status | An EventStatusEnum value that indicates the status of the execution of the event
objRs | The name of the Recordset object that triggered this event

EventStatusEnum Values

Constant | Value | Description
adStatusOK | 1 | The operation that caused the event was successful
adStatusErrorsOccurred | 2 | The operation that caused the event failed
adStatusCantDeny | 3 | The operation that caused the event cannot be cancelled
adStatusCancel | 4 | The operation that caused the event is cancelled
adStatusUnwantedEvent | 5 | Prevents subsequent notifications before the event method has finished executing


ADO FetchProgress Event

The FetchProgress event is triggered periodically in an asynchronous operation, to state how many more records that have been fetched into the Recordset.

Syntax

FetchProgress progress,maxprogress,status,objRs

Parameter | Description
progress | The number of records that have been fetched by the operation
maxprogress | The maximum number of records that are expected to be fetched
status | An EventStatusEnum value that indicates the status of the execution of the event
objRs | The name of the Recordset object that triggered this event

EventStatusEnum Values

Constant | Value | Description
adStatusOK | 1 | The operation that caused the event was successful
adStatusErrorsOccurred | 2 | The operation that caused the event failed
adStatusCantDeny | 3 | The operation that caused the event cannot be cancelled
adStatusCancel | 4 | The operation that caused the event is cancelled
adStatusUnwantedEvent | 5 | Prevents subsequent notifications before the event method has finished executing


ADO Field Object

Field Object

The ADO Field object contains information about a column in a Recordset object. There is one Field object for each column in the Recordset.

ProgID

set objField=Server.CreateObject("ADODB.field")

Properties

Property | Description
ActualSize | Returns the actual length of a field's value
 | Sets or returns the attributes of a Field object
DefinedSize | Returns the defined size of a field
 | Sets or returns the name of a Field object
NumericScale | Sets or returns the number of decimal places allowed for numeric values in a Field object
OriginalValue | Returns the original value of a field
Precision | Sets or returns the maximum number of digits allowed when representing numeric values in a Field object
Status | Returns the status of a Field object
Type | Sets or returns the type of a Field object
UnderlyingValue | Returns the current value of a field
Value | Sets or returns the value of a Field object

Methods

Method | Description
AppendChunk | Appends long binary or character data to a Field object
GetChunk | Returns all or a part of the contents of a large text or binary data Field object

Collections

Collection | Description
Properties | Contains all the Property objects for a Field object


ADO Filter Property

The Filter property sets or returns a variant that contains a filter for the data in a Recordset object. The filter allows you to select records that fit a specific criteria.

The Filter property can contain one of the following:

· A criteria string
· An array of bookmarks
· A FilterGroupEnum value

Examples of a criteria string:

· rs.Filter="Lastname='Smith'"
· rs.Filter="Lastname='Smith' AND Birthdate >= #4/10/70#"
· rs.Filter="Lastname ='Jonson' OR Lastname='Johnson'"
· rs.Filter= "Lastname LIKE Jon*"
· rs.Filter="[Company Name]='Alfred Futterkiste' OR Orders>$300.00"

Example of an array of bookmarks:

dim fname(10)

fname(2)=rs.Bookmark

rs.Filter=fname(2)

When the Filter property is set, the cursor moves to the first record in the filtered Recordset. And, when the Filter property is cleared, the cursor moves to the first record in the unfiltered Recordset.

Syntax

objRecordset.Filter

FilterGroupEnum Values

Constant | Value | Description
adFilterNone | 0 | Removes the current filter
adFilterPendingRecords | 1 | Filter that displays only edited records that have not yet been sent to the server
adFilterAffectedRecords | 2 | Filter that displays only records affected by the last Delete, Resync, UpdateBatch, or CancelBatch call
adFilterFetchedRecords | 3 | Filter that displays the records in the current cache
adFilterConflictingRecords | 5 | Filter that displays those records that failed the last batch update


ADO Find Method

The Find method searches for a record in a Recordset that satisfies a specified criteria. If the search is successful, the record pointer will point to the first found record.

Note: A current row position (like MoveFirst) must be set before calling this method, otherwise an error will occur.

Syntax

objRecordset.Find(criteria,skiprows,direction,start)

Parameter | Description
criteria | Required. The column name, comparison operator, and value to use in the search. Examples: "Country='Norway'" "Date>#7/22/97#" "Country LIKE N*" Note: This method does not support multi-column searches (AND or OR)
skiprows | Optional. Specifies how many records beyond the current record to skip before beginning the search. Default is 0
direction | Optional. A SearchDirectionEnum value that specifies the search direction
start | Optional. The starting position for the search

SearchDirectionEnum Values

Constant | Value | Description
adSearchBackward | -1 | Searches backward from the starting position. Stops at the beginning of the Recordset. If no match, the record pointer is placed at the beginning of the Recordset
adSearchForward | 1 | Searches forward from the starting position. Stops at the end of the Recordset. If no match, the record pointer is placed at the end of the Recordset


ADO Flush Method

The Flush method is used when you need to send the contents of the Stream buffer to the associated underlying object. For example, a node or file represented by the URL that is the source of the Stream object. This will ensure that all changes made to the contents have been written.

Note: ADO flushes the buffer as much as possible in the background, therefore; it is not usually necessary to call this method.

Syntax

objStream.Flush


ADO GetChildren Method

The GetChildren method returns a Recordset object where each row represents a child of the current Record object.

Syntax

Set objrecordset=objrecord.GetChildren


ADO GetChunk Method

The GetChunk method returns a variant that contains all or a part of the contents of a large text or binary data Field object.

This method can divide long values into small portions, so if the system memory is limited and can't deal with long values, this method can be used.

When the GetChunk method is called, it starts to retrieve data from where the previous GetChunk call ended, as long as you stay on the same field in the current record.

You can use the GetChunk method for a field if the Attributes property of a Field object is set to adFldLong.

Note: There has to be a current record when you use the GetChunk method on a Field object.

Note: This method does not work on Field objects of a Record object.

Syntax

variable_name=field.GetChunk(size)

Parameter | Description
size | A long value that is the number of bytes or characters to be returned. If size>remaining data, this method returns only the remaining data without empty spaces. If the field is empty, it returns a null value.


ADO GetRows Method

The GetRows method copies multiple records from a Recordset object into a two-dimensional array.

Syntax

vararray=objRecordset.GetRows(rows,start,fields)

Parameter | Description
rows | Optional. A GetRowsOptionEnum value that specifies the number of records to retrieve. Default is adGetRowsRest. Note: If you omit this argument it will retrieve all records in the Recordset
start | Optional. What record to start on, a record number or a BookmarkEnum value
fields | Optional. If you want to specify only the fields that the GetRows call will return, it is possible to pass a single field name/number or an array of field names/numbers in this argument

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("northwind.mdb"))

set rs = Server.CreateObject("ADODB.recordset")

rs.Open "Select * from Customers", conn

'The first number indicates how many records to copy

'The second number indicates what recordnumber to start on

p=rs.GetRows(2,0)

rs.close

conn.close

'This example returns the value of the first

'column in the first two records

response.write(p(0,0))

response.write("<br>")

response.write(p(0,1))

'This example returns the value of the first

'three columns in the first record

response.write(p(0,0))

response.write("<br>")

response.write(p(1,0))

response.write("<br>")

response.write(p(2,0))

%>

GetRowsOptionEnum Values

Constant | Value | Description
adGetRowsRest | -1 | Retrieves the rest of the records in the Recordset object

BookmarkEnum Values

Constant | Value | Description
adBookmarkCurrent | 0 | Starts at the current record
adBookmarkFirst | 1 | Starts at the first record
adBookmarkLast | 2 | Starts at the last record


ADO GetString Method

The GetString method returns the specified Recordset as a string. This method can be used to fill HTML tables in ASP files.

Syntax

Set str=objRecordset.GetString(format,n,coldel,rowdel,nullexpr)

Parameter | Description
format | Optional. A StringFormatEnum value that specifies the format when retrieving a Recordset as a string
n | Optional. The number of rows to be converted in the Recordset
coldel | Optional. If format is set to adClipString it is a column delimiter. Otherwise it is the tab character
rowdel | Optional. If format is set to adClipString it is a row delimiter. Otherwise it is the carriage return character
nullexpr | Optional. If format is set to adClipString it is an expression used instead of a null value. Otherwise it is an empty string

Example

To create an HTML table with data from a recordset, we only need to use three of the parameters above:

· coldel - the HTML to use as a column-separator
· rowdel - the HTML to use as a row-separator
· NullExpr - the HTML to use if a column is NULL

Note: The GetString() method is an ADO 2.0 feature. You can download ADO 2.0 at http://www.microsoft.com/data/download.htm.

In the following example we will use the GetString() method to hold the recordset as a string:

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.recordset")

rs.Open "SELECT Companyname, Contactname FROM Customers", conn

str=rs.GetString(,,"</td><td>","</td></tr><tr><td>","&nbsp;")

%>

<table border="1" width="100%">

<tr>

  <td><%Response.Write(str)%></td>

</tr>

</table>

<%

rs.close

conn.close

set rs = Nothing

set conn = Nothing

%>

</body>

</html>

View example

StringFormatEnum Values

Constant | Value | Description
adClipString | 2 | Delimits rows by the rowdel parameter, columns by the coldel parameter, and null values by the nullexpr parameter


ADO HelpContext Property

The HelpContext property returns a long value that is the context ID of a topic in the Microsoft Windows help system.

This property allows you to interact with the Windows help system, i.e. you can call the Windows API Help functions.

The HelpContext property returns zero if you do not have access to interact with the Windows help system.

Syntax

lngErrorContext=objErr.HelpContext

Example

<%

for each objErr in objConn.Errors

response.write("<p>")

response.write("Description: ")

response.write(objErr.Description & "<br />")

response.write("Help context: ")

response.write(objErr.HelpContext & "<br />")

response.write("Help file: ")

response.write(objErr.HelpFile & "<br />")

response.write("Native error: ")

response.write(objErr.NativeError & "<br />")

response.write("Error number: ")

response.write(objErr.Number & "<br />")

response.write("Error source: ")

response.write(objErr.Source & "<br />")

response.write("SQL state: ")

response.write(objErr.SQLState & "<br />")

response.write("</p>")

next

%>


ADO HelpFile Property

The HelpFile property returns a string that contains the full path of the help file in the Microsoft Windows help system.

This property allows you to interact with the Windows help system, i.e. you can call the Windows API Help functions.

The HelpFile property returns "" if you do not have access to interact with the Windows help system.

Syntax

strErrorFile=objErr.HelpFile

Example

<%

for each objErr in objConn.Errors

response.write("<p>")

response.write("Description: ")

response.write(objErr.Description & "<br />")

response.write("Help context: ")

response.write(objErr.HelpContext & "<br />")

response.write("Help file: ")

response.write(objErr.HelpFile & "<br />")

response.write("Native error: ")

response.write(objErr.NativeError & "<br />")

response.write("Error number: ")

response.write(objErr.Number & "<br />")

response.write("Error source: ")

response.write(objErr.Source & "<br />")

response.write("SQL state: ")

response.write(objErr.SQLState & "<br />")

response.write("</p>")

next

%>


ADO Index Property

The Index property sets or returns a string value that indicates the name of the current index for a Recordset object. The index must have been created as an index on the table or as an ADOX Index object. This property can be set on an open or closed Recordset.

Note: This property is used together with the Seek method to create an indexed display of records and to use the Seek method to search these indexed records, but few providers supports this property and method. Use the Supports method to determine whether the provider supports seek and indexes.

Syntax

objRecordset.Index


ADO InfoMessage Event

An event is a subroutine that can be called automatically after a specific operation has occurred.

The InfoMessage event can be fired if a warning occurs in a connection operation.

Syntax

InfoMessage objerror,status,objconn

Parameter | Description
objerror | An Error object that contains the errors that are returned
status | An EventStatusEnum value. If a warning occurs, status is set to adStatusOK and the objerror contains the warning
objconn | A Connection object. The connection for which the warning occurred

EventStatusEnum Values

Constant | Value | Description
adStatusOK | 1 | The operation that fired the event was successful
adStatusErrorsOccurred | 2 | The operation that fired the event failed
adStatusCantDeny | 3 | Cannot cancel the pending operation
adStatusCancel | 4 | Cancels the operation that fired the event
adStatusUnwantedEvent | 5 | Prevents subsequent notifications before the event method has finished executing


ADO IsolationLevel Property

The IsolationLevel property sets or returns the isolation level of a Connection object. The value is an IsolationLevelEnum value. Default is adXactChaos.

Note: The IsolationLevel settings will not work until next time BeginTrans is called.

Syntax

objconn.IsolationLevel

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.IsolationLevel=adXactIsolated

conn.Open(Server.Mappath("northwind.mdb"))

response.write(conn.IsolationLevel)

conn.Close

%>

IsolationLevelEnum

Constant | Value | Description
adXactUnspecified | -1 | Cannot use the specified isolation level, because the provider is using a different isolation level, and that level cannot be determined.
adXactChaos | 16 | Cannot overwrite higher level transactions.
adXactBrowse | 256 | Can view uncommitted changes in other transactions.
adXactReadUncommitted | 256 | Same as adXactBrowse.
adXactCursorStability | 4096 | Can view committed changes in other transactions.
adXactReadCommitted | 4096 | Same as adXactCursorStability.
adXactRepeatableRead | 65536 | Cannot see changes in other transactions, but you can requery
adXactIsolated | 1048576 | Your transactions are isolated from all other transactions.
adXactSerializable | 1048576 | Same as adXactIsolated.


ADO LineSeparator Property

The LineSeparator property sets or returns a LineSeparatorsEnum value that indicates the line separator character used in a text Stream object. Default is adCRLF.

Syntax

objStream.LineSeparator

LineSeparatorsEnum

Constant | Value | Description
adCRLF | -1 | Default. Carriage return line feed
adLF | 10 | Line feed only
adCR | 13 | Carriage return only


ADO LoadFromFile Method

The LoadFromFile method is used to load the contents of an existing file into an open Stream object. All existing data in the Stream object will be overwritten.

Note: After a call to this method, the current position is set to the beginning of the Stream (Position=0).

Tip: This method can be used to upload the contents of a file to a server.

Syntax

objStream.LoadFromFile filename

Parameter | Description
filename | Required. The name of an existing file to be loaded into a the Stream object

Example

<%

objStream.LoadFromFile "c:/temp/w3schools.txt"

%>


ADO LockType Property

The LockType property sets or returns a LockTypeEnum value that specifies the type of locking when editing a record in a Recordset. Default is adLockReadOnly. This property is read/write on a closed Recordset and read-only on an open Recordset.

Note: Set this property before opening the Recordset.

Note: Not all providers support all lock types. If the requested LockType setting is not supported, the provider will choose another type of locking. You can use the Supports method to determine the actual locking functionality available in a Recordset object.

Note: adLockPessimistic is not supported if CursorLocation is set to adUseClient.

Syntax

objRecordset.LockType

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("northwind.mdb"))

set rs=Server.CreateObject("ADODB.recordset")

sql="SELECT * FROM Customers"

rs.CursorLocation=adUseClient

rs.CursorType=adOpenStatic

rs.LockType=adLockBatchOptimistic

rs.Open sql,conn

rs.Close

conn.Close

%>

LockTypeEnum Values

Constant | Value | Description
adLockUnspecified | -1 | Unspecified type of lock. Clones inherits lock type from the original Recordset.
adLockReadOnly | 1 | Read-only records
adLockPessimistic | 2 | Pessimistic locking, record by record. The provider lock records immediately after editing
adLockOptimistic | 3 | Optimistic locking, record by record. The provider lock records only when calling update
adLockBatchOptimistic | 4 | Optimistic batch updates. Required for batch update mode


ADO MaxRecords Property

The MaxRecords property sets or returns a long value that indicates the maximum number of records to return to a Recordset object from a query. Default is zero (which means that the provider returns all requested records).

This property is read/write on a closed Recordset and read-only on an open Recordset.

Syntax

objRecordset.MaxRecords

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("northwind.mdb"))

set rs=Server.CreateObject("ADODB.recordset")

rs.MaxRecords=20

sql="SELECT * FROM Customers"

rs.Open sql,conn

rs.Close

conn.Close

%>


ADO Mode Property

The Mode property sets or returns a ConnectModeEnum value that indicates the permission for modifying data in a Connection, Record, or Stream object. This property is read/write when an object is closed, and read-only when an object is open.

· Connection object - Default is adModeUnknown
· Record object - Default is adModeRead
· Stream object - Default is adModeRead or adModeUnknown

Note: This property can be set only when the Connection object is closed.

Syntax

object.Mode

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Mode=adModeReadWrite

conn.Open(Server.Mappath("northwind.mdb"))

response.write(conn.Mode)

conn.Close

%>

ConnectModeEnum

Constant | Value | Description
adModeUnknown | 0 | Permissions have not been set or cannot be determined.
adModeRead | 1 | Read-only.
adModeWrite | 2 | Write-only.
adModeReadWrite | 3 | Read/write.
adModeShareDenyRead | 4 | Prevents others from opening a connection with read permissions.
adModeShareDenyWrite | 8 | Prevents others from opening a connection with write permissions.
adModeShareExclusive | 12 | Prevents others from opening a connection.
adModeShareDenyNone | 16 | Allows others to open a connection with any permissions.
adModeRecursive | 0x400000 | Used with adModeShareDenyNone, adModeShareDenyWrite, or adModeShareDenyRead to set permissions on all sub-records of the current Record.


ADO Move Method

The Move method moves the record pointer in a Recordset object.

Note: This method can be used on all Recordset objects.

Syntax

objRecordset.Move numrec,start

Parameter | Description
numrec | Required. Specifies how many records the record pointer will move. Example: If this parameter is set to 3, the record pointer moves 3 records forward. Example: If this parameter is set to -3, the record pointer moves 3 records backward
start | Optional. Where to start. Can be a bookmark or a value

BookmarkEnum

Constant | Value | Description
adBookmarkCurrent | 0 | Starts at the current record
adBookmarkFirst | 1 | Starts at the first record
adBookmarkLast | 2 | Starts at the last record


ADO MoveFirst, MoveLast, MoveNext, and MovePrevious Methods

The MoveFirst Method

This method is used to move to the first record in a Recordset object. It also make the first record the current record.

Note: Calling MoveFirst or MoveLast when the Recordset is empty generates an error.

The MoveLast Method

This method is used to move to the last record in a Recordset object. It also make the last record the current record.

Note: Calling MoveFirst or MoveLast when the Recordset is empty generates an error.

Note: An error will occur if the Recordset object does not support bookmarks or backward cursor movement.

The MoveNext Method

This method is used to move to the next record in a Recordset object. It also make the "next" record the current record.

Note: If you call this method when the current record is the last record, it generates an error.

The MovePrevious Method

This method is used to move to the previous record in a Recordset object. It also make the "previous" record the current record.

Note: An error will occur if the Recordset object does not support bookmarks or backward cursor movement.

Note: If you call this method when the current record is the first record, it generates an error.

Syntax

objRecordset.MoveFirst

objRecordset.MoveLast

objRecordset.MoveNext

objRecordset.MovePrevious


ADO Name Property

The Name property sets or returns a string that contains the name of a Command, Property, Field, or Parameter object.

Object | Description of the Name Property
Command | The Name property has read/write permissions on a Connection object
Property | The Name property has read-only permissions on a Property object
Field | The Name property has read/write permissions when used to create a Recordset, but it has read-only permissions when you open an existing Recordset
Parameter | The Name property has read/write permissions on a Parameter object that is not added to the Parameters Collection, but it has read-only permissions after the object is added to the Collection

Syntax

object.Name

Example

For a Command object:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set comm=Server.CreateObject("ADODB.Command")

comm.Name="xx"

response.write(comm.Name)

conn.close

%>

For a Field object:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.Recordset")

rs.open "Select * from orders", conn

set f=Server.CreateObject("ADODB.Field")

'Display the field attributes of the Orders Table

for each f in rs.Fields

response.write("Attr:" & f.Attributes & "<br />")

response.write("Name:" & f.Name & "<br />")

response.write("Value:" & f.Value & "<br />")

next

rs.Close

conn.close

set rs=nothing

set conn=nothing

%>

For a Property object:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.Recordset")

rs.open "Select * from orders", conn

set prop=Server.CreateObject("ADODB.Property")

'Display the property attributes of the Orders Table

for each prop in rs.Properties

response.write("Attr:" & prop.Attributes & "<br />")

response.write("Name:" & prop.Name & "<br />")

response.write("Value:" & prop.Value & "<br />")

next

rs.close

conn.close

set rs=nothing

set conn=nothing

%>


ADO NativeError Property

The NativeError property returns a long value that is an error code returned to ADO by the provider or the data source.

Syntax

lngErrorNative=objErr.NativeError

Example

<%

for each objErr in objConn.Errors

response.write("<p>")

response.write("Description: ")

response.write(objErr.Description & "<br />")

response.write("Help context: ")

response.write(objErr.HelpContext & "<br />")

response.write("Help file: ")

response.write(objErr.HelpFile & "<br />")

response.write("Native error: ")

response.write(objErr.NativeError & "<br />")

response.write("Error number: ")

response.write(objErr.Number & "<br />")

response.write("Error source: ")

response.write(objErr.Source & "<br />")

response.write("SQL state: ")

response.write(objErr.SQLState & "<br />")

response.write("</p>")

next

%>


ADO NextRecordset Method

The NextRecordset method is used to clear the current Recordset object and return the next Recordset object by looping through a series of commands. This method returns a Recordset object.

Use this method to return the results of the next command in a compound command statement or the next result of a stored procedure that returns multiple results. For example, in a compound command statement, like "SELECT * FROM table1;SELECT * FROM table2", the Execute method on a Command or the Open method on a Recordset, will only execute the first command and return the result to a Recordset object. To access the result of the next command in the statement, call the NextRecordset method.

If a row-returning command executes successfully but returns no records, the returned Recordset object will be open but empty (BOF and EOF are both True). If a non–row-returning command executes successfully, the returned Recordset object will be closed (State property is adStateClosed). When there are no more results, the Recordset object will be set to Nothing.

Syntax

Set objRecordset2=objRecordset1.NextRecordset(ra)

Note: objRecordset1 and objRecordset2 can be the same Recordset object.

Parameter | Description
ra | Optional. Returns the number of records affected by the operation


ADO Number Property

The Number property returns a long value that is a unique number that can take one of the ErrorValueEnum values. The number describes the error generated by ADO. If the error was generated by the provider, this property may be set to an unspecific error value.

The numbers are equivalent to the Windows API HRESULTS values.

Syntax

lngErrorNumber=objErr.Number

Example

<%

for each objErr in objConn.Errors

response.write("<p>")

response.write("Description: ")

response.write(objErr.Description & "<br />")

response.write("Help context: ")

response.write(objErr.HelpContext & "<br />")

response.write("Help file: ")

response.write(objErr.HelpFile & "<br />")

response.write("Native error: ")

response.write(objErr.NativeError & "<br />")

response.write("Error number: ")

response.write(objErr.Number & "<br />")

response.write("Error source: ")

response.write(objErr.Source & "<br />")

response.write("SQL state: ")

response.write(objErr.SQLState & "<br />")

response.write("</p>")

next

%>

ErrorValueEnum Values

Constant | Value | Description
adErrBoundToCommand | 3707 -2146824581 0x800A0E7B | Cannot change the ActiveConnection property of a Recordset object which has a Command object as its source
adErrCannotComplete | 3732 -2146824556 0x800A0E94 | Server cannot complete the operation
adErrCantChangeConnection | 3748 -2146824540 0x800A0EA4 | Connection was denied
adErrCantChangeProvider | 3220 -2146825068 0X800A0C94 | Supplied provider is different from the one already in use
adErrCantConvertvalue | 3724 -2146824564 0x800A0E8C | Data value cannot be converted
adErrCantCreate | 3725 -2146824563 0x800A0E8D | Data value cannot be set or retrieved
adErrCatalogNotSet | 3747 -2146824541 0x800A0EA3 | Operation requires a valid ParentCatalog
adErrColumnNotOnThisRow | 3726 -2146824562 0x800A0E8E | Record does not contain this field
adErrDataConversion | 3421 -2146824867 0x800A0D5D | Application uses a value of the wrong type
adErrDataOverflow | 3721 -2146824567 0x800A0E89 | Data value is too large
adErrDelResOutOfScope | 3738 -2146824550 0x800A0E9A | URL of the object to be deleted is outside the scope of the current record
adErrDenyNotSupported | 3750 -2146824538 0x800A0EA6 | Provider does not support sharing restrictions
adErrDenyTypeNotSupported | 3751 -2146824537 0x800A0EA7 | Provider does not support the kind of sharing restriction
adErrFeatureNotAvailable | 3251 -2146825037 0x800A0CB3 | Object/Provider is not capable of performing requested operation
adErrFieldsUpdateFailed | 3749 -2146824539 0x800A0EA5 | Fields update failed
adErrIllegalOperation | 3219 -2146825069 0x800A0C93 | Operation is not allowed in this context
adErrIntegrityViolation | 3719 -2146824569 0x800A0E87 | Data value conflicts with the integrity constraints of the field
adErrInTransaction | 3246 -2146825042 0x800A0CAE | Connection object cannot be closed while in a transaction
adErrInvalidArgument | 3001 -2146825287 0x800A0BB9 | Arguments are of the wrong type, are out of acceptable range, or are in conflict with one another
adErrInvalidConnection | 3709 -2146824579 0x800A0E7D | The connection cannot be used to perform this operation. It is either closed or invalid in this context
adErrInvalidParamInfo | 3708 -2146824580 0x800A0E7C | Parameter object is improperly defined
adErrInvalidTransaction | 3714 -2146824574 0x800A0E82 | Coordinating transaction is invalid
adErrInvalidURL | 3729 -2146824559 0x800A0E91 | URL contains invalid characters
adErrItemNotFound | 3265 -2146825023 0x800A0CC1 | Item cannot be found in the collection corresponding to the requested name or ordinal
adErrNoCurrentRecord | 3021 -2146825267 0x800A0BCD | Either BOF or EOF is True, or the current record has been deleted
adErrNotExecuting | 3715 -2146824573 0x800A0E83 | Cannot perform operation while not executing
adErrNotReentrant | 3710 -2146824578 0x800A0E7E | Cannot perform operation while processing
adErrObjectClosed | 3704 -2146824584 0x800A0E78 | Operation not allowed when the object is closed
adErrObjectInCollection | 3367 -2146824921 0x800A0D27 | Object is already in collection. Cannot append
adErrObjectNotSet | 3420 -2146824868 0x800A0D5C | Object is no longer valid
adErrObjectOpen | 3705 -2146824583 0x800A0E79 | Operation not allowed when the object is open
adErrOpeningFile | 3002 -2146825286 0x800A0BBA | Could not open file
adErrOperationCancelled | 3712 -2146824576 0x800A0E80 | Operation cancelled by the user
adErrOutOfSpace | 3734 -2146824554 0x800A0E96 | Cannot perform operation. Provider cannot obtain enough storage space
adErrPermissionDenied | 3720 -2146824568 0x800A0E88 | Permission denied when writing to the field
adErrProviderFailed | 3000 -2146825288 0x800A0BB8 | Provider failed to perform the operation
adErrProviderNotFound | 3706 -2146824582 0x800A0E7A | Provider cannot be found
adErrReadFile | 3003 -2146825285 0x800A0BBB | File could not be read
adErrResourceExists | 3731 -2146824557 0x800A0E93 | Cannot perform copy operation. Object already exists. Specify adCopyOverwrite to replace the object
adErrResourceLocked | 3730 -2146824558 0x800A0E92 | Object is locked by other processes
adErrResourceOutOfScope | 3735 -2146824553 0x800A0E97 | URL/Source outside scope of current record
adErrSchemaViolation | 3722 -2146824566 0x800A0E8A | Data value conflicts with data type or constraints
adErrSignMismatch | 3723 -2146824565 0x800A0E8B | Conversion failed because the data value is signed and the field data type is unsigned
adErrStillConnecting | 3713 -2146824575 0x800A0E81 | Cannot perform operation while connecting asynchronously
adErrStillExecuting | 3711 -2146824577 0x800A0E7F | Cannot perform operation while executing asynchronously
adErrTreePermissionDenied | 3728 -2146824560 0x800A0E90 | Permission denied accessing tree or subtree
adErrUnavailable | 3736 -2146824552 0x800A0E98 | Operation failed and the status is unavailable
adErrUnsafeOperation | 3716 -2146824572 0x800A0E84 | Cannot access data source on another domain
adErrURLDoesNotExist | 3727 -2146824561 0x800A0E8F | The URL does not exist
adErrURLNamedRowDoesNotExist | 3737 -2146824551 0x800A0E99 | Record does not exist
adErrVolumeNotFound | 3733 -2146824555 0x800A0E95 | Provider cannot locate the storage device. Make sure the URL is typed correctly
adErrWriteFile | 3004 -2146825284 0x800A0BBC | Failed when writing to file
adWrnSecurityDialog | 3717 -2146824571 0x800A0E85 | Not in use
adWrnSecurityDialogHeader | 3718 -2146824570 0x800A0E86 | Not in use


ADO NumericScale Property

The NumericScale property sets or returns a byte value that indicates the number of digits stored to the right side of the decimal point for a numeric value of a Field or Parameter object.

Object | Description of the NumericScale Property
Field | The NumericScale has read/write permissions when used to create a Recordset, but it has read-only permissions when you open an existing Recordset
Parameter | The NumericScale property has read/write permissions on a Parameter object

Syntax

object.NumericScale

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.Recordset")

rs.open "Select * from orders", conn

response.write(rs.Fields(0).NumericScale)

rs.Close

conn.close

%>


ADO Open Method

The Open method opens a connection to a data source. When the connection is open, you can execute commands against the data source.

Syntax

connection.Open connectionstring,userID,password,options

Parameter | Description
connectionstring | Optional. A string value that contains information about the connection. The string is composed of a series of parameter=value statements separated by semicolons. Provider= the name of the provider File Name= the file that contains the connection information Remote Provider= the name of the provider to open a client-side connection Remote Server= the path name to the server to open a client-side connection URL= the absolute URL address to use for the connection. See the ConnectionString property for details.
userID | Optional. A String value that contains a user name for the connection
password | Optional. A String value that contains a password for the connection
options | Optional. A ConnectOptionEnum value that determines whether this method should return after or before the connection is established.

Example

A DSN-less connection:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

%>

A DSN-less connection with userID and password

(write the conn.open statement in ONE line):

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;

data source=c:/webdata/northwind.mdb;

userID=xxx;

password=yyy"

%>

An ODBC Database Connection:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Open "northwind"

%>

ConnectOptionEnum

Constant | Value | Description
adConnectUnspecified | -1 | Default. Opens the connection synchronously (after).
adAsyncConnect | 16 | Opens the connection asynchronously (before).


ADO Open Method

The Open method opens an existing Record object or creates a new file or directory.

Syntax

Open(source,actconn,mode,createopt,opt,username,psword)

Parameter

Description

source

Optional. The source parameter may be one of the following:

· An absolute url
· A relative url
· An open Recordset
· Another Record object
· A Command object
· An SQL SELECT statement
· A table name

actconn

Optional. A connection string or a Connection object

mode

Optional. A ConnectModeEnum value, that indicates the access mode of the Record object. Default is adModeUnknown

createopt

Optional. A RecordCreateOptionsEnum value, that indicates whether an existing file/directory should be opened, or a new file/directory should be created. Default is adFailIfNotExists. This parameter will be ignored if the source parameter is not a URL

opt

Optional. One or more values, that specifies the options for opening the Record. Default is adOpenRecordUnspecified

username

Optional. A user ID that authorizes access to source

psword

Optional. A password that verifies the username

Example

Example 1: source as the URL of a folder:

set rec = Server.CreateObject("ADODB.record")

rec.Open("http://www.w3schools.com/ado/")

Example 2: source as a relative URL in a Connection object:

set conn=Server.CreateObject("ADODB.Connection")

set rec = Server.CreateObject("ADODB.record")

conn.Open "URL=http://www.w3schools.com/ado/"

rec.Open("test.doc", conn)

Example 3: source as a row in a Recordset object:

set rs = Server.CreateObject("ADODB.recordset")

set rec = Server.CreateObject("ADODB.record")

rs.Open "test.doc", "URL=http://www.w3schools.com/ado/",,,adCmdTableDirect

rs.MoveLast()

rec.Open(rs)

ConnectModeEnum Values

Constant | Value | Description
adModeUnknown | 0 | Default. Permissions have not been set or cannot be determined
adModeRead | 1 | Read-only
adModeWrite | 2 | Write-only
adModeReadWrite | 3 | Read/write
adModeShareDenyRead | 4 | Prevents others from opening a connection with read permissions
adModeShareDenyWrite | 8 | Prevents others from opening a connection with write permissions
adModeShareExclusive | 12 | Prevents others from opening a connection
adModeShareDenyNone | 16 | Allows others to open a connection with any permissions
adModeRecursive | 0x400000 | Used with adModeShareDenyNone, adModeShareDenyWrite, or adModeShareDenyRead to set permissions on all sub-records of the current Record

RecordCreateOptionsEnum Values

Constant | Value | Description
adFailIfNotExists | -1 | Default. Fails if the source parameter points to a node that not exists
adCreateNonCollection | 0 | Creates a new Record of type adSimpleRecord
adCreateCollection | 0x2000 | Creates a new Record specified by the source parameter. If it points to an existing node, an error will occur. To prevent the error combine this value with adOpenIfExists or adCreateOverwrite
adOpenIfExists | 0x2000000 | If the source points to an existing node or Record object, then the provider must open the existing Record instead of creating a new one. This value cannot be used with adCreateOverwrite
adCreateOverwrite | 0x4000000 | If the source points to an existing node or Record, then the existing Record will be overwritten and a new one is created in its place. This value cannot be used with adOpenIfExists
adCreateStructDoc | 0x80000000 | Creates a new Record of type adStructDoc

RecordOpenOptionsEnum Values

Constant | Value | Description
adOpenRecordUnspecified | -1 | Default. No options are specified
adOpenAsync | 0x1000 | Opens the Record object in asynchronous mode
adDelayFetchStream | 0x4000 | The default stream associated with the Record need not be retrieved initially
adDelayFetchFields | 0x8000 | The fields associated with the Record need not be retrieved initially, but can be retrieved at the first attempt to access the field
adOpenExecuteCommand | 0x10000 | The source contains command text that should be executed
adOpenOutput | 0x800000 | If the source points to a node that contains an executable script, then the opened Record will contain the results of the executed script. This value is only valid with non-collection records


ADO Open Method

The Open method opens a database element that gives you access to records in a table, the results of a query, or to a saved Recordset.

Tip: Always close the Recordset object after using it, to free system resources. Set the Recordset object to Nothing to completely eliminate it from memory.

Syntax

objRecordset.Open source,actconn,cursortyp,locktyp,opt

Parameter

Description

source

Optional. Specifies a data source. The source parameter may be one of the following:

· A URL
· A relative/full file path name
· A Command object
· An SQL statement
· A stored procedure
· A table name

actconn

Optional. A connection string or a Connection object

cursortyp

Optional. A CursorTypeEnum value that specifies the type of cursor to use when opening a Recordset object. Default is adOpenForwardOnly

locktyp

Optional. A value that specifies the type of locking on a Recordset object. Default is adLockReadOnly

opt

Optional. Specifies how to evaluate the source parameter if it is not a Command object. Can be one or more CommandTypeEnum or ExecuteOptionEnum values.

Example

Open an ADO Table Recordset:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.recordset")

rs.Open "Customers", conn

%>

Open an ADO SQL Recordset:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.recordset")

rs.Open "Select * from Customers", conn

%>

CursorTypeEnum Values

Constant | Value | Description
adOpenUnspecified | -1 | Unspecified type of cursor
adOpenForwardOnly | 0 | Default. A forward-only cursor. This improves performance when you need to make only one pass through a Recordset
adOpenKeyset | 1 | A keyset cursor. Like a dynamic cursor, except that you can't see records that other users add, although records that other users delete are inaccessible from your Recordset. Data changes by other users are still visible.
adOpenDynamic | 2 | A dynamic cursor. Additions, changes, and deletions by other users are visible, and all types of movement through the Recordset are allowed
adOpenStatic | 3 | A static cursor. A static copy of a set of records that you can use to find data or generate reports. Additions, changes, or deletions by other users are not visible.

LockTypeEnum Values

Constant | Value | Description
adLockUnspecified | -1 | Unspecified type of lock. Clones inherits lock type from the original Recordset.
adLockReadOnly | 1 | Default. Read-only records
adLockPessimistic | 2 | Pessimistic locking, record by record. The provider lock records immediately after editing
adLockOptimistic | 3 | Optimistic locking, record by record. The provider lock records only when calling update
adLockBatchOptimistic | 4 | Optimistic batch updates. Required for batch update mode

CommandTypeEnum Values

Constant | Value | Description
adCmdUnspecified | -1 | Unspecified type of command
adCmdText | 1 | Evaluates CommandText as a textual definition of a command or stored procedure call
adCmdTable | 2 | Evaluates CommandText as a table name whose columns are returned by an SQL query
adCmdStoredProc | 4 | Evaluates CommandText as a stored procedure name
adCmdUnknown | 8 | Default. Unknown type of command
adCmdFile | 256 | Evaluates CommandText as the file name of a persistently stored Recordset. Used with Recordset.Open or Requery only.
adCmdTableDirect | 512 | Evaluates CommandText as a table name whose columns are all returned. Used with Recordset.Open or Requery only. To use the Seek method, the Recordset must be opened with adCmdTableDirect. Cannot be combined with the ExecuteOptionEnum value adAsyncExecute.

ExecuteOptionEnum Values

Constant | Value | Description
adOptionUnspecified | -1 | Unspecified command
adAsyncExecute | 16 | The command should execute asynchronously. Cannot be combined with the CommandTypeEnum value adCmdTableDirect
adAsyncFetch | 32 | The remaining rows after the initial quantity specified in the CacheSize property should be retrieved asynchronously
adAsyncFetchNonBlocking | 64 | The main thread never blocks while retrieving. If the requested row has not been retrieved, the current row automatically moves to the end of the file. If you open a Recordset from a Stream containing a persistently stored Recordset, adAsyncFetchNonBlocking will not have an effect; the operation will be synchronous and blocking. adAsynchFetchNonBlocking has no effect when the adCmdTableDirect option is used to open the Recordset
adExecuteNoRecords | 128 | The command text is a command or stored procedure that does not return rows. If any rows are retrieved, they are discarded and not returned. adExecuteNoRecords can only be passed as an optional parameter to the Command or Connection Execute method
adExecuteStream | 256 | The results of a command execution should be returned as a stream. adExecuteStream can only be passed as an optional parameter to the Command Execute method
adExecuteRecord | 512 | The CommandText is a command or stored procedure that returns a single row which should be returned as a Record object


ADO Open Method

The Open method is used to open a Stream object.

Syntax

objStream.Open source,mode,opt,username,psword

Parameter | Description
source | Optional. The data source for the Stream object (a URL that points to an existing node in a tree structure, like an e-mail or file system or a reference to an already opened Record object). If source is not specified, a new Stream object, with a size of zero, will be created and opened
mode | Optional. A value that specifies the access mode for a Stream object. Default is adModeUnknown
opt | Optional. A StreamOpenOptionsEnum value that specifies options for opening a Stream object. Default is adOpenStreamUnspecified
username | Optional. A name of a user who can access the Stream object. If Source is an already opened Record, this parameter is not specified
psword | Optional. A password that validates the username. If Source is an already opened Record, this parameter is not specified

ConnectModeEnum Values

Constant | Value | Description
adModeUnknown | 0 | Default. Permissions have not been set or cannot be determined
adModeRead | 1 | Read-only
adModeWrite | 2 | Write-only
adModeReadWrite | 3 | Read/write
adModeShareDenyRead | 4 | Prevents others from opening a connection with read permissions
adModeShareDenyWrite | 8 | Prevents others from opening a connection with write permissions
adModeShareExclusive | 12 | Prevents others from opening a connection
adModeShareDenyNone | 16 | Allows others to open a connection with any permissions
adModeRecursive | 0x400000 | Used with adModeShareDenyNone, adModeShareDenyWrite, or adModeShareDenyRead to set permissions on all sub-records of the current Record

StreamOpenOptionsEnum Values

Constant | Value | Description
adOpenStreamUnspecified | -1 | Default. Opens the Stream object with default options
adOpenStreamAsync | 1 | Opens the Stream object in asynchronous mode
adOpenStreamFromRecord | 4 | Identifies the contents of the Source parameter to be an already open Record object. The default behavior is to treat Source as a URL that points directly to a node in a tree structure. The default stream associated with that node is opened.


ADO OpenSchema Method

The OpenSchema method returns a Recordset object with schema information from the provider about the data source. For example, schema information can include the names of the tables, names of the columns in the tables, and the data type of each column. The Recordset will be opened as a read-only recordset.

Syntax

Set rs=objconn.OpenSchema(querytype,criteria,schemaid)

Parameter | Description
querytype | Required. A SchemaEnum value that represents the type of schema query to run Note: The OLEDB specification only require 3 of the SchemaEnum values to be supported. These are adSchemaTables, adSchemaColumns, and the adSchemaProviderTypes
criteria | Optional. An array of query constraints for each querytype option, as listed in SchemaEnum
schemaid | The GUID for a provider-schema query not defined by the OLE DB specification. Required if querytype is set to adSchemaProviderSpecific

SchemaEnum Values

Constant | Value | Description | Constraint Columns
adSchemaProviderSpecific | -1 | Used if the provider defines its own nonstandard schema queries | Provider specific
adSchemaAsserts | 0 | Returns the assertions defined in the catalog | CONSTRAINT_CATALOG CONSTRAINT_SCHEMA CONSTRAINT_NAME
adSchemaCatalogs | 1 | Returns the physical attributes associated with catalogs accessible from the DBMS | CATALOG_NAME
adSchemaCharacterSets | 2 | Returns the character sets defined in the catalog | CHARACTER_SET_CATALOG CHARACTER_SET_SCHEMA CHARACTER_SET_NAME
adSchemaCollations | 3 | Returns the character collations defined in the catalog | COLLATION_CATALOG COLLATION_SCHEMA COLLATION_NAME
adSchemaColumns | 4 | Returns the columns of tables defined in the catalog | TABLE_CATALOG TABLE_SCHEMA TABLE_NAME COLUMN_NAME
adSchemaCheckConstraints | 5 | Returns the check constraints defined in the catalog | CONSTRAINT_CATALOG CONSTRAINT_SCHEMA CONSTRAINT_NAME
adSchemaConstraintColumnUsage | 6 | Returns the columns used by referential constraints, unique constraints, check constraints, and assertions, defined in the catalog | TABLE_CATALOG TABLE_SCHEMA TABLE_NAME COLUMN_NAME
adSchemaConstraintTableUsage | 7 | Returns the tables that are used by referential constraints, unique constraints, check constraints, and assertions defined in the catalog | TABLE_CATALOG TABLE_SCHEMA TABLE_NAME
adSchemaKeyColumnUsage | 8 | Returns the columns defined in the catalog that are constrained as keys | CONSTRAINT_CATALOG CONSTRAINT_SCHEMA CONSTRAINT_NAME TABLE_CATALOG TABLE_SCHEMA TABLE_NAME COLUMN_NAME
AdSchemaReferentialConstraints | 9 | Returns the referential constraints defined in the catalog | CONSTRAINT_CATALOG CONSTRAINT_SCHEMA CONSTRAINT_NAME
adSchemaTableConstraints | 10 | Returns the table constraints defined in the catalog | CONSTRAINT_CATALOG CONSTRAINT_SCHEMA CONSTRAINT_NAME TABLE_CATALOG TABLE_SCHEMA TABLE_NAME CONSTRAINT_TYPE
adSchemaColumnsDomainUsage | 11 | Returns the columns defined in the catalog that are dependent on a domain defined in the catalog | DOMAIN_CATALOG DOMAIN_SCHEMA DOMAIN_NAME COLUMN_NAME
adSchemaIndexes | 12 | Returns the indexes defined in the catalog | TABLE_CATALOG TABLE_SCHEMA INDEX_NAME TYPE TABLE_NAME
adSchemaColumnPrivileges | 13 | Returns the privileges on columns of tables defined in the catalog | TABLE_CATALOG TABLE_SCHEMA TABLE_NAME COLUMN_NAME GRANTOR GRANTEE
adSchemaTablePrivileges | 14 | Returns the privileges on tables defined in the catalog | TABLE_CATALOG TABLE_SCHEMA TABLE_NAME GRANTOR GRANTEE
adSchemaUsagePrivileges | 15 | Returns the USAGE privileges on objects defined in the catalog | OBJECT_CATALOG OBJECT_SCHEMA OBJECT_NAME OBJECT_TYPE GRANTOR GRANTEE
adSchemaProcedures | 16 | Returns the procedures defined in the catalog | PROCEDURE_CATALOG PROCEDURE_SCHEMA PROCEDURE_NAME PROCEDURE_TYPE
adSchemaSchemata | 17 | Returns the schemas (database objects) | CATALOG_NAME SCHEMA_NAME SCHEMA_OWNER
adSchemaSQLLanguages | 18 | Returns the conformance levels, options, and dialects supported by the SQL-implementation processing data defined in the catalog. | None
adSchemaStatistics | 19 | Returns the statistics defined in the catalog | TABLE_CATALOG TABLE_SCHEMA TABLE_NAME
adSchemaTables | 20 | Returns the tables defined in the catalog that are accessible | TABLE_CATALOG TABLE_SCHEMA TABLE_NAME TABLE_TYPE
adSchemaTranslations | 21 | Returns the character translations defined in the catalog that are accessible | TRANSLATION_CATALOG TRANSLATION_SCHEMA TRANSLATION_NAME
adSchemaProviderTypes | 22 | Returns the data types supported by the data provider | DATA_TYPE BEST_MATCH
adSchemaViews | 23 | Returns the views defined in the catalog that are accessible | TABLE_CATALOG TABLE_SCHEMA TABLE_NAME
adSchemaViewColumnUsage | 24 | Returns the columns on which viewed tables, are dependent | VIEW_CATALOG VIEW_SCHEMA VIEW_NAME
adSchemaViewTableUsage | 25 | Returns the tables on which viewed tables, are dependent | VIEW_CATALOG VIEW_SCHEMA VIEW_NAME
adSchemaProcedureParameters | 26 | Returns info about the parameters and return codes of procedures | PROCEDURE_CATALOG PROCEDURE_SCHEMA PROCEDURE_NAME PARAMETER_NAME
adSchemaForeignKeys | 27 | Returns the foreign key columns defined in the catalog | PK_TABLE_CATALOG PK_TABLE_SCHEMA PK_TABLE_NAME FK_TABLE_CATALOG FK_TABLE_SCHEMA FK_TABLE_NAME
adSchemaPrimaryKeys | 28 | Returns the primary key columns defined in the catalog | PK_TABLE_CATALOG PK_TABLE_SCHEMA PK_TABLE_NAME
adSchemaProcedureColumns | 29 | Returns info about the columns of rowsets returned by procedures | PROCEDURE_CATALOG PROCEDURE_SCHEMA PROCEDURE_NAME COLUMN_NAME
adSchemaDBInfoKeywords | 30 | Returns a list of provider-specific keywords | None
adSchemaDBInfoLiterals | 31 | Returns a list of provider-specific literals used in text commands | None
adSchemaCubes | 32 | Returns info about the available cubes in a schema | CATALOG_NAME SCHEMA_NAME CUBE_NAME
adSchemaDimensions | 33 | Returns info about the dimensions in a given cube | CATALOG_NAME SCHEMA_NAME CUBE_NAME DIMENSION_NAME DIMENSION_UNIQUE_NAME
adSchemaHierarchies | 34 | Returns info about the hierarchies available in a dimension | CATALOG_NAME SCHEMA_NAME CUBE_NAME DIMENSION_UNIQUE_NAME HIERARCHY_NAME HIERARCHY_UNIQUE_NAME
adSchemaLevels | 35 | Returns info about the levels available in a dimension | CATALOG_NAME SCHEMA_NAME CUBE_NAME DIMENSION_UNIQUE_NAME HIERARCHY_UNIQUE_NAME LEVEL_NAME LEVEL_UNIQUE_NAME
adSchemaMeasures | 36 | Returns info about the available measures | CATALOG_NAME SCHEMA_NAME CUBE_NAME MEASURE_NAME MEASURE_UNIQUE_NAME
adSchemaProperties | 37 | Returns info about the available properties for each level of the dimension | CATALOG_NAME SCHEMA_NAME CUBE_NAME DIMENSION_UNIQUE_NAME HIERARCHY_UNIQUE_NAME LEVEL_UNIQUE_NAME MEMBER_UNIQUE_NAME PROPERTY_TYPE PROPERTY_NAME
adSchemaMembers | 38 | Returns info about the available members | CATALOG_NAME SCHEMA_NAME CUBE_NAME DIMENSION_UNIQUE_NAME HIERARCHY_UNIQUE_NAME LEVEL_UNIQUE_NAME LEVEL_NUMBER MEMBER_NAME MEMBER_UNIQUE_NAME MEMBER_CAPTION MEMBER_TYPE TREE OPERATOR
adSchemaTrustees | 39 | For future use | None


ADO OriginalValue and UnderlyingValue Properties

The OriginalValue property returns a variant that contains the field value as it existed right after the last Update or UpdateBatch method call.

The UnderlyingValue property returns a variant that contains the current value of a field. This value does not necessarily show changes made by other users and may not be the latest value.

Tip: Use the Resync property of the Recordset object to get the latest values for all of the Field objects in the Fields Collection.

Tip: These properties can be used together to prevent update conflicts.

Syntax

objField.OriginalValue

objField.UnderlyingValue

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.Recordset")

rs.open "customers", conn

set objfield=rs.fields("companyname")

'Some code..................

'Check for changes

rs.movefirst

while rs.eof=false

if objfield.OriginalValue<>objfield.UnderlyingValue then

  response.write("Data has changed!<br />")

  response.write("Original value: ")

  response.write(objfield.OriginalValue & "<br />")

  response.write("Current value: ")

  response.write(objfield.UnderlyingValue & "<br />")

end if

rs.movenext

next

'More code...................

rs.Close

conn.close

%>


ADO PageCount Property

The PageCount property returns a long value that indicates the number of pages with data in a Recordset object.

Tip: To divide the Recordset into a series of pages, use the PageSize property.

Note: If the last page contains fewer records than specified in PageSize, it still counts as an additional page in the PageCount property.

Note: If this method is not supported it returns -1.

Syntax

objRecordset.PageCount

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("northwind.mdb"))

set rs=Server.CreateObject("ADODB.recordset")

sql="SELECT * FROM Customers"

rs.Open sql,conn

rs.PageSize=5

i=rs.PageCount

response.write("The number of pages in RS=" & i)

rs.Close

conn.Close

%>


ADO PageSize Property

The PageSize property sets or returns a long value that indicates the maximum number of records allowed on a single page of a Recordset object. Default is 10.

Tip: To get the number of pages in a Recordset object, use the PageCount property.

Syntax

objRecordset.PageSize

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("northwind.mdb"))

set rs=Server.CreateObject("ADODB.recordset")

sql="SELECT * FROM Customers"

rs.Open sql,conn

rs.PageSize=5

i=rs.PageCount

response.write("The number of pages in RS=" & i)

rs.Close

conn.Close

%>


ADO Parameter Object

Parameter Object

The ADO Parameter object provides information about a single parameter used in a stored procedure or query.

A Parameter object is added to the Parameters Collection when it is created. The Parameters Collection is associated with a specific Command object, which uses the Collection to pass parameters in and out of stored procedures and queries.

Parameters can be used to create Parameterized Commands. These commands are (after they have been defined and stored) using parameters to alter some details of the command before it is executed. For example, an SQL SELECT statement could use a parameter to define the criteria of a WHERE clause.

There are four types of parameters: input parameters, output parameters, input/output parameters and return parameters.

Syntax

objectname.property

objectname.method

Properties

Property | Description
Attributes | Sets or returns the attributes of a Parameter object
Direction | Sets or returns how a parameter is passed to or from a procedure
Name | Sets or returns the name of a Parameter object
NumericScale | Sets or returns the number of digits stored to the right side of the decimal point for a numeric value of a Parameter object
Precision | Sets or returns the maximum number of digits allowed when representing numeric values in a Parameter
 | Sets or returns the maximum size in bytes or characters of a value in a Parameter object
Type | Sets or returns the type of a Parameter object
Value | Sets or returns the value of a Parameter object

Methods

Method | Description
 | Appends long binary or character data to a Parameter object
Delete | Deletes an object from the Parameters Collection


ADO ParentURL Property

The ParentURL property returns a string value that contains the absolute URL of the parent Record.

Syntax

strparent=objrecord.ParentURL


ADO Position Property

The Position property sets or returns a long value that indicates the current position (in bytes) from the beginning of a Stream object.

Syntax

objStream.Position


ADO Precision Property

The Precision property sets or returns a byte value that is the maximum number of digits allowed when representing numeric values in a Parameter or Field object.

Object | Description of the Precision Property
Field | The Precision property is normally read-only on a Field object, but for new Field objects that have been added to the Fields collection of a Record, it is read/write after the Value property for the Field has been specified and the provider has successfully added the new Field by calling the Update method of the Fields collection
Parameter | The Precision property has read/write permissions on a Parameter object

Syntax

objectname.Precision

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.Recordset")

rs.open "Select * from orders", conn

response.write(rs.Fields(0).Precision)

rs.Close

conn.close

%>


ADO Prepared Property

The Prepared property sets or returns a Boolean value that, if set to True, indicates that the command should save a prepared version of the query specified in the CommandText property before execution.

This could slow down the command's first execution, but after the first execution the provider will use the compiled version, which results in a faster execution.

Syntax

objcommand.Prepared=true or false

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set comm=Server.CreateObject("ADODB.Command")

comm.ActiveConnection=conn

comm.CommandText="orders"

comm.Prepared=true

response.write(comm.Prepared)

conn.close

%>


ADO Property Object

Property Object

The ADO Property object represents a dynamic characteristic of an ADO object that is defined by the provider.

Each provider that talks with ADO has different ways of interacting with ADO. Therefore, ADO needs to store information about the provider in some way. The solution is that the provider gives specific information (dynamic properties) to ADO. ADO stores each provider property in a Property object that is again stored in the Properties Collection. The Collection is assigned to either a Command object, Connection object, Field object, or a Recordset object.

ProgID

set objProperty=Server.CreateObject("ADODB.property")

Properties

Property | Description
Attributes | Returns the attributes of a Property object
 | Sets or returns the name of a Property object
 | Returns the type of a Property object
Value | Sets or returns the value of a Property object


ADO Provider Property

The Provider property sets or returns a string value that contains the provider name for a specific Connection object. Default is MSDASQL (Microsoft OLE DB provider for ODBC). Look at Provider Codes

This property is read/write when the connection is closed.

The provider name can also be set with the ConnectionString property of the Connection object or the ConnectionString parameter of the Open method.

Note: Never set the provider for a specific Connection in more than one place.

Syntax

connobj.Provider

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

response.write(conn.Provider)

conn.close

%>

Provider Codes

Provider Code | Provider
ADSDSOObject | Active Directory Services
Microsoft.Jet.OLEDB.4.0 | Microsoft Jet databases
MSDAIPP.DSO.1 | Microsoft Internet Publishing
MSDAORA | Oracle databases
MSDAOSP | Simple text files
MSDASQL | Microsoft OLE DB provider for ODBC
MSDataShape | Microsoft Data Shape
MSPersist | Locally saved files
SQLOLEDB | Microsoft SQL Server


ADO Queries

We may use SQL to create queries to specify only a selected set of records and fields to view.

Examples

Display records where " Companyname" starts with an A

How to display only the records from the "Customers" table that have a "Companyname" that starts with an A.

Display records where " Companyname" is >

How to display only the records from the "Customers" table that have a "Companyname" that is larger than E.

Display only Spanish customers

How to display only the Spanish customers from the "Customers" table.

Let the user choose filter

Let the user choose which country to show customers from.

Display Selected Data

We want to display only the records from the "Customers" table that have a "Companyname" that starts with an A (remember to save the file with an .asp extension):

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs=Server.CreateObject("ADODB.recordset")

sql="SELECT Companyname, Contactname FROM Customers

WHERE CompanyName LIKE 'A%'"

rs.Open sql, conn

%>

<table border="1" width="100%">

<tr>

<%for each x in rs.Fields

  response.write("<th>" & x.name & "</th>")

next%>

</tr>

<%do until rs.EOF%>

  <tr>

  <%for each x in rs.Fields%>

    <td><%Response.Write(x.value)%></td>

  <%next

  rs.MoveNext%>

  </tr>

<%loop

rs.close

conn.close%>

</table>

</body>

</html>

Here is the result:

Companyname | Contactname
Alfreds Futterkiste | Maria Anders


ADO Read Method

The Read method is used to read the entire stream or a specified number of bytes from a binary Stream object and returns the resulting data as a variant.

Note: This method is only used with binary Stream objects, for text Stream objects, use the ReadText method.

Syntax

var=objStream.Read numbytes

Parameter | Description
numbytes | Optional. The number of bytes to read from the file, or a StreamReadEnum value. Default is adReadAll If you have specified more than the number of bytes left in the Stream, only the bytes remaining are returned.

StreamReadEnum Values

Constant | Value | Description
adReadAll | -1 | Default. Reads all bytes from the stream, from the current position to EOS. Note: This is the only valid value with binary Stream objects


ADO ReadText Method

The ReadText method is used to read the entire stream, a line, or a specified number of characters from a text Stream object and returns the resulting data as a string.

Note: This method is only used with text Stream objects, for binary Stream objects, use the Read method.

Syntax

str=objStream.ReadText numchars

Parameter

Description

numchars

Optional. The number of characters to read from the file, or a StreamReadEnum value. Default is adReadAll

If you have specified more than the number of characters left in the Stream, only the character remaining are returned

StreamReadEnum Values

Constant | Value | Description
adReadAll | -1 | Default. Reads all characters from the stream, from the current position to EOS
adReadLine | -2 | Reads the next line from the stream


ADO Record Object

Record Object (ADO version 2.5)

The ADO Record object is used to hold a row in a Recordset, a directory, or a file from a file system.

Only structured databases could be accessed by ADO in versions prior 2.5. In a structured database, each table has the exact same number of columns in each row, and each column is composed of the same data type.

The Record object allows access to data-sets where the number of columns and/or the data type can be different from row to row.

Syntax

objectname.property

objectname.method

Properties

Property | Description
 | Sets or returns which Connection object a Record object belongs to
Mode | Sets or returns the permission for modifying data in a Record object
 | Returns the absolute URL of the parent Record
RecordType | Returns the type of a Record object
Source | Sets or returns the src parameter of the Open method of a Record object
State | Returns the status of a Record object

Methods

Method | Description
Cancel | Cancels an execution of a CopyRecord, DeleteRecord, MoveRecord, or Open call
Close | Closes a Record object
CopyRecord | Copies a file or directory to another location
DeleteRecord | Deletes a file or directory
GetChildren | Returns a Recordset object where each row represents the files in the directory
MoveRecord | Moves a file or a directory to another location
 | Opens an existing Record object or creates a new file or directory

Collections

Collection | Description
Properties | A collection of provider-specific properties
Fields | Contains all the Field objects in the Record object

The Fields Collection's Properties

Property | Description
Count | Returns the number of items in the fields collection. Starts at zero. Example: countfields = rec.Fields.Count
Item(named_item/number) | Returns a specified item in the fields collection. Example: itemfields = rec.Fields.Item(1) or itemfields = rec.Fields.Item("Name")


ADO RecordCount Property

The RecordCount property returns a long value that indicates the number of records in a Recordset object.

If the Recordset object supports AbsolutePosition and AbsolutePage properties or bookmarks (if Supports(adApproxPosition) or Supports(adBookmark) returns true), this property will return the exact number of records in the Recordset.

Note: This property will return -1 for a forward-only cursor; the actual count for a static or keyset cursor; and -1 or the actual count for a dynamic cursor.

Note: The Recordset object must be open when calling this property. If this property is not supported it will return -1.

Syntax

objRecordset.RecordCount

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("northwind.mdb"))

set rs=Server.CreateObject("ADODB.recordset")

sql="SELECT * FROM Customers"

rs.Open sql,conn

if rs.Supports(adApproxPosition)=true then

i=rs.RecordCount

response.write("The number of records is: " & i)

end if

rs.Close

conn.Close

%>


ADO Recordset

To be able to read database data, the data must first be loaded into a recordset.

Create an ADO Table Recordset

After an ADO Database Connection has been created, as demonstrated in the previous chapter, it is possible to create an ADO Recordset.

Suppose we have a database named "Northwind", we can get access to the "Customers" table inside the database with the following lines:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs=Server.CreateObject("ADODB.recordset")

rs.Open "Customers", conn

%>

Create an ADO SQL Recordset

We can also get access to the data in the "Customers" table using SQL:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs=Server.CreateObject("ADODB.recordset")

rs.Open "Select * from Customers", conn

%>

Extract Data from the Recordset

After a recordset is opened, we can extract data from recordset.

Suppose we have a database named "Northwind", we can get access to the "Customers" table inside the database with the following lines:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs=Server.CreateObject("ADODB.recordset")

rs.Open "Select * from Customers", conn

for each x in rs.fields

 response.write(x.name)

 response.write(" = ")

 response.write(x.value)

next

%>

The ADO Recordset Object

The ADO Recordset object is used to hold a set of records from a database table.

View all methods and properties of the Recordset object.


ADO Recordset Object

Examples

GetRows

This example demonstrates how to use the GetRows method.

Recordset Object

The ADO Recordset object is used to hold a set of records from a database table. A Recordset object consist of records and columns (fields).

In ADO, this object is the most important and the one used most often to manipulate data from a database.

ProgID

set objRecordset=Server.CreateObject("ADODB.recordset")

When you first open a Recordset, the current record pointer will point to the first record and the BOF and EOF properties are False. If there are no records, the BOF and EOF property are True.

Recordset objects can support two types of updating:

· Immediate updating - all changes are written immediately to the database once you call the Update method.
· Batch updating - the provider will cache multiple changes and then send them to the database with the UpdateBatch method.

In ADO there are 4 different cursor types defined:

· Dynamic cursor - Allows you to see additions, changes, and deletions by other users.
· Keyset cursor - Like a dynamic cursor, except that you cannot see additions by other users, and it prevents access to records that other users have deleted. Data changes by other users will still be visible.
· Static cursor - Provides a static copy of a recordset for you to use to find data or generate reports. Additions, changes, or deletions by other users will not be visible. This is the only type of cursor allowed when you open a client-side Recordset object.
· Forward-only cursor - Allows you to only scroll forward through the Recordset. Additions, changes, or deletions by other users will not be visible.

The cursor type can be set by the CursorType property or by the CursorType parameter in the Open method.

Note: Not all providers support all methods or properties of the Recordset object.

Properties

Property | Description
AbsolutePage | Sets or returns a value that specifies the page number in the Recordset object
AbsolutePosition | Sets or returns a value that specifies the ordinal position of the current record in the Recordset object
ActiveCommand | Returns the Command object associated with the Recordset
ActiveConnection | Sets or returns a definition for a connection if the connection is closed, or the current Connection object if the connection is open
BOF | Returns true if the current record position is before the first record, otherwise false
Bookmark | Sets or returns a bookmark. The bookmark saves the position of the current record
 | Sets or returns the number of records that can be cached
 | Sets or returns the location of the cursor service
 | Sets or returns the cursor type of a Recordset object
DataMember | Sets or returns the name of the data member that will be retrieved from the object referenced by the DataSource property
DataSource | Specifies an object containing data to be represented as a Recordset object
EditMode | Returns the editing status of the current record
EOF | Returns true if the current record position is after the last record, otherwise false
Filter | Sets or returns a filter for the data in a Recordset object
Index | Sets or returns the name of the current index for a Recordset object
LockType | Sets or returns a value that specifies the type of locking when editing a record in a Recordset
 | Sets or returns a value that specifies which records are to be returned to the server
 | Sets or returns the maximum number of records to return to a Recordset object from a query
PageCount | Returns the number of pages with data in a Recordset object
PageSize | Sets or returns the maximum number of records allowed on a single page of a Recordset object
RecordCount | Returns the number of records in a Recordset object
 | Sets or returns the field names in the Recordset to sort on
Source | Sets a string value or a Command object reference, or returns a String value that indicates the data source of the Recordset object
State | Returns a value that describes if the Recordset object is open, closed, connecting, executing or retrieving data
Status | Returns the status of the current record with regard to batch updates or other bulk operations
 | Sets or returns whether the reference to the child records will change when the parent record position changes

Methods

Method | Description
 | Creates a new record
Cancel | Cancels an execution
CancelBatch | Cancels a batch update
CancelUpdate | Cancels changes made to a record of a Recordset object
 | Creates a duplicate of an existing Recordset
Close | Closes a Recordset
CompareBookmarks | Compares two bookmarks
Delete | Deletes a record or a group of records
Find | Searches for a record in a Recordset that satisfies a specified criteria
GetRows | Copies multiple records from a Recordset object into a two-dimensional array
GetString | Returns a Recordset as a string
 | Moves the record pointer in a Recordset object
 | Moves the record pointer to the first record
MoveLast | Moves the record pointer to the last record
MoveNext | Moves the record pointer to the next record
MovePrevious | Moves the record pointer to the previous record
NextRecordset | Clears the current Recordset object and returns the next Recordset object by looping through a series of commands
Open | Opens a database element that gives you access to records in a table, the results of a query, or to a saved Recordset
 | Updates the data in a Recordset by re-executing the query that made the original Recordset
Resync | Refreshes the data in the current Recordset from the original database
 | Saves a Recordset object to a file or a Stream object
Seek | Searches the index of a Recordset to find a record that matches the specified values
Supports | Returns a boolean value that defines whether or not a Recordset object supports a specific type of functionality
Update | Saves all changes made to a single record in a Recordset object
 | Saves all changes in a Recordset to the database. Used when working in batch update mode

Events

Note: You cannot handle events using VBScript or JScript (only Visual Basic, Visual C++, and Visual J++ languages can handle events).

Event | Description
 | Triggered when you try to move to a record after the last record
FetchComplete | Triggered after all records in an asynchronous operation have been fetched
FetchProgress | Triggered periodically in an asynchronous operation, to state how many more records that have been fetched
 | Triggered after the value of a Field object change
MoveComplete | Triggered after the current position in the Recordset has changed
RecordChangeComplete | Triggered after a record has changed
RecordsetChangeComplete | Triggered after the Recordset has changed
WillChangeField | Triggered before the value of a Field object change
WillChangeRecord | Triggered before a record change
WillChangeRecordset | Triggered before a Recordset change
 | Triggered before the current position in the Recordset changes

Collections

Collection | Description
Fields | Indicates the number of Field objects in the Recordset object
Properties | Contains all the Property objects in the Recordset object

The Fields Collection's Properties

Property | Description
Count | Returns the number of items in the fields collection. Starts at zero. Example: countfields = rs.Fields.Count
Item(named_item/number) | Returns a specified item in the fields collection. Example: itemfields = rs.Fields.Item(1) or itemfields = rs.Fields.Item("Name")

The Properties Collection's Properties

Property | Description
Count | Returns the number of items in the properties collection. Starts at zero. Example: countprop = rs.Properties.Count
Item(named_item/number) | Returns a specified item in the properties collection. Example: itemprop = rs.Properties.Item(1) or itemprop = rs.Properties.Item("Name")


ADO RecordType Property

The RecordType property returns a value that indicates the type of a Record object.

Syntax

rectype=objrecord.RecordType

RecordTypeEnum Values

Constant | Value | Description
adRecordUnknown | -1 | An unknown Record type
adSimpleRecord | 0 | A simple Record type that does not contain child nodes
adCollectionRecord | 1 | A collection Record type that contains child nodes
adStructDoc | 2 | A Record type that represents COM structured documents


ADO Requery Method

The Requery method updates the data in a Recordset by re-executing the query that made the original Recordset.

Tip: Use this method to refresh the entire contents of a Recordset.

Note: With this method you call the Close and Open methods in one.

Syntax

objRecordset.Requery options

Parameter | Description
options | Optional. Specifies how to execute this command. Can be an ExecuteOptionEnum value

ExecuteOptionEnum Values

Constant | Value | Description
adOptionUnspecified | -1 | Unspecified command
adAsyncExecute | 16 | The command should execute asynchronously. Cannot be combined with the CommandTypeEnum value adCmdTableDirect
adAsyncFetch | 32 | The remaining rows after the initial quantity specified in the CacheSize property should be retrieved asynchronously
adAsyncFetchNonBlocking | 64 | The main thread never blocks while retrieving. If the requested row has not been retrieved, the current row automatically moves to the end of the file. If you open a Recordset from a Stream containing a persistently stored Recordset, adAsyncFetchNonBlocking will not have an effect; the operation will be synchronous and blocking. adAsynchFetchNonBlocking has no effect when the adCmdTableDirect option is used to open the Recordset
adExecuteRecord | 512 | The CommandText is a command or stored procedure that returns a single row which should be returned as a Record object


ADO Resync Method

The Resync method refreshes the data in a Recordset.

Tip: Use this method to resynchronize the Recordset with the database. If you want to see changes in the database and you are using a static or forward-only Recordset, this method is useful.

Note: This method does not re-execute the Recordset, so new records in the database will NOT be visible.

Syntax

objRecordset.Resync affectrecords,resyncvalues

Parameter | Description
affectrecords | Optional. An value that specifies which records this method will affect. Default is adAffectAll
resyncvalues | Optional. A ResyncEnum value that specifies if underlying values are overwritten. Default is adResyncAllValues

AffectEnum Values

Constant | Value | Description
adAffectCurrent | 1 | Affects only the current record
adAffectGroup | 2 | Affects only records that satisfy the Filter setting (Filter must be set to a FilterGroupEnum value or an array of Bookmarks)
adAffectAll | 3 | Affects all records if there is no Filter. Affects only visible records in the current chapter if Filter is set to a string criteria. Affect all rows of the Recordset if Filter is set to a FilterGroupEnum value or an array of Bookmarks
adAffectAllChapters | 4 | Affects all records in all child Recordset, including those hidden by a currently applied filter

ResyncEnum Values

Constant | Value | Description
adResyncAllValues | 2 | Default. Overwrites data, and pending updates are canceled
adResyncUnderlyingValues | 1 | Does not overwrite data, and pending updates are not canceled


ADO Save Method

The Save method saves a Recordset object to a file or a Stream object. When the save method is finished, the record pointer will point at the first record of the Recordset.

Note: If there is a filter applied to the Recordset, only the "filtered" records will be saved.

Note: This method can only be called on an open Recordset.

Syntax

objRecordset.Save destination,persistformat

Parameter | Description
destination | Optional. Specifies where to save the Recordset object; the path name of a file or a reference to a Stream object
persistformat | Optional. A value that specifies the format of the Recordset (XML or ADTG). Default is adPersistADTG

Example

You can save a Recordset in XML format:

<%

set xmlDoc=CreateObject("Microsoft.XMLDOM")

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.recordset")

rs.Open "Customers", conn

'Save the Recordset into a DOM tree

rs.Save xmldoc, 1

%>

PersistFormatEnum Values

Constant | Value | Description
adPersistADTG | 0 | Saves in a Microsoft Advanced Data TableGram (ADTG) format.
adPersistXML | 1 | Saves in Extensible Markup Language (XML) format
adPersistADO | 1 | Saves in ADO's own Extensible Markup Language (XML) format. This value is the same as adPersistXML and is included for backwards compatibility
adPersistProviderSpecific | 2 | The provider will persist the Recordset using its own format


ADO SaveToFile Method

The SaveToFile method is used to save the binary contents of an open Stream object to a local file.

Note: After a call to this method, the current position in the stream is set to the beginning of the stream (Position=0).

Syntax

objStream.SaveToFile filename,opt

Parameter | Description
filename | Required. The name of the file to save the contents of the Stream object
opt | Optional. A SaveOptionsEnum value that specifies whether a file should be created if it does not exist or overwritten. Default is adSaveCreateNotExist. The values can be combined with the AND operator

SaveOptionsEnum Values

Constant | Value | Description
adSaveCreateNotExist | 1 | Default. Creates a new file if the file does not already exist
adSaveCreateOverWrite | 2 | Overwrites the file with the data from the currently open Stream object, if the file already exists


ADO Seek Method

The Seek method searches the index of a Recordset to find a record that matches the values specified in the keyvalues parameter. If there is a match, the pointer will point to the record specified by the seekoption parameter. If there is no match, the record pointer will be placed at the end of the Recordset.

Note: To use this method, the provider must support this method and the use of indexes on a Recordset (the Index property). Use the Supports method to determine whether the provider supports seek and indexes.

Note: Set the Index property to the desired index before executing this method.

Note: This method can only be used with server-side cursors (not supported when the CursorLocation property value is adUseClient).

Note: This method can only be used when the Recordset object was opened with the CommandTypeEnum value of adCmdTableDirect.

Syntax

recordsetobj.Seek keyvalues,seekoption

Parameter | Description
keyvalues | Required. An array of values to compare with the values in each column
seekoption | Required. A SeekEnum value that specifies the type of seek

SeekEnum Values

Constant | Value | Description
adSeekFirstEQ | 1 | Seeks the first key equal to keyvalues
adSeekLastEQ | 2 | Seeks the last key equal to keyvalues
adSeekAfterEQ | 4 | Seeks either a key equal to keyvalues or just after where that match would have occurred
adSeekAfter | 8 | Seeks a key just after where a match with keyvalues would have occurred
adSeekBeforeEQ | 16 | Seeks either a key equal to keyvalues or just before where that match would have occurred
adSeekBefore | 32 | Seeks a key just before where a match with keyvalues would have occurred


ADO SetEOS Method

The SetEOS method is used to set the current position to be the end of the stream (EOS). This method also updates the EOS property.

Note: Any data beyond the new EOS will be truncated and lost.

Syntax

objStream.SetEOS


ADO Size Property

The Size property sets or returns a long value that indicates the maximum size in bytes or characters of a value in a Parameter object.

Syntax

objparameter.Size

Example

<%

set comm=Server.CreateObject("ADODB.Command")

set para=Server.CreateObject("ADODB.Parameter")

para.Type=adVarChar

para.Size=25

para.Direction=adParamInput

para.Value=varfname

comm.Parameters.Append para

%>


ADO Size Property

The Size property returns a long value that indicates the size (in bytes) of a Stream object.

Note: This property can only be used on an open Stream object.

Note: This property returns -1 if the size of the stream is unknown.

Syntax

objStream.Size


ADO SkipLine Method

The SkipLine method is used to skip a line when reading a text Stream. All characters including the line separator, are skipped. Default line separator is adCRLF.

Note: This method is only used with text Stream objects.

Syntax

objStream.SkipLine


ADO Sort

We may use SQL to specify how to sort the data in the record set.

Examples

ascending

How to sort the data on a specified fieldname.

Sort the records on a specified fieldname descending

How to sort the data on a specified fieldname.

Let the user choose what column to sort on

Let the user choose what column to sort on.

Sort the Data

We want to display the "Companyname" and "Contactname" fields from the "Customers" table, ordered by "Companyname" (remember to save the file with an .asp extension):

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.recordset")

sql="SELECT Companyname, Contactname FROM

Customers ORDER BY CompanyName"

rs.Open sql, conn

%>

<table border="1" width="100%">

<tr>

<%for each x in rs.Fields

  response.write("<th>" & x.name & "</th>")

next%>

</tr>

<%do until rs.EOF%>

  <tr>

  <%for each x in rs.Fields%>

    <td><%Response.Write(x.value)%></td>

  <%next

  rs.MoveNext%>

  </tr>

<%loop

rs.close

conn.close%>

</table>

</body>

</html>

Here is the result:

Companyname | Contactname
Alfreds Futterkiste | Maria Anders
Berglunds snabbköp | Christina Berglund
Centro comercial Moctezuma | Francisco Chang
Ernst Handel | Roland Mendel
FISSA Fabrica Inter. Salchichas S.A. | Diego Roel
Galería del gastrónomo | Eduardo Saavedra
Island Trading | Helen Bennett
Königlich Essen | Philip Cramer
Laughing Bacchus Wine Cellars | Yoshi Tannamuri
Magazzini Alimentari Riuniti | Giovanni Rovelli
North/South | Simon Crowther
Paris spécialités | Marie Bertrand
Rattlesnake Canyon Grocery | Paula Wilson
Simons bistro | Jytte Petersen
The Big Cheese | Liz Nixon
Vaffeljernet | Palle Ibsen
Wolski Zajazd | Zbyszek Piestrzeniewicz


ADO Sort Property

The Sort property sets or returns a string value that specifies the field names in the Recordset to sort on. Each field name must be separated by a comma. To choose the sort order, you can specify ASC (ascending order), or DESC (descending order) after the field name. Default is ASC.

Note: This property can only be used if the CursorLocation property is set to adUseClient.

Tip: If you set this property to an empty string (rs.Sort="") it will reset the records to their original order.

Syntax

objRecordset.Sort

Example

<%

rs.Sort="CompanyName,ContactName"

%>

or

<%

rs.Sort="CompanyName DESC,ContactName"

%>

or

<%

rs.Sort="CompanyName,ContactName,[Ship Address]"

%>


ADO Source Property

The Source property returns a string value that contains the name of the object or application that generated the error.

Syntax

strErrorSource=objErr.Source

Example

<%

for each objErr in objConn.Errors

response.write("<p>")

response.write("Description: ")

response.write(objErr.Description & "<br />")

response.write("Help context: ")

response.write(objErr.HelpContext & "<br />")

response.write("Help file: ")

response.write(objErr.HelpFile & "<br />")

response.write("Native error: ")

response.write(objErr.NativeError & "<br />")

response.write("Error number: ")

response.write(objErr.Number & "<br />")

response.write("Error source: ")

response.write(objErr.Source & "<br />")

response.write("SQL state: ")

response.write(objErr.SQLState & "<br />")

response.write("</p>")

next

%>


ADO Source Property

The Source property sets or returns a variant that contains the src parameter of the Open method of the Record object.

This property is read/write when the Record object is closed, and read-only when the Record object is open.

Syntax

varSource=objrecord.Source


ADO Source Property

The Source property sets a string value or a Command object reference, or returns a String value that indicates the data source of the Recordset object.

The data source can be one of the following:

· A Command object
· An SQL statement
· A stored procedure
· A table name

This property is read/write on a closed Recordset objects and read-only for an open Recordset object.

Syntax

objRecordset.Source


ADO Speed Up Script With GetString()

Use the GetString() method to speed up your ASP script (instead of using multiple Response.Write's).

Examples

Using GetString()

How to use GetString() to display data from a recordset in an HTML table.

Multiple Response.Write's

The following example demonstrates one way of how to display a database query in an HTML table:

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.recordset")

rs.Open "SELECT Companyname, Contactname FROM Customers", conn

%>

<table border="1" width="100%">

<%do until rs.EOF%>

 <tr>

    <td><%Response.Write(rs.fields("Companyname"))%></td>

    <td><%Response.Write(rs.fields("Contactname"))%></td>

 </tr>

<%rs.MoveNext

loop%>

</table>

<%

rs.close

conn.close

set rs = Nothing

set conn = Nothing

%>

</body>

</html>

For a large query, this can slow down the script processing time, since many Response.Write commands must be processed by the server.

The solution is to have the entire string created, from <table> to </table>, and then output it - using Response.Write just once.

The GetString() Method

The GetString() method allows you to display the string with only one Response.Write. It also eliminates the do...loop code and the conditional test that checks if the recordset is at EOF.

Syntax

str = rs.GetString(format,rows,coldel,rowdel,nullexpr)

To create an HTML table with data from a recordset, we only need to use three of the parameters above (all parameters are optional):

· coldel - the HTML to use as a column-separator
· rowdel - the HTML to use as a row-separator
· nullexpr - the HTML to use if a column is NULL

Note: The GetString() method is an ADO 2.0 feature. You can download ADO 2.0 at .

In the following example we will use the GetString() method to hold the recordset as a string:

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.recordset")

rs.Open "SELECT Companyname, Contactname FROM Customers", conn

str=rs.GetString(,,"</td><td>","</td></tr><tr><td>","&nbsp;")

%>

<table border="1" width="100%">

<tr>

  <td><%Response.Write(str)%></td>

</tr>

</table>

<%

rs.close

conn.close

set rs = Nothing

set conn = Nothing

%>

</body>

</html>

The str variable above contains a string of all the columns and rows returned by the SQL SELECT statement. Between each column the HTML </td><td> will appear, and between each row, the HTML </td></tr><tr><td> will appear. This will produce the exact HTML we need with only one Response.Write.


ADO SQLState Property

The SQLState property returns a string that contains a 5-character SQL error code returned by the provider.

Syntax

strErrorSQL=objErr.SQLState

Example

<%

for each objErr in objConn.Errors

response.write("<p>")

response.write("Description: ")

response.write(objErr.Description & "<br />")

response.write("Help context: ")

response.write(objErr.HelpContext & "<br />")

response.write("Help file: ")

response.write(objErr.HelpFile & "<br />")

response.write("Native error: ")

response.write(objErr.NativeError & "<br />")

response.write("Error number: ")

response.write(objErr.Number & "<br />")

response.write("Error source: ")

response.write(objErr.Source & "<br />")

response.write("SQL state: ")

response.write(objErr.SQLState & "<br />")

response.write("</p>")

next

%>


ADO State Property

The State property returns a value that describes if the object is open, closed, connecting, executing or retrieving data. The value returns an ObjectStateEnum value. Default is adStateClosed.

This property can be used with the Command, Connection, Record, Recordset, and Stream object.

The State property can have a combination of values. If a statement is executing, this property will have a combined value of adStateOpen and adStateExecuting.

Syntax

object.State

Example

For a Command object:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set comm=Server.CreateObject("ADODB.Command")

response.write(comm.State)

conn.close

%>

For a Connection object:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

response.write(conn.State)

conn.close

%>

ObjectStateEnum Values

Specifies whether an object is open or closed, connecting to a data source, executing a command, or retrieving data.

Constant | Value | Description
adStateClosed | 0 | The object is closed
adStateOpen | 1 | The object is open
adStateConnecting | 2 | The object is connecting
adStateExecuting | 4 | The object is executing a command
adStateFetching | 8 | The rows of the object are being retrieved


ADO Status Property

The Status property returns a FieldStatusEnum value that indicates the status of a Field object. Default value is adFieldOK.

If any updates fail then an error is returned and the Status property indicates the combined values of the operation and error status code. The Status property for each Field can be used to determine why the Field was not added, modified, or deleted.

Problems with adding, modifying, or deleting a Field are reported through this property. For example, if a user deletes a Field, it will be marked for deletion in the Fields collection. If the Update call returns an error because the user tried to delete a Field for which he does not have permission, the Status for this field will be adFieldPermissionDenied or adFieldPendingDelete.

Syntax

objfield.Status

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.Recordset")

rs.open "Select * from orders", conn

response.write(rs.Fields(0).Status)

rs.Close

conn.close

%>

FieldStatusEnum Values

Constant | Value | Description
adFieldOK | 0 | Default. The field was successfully added or deleted
adFieldCantConvertValue | 2 | The field cannot be retrieved or stored without loss of data
adFieldIsNull | 3 | The provider returned a null value
adFieldTruncated | 4 | Variable-length data was truncated when reading from the data source
adFieldSignMismatch | 5 | The data value returned by the provider was signed, but the data type of the ADO field value was unsigned
adFieldDataOverflow | 6 | The data returned from the provider overflowed the data type of the field
adFieldCantCreate | 7 | The field could not be added because the provider exceeded a limitation
adFieldUnavailable | 8 | The provider could not determine the value when reading from the data source
adFieldPermissionDenied | 9 | The field cannot be modified because it is read-only
adFieldIntegrityViolation | 10 | The field cannot be modified because it is a calculated or derived entity
adFieldSchemaViolation | 11 | The value violated the data source schema constraint for the field
adFieldBadStatus | 12 | An invalid status value was sent from ADO to the OLE DB provider
adFieldDefault | 13 | The default value for the field was used when setting data
adFieldIgnore | 15 | This field was skipped when setting data values in the source
adFieldDoesNotExist | 16 | The field does not exist
adFieldInvalidURL | 17 | The data source URL contains invalid characters
adFieldResourceLocked | 18 | The provider cannot perform the operation because the data source is locked
adFieldResourceExists | 19 | The provider cannot perform the operation because an object already exists at the destination URL and it is not able to overwrite the object
adFieldCannotComplete | 20 | The server of the URL specified by Source could not complete the operation
adFieldVolumeNotFound | 21 | The provider is unable to locate the storage volume indicated by the URL
adFieldOutOfSpace | 22 | The provider is unable to obtain enough storage space to complete a move or copy operation
adFieldCannotDeleteSource | 23 | During a move operation, a tree or subtree was moved to a new location, but the source could not be deleted
adFieldReadOnly | 24 | The field in the data source is read-only
adFieldResourceOutOfScope | 25 | A source or destination URL is outside the scope of the current record
adFieldAlreadyExists | 26 | The specified field already exists
adFieldPendingInsert | 0x10000 | The Append operation caused the status to be set. The field has been marked to be added to the Fields collection after the Update method is called
adFieldPendingDelete | 0x20000 | The Delete operation caused the status to be set. The field has been marked for deletion from the Fields collection after the Update method is called
adFieldPendingChange | 0x40000 | The field has been deleted and then re-added or the value of the field which previously had a status of adFieldOK has changed
adFieldPendingUnknown | 0x80000 | The provider cannot determine what operation caused field status to be set
adFieldPendingUnknownDelete | 0x100000 | The provider cannot determine what operation caused field status to be set, and that the field will be deleted from the Fields collection after the Update method is called.


ADO Status Property

The Status property returns one or more RecordStatusEnum value that indicates the status of the current record with regard to batch updates or other bulk operations.

Syntax

objRecordset.Status

RecordStatusEnum

Constant | Value | Description
adRecOK | 0 | Record successfully updated
adRecNew | 0x1 | Record is new
adRecModified | 0x2 | Record modified
adRecDeleted | 0x4 | Record deleted
adRecUnmodified | 0x8 | Record not modified
adRecInvalid | 0x10 | Record not saved; invalid bookmark
adRecMultipleChanges | 0x40 | Record not saved; would have affected multiple records
adRecPendingChanges | 0x80 | Record not saved; refers to a pending insert
adRecCanceled | 0x100 | Record not saved; operation was canceled
adRecCantRelease | 0x400 | New record not saved; existing record was locked
adRecConcurrencyViolation | 0x800 | Record not saved; optimistic concurrency was in use
adRecIntegrityViolation | 0x1000 | Record not saved; user violated integrity constraints
adRecMaxChangesExceeded | 0x2000 | Record not saved; too many pending changes
adRecObjectOpen | 0x4000 | Record not saved; conflict with an open storage object
adRecOutOfMemory | 0x8000 | Record not saved; computer has run out of memory
adRecPermissionDenied | 0x10000 | Record not saved; user has insufficient permissions
adRecSchemaViolation | 0x20000 | Record not saved; violates the structure of the database
adRecDBDeleted | 0x40000 | Record already deleted from the data source


ADO StayInSync Property

The StayInSync property sets or returns a boolean value that indicates whether the reference to the child records will change when the parent record position changes. Default value is true, which means that the child records will be updated if the parent Recordset object changes record position.

Note: This property is used with hierarchical recordsets.

Note: This property must be set on the parent Recordset before the child Recordset is retrieved.

Syntax

objRecordset.StayInSync


ADO Stream Object

Stream Object (ADO version 2.5)

The ADO Stream Object is used to read, write, and manage a stream of binary data or text.

A Stream object can be obtained in three ways:

· From a URL pointing to a document, a folder, or a Record object
· By instantiating a Stream object to store data for your application
· By opening the default Stream object associated with a Record object

Syntax

objectname.property

objectname.method

Properties

Property | Description
CharSet | Sets or returns a value that specifies into which character set the contents are to be translated. This property is only used with text Stream objects (type is adTypeText)
EOS | Returns whether the current position is at the end of the stream or not
LineSeparator | Sets or returns the line separator character used in a text Stream object
Mode | Sets or returns the available permissions for modifying data
Position | Sets or returns the current position (in bytes) from the beginning of a Stream object
Size | Returns the size of an open Stream object
State | Returns a value describing if the Stream object is open or closed
Type | Sets or returns the type of data in a Stream object

Methods

Method | Description
Cancel | Cancels an execution of an Open call on a Stream object
 | Closes a Stream object
CopyTo | Copies a specified number of characters/bytes from one Stream object into another Stream object
Flush | Sends the contents of the Stream buffer to the associated underlying object
LoadFromFile | Loads the contents of a file into a Stream object
Open | Opens a Stream object
 | Reads the entire stream or a specified number of bytes from a binary Stream object
ReadText | Reads the entire stream, a line, or a specified number of characters from a text Stream object
 | Saves the binary contents of a Stream object to a file
SetEOS | Sets the current position to be the end of the stream (EOS)
SkipLine | Skips a line when reading a text Stream
Write | Writes binary data to a binary Stream object
WriteText | Writes character data to a text Stream object


ADO Summary

You Have Learned ADO, Now What?

 Top Previous Next

ADO Summary

This tutorial has taught you how to access data in a database from a web site.

You have learned how to display data from a database on a web site, and how to edit, add and delete the data with ADO.

For more information on ADO, please look at our ADO examples.

Now You Know ADO, What's Next?

The next step is to learn SQL.

SQL is a 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, and other database systems.

If you want to learn more about SQL, please visit our SQL tutorial.


ADO Supports Method

The Supports method returns a boolean value that defines whether or not a Recordset object supports a specific type of functionality.

Note: This method returns true if the specified feature is supported, false if not.

Syntax

objRecordset.Supports(cursoroptions)

Parameter | Description
cursoroptions | Required. One or more CursorOptionEnum values that specifies what functionality this method should test for

CursorOptionEnum

Constant | Value | Description
adHoldRecords | 0x100 | Retrieves more records or changes the next position without committing all pending changes
adMovePrevious | 0x200 | Supports the MoveFirst and MovePrevious methods, and Move or GetRows methods
adBookmark | 0x2000 | Supports the Bookmark property
adApproxPosition | 0x4000 | Supports the AbsolutePosition and AbsolutePage properties
adUpdateBatch | 0x10000 | Supports UpdateBatch and CancelBatch methods
adResync | 0x20000 | Supports the Resync method
adNotify | 0x40000 | Indicates that the data provider supports notifications (which determines whether Recordset events are supported)
adFind | 0x80000 | Supports the Find method
adIndex | 0x100000 | Supports the Index property
adSeek | 0x200000 | Supports the Seek method
adAddNew | 0x1000400 | Supports the AddNew method
adDelete | 0x1000800 | Supports the Delete method
adUpdate | 0x1008000 | Supports the Update method


ADO The CopyRecord Method and MoveRecord Methods

ADO CopyRecord and MoveRecord Methods

CopyRecord

The CopyRecord method copies a file or directory to another location.

MoveRecord

The MoveRecord method moves a file or directory to another location.

Note: The ParentURL property will not be automatically updated. You must close the Record and then open it again with the new URL.

Syntax

CopyRecord(src,dest,username,psword,opt,async)

MoveRecord(src,dest,username,psword,opt,async)

Parameter

Description

src

Optional. The URL of the file or directory that will be copied/moved

dest

Optional. The URL to the location where src will be copied/moved

username

Optional. The user ID that authorizes access to dest

psword

Optional. The password that verifies username

opt

For CopyRecord: Optional. A CopyRecordOptionsEnum value that specifies the behavior of this method. Default is adCopyUnspecified

For MoveRecord: Optional. A MoveRecordOptionsEnum value that specifies the behavior of this method. Default is adMoveUnspecified

async

Optional. A Boolean value that, when True, sets this operation to be asynchronous

CopyRecordOptionsEnum Values

Constant | Value | Description
adCopyUnspecified | -1 | Default. Will not allow over write or recursive copy
adCopyOverWrite | 1 | Overwrites the file/directory if it already exists
adCopyNonRecursive | 2 | Copies the current directory (none of its subdirectories) to the destination (this operation is not recursive)
adCopyAllowEmulation | 4 | Requests that the provider attempt to simulate the copy. If the attempt to copy the Record fails because the destination URL is on a different server or serviced by a different provider than the source, this may cause data loss

MoveRecordOptionsEnum Values

Constant | Value | Description
adMoveUnspecified | -1 | Default. Will not overwrite any file/ directory at the destination location. Will also update links
adMoveOverWrite | 1 | Overwrites the file/directory if it already exists
adMoveDontUpdateLinks | 2 | Modifies the default behavior of MoveRecord method by not updating the links of the source Record. The default behavior depends on the capabilities of the provider
adMoveAllowEmulation | 4 | Requests that the provider attempt to simulate the move. If the attempt to move the Record fails because the destination URL is on a different server or serviced by a different provider than the source, this may cause data loss


ADO The WillChangeField and FieldChangeComplete Events

ADO WillChangeField and FieldChangeComplete Events

The WillChangeField Event

The WillChangeField event is triggered before the values of one or more Field Objects are changing.

Note: Before this event returns, set the status parameter to adStatusCancel to cancel the operation that caused this event.

The FieldChangeComplete Event

The FieldChangeComplete event is triggered after the values of one or more Field Objects have been changed.

Note: Before this event returns, set the status parameter to adStatusUnwantedEvent to prevent subsequent notifications.

Note: The WillChangeField event and the FieldChangeComplete event may occur when you set the Value property and calls the Update method with field and value array parameters.

Syntax

WillChangeField numfields,fields,status,objRs

FieldChangeComplete numfields,fields,objErr,status,objRs

Parameter | Description
numfields | The number of Field objects in fields
fields | An array that contains Field objects with changes
status | An EventStatusEnum value that indicates the status of the execution of the event
objErr | The name of an Error object that describes the error if status is set to adStatusErrorsOccurred, otherwise it is not set
objRs | The name of the Recordset Object that triggered this event

EventStatusEnum Values

Constant | Value | Description
adStatusOK | 1 | The operation that caused the event was successful
adStatusErrorsOccurred | 2 | The operation that caused the event failed
adStatusCantDeny | 3 | The operation that caused the event cannot be cancelled
adStatusCancel | 4 | The operation that caused the event is cancelled
adStatusUnwantedEvent | 5 | Prevents subsequent notifications before the event method has finished executing


ADO The WillChangeRecord and RecordChangeComplete Events

The WillChangeRecord Event

The WillChangeRecord event is triggered before one or more record changes.

Note: Before this event returns, set the status parameter to adStatusCancel to cancel the operation that caused this event or set it to adStatusUnwantedEvent to prevent subsequent notications.

The RecordChangeComplete Event

The RecordChangeComplete event is triggered after one or more record have been changed.

Note: Before this method returns, set the status parameter to adStatusUnwantedEvent to prevent subsequent notifications.

Note: The WillChangeRecord event or the RecordChangeComplete event may occur if you change a field in a record using one of the following Recordset operations: Update, Delete, CancelUpdate, AddNew, UpdateBatch, and CancelBatch.

Syntax

WillChangeRecord reason,numrec,status,objRs

RecordChangeComplete reason,numrec,objErr,status,objRs

Parameter | Description
reason | An EventReasonEnum value that specifies the reason for this event
numrec | Indicates the number of records affected
status | An EventStatusEnum value that indicates the status of the execution of the event
objErr | The name of an Error object that describes the error if status is set to adStatusErrorsOccurred, otherwise it is not set
objRs | The name of the Recordset Object that triggered this event

EventReasonEnum Values

Constant | Value | Description
adRsnAddNew | 1 | An operation added a new record
adRsnDelete | 2 | An operation deleted a record
adRsnUpdate | 3 | An operation updated an existing record
adRsnUndoUpdate | 4 | An operation reversed the update of a record
adRsnUndoAddNew | 5 | An operation reversed the addition of a new record
adRsnUndoDelete | 6 | An operation reversed the deletion of a record
adRsnFirstChange | 11 | An operation made the first change to a record

EventStatusEnum Values

Constant | Value | Description
adStatusOK | 1 | The operation that caused the event was successful
adStatusErrorsOccurred | 2 | The operation that caused the event failed
adStatusCantDeny | 3 | The operation that caused the event cannot be cancelled
adStatusCancel | 4 | The operation that caused the event is cancelled
adStatusUnwantedEvent | 5 | Prevents subsequent notifications before the event method has finished executing


ADO The WillChangeRecordset and RecordsetChangeComplete Events

ADO WillChangeRecordset and RecordsetChangeComplete Events

The WillChangeRecordset Event

The WillChangeRecordset event is triggered before an operation changes the Recordset.

Note: Before this event returns, set the status parameter to adStatusCancel to cancel the operation that caused this event or set it to adStatusUnwantedEvent to prevent subsequent notifications.

The RecordsetChangeComplete Event

The RecordsetChangeComplete event is triggered after a Recordset has changed.

Note: Before this event returns, set the status parameter to adStatusUnwantedEvent to prevent subsequent notifications.

Note: The WillChangeRecordset and the RecordsetChangeComplete event can occur when calling the Requery method or the Open method of a Recordset object.

Syntax

WillChangeRecord reason,status,objRs

RecordsetChangeComplete reason,objErr,status,objRs

Parameter | Description
reason | An value that specifies the reason for this event
status | An EventStatusEnum value that indicates the status of the execution of the event
objErr | The name of an Error object that describes the error if status is set to adStatusErrorsOccurred, otherwise it is not set
objRs | The name of the Recordset object that triggered this event

EventReasonEnum Values

Constant | Value | Description
adRsnRequery | 7 | An operation requeried the Recordset
adRsnResynch | 8 | An operation resynchronized the Recordset with the database
adRsnClose | 9 | An operation closed the Recordset

EventStatusEnum Values

Constant | Value | Description
adStatusOK | 1 | The operation that caused the event was successful
adStatusErrorsOccurred | 2 | The operation that caused the event failed
adStatusCantDeny | 3 | The operation that caused the event cannot be cancelled
adStatusCancel | 4 | The operation that caused the event is cancelled
adStatusUnwantedEvent | 5 | Prevents subsequent notifications before the event method has finished executing


ADO Tutorial

ADO Tutorial

In our ADO tutorial you will learn about ADO, and how to use ADO to access databases from your Web.

Start learning ADO!

ADO References

At W3Schools you will find complete ADO references about built-in objects, and their properties and methods.

ADO Object References

ADO Examples

Learn by examples! Because ASP scripts are executed on the server, you can not view ASP code in a browser, you will only see the output from ASP which is plain HTML. At W3Schools every example displays the hidden ASP code. This will make it easier for you to understand how it works.

ADO Examples!

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 ASP Developer Certificate is for developers who want to document their knowledge of ASP, SQL, and ADO.

ASP Developer Certificate!


ADO Type Property

The Type property sets or returns a StreamTypeEnum value that specifies the type of data in a Stream object. Default is adTypeText.

Note: This property is read/write when the position is at the beginning of the Stream (Position=0), otherwise it is read-only.

Syntax

objStream.Type

StreamTypeEnum

Constant | Value | Description
adTypeBinary | 1 | Binary data
adTypeText | 2 | Default. Text data


ADO Type Property

The Type property sets or returns a DataTypeEnum value that indicates the type of a Parameter, Field, or a Property object.

Object | Description of the Type Property
Parameter | The Type property has read/write permissions on a Parameter object
Field | The Type property is read/write, with one exception; for new Field objects that are added to the Fields collection of a Record, this property is read-only before the Value property has been set and before the provider has called the Update method of the Fields collection
Property | The Type property is read-only for a Property object

Syntax

objectname.Type

Example

For a Field object:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.Recordset")

rs.open "Select * from orders", conn

response.write(rs.Fields(0).Type)

rs.Close

conn.close

%>

For a Parameter object:

<%

set comm=Server.CreateObject("ADODB.Command")

set para=Server.CreateObject("ADODB.Parameter")

para.Type=adVarChar

para.Size=25

para.Direction=adParamInput

para.Value=varfname

comm.Parameters.Append para

%>

For a Property object:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.Recordset")

rs.open "Select * from orders", conn

set prop=Server.CreateObject("ADODB.Property")

'Display the property attributes of the Orders Table

for each prop in rs.Properties

response.write("Attr:" & prop.Attributes & "<br />")

response.write("Name:" & prop.Name & "<br />")

response.write("Value:" & prop.Value & "<br />")

response.write("Type:" & prop.Type & "<br />")

next

rs.close

conn.close

set rs=nothing

set conn=nothing

%>

DataTypeEnum Values

Specifies the data type of a Field, Parameter, or Property object

Constant | Value | Description
adEmpty | 0 | No value
adSmallInt | 2 | A 2-byte signed integer.
adInteger | 3 | A 4-byte signed integer.
adSingle | 4 | A single-precision floating-point value.
adDouble | 5 | A double-precision floating-point value.
adCurrency | 6 | A currency value
adDate | 7 | The number of days since December 30, 1899 + the fraction of a day.
adBSTR | 8 | A null-terminated character string.
adIDispatch | 9 | A pointer to an IDispatch interface on a COM object. Note: Currently not supported by ADO.
adError | 10 | A 32-bit error code
adBoolean | 11 | A boolean value.
adVariant | 12 | An Automation Variant. Note: Currently not supported by ADO.
adIUnknown | 13 | A pointer to an IUnknown interface on a COM object. Note: Currently not supported by ADO.
adDecimal | 14 | An exact numeric value with a fixed precision and scale.
adTinyInt | 16 | A 1-byte signed integer.
adUnsignedTinyInt | 17 | A 1-byte unsigned integer.
adUnsignedSmallInt | 18 | A 2-byte unsigned integer.
adUnsignedInt | 19 | A 4-byte unsigned integer.
adBigInt | 20 | An 8-byte signed integer.
adUnsignedBigInt | 21 | An 8-byte unsigned integer.
adFileTime | 64 | The number of 100-nanosecond intervals since January 1,1601
adGUID | 72 | A globally unique identifier (GUID)
adBinary | 128 | A binary value.
adChar | 129 | A string value.
adWChar | 130 | A null-terminated Unicode character string.
adNumeric | 131 | An exact numeric value with a fixed precision and scale.
adUserDefined | 132 | A user-defined variable.
adDBDate | 133 | A date value (yyyymmdd).
adDBTime | 134 | A time value (hhmmss).
adDBTimeStamp | 135 | A date/time stamp (yyyymmddhhmmss plus a fraction in billionths).
adChapter | 136 | A 4-byte chapter value that identifies rows in a child rowset
adPropVariant | 138 | An Automation PROPVARIANT.
adVarNumeric | 139 | A numeric value (Parameter object only).
adVarChar | 200 | A string value (Parameter object only).
adLongVarChar | 201 | A long string value.
adVarWChar | 202 | A null-terminated Unicode character string.
adLongVarWChar | 203 | A long null-terminated Unicode string value.
adVarBinary | 204 | A binary value (Parameter object only).
adLongVarBinary | 205 | A long binary value.
AdArray | 0x2000 | A flag value combined with another data type constant. Indicates an array of that other data type.


ADO Update Method

The Update method is used to save all changes made to a single record in a Recordset.

Note: This method will not work if the Recordset does not support updates.

Syntax

objRecordset.Update fields,values

Parameter | Description
fields | Optional. A field name, or an array of field names or field positions to update
values | Optional. A value or an array of values for the field or array of fields you want to update


ADO Update Records

We may use the SQL UPDATE command to update a record in a table in a database.

Update a Record in a Table

We want to update a record in the Customers table in the Northwind database. We first create a table that lists all records in the Customers table:

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs=Server.CreateObject("ADODB.Recordset")

rs.open "SELECT * FROM customers",conn

%>

<h2>List Database</h2>

<table border="1" width="100%">

<tr>

<%

for each x in rs.Fields

response.write("<th>" & ucase(x.name) & "</th>")

next

%>

</tr>

<% do until rs.EOF %>

<tr>

<form method="post" action="demo_update.asp">

<%

for each x in rs.Fields

if lcase(x.name)="customerid" then%>

  <td>

  <input type="submit" name="customerID" value="<%=x.value%>">

  </td>

<%else%>

  <td><%Response.Write(x.value)%></td>

<%end if

next

%>

</form>

<%rs.MoveNext%>

</tr>

<%

loop

conn.close

%>

</table>

</body>

</html>

If the user clicks on the button in the "customerID" column he or she will be taken to a new file called "demo_update.asp". The "demo_update.asp" file contains the source code on how to create input fields based on the fields from one record in the database table. It also contains a "Update record" button that will save your changes:

<html>

<body>

<h2>Update Record</h2>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

cid=Request.Form("customerID")

if Request.form("companyname")="" then

set rs=Server.CreateObject("ADODB.Recordset")

rs.open "SELECT * FROM customers WHERE customerID='" & cid & "'",conn

%>

<form method="post" action="demo_update.asp">

<table>

<%for each x in rs.Fields%>

<tr>

<td><%=x.name%></td>

<td><input name="<%=x.name%>" value="<%=x.value%>"></td>

<%next%>

</tr>

</table>

<br /><br />

<input type="submit" value="Update record">

</form>

<%

else

sql="UPDATE customers SET "

sql=sql & "companyname='" & Request.Form("companyname") & "',"

sql=sql & "contactname='" & Request.Form("contactname") & "',"

sql=sql & "address='" & Request.Form("address") & "',"

sql=sql & "city='" & Request.Form("city") & "',"

sql=sql & "postalcode='" & Request.Form("postalcode") & "',"

sql=sql & "country='" & Request.Form("country") & "'"

sql=sql & " WHERE customerID='" & cid & "'"

on error resume next

conn.Execute sql

if err<>0 then

  response.write("No update permissions!")

else

  response.write("Record " & cid & " was updated!")

end if

end if

conn.close

%>

</body>

</html>


ADO UpdateBatch Method

The UpdateBatch method is used to save all changes in a Recordset to the database. This method is used when you are working on a Recordset in batch update mode.

If the save operation fails, a run-time error occurs and the errors are stored in the Errors collection.

Tip: The CancelBatch method cancels all batch updates.

Note: Not all Recordset objects supports batch updating.

Syntax

bool=objRecordset.UpdateBatch affectrecords

Parameter | Description
affectrecords | Optional. An AffectEnum value that specifies which records this method will affect. Note: The value adAffectGroup will generate an error if there are no visible records in the Recordset

AffectEnum Values

Constant | Value | Description
adAffectCurrent | 1 | Affects only the current record
adAffectGroup | 2 | Affects only records that satisfy the Filter setting (Filter must be set to a FilterGroupEnum value or an array of Bookmarks)
adAffectAll | 3 | Affects all records if there is no Filter. Affects only visible records in the current chapter if Filter is set to a string criteria. Affect all rows of the Recordset if Filter is set to a FilterGroupEnum value or an array of Bookmarks
adAffectAllChapters | 4 | Affects all records in all child Recordset, including those hidden by a currently applied filter


ADO Value Property

The Value property sets or returns the value of a Parameter, Field, or Property object.

Object | Description of the Value Property
Parameter | The Value property sets or returns a variant that indicates the value of the Parameter object Note: The Recordset should be closed before you try to read the Value property. ADO can only read the Value property once from the provider
Field | The Value property sets or returns a variant that indicates the current value of the Field object Note: For a new Field object that are added to the Fields collection of a Record, you must first set the Value property and perform an update before you can set any other property
Property | The Value property sets or returns a variant that indicates the current value of the Property object Note: You cannot set the Value for properties that are read-only

Syntax

objectname.Value

Example

For a Field object:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.Recordset")

rs.open "Select * from orders", conn

response.write(rs.Fields(0).Value)

rs.Close

conn.close

%>

For a Parameter object:

<%

set comm=Server.CreateObject("ADODB.Command")

set para=Server.CreateObject("ADODB.Parameter")

para.Type=adVarChar

para.Size=25

para.Direction=adParamInput

para.Value=varfname

comm.Parameters.Append para

%>

For a Property object:

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs = Server.CreateObject("ADODB.Recordset")

rs.open "Select * from orders", conn

set prop=Server.CreateObject("ADODB.Property")

'Display the property attributes of the Orders Table

for each prop in rs.Properties

response.write("Attr:" & prop.Attributes & "<br />")

response.write("Name:" & prop.Name & "<br />")

response.write("Value:" & prop.Value & "<br />")

next

rs.close

conn.close

set rs=nothing

set conn=nothing

%>


ADO Version Property

The Version property returns the ADO version number.

Syntax

version=objconn.Version

Example

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

response.write(conn.Version)

conn.close

%>


ADO WillConnect, ConnectComplete, and Disconnect Events

An event is a subroutine that can be called automatically after a specific operation has occurred.

· The WillConnect event can be fired before a connection starts.
· The ConnectComplete event can be fired after a connection starts.
· The Disconnect event can be fired after a connection ends.

Syntax

WillConnect ConnectionString,userid,psword,options,status,objcon

ConnectComplete objerror,status,objconn

Disconnect status,objconn

Parameter | Description
ConnectionString | A string that contains the information required for the connection
userid | A string that contains the user name for the connection
psword | A string that contains the password for the connection
options | A long value that specifies how the provider should evaluate the ConnectionString. Can only be set to adAsyncOpen
objerror | An Error object that contains the errors that occurred Note: The EventStatusEnum value must be set to adStatusErrorsOccurred to create the Error object
status | An EventStatusEnum value. Default is adStatusOK However, when the ConnectComplete event is called, this parameter is set to adStatusCancel IF a WillConnect event calls for cancelling of the pending connection
objconn | The Connection object that fired the event

EventStatusEnum Values

Constant | Value | Description
adStatusOK | 1 | The operation that fired the event was successful
adStatusErrorsOccurred | 2 | The operation that fired the event failed
adStatusCantDeny | 3 | Cannot cancel the pending operation
adStatusCancel | 4 | Cancels the operation that fired the event
adStatusUnwantedEvent | 5 | Prevents subsequent notifications before the event method has finished executing


ADO WillExecute and ExecuteComplete Events

An event is a subroutine that can be called automatically after a specific operation has occurred.

· The WillExecute event can be fired just before a call to objcomm.Execute, objconn.Execute, or objrs.Open.
· The ExecuteComplete event can be fired after a call to objcomm.Execute, objconn.Execute, objrs.Open, objrs.Requery, or objrs.NextRecordset is completed.

Syntax

WillExecute src,cursortyp,locktyp,options,

status,objcomm,objrs,objconn

ExecuteComplete recaffected,objerror,status,

objcomm,objrs,objconn

Parameter | Description
src | A string that contains an SQL command or a stored procedure name
cursortyp | Specifies the type of cursor to be used. One of the CursorTypeEnum values
locktyp | Specifies the type of lock to be used. One of the LockTypeEnum values
options | One or more of the CommandTypeEnum or ExecuteOptionEnum values
recaffected | The number of records affected by the execution
objerror | An Error object that contains the errors that occurred Note: The EventStatusEnum value must be set to adStatusErrorsOccurred to create the Error object
status | An EventStatusEnum value
objcomm | For WillExecute: Set to the Command object that was executed or to Nothing For ExecuteComplete: The Command object that was executed
objrs | For WillExecute: Set to the Recordset object that resulted from the execution of the command or to Nothing For ExecuteComplete: The Recordset object that is the result of the executed command
objconn | The Connection object that is associated with the execution of the command

CursorTypeEnum Values

Specifies the type of cursor used in a Recordset object.

Constant | Value | Description
adOpenUnspecified | -1 | Does not specify the type of cursor.
adOpenForwardOnly | 0 | Default. Uses a forward-only cursor. Identical to a static cursor, except that you can only scroll forward through records. This improves performance when you need to make only one pass through a Recordset.
adOpenKeyset | 1 | Uses a keyset cursor. Like a dynamic cursor, except that you can't see records that other users add, although records that other users delete are inaccessible from your Recordset. Data changes by other users are still visible.
adOpenDynamic | 2 | Uses a dynamic cursor. Additions, changes, and deletions by other users are visible, and all types of movement through the Recordset are allowed, except for bookmarks, if the provider doesn't support them.
adOpenStatic | 3 | Uses a static cursor. A static copy of a set of records that you can use to find data or generate reports. Additions, changes, or deletions by other users are not visible.

LockTypeEnum Values

Constant | Value | Description
adLockUnspecified | -1 | Does not specify a type of lock. For clones, the clone is created with the same lock type as the original.
adLockReadOnly | 1 | Indicates read-only records. You cannot alter the data.
adLockPessimistic | 2 | Indicates pessimistic locking, record by record. The provider does what is necessary to ensure successful editing of the records, usually by locking records at the data source immediately after editing.
adLockOptimistic | 3 | Indicates optimistic locking, record by record. The provider uses optimistic locking, locking records only when you call the Update method.
adLockBatchOptimistic | 4 | Indicates optimistic batch updates. Required for batch update mode.

CommandTypeEnum Values

Constant | Value | Description
adCmdUnspecified | -1 | Does not specify the command type argument.
adCmdText | 1 | Evaluates CommandText as a textual definition of a command or stored procedure call.
adCmdTable | 2 | Evaluates CommandText as a table name whose columns are all returned by an internally generated SQL query.
adCmdStoredProc | 4 | Evaluates CommandText as a stored procedure name.
adCmdUnknown | 8 | Indicates that the type of command in the CommandText property is not known.
adCmdFile | 256 | Evaluates CommandText as the file name of a persistently stored Recordset. Used with Recordset.Open or Requery only.
adCmdTableDirect | 512 | Evaluates CommandText as a table name whose columns are all returned. Used with Recordset.Open or Requery only. To use the Seek method, the Recordset must be opened with adCmdTableDirect. This value cannot be combined with the ExecuteOptionEnum value adAsyncExecute.

ExecuteOptionEnum Values

Constant | Value | Description
adOptionUnspecified | -1 | Indicates that the command is unspecified.
adAsyncExecute | 16 | Indicates that the command should execute asynchronously. This value cannot be combined with the CommandTypeEnum value adCmdTableDirect.
adAsyncFetch | 32 | Indicates that the remaining rows after the initial quantity specified in the CacheSize property should be retrieved asynchronously.
adAsyncFetchNonBlocking | 64 | Indicates that the main thread never blocks while retrieving. If the requested row has not been retrieved, the current row automatically moves to the end of the file. If you open a Recordset from a Stream containing a persistently stored Recordset, adAsyncFetchNonBlocking will not have an effect; the operation will be synchronous and blocking. adAsynchFetchNonBlocking has no effect when the adCmdTableDirect option is used to open the Recordset.
adExecuteNoRecords | 128 | Indicates that the command text is a command or stored procedure that does not return rows (for example, a command that only inserts data). If any rows are retrieved, they are discarded and not returned. adExecuteNoRecords can only be passed as an optional parameter to the Command or Connection Execute method.
adExecuteStream | 256 | Indicates that the results of a command execution should be returned as a stream. adExecuteStream can only be passed as an optional parameter to the Command Execute method.
adExecuteRecord | 512 | Indicates that the CommandText is a command or stored procedure that returns a single row which should be returned as a Record object.

EventStatusEnum Values

Constant | Value | Description
adStatusOK | 1 | The operation that fired the event was successful
adStatusErrorsOccurred | 2 | The operation that fired the event failed
adStatusCantDeny | 3 | Cannot cancel the pending operation
adStatusCancel | 4 | Cancels the operation that fired the event
adStatusUnwantedEvent | 5 | Prevents subsequent notifications before the event method has finished executing


ADO WillMove and MoveComplete Events

The WillMove Event

The WillMove event is triggered before an operation changes the current position in the Recordset.

Note: Before this event returns, set the status parameter to adStatusCancel to cancel the operation that caused this event or set it to adStatusUnwantedEvent to prevent subsequent notications.

The MoveComplete Event

The MoveComplete event is triggered after the current position in the Recordset has changed.

Note: Before this event returns, set the status parameter to adStatusUnwantedEvent to prevent subsequent notifications.

Note: The WillMove event or MoveComplete event may occur when calling one of the following Recordset method: Open, Move, MoveFirst, MoveLast, MoveNext, MovePrevious, AddNew, and Requery. These events may also occur because of the following properties: Filter, Index, Bookmark, AbsolutePage, and AbsolutePosition.

Syntax

WillMove reason,status,objRs

MoveComplete reason,objErr,status,objRs

Parameter | Description
reason | An EventReasonEnum value that specifies the reason for this event
status | An EventStatusEnum value that indicates the status of the execution of the event
objErr | The name of an Error object that describes the error if status is set to adStatusErrorsOccurred, otherwise it is not set
objRs | The name of the Recordset object that triggered this event

EventReasonEnum Values

Constant | Value | Description
adRsnRequery | 7 | An operation requeried the Recordset
adRsnMove | 10 | An operation moved the record pointer within the Recordset
adRsnMoveFirst | 12 | An operation moved the record pointer to the first record in the Recordset
adRsnMoveNext | 13 | An operation moved the record pointer to the next record in the Recordset
adRsnMovePrevious | 14 | An operation moved the record pointer to the previous record in the Recordset
adRsnMoveLast | 15 | An operation moved the record pointer to the last record in the Recordset

EventStatusEnum Values

Constant | Value | Description
adStatusOK | 1 | The operation that caused the event was successful
adStatusErrorsOccurred | 2 | The operation that caused the event failed
adStatusCantDeny | 3 | The operation that caused the event cannot be cancelled
adStatusCancel | 4 | The operation that caused the event is cancelled
adStatusUnwantedEvent | 5 | Prevents subsequent notifications before the event method has finished executing


ADO Write Method

The Write method is used to write binary data to a binary Stream object.

If there is data in the Stream object and the current position is EOS, the new data will be appended beyond the existing data. If the current position is not EOS, the existing data will be overwritten.

If you write past EOS, the size of the Stream will increase. EOS will be set to the last byte in the Stream. If you don't write past EOS, the current position will be set to the next byte after the newly added data. Previously existing data will not be truncated. Call the SetEOS method to truncate.

Note: This method is used only with binary Stream objects, for textStream objects, use the WriteText method.

Syntax

objStream.Write buffer

Parameter | Description
buffer | Required. An array of bytes to be written to a binary Stream object


ADO WriteText Method

The Write method is used to write a text to a text Stream object.

If there is data in the Stream object and the current position is EOS, the new data will be appended beyond the existing data. If the current position is not EOS, the existing data will be overwritten.

If you write past EOS, the size of the Stream will increase. EOS will be set to the last character in the Stream. If you don't write past EOS, the current position will be set to the next character after the newly added data. Previously existing data will not be truncated. Call the SetEOS method to truncate.

Note: This method is used only with text Stream objects, for binary Stream objects, use the Write method.

Syntax

objStream.WriteText data,opt

Parameter | Description
data | Required. The text to be written to a text Stream object
opt | Optional. A value that specifies whether a line separator must be added to the text

StreamWriteEnum Value

Constant | Value | Description
adWriteChar | 0 | Default. Writes the specified text to a Stream object
adWriteLine | 1 | Writes the specified text and a line separator to a Stream object. If the LineSeparator property is not defined, a run-time error will occur


Examples

ASP Source: | Output Result:


demo_ado_getrows.html

This example returns the value of the first column in the first two records:

ALFKI

BERGS

This example returns the value of the first three columns in the first record:

ALFKI

Alfreds Futterkiste

Maria Anders


demo_display1.html

CustomerID = ALFKI

CompanyName = Alfreds Futterkiste

ContactName = Maria Anders

Address = Obere Str. 57

City = Berlin

PostalCode = 12209

Country = Germany

CustomerID = BERGS

CompanyName = Berglunds snabbköp

ContactName = Christina Berglund

Address = Berguvsvägen 8

City = Luleå

PostalCode = S-958 22

Country = Sweden

CustomerID = CENTC

CompanyName = Centro comercial Moctezuma

ContactName = Francisco Chang

Address = Sierras de Granada 9993

City = México D.F.

PostalCode = 05022

Country = Mexico

CustomerID = ERNSH

CompanyName = Ernst Handel

ContactName = Roland Mendel

Address = Kirchgasse 6

City = Graz

PostalCode = 8010

Country = Austria

CustomerID = FISSA

CompanyName = FISSA Fabrica Inter. Salchichas S.A.

ContactName = Diego Roel

Address = C/ Moralzarzal, 86

City = Madrid

PostalCode = 28034

Country = Spain

CustomerID = GALED

CompanyName = Galería del gastrónomo

ContactName = Eduardo Saavedra

Address = Rambla de Cataluña, 23

City = Barcelona

PostalCode = 08022

Country = Spain

CustomerID = ISLAT

CompanyName = Island Trading

ContactName = Helen Bennett

Address = Garden House Crowther Way

City = Cowes

PostalCode = PO31 7PJ

Country = UK

CustomerID = KOENE

CompanyName = Königlich Essen

ContactName = Philip Cramer

Address = Maubelstr. 90

City = Brandenburg

PostalCode = 14776

Country = Germany

CustomerID = LAUGB

CompanyName = Laughing Bacchus Wine Cellars

ContactName = Yoshi Tannamuri

Address = 1900 Oak St.

City = Vancouver

PostalCode = V3F 2K1

Country = Canada

CustomerID = MAGAA

CompanyName = Magazzini Alimentari Riuniti

ContactName = Giovanni Rovelli

Address = Via Ludovico il Moro 22

City = Bergamo

PostalCode = 24100

Country = Italy

CustomerID = NORTS

CompanyName = North/South

ContactName = Simon Crowther

Address = South House 300 Queensbridge

City = London

PostalCode = SW7 1RZ

Country = UK

CustomerID = PARIS

CompanyName = Paris spécialités

ContactName = Marie Bertrand

Address = 265, boulevard Charonne

City = Paris

PostalCode = 75012

Country = France

CustomerID = RATTC

CompanyName = Rattlesnake Canyon Grocery

ContactName = Paula Wilson

Address = 2817 Milton Dr.

City = Albuquerque

PostalCode = 87110

Country = USA

CustomerID = SIMOB

CompanyName = Simons bistro

ContactName = Jytte Petersen

Address = Vinbæltet 34

City = København

PostalCode = 1734

Country = Denmark

CustomerID = THEBI

CompanyName = The Big Cheese

ContactName = Liz Nixon

Address = 89 Jefferson Way Suite 2

City = Portland

PostalCode = 97201

Country = USA

CustomerID = VAFFE

CompanyName = Vaffeljernet

ContactName = Palle Ibsen

Address = Smagsløget 45

City = Århus

PostalCode = 8200

Country = Denmark

CustomerID = WOLZA

CompanyName = Wolski Zajazd

ContactName = Zbyszek Piestrzeniewicz

Address = ul. Filtrowa 68

City = Warszawa

PostalCode = 01-012

Country = Poland


demo_display2.html

Alfreds Futterkiste | Maria Anders
Berglunds snabbköp | Christina Berglund
Centro comercial Moctezuma | Francisco Chang
Ernst Handel | Roland Mendel
FISSA Fabrica Inter. Salchichas S.A. | Diego Roel
Galería del gastrónomo | Eduardo Saavedra
Island Trading | Helen Bennett
Königlich Essen | Philip Cramer
Laughing Bacchus Wine Cellars | Yoshi Tannamuri
Magazzini Alimentari Riuniti | Giovanni Rovelli
North/South | Simon Crowther
Paris spécialités | Marie Bertrand
Rattlesnake Canyon Grocery | Paula Wilson
Simons bistro | Jytte Petersen
The Big Cheese | Liz Nixon
Vaffeljernet | Palle Ibsen
Wolski Zajazd | Zbyszek Piestrzeniewicz


demo_display3.html

Companyname | Contactname
Alfreds Futterkiste | Maria Anders
Berglunds snabbköp | Christina Berglund
Centro comercial Moctezuma | Francisco Chang
Ernst Handel | Roland Mendel
FISSA Fabrica Inter. Salchichas S.A. | Diego Roel
Galería del gastrónomo | Eduardo Saavedra
Island Trading | Helen Bennett
Königlich Essen | Philip Cramer
Laughing Bacchus Wine Cellars | Yoshi Tannamuri
Magazzini Alimentari Riuniti | Giovanni Rovelli
North/South | Simon Crowther
Paris spécialités | Marie Bertrand
Rattlesnake Canyon Grocery | Paula Wilson
Simons bistro | Jytte Petersen
The Big Cheese | Liz Nixon
Vaffeljernet | Palle Ibsen
Wolski Zajazd | Zbyszek Piestrzeniewicz


demo_display4.html

Companyname | Contactname
Alfreds Futterkiste | Maria Anders
Berglunds snabbköp | Christina Berglund
Centro comercial Moctezuma | Francisco Chang
Ernst Handel | Roland Mendel
FISSA Fabrica Inter. Salchichas S.A. | Diego Roel
Galería del gastrónomo | Eduardo Saavedra
Island Trading | Helen Bennett
Königlich Essen | Philip Cramer
Laughing Bacchus Wine Cellars | Yoshi Tannamuri
Magazzini Alimentari Riuniti | Giovanni Rovelli
North/South | Simon Crowther
Paris spécialités | Marie Bertrand
Rattlesnake Canyon Grocery | Paula Wilson
Simons bistro | Jytte Petersen
The Big Cheese | Liz Nixon
Vaffeljernet | Palle Ibsen
Wolski Zajazd | Zbyszek Piestrzeniewicz


demo_display5.html

Alfreds Futterkiste | Maria Anders
Berglunds snabbköp | Christina Berglund
Centro comercial Moctezuma | Francisco Chang
Ernst Handel | Roland Mendel
FISSA Fabrica Inter. Salchichas S.A. | Diego Roel
Galería del gastrónomo | Eduardo Saavedra
Island Trading | Helen Bennett
Königlich Essen | Philip Cramer
Laughing Bacchus Wine Cellars | Yoshi Tannamuri
Magazzini Alimentari Riuniti | Giovanni Rovelli
North/South | Simon Crowther
Paris spécialités | Marie Bertrand
Rattlesnake Canyon Grocery | Paula Wilson
Simons bistro | Jytte Petersen
The Big Cheese | Liz Nixon
Vaffeljernet | Palle Ibsen
Wolski Zajazd | Zbyszek Piestrzeniewicz


demo_query_1.html

Companyname | Contactname
Alfreds Futterkiste | Maria Anders


demo_query_2.html

Companyname | Contactname
Ernst Handel | Roland Mendel
FISSA Fabrica Inter. Salchichas S.A. | Diego Roel
Galería del gastrónomo | Eduardo Saavedra
Island Trading | Helen Bennett
Königlich Essen | Philip Cramer
Laughing Bacchus Wine Cellars | Yoshi Tannamuri
Magazzini Alimentari Riuniti | Giovanni Rovelli
North/South | Simon Crowther
Paris spécialités | Marie Bertrand
Rattlesnake Canyon Grocery | Paula Wilson
Simons bistro | Jytte Petersen
The Big Cheese | Liz Nixon
Vaffeljernet | Palle Ibsen
Wolski Zajazd | Zbyszek Piestrzeniewicz


demo_query_3.html

Companyname | Contactname
FISSA Fabrica Inter. Salchichas S.A. | Diego Roel
Galería del gastrónomo | Eduardo Saavedra


demo_query_4.html

Choose Country [TComboFormControlObj]


demo_sort_1.html

Companyname | Contactname
Alfreds Futterkiste | Maria Anders
Berglunds snabbköp | Christina Berglund
Centro comercial Moctezuma | Francisco Chang
Ernst Handel | Roland Mendel
FISSA Fabrica Inter. Salchichas S.A. | Diego Roel
Galería del gastrónomo | Eduardo Saavedra
Island Trading | Helen Bennett
Königlich Essen | Philip Cramer
Laughing Bacchus Wine Cellars | Yoshi Tannamuri
Magazzini Alimentari Riuniti | Giovanni Rovelli
North/South | Simon Crowther
Paris spécialités | Marie Bertrand
Rattlesnake Canyon Grocery | Paula Wilson
Simons bistro | Jytte Petersen
The Big Cheese | Liz Nixon
Vaffeljernet | Palle Ibsen
Wolski Zajazd | Zbyszek Piestrzeniewicz


demo_sort_2.html

Companyname | Contactname
Wolski Zajazd | Zbyszek Piestrzeniewicz
Vaffeljernet | Palle Ibsen
The Big Cheese | Liz Nixon
Simons bistro | Jytte Petersen
Rattlesnake Canyon Grocery | Paula Wilson
Paris spécialités | Marie Bertrand
North/South | Simon Crowther
Magazzini Alimentari Riuniti | Giovanni Rovelli
Laughing Bacchus Wine Cellars | Yoshi Tannamuri
Königlich Essen | Philip Cramer
Island Trading | Helen Bennett
Galería del gastrónomo | Eduardo Saavedra
FISSA Fabrica Inter. Salchichas S.A. | Diego Roel
Ernst Handel | Roland Mendel
Centro comercial Moctezuma | Francisco Chang
Berglunds snabbköp | Christina Berglund
Alfreds Futterkiste | Maria Anders


demo_sort_3.html

 | Contact
Alfreds Futterkiste | Maria Anders
Berglunds snabbköp | Christina Berglund
Centro comercial Moctezuma | Francisco Chang
Ernst Handel | Roland Mendel
FISSA Fabrica Inter. Salchichas S.A. | Diego Roel
Galería del gastrónomo | Eduardo Saavedra
Island Trading | Helen Bennett
Königlich Essen | Philip Cramer
Laughing Bacchus Wine Cellars | Yoshi Tannamuri
Magazzini Alimentari Riuniti | Giovanni Rovelli
North/South | Simon Crowther
Paris spécialités | Marie Bertrand
Rattlesnake Canyon Grocery | Paula Wilson
Simons bistro | Jytte Petersen
The Big Cheese | Liz Nixon
Vaffeljernet | Palle Ibsen
Wolski Zajazd | Zbyszek Piestrzeniewicz


demo_sort_3055b.html

Company |
Berglunds snabbköp | Christina Berglund
FISSA Fabrica Inter. Salchichas S.A. | Diego Roel
Galería del gastrónomo | Eduardo Saavedra
Centro comercial Moctezuma | Francisco Chang
Magazzini Alimentari Riuniti | Giovanni Rovelli
Island Trading | Helen Bennett
Simons bistro | Jytte Petersen
The Big Cheese | Liz Nixon
Alfreds Futterkiste | Maria Anders
Paris spécialités | Marie Bertrand
Vaffeljernet | Palle Ibsen
Rattlesnake Canyon Grocery | Paula Wilson
Königlich Essen | Philip Cramer
Ernst Handel | Roland Mendel
North/South | Simon Crowther
Laughing Bacchus Wine Cellars | Yoshi Tannamuri
Wolski Zajazd | Zbyszek Piestrzeniewicz


demo_sort_34b3a.html

Company | Contact
Alfreds Futterkiste | Maria Anders
Berglunds snabbköp | Christina Berglund
Centro comercial Moctezuma | Francisco Chang
Ernst Handel | Roland Mendel
FISSA Fabrica Inter. Salchichas S.A. | Diego Roel
Galería del gastrónomo | Eduardo Saavedra
Island Trading | Helen Bennett
Königlich Essen | Philip Cramer
Laughing Bacchus Wine Cellars | Yoshi Tannamuri
Magazzini Alimentari Riuniti | Giovanni Rovelli
North/South | Simon Crowther
Paris spécialités | Marie Bertrand
Rattlesnake Canyon Grocery | Paula Wilson
Simons bistro | Jytte Petersen
The Big Cheese | Liz Nixon
Vaffeljernet | Palle Ibsen
Wolski Zajazd | Zbyszek Piestrzeniewicz


showcode047e.html

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("/db/northwind.mdb"))

set rs = Server.CreateObject("ADODB.recordset")

sql="SELECT Companyname, Contactname FROM Customers WHERE CompanyName LIKE 'A%'"

rs.Open sql, conn

%>

<table border="1" width="100%">

<tr>

<%for each x in rs.Fields

response.write("<th>" & x.name & "</th>")

next%>

</tr>

<%do until rs.EOF%>

<tr>

<%for each x in rs.Fields%>

<td><%Response.Write(x.value)%></td>

<%next

rs.MoveNext%>

</tr>

<%loop

rs.close

conn.close

%>

</table>

</body>

</html>


showcode0b2d.html

<%option explicit%>

<html>

<head><title>ADO - List Database Records</title></head>

<body>

<%

dim conn,rs,x

set conn=Server.CreateObject("ADODB.Connection")

conn.provider="Microsoft.Jet.OLEDB.4.0"

conn.open(server.mappath("/db/database.mdb"))

set rs=Server.CreateObject("ADODB.Recordset")

rs.open "SELECT * FROM tblGuestBook",conn

%>

<h2>List Database Table</h2>

<p>Click on a button to modify a record.</p>

<table border="1" width="100%">

<tr bgcolor="#b0c4de">

<%

for each x in rs.Fields

response.write("<th>" & ucase(x.name) & "</th>")

next

%>

</tr>

<%do until rs.EOF%>

<tr bgcolor="#f0f0f0">

<form method="post" action="demo_db_edit.asp" target="_blank">

<%

for each x in rs.Fields

if x.name="no" then%>

<td><input type="submit" name="no" value="<%=x.value%>"></td>

<%else%>

<td><%Response.Write(x.value)%> </td>

<%end if

next

%>

</form>

<%rs.MoveNext%>

</tr>

<%

loop

rs.close

set rs=nothing

conn.close

set conn=nothing

%>

</table>

<p><a href="showcode.asp?source=demo_db_list.asp">View source on how to list a database table in an HTML table</a></p>

<p><b>Note:</b> If you click on a button in the "no" column a new page will open. On the new page you may look at the source on how to create input fields based on the fields from one record in the database table.</p>

</body>

</html>


showcode0c16.html

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("/db/northwind.mdb"))

set rs = Server.CreateObject("ADODB.recordset")

sql="SELECT Companyname, Contactname FROM Customers"

rs.Open sql, conn

%>

<table border="1" width="100%" bgcolor="#fff5ee">

<tr>

<%for each x in rs.Fields

response.write("<th align='left' bgcolor='#b0c4de'>" & x.name & "</th>")

next%>

</tr>

<%do until rs.EOF%>

<tr>

<%for each x in rs.Fields%>

<td><%Response.Write(x.value)%></td>

<%next

rs.MoveNext%>

</tr>

<%loop

rs.close

conn.close

%>

</table>

</body>

</html>


showcode0ec2.html

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("/db/northwind.mdb"))

set rs = Server.CreateObject("ADODB.recordset")

sql="SELECT Companyname, Contactname FROM Customers"

rs.Open sql, conn

%>

<table border="1" width="100%">

<tr>

<%for each x in rs.Fields

response.write("<th>" & x.name & "</th>")

next%>

</tr>

<%do until rs.EOF%>

<tr>

<%for each x in rs.Fields%>

<td><%Response.Write(x.value)%></td>

<%next

rs.MoveNext%>

</tr>

<%loop

rs.close

conn.close

%>

</table>

</body>

</html>


showcode1951.html

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("/db/northwind.mdb"))

set rs=Server.CreateObject("ADODB.recordset")

sql="SELECT DISTINCT Country FROM Customers ORDER BY Country"

rs.Open sql,conn

country=request.form("country")

%>

<form method="post">

Choose Country <select name="country">

<% do until rs.EOF

response.write("<option")

if rs.fields("country")=country then

response.write(" selected")

end if

response.write(">")

response.write(rs.fields("Country"))

rs.MoveNext

loop

rs.Close

set rs=Nothing %>

</select>

<input type="submit" value="Show customers">

</form>

<%

if country<>"" then

sql="SELECT Companyname,Contactname,Country FROM Customers WHERE country='" & country & "'"

set rs=Server.CreateObject("ADODB.Recordset")

rs.Open sql,conn

%>

<table width="100%" cellspacing="0" cellpadding="2" border="1">

<tr>

<th>Companyname</th>

<th>Contactname</th>

<th>Country</th>

</tr>

<%

do until rs.EOF

response.write("<tr>")

response.write("<td>" & rs.fields("companyname") & "</td>")

response.write("<td>" & rs.fields("contactname") & "</td>")

response.write("<td>" & rs.fields("country") & "</td>")

response.write("</tr>")

rs.MoveNext

loop

rs.close

conn.Close

set rs=Nothing

set conn=Nothing%>

</table>

<% end if %>

</body>

</html>


showcode1cc6.html

<html>

<head>

<title>ADO - Add DataBase Record</title>

</head>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.mappath("/db/database.mdb"))

set rs = Server.CreateObject("ADODB.Recordset")

rs.Open "select * from tblGuestBook", conn

%>

<h2>Adding a Record</h2>

<form method="post" action="demo_db_new.asp" target="_blank">

<table bgcolor="#b0c4de">

<%

for each x in rs.Fields

if x.name <> "no" and x.name <> "dateadded" then%>

<tr>

<td><%=x.name%></td>

<td><input name="<%=x.name%>" value="N/A" size="20"></td>

<%

end if

next

rs.close

conn.close

%>

</tr></table>

<br />

<input type="submit" name="action" value="Add Record">

</form>

<p><a href="showcode.asp?source=demo_db_add.asp">View source on how to create input fields based on the fields in the database table</a>.</p>

<p><b>Note:</b> If you click on "Add Record" a new page will open. On the new page you may look at the source on how to add a record to a database table.</p>

</body>

</html>


showcode1f2a.html

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("/db/northwind.mdb"))

set rs = Server.CreateObject("ADODB.recordset")

rs.Open "Select * from Customers", conn

do until rs.EOF

for each x in rs.Fields

Response.Write(x.name)

Response.Write(" = ")

Response.Write(x.value & "<br />")

next

Response.Write("<br />")

rs.MoveNext

loop

rs.close

conn.close

%>

</body>

</html>


showcode4b78.html

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("/db/northwind.mdb"))

set rs = Server.CreateObject("ADODB.recordset")

sql="SELECT Companyname, Contactname FROM Customers ORDER BY CompanyName"

rs.Open sql, conn

%>

<table border="1" width="100%">

<tr>

<%for each x in rs.Fields

response.write("<th>" & x.name & "</th>")

next%>

</tr>

<%do until rs.EOF%>

<tr>

<%for each x in rs.Fields%>

<td><%Response.Write(x.value)%></td>

<%next

rs.MoveNext%>

</tr>

<%loop

rs.close

conn.close

%>

</table>

</body>

</html>


showcode6232.html

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("/db/northwind.mdb"))

set rs = Server.CreateObject("ADODB.recordset")

sql="SELECT Companyname, Contactname FROM Customers WHERE CompanyName>'E'"

rs.Open sql, conn

%>

<table border="1" width="100%">

<tr>

<%for each x in rs.Fields

response.write("<th>" & x.name & "</th>")

next%>

</tr>

<%do until rs.EOF%>

<tr>

<%for each x in rs.Fields%>

<td><%Response.Write(x.value)%> </td>

<%next

rs.MoveNext%>

</tr>

<%loop

rs.close

conn.close

%>

</table>

</body>

</html>


showcode7bc6.html

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("/db/northwind.mdb"))

set rs = Server.CreateObject("ADODB.recordset")

rs.Open "Select * from Customers", conn

'The first number indicates how many records to copy

'The second number indicates what recordnumber to start on

p=rs.GetRows(2,0)

response.write("<p>This example returns the value of the first column in the first two records:</p>")

response.write(p(0,0))

response.write("<br>")

response.write(p(0,1))

response.write("<p>This example returns the value of the first three columns in the first record:</p>")

response.write(p(0,0))

response.write("<br>")

response.write(p(1,0))

response.write("<br>")

response.write(p(2,0))

rs.close

conn.close

%>

</body>

</html>


showcode914e.html

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("/db/northwind.mdb"))

set rs = Server.CreateObject("ADODB.recordset")

rs.Open "SELECT Companyname, Contactname FROM Customers", conn

str=rs.GetString(,,"</td><td>","</td></tr><tr><td>"," ")

%>

<table border="1" width="100%">

<tr>

<td><%Response.Write(str)%></td>

</tr>

</table>

<%

rs.close

conn.close

set rs = Nothing

set conn = Nothing

%>

</body>

</html>


showcodeb7d1.html

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("/db/northwind.mdb"))

set rs = Server.CreateObject("ADODB.recordset")

sql="SELECT Companyname, Contactname FROM Customers WHERE Country='Spain'"

rs.Open sql, conn

%>

<table border="1" width="100%">

<tr>

<%for each x in rs.Fields

response.write("<th>" & x.name & "</th>")

next%>

</tr>

<%do until rs.EOF%>

<tr>

<%for each x in rs.Fields%>

<td><%Response.Write(x.value)%> </td>

<%next

rs.MoveNext%>

</tr>

<%loop

rs.close

conn.close

%>

</table>

</body>

</html>


showcodecf85.html

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("/db/northwind.mdb"))

set rs = Server.CreateObject("ADODB.recordset")

rs.Open "SELECT Companyname, Contactname FROM Customers", conn

%>

<table border="1" width="100%">

<%do until rs.EOF%>

<tr>

<%for each x in rs.Fields%>

<td><%Response.Write(x.value)%></td>

<%next

rs.MoveNext%>

</tr>

<%loop

rs.close

conn.close

%>

</table>

</body>

</html>


showcodef2cc.html

<html>

<body>

<table border="1" width="100%" bgcolor="#fff5ee">

<tr>

<th align="left" bgcolor="#b0c4de">

<a href="demo_sort_3.asp?sort=companyname">Company</a>

</th>

<th align="left" bgcolor="#b0c4de">

<a href="demo_sort_3.asp?sort=contactname">Contact</a>

</th>

</tr>

<%

if request.querystring("sort")<>"" then

sort=request.querystring("sort")

else

sort="companyname"

end if

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("/db/northwind.mdb"))

set rs=Server.CreateObject("ADODB.recordset")

sql="SELECT Companyname,Contactname FROM Customers ORDER BY " & sort

rs.Open sql,conn

do until rs.EOF

response.write("<tr>")

for each x in rs.Fields

response.write("<td>" & x.value & "</td>")

next

rs.MoveNext

response.write("</tr>")

loop

rs.close

conn.close

%>

</table>

</body>

</html>


showcodefc12.html

<html>

<body>

<%

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("/db/northwind.mdb"))

set rs = Server.CreateObject("ADODB.recordset")

sql="SELECT Companyname, Contactname FROM Customers ORDER BY CompanyName DESC"

rs.Open sql, conn

%>

<table border="1" width="100%">

<tr>

<%for each x in rs.Fields

response.write("<th>" & x.name & "</th>")

next%>

</tr>

<%do until rs.EOF%>

<tr>

<%for each x in rs.Fields%>

<td><%Response.Write(x.value)%> </td>

<%next

rs.MoveNext%>

</tr>

<%loop

rs.close

conn.close

%>

</table>

</body>

</html>


Tryit v1.4 - Show ASP

ASP Source: | Output Result:


Tryit v1.4 - Show ASP

Your browser does not support inline frames or is currently configured not to display inline frames.

ASP Source: | Output Result:


AJAX Introduction

AJAX stands for Asynchronous JavaScript And XML.

What You Should Already Know

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

· HTML / XHTML
· JavaScript

If you want to study these subjects first, find the tutorials on our Home page.

AJAX = Asynchronous JavaScript and XML

AJAX is not a new programming language, but a technique for creating better, faster, and more interactive web applications.

With AJAX, your JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object. With this object, your JavaScript can trade data with a web server, without reloading the page.

AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.

The AJAX technique makes Internet applications smaller, faster and more user-friendly.

AJAX is a browser technology independent of web server software.

AJAX is Based on Web Standards

AJAX is based on the following web standards:

· JavaScript
· XML
· HTML
· CSS

The web standards used in AJAX are well defined, and supported by all major browsers. AJAX applications are browser and platform independent.

AJAX is About Better Internet Applications

Web applications have many benefits over desktop applications; they can reach a larger audience, they are easier to install and support, and easier to develop.

However, Internet applications are not always as "rich" and user-friendly as traditional desktop applications.

With AJAX, Internet applications can be made richer and more user-friendly.

You Can Start Using AJAX Today

There is nothing new to learn.

AJAX is based on existing standards. These standards have been used by most developers for several years.


AJAX AppML

AppML is an open source initiative from W3Schools.

AppML uses AJAX technology.

What is AppML?

· AppML stands for Application Markup Language
· AppML uses XML to describe Internet applications
· AppML applications are self-describing
· AppML is a declarative language
· AppML is platform independent
· AppML uses AJAX technology
· AppML is an open source initiative from W3Schools

AppML is a Declarative Language

AppML is not a programming language. It is a declarative language, used to describe applications.

With AppML you can create Internet applications without programming.

Traditional applications are written in a programming language and compiled, with predefined data structures and functions. AppML allows the programmer to redefine both data and functions while the application is running.

Since AppML applications are written in XML, AppML applications are self-describing.

AppML is Browser Independent

Since AppML only uses internet standards like HTML (XHTML), CSS, XML, and JavaScript, AppML will run in all browsers.

AppML Uses AJAX Technology

AppML uses AJAX technology. Internet communication between the web client and the web server is done with HTTP requests.

History

In 1999, the staff at W3Schools began developing AppML.

In September 2000, a development project for a large Norwegian customer was started. The goal of the project was to convert a huge information system from a Windows desktop application to a modern Internet application using only AppML.

The new AppML-based system was launched in 2001, several months before schedule, and it was one of the first commercial available AJAX applications.

The project was a huge success, with development time reduced by 75% compared to ordinary web development.

Since then, hundreds of new applications have been added, and AppML now covers over 1000 running applications.

In December 2006, W3Schools decided to offer AppML to the public, as an open source product, free of charge.

AppML Tutorial


AJAX Browser Support

AJAX - Browser Support

The keystone of AJAX is the XMLHttpRequest object.

Different browsers use different methods to create the XMLHttpRequest object.

Internet Explorer uses an ActiveXObject, while other browsers uses the built-in JavaScript object called XMLHttpRequest.

To create this object, and deal with different browsers, we are going to use a "try and catch" statement. You can read more about the try and catch statement in our JavaScript tutorial.

Let's update our "testAjax.htm" file with the JavaScript that creates the XMLHttpRequest object:

<html>

<body>

<script type="text/javascript">

function ajaxFunction()

{

var xmlHttp;

try

  {

  // Firefox, Opera 8.0+, Safari

  xmlHttp=new XMLHttpRequest();

  }

catch (e)

  {

  // Internet Explorer

  try

    {

    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

    }

  catch (e)

    {

    try

      {

      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

      }

    catch (e)

      {

      alert("Your browser does not support AJAX!");

      return false;

      }

    }

  }

}

</script>

<form name="myForm">

Name: <input type="text" name="username" />

Time: <input type="text" name="time" />

</form>

</body>

</html>

Example explained: First create a variable xmlHttp to hold the XMLHttpRequest object.

Then try to create the object with XMLHttp=new XMLHttpRequest(). This is for the Firefox, Opera, and Safari browsers. If that fails, try xmlHttp=new ActiveXObject("Msxml2.XMLHTTP") which is for Internet Explorer 6.0+, if that also fails, try xmlHttp=new ActiveXObject("Microsoft.XMLHTTP") which is for Internet Explorer 5.5+

If none of the three methods work, the user has a very outdated browser, and he or she will get an alert stating that the browser doesn't support AJAX.

Note: The browser-specific code above is long and quite complex. However, this is the code you can use every time you need to create an XMLHttpRequest object, so you can just copy and paste it whenever you need it. The code above is compatible with all the popular browsers: Internet Explorer, Opera, Firefox, and Safari.

The next chapter shows how to use the XMLHttpRequest object to communicate with the server.


AJAX Database

AJAX Database Example

AJAX can be used for interactive communication with a database.

AJAX Database Example

In the AJAX example below we will demonstrate how a web page can fetch information from a database using AJAX technology.

Select a Name in the Box Below

Select a Customer: [TComboFormControlObj]

Customer info will be listed here.

AJAX Example Explained

The example above contains a simple HTML form and a link to a JavaScript:

<html>

<head>

<script src="selectcustomer.js"></script>

</head>

<body>

<form>

Select a Customer:

<select name="customers" onchange="showCustomer(this.value)">

<option value="ALFKI">Alfreds Futterkiste

<option value="NORTS ">North/South

<option value="WOLZA">Wolski Zajazd

</select>

</form>

<p>

<div id="txtHint"><b>Customer info will be listed here.</b></div>

</p>

</body>

</html>

As you can see it is just a simple HTML form with a drop down box called "customers".

The paragraph below the form contains a div called "txtHint". The div is used as a placeholder for info retrieved from the web server.

When the user selects data, a function called "showCustomer()" is executed. The execution of the function is triggered by the "onchange" event. In other words: Each time the user change the value in the drop down box, the function showCustomer is called.

The JavaScript code is listed below.

The AJAX JavaScript

This is the JavaScript code stored in the file "selectcustomer.js":

var xmlHttp

function showCustomer(str)

{

xmlHttp=GetXmlHttpObject();

if (xmlHttp==null)

{

alert ("Your browser does not support AJAX!");

return;

}

var url="getcustomer.asp";

url=url+"?q="+str;

url=url+"&sid="+Math.random();

xmlHttp.onreadystatechange=stateChanged;

xmlHttp.open("GET",url,true);

xmlHttp.send(null);

}

function stateChanged()

{

if (xmlHttp.readyState==4)

{

document.getElementById("txtHint").innerHTML=xmlHttp.responseText;

}

}

function GetXmlHttpObject()

{

var xmlHttp=null;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

  {

  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

  }

catch (e)

  {

  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

}

return xmlHttp;

}

The AJAX Server Page

The server page called by the JavaScript, is a simple ASP file called "getcustomer.asp".

The page is written in VBScript for an Internet Information Server (IIS). It could easily be rewritten in PHP, or some other server language. a corresponding example in PHP.

The code runs an SQL against a database and returns the result as an HTML table:

<%

sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="

sql=sql & request.querystring("q")

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("/db/northwind.mdb"))

set rs = Server.CreateObject("ADODB.recordset")

rs.Open sql, conn

response.write("<table>")

do until rs.EOF

for each x in rs.Fields

  response.write("<tr><td><b>" & x.name & "</b></td>")

  response.write("<td>" & x.value & "</td></tr>")

next

rs.MoveNext

loop

response.write("</table>")

%>


AJAX Example

Your First AJAX Application

To understand how AJAX works, we will create a small AJAX application.

First, we are going to create a standard HTML form with two text fields: username and time. The username field will be filled in by the user and the time field will be filled in using AJAX.

The HTML file will be named "testAjax.htm", and it looks like this (notice that the HTML form below has no submit button!):

<html>

<body>

<form name="myForm">

Name: <input type="text" name="username" />

Time: <input type="text" name="time" />

</form>

</body>

</html>

The next chapters will explain the keystones of AJAX.


AJAX Suggest Example

We have seen that AJAX can be used to create more interactive applications.

AJAX Suggest Example

In the AJAX example below we will demonstrate how a web page can communicate with a web server online as a user enters data into a standard HTML form.

Type a Name in the Box Below

First Name: [TEditFormControlObj]

Suggestions:

Example Explained - The HTML Form

The form above has the following HTML code:

<form>

First Name:

<input type="text" id="txt1"

onkeyup="showHint(this.value)">

</form>

<p>Suggestions: <span id="txtHint"></span></p>

As you can see it is just a simple HTML form with an input field called "txt1".

An event attribute for the input field defines a function to be triggered by the onkeyup event.

The paragraph below the form contains a span called "txtHint". The span is used as a placeholder for data retrieved from the web server.

When the user inputs data, a function called "showHint()" is executed. The execution of the function is triggered by the "onkeyup" event. In other words: Each time the user moves his finger away from a keyboard key inside the input field, the function showHint is called.

Example Explained - The showHint() Function

The showHint() function is a very simple JavaScript function placed in the <head> section of the HTML page.

The function contains the following code:

function showHint(str)

{

if (str.length==0)

{

document.getElementById("txtHint").innerHTML="";

return;

}

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)

{

alert ("Your browser does not support AJAX!");

return;

}

var url="gethint.asp";

url=url+"?q="+str;

url=url+"&sid="+Math.random();

xmlHttp.onreadystatechange=stateChanged;

xmlHttp.open("GET",url,true);

xmlHttp.send(null);

}

The function executes every time a character is entered in the input field.

If there is some input in the text field (str.length > 0) the function executes the following:

· Defines the url (filename) to send to the server
· Adds a parameter (q) to the url with the content of the input field
· Adds a random number to prevent the server from using a cached file
· Creates an XMLHTTP object, and tells the object to execute a function called stateChanged when a change is triggered
· Opens the XMLHTTP object with the given url.
· Sends an HTTP request to the server

If the input field is empty, the function simply clears the content of the txtHint placeholder.

Example Explained - The GetXmlHttpObject() Function

The example above calls a function called GetXmlHttpObject().

The purpose of the function is to solve the problem of creating different XMLHTTP objects for different browsers.

The function is listed below:

function GetXmlHttpObject()

{

var xmlHttp=null;

try

  {

  // Firefox, Opera 8.0+, Safari

  xmlHttp=new XMLHttpRequest();

  }

catch (e)

  {

  // Internet Explorer

  try

    {

    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

    }

  catch (e)

    {

    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

    }

  }

return xmlHttp;

}

Example Explained - The stateChanged() Function

The stateChanged() function contains the following code:

function stateChanged()

{

if (xmlHttp.readyState==4)

{

document.getElementById("txtHint").innerHTML=xmlHttp.responseText;

}

}

The stateChanged() function executes every time the state of the XMLHTTP object changes.

When the state changes to 4 ("complete"), the content of the txtHint placeholder is filled with the response text.


AJAX Http Requests

AJAX Uses HTTP Requests

In traditional JavaScript coding, if you want to get any information from a database or a file on the server, or send user information to a server, you will have to make an HTML form and GET or POST data to the server. The user will have to click the "Submit" button to send/get the information, wait for the server to respond, then a new page will load with the results.

Because the server returns a new page each time the user submits input, traditional web applications can run slowly and tend to be less user-friendly.

With AJAX, your JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object

With an HTTP request, a web page can make a request to, and get a response from a web server - without reloading the page. The user will stay on the same page, and he or she will not notice that scripts request pages, or send data to a server in the background.

The XMLHttpRequest Object

By using the XMLHttpRequest object, a web developer can update a page with data from the server after the page has loaded!

AJAX was made popular in 2005 by Google (with Google Suggest).

Google Suggest is using the XMLHttpRequest object to create a very dynamic web interface: When you start typing in Google's search box, a JavaScript sends the letters off to a server and the server returns a list of suggestions.

The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7.


AJAX - Request a Server

AJAX - Sending a Request to the Server

To send off a request to the server, we use the open() method and the send() method.

The open() method takes three arguments. The first argument defines which method to use when sending the request (GET or POST). The second argument specifies the URL of the server-side script. The third argument specifies that the request should be handled asynchronously. The send() method sends the request off to the server. If we assume that the HTML and ASP file are in the same directory, the code would be:

xmlHttp.open("GET","time.asp",true);

xmlHttp.send(null);

Now we must decide when the AJAX function should be executed. We will let the function run "behind the scenes" when the user types something in the username text field:

<form name="myForm">

Name: <input type="text"

onkeydown="ajaxFunction();" name="username" />

Time: <input type="text" name="time" />

</form>

Our updated AJAX-ready "testAjax.htm" file now looks like this:

<html>

<body>

<script type="text/javascript">

function ajaxFunction()

{

var xmlHttp;

try

  {

  // Firefox, Opera 8.0+, Safari

  xmlHttp=new XMLHttpRequest();

  }

catch (e)

  {

  // Internet Explorer

  try

    {

    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

    }

  catch (e)

    {

    try

      {

      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

      }

    catch (e)

      {

      alert("Your browser does not support AJAX!");

      return false;

      }

    }

  }

  xmlHttp.onreadystatechange=function()

    {

    if(xmlHttp.readyState==4)

      {

      document.myForm.time.value=xmlHttp.responseText;

      }

    }

  xmlHttp.open("GET","time.asp",true);

  xmlHttp.send(null);

}

</script>

<form name="myForm">

Name: <input type="text"

onkeydown="ajaxFunction();" name="username" />

Time: <input type="text" name="time" />

</form>

</body>

</html>

The next chapter makes our AJAX application complete with the "time.asp" script.


AJAX - The Server-Side Script

AJAX - The Server-Side ASP Script

Now we are going to create the script that displays the current server time.

The responseText property (explained in the previous chapter) will store the data returned from the server. Here we want to send back the current time. The code in "time.asp" looks like this:

<%

response.write(time)

%>

Run Your AJAX Application

Try the AJAX application by typing some text into the Name text box below, then click inside the Time text box:

Name: [TEditFormControlObj] Time: [TEditFormControlObj]

The Time text box gets the server's time from "time.asp" file without reloading the page!


AJAX Source Code to Suggest Example

AJAX Suggest Source Code

AJAX Source Code to Suggest Example

The source code below belongs to the AJAX example on the previous page.

You can copy and paste it, and try it yourself.

The AJAX HTML Page

This is the HTML page. It contains a simple HTML form and a link to a JavaScript.

<html>

<head>

<script src="clienthint.js"></script>

</head>

<body>

<form>

First Name:

<input type="text" id="txt1"

onkeyup="showHint(this.value)">

</form>

<p>Suggestions: <span id="txtHint"></span></p>

</body>

</html>

The JavaScript code is listed below.

The AJAX JavaScript

This is the JavaScript code, stored in the file "clienthint.js":

var xmlHttp

function showHint(str)

{

if (str.length==0)

{

document.getElementById("txtHint").innerHTML="";

return;

}

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)

{

alert ("Your browser does not support AJAX!");

return;

}

var url="gethint.asp";

url=url+"?q="+str;

url=url+"&sid="+Math.random();

xmlHttp.onreadystatechange=stateChanged;

xmlHttp.open("GET",url,true);

xmlHttp.send(null);

}

function stateChanged()

{

if (xmlHttp.readyState==4)

{

document.getElementById("txtHint").innerHTML=xmlHttp.responseText;

}

}

function GetXmlHttpObject()

{

var xmlHttp=null;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

  {

  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

  }

catch (e)

  {

  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

}

return xmlHttp;

}

The AJAX Server Page - ASP and PHP

There is no such thing as an AJAX server. AJAX pages can be served by any internet server.

The server page called by the JavaScript in the example from the previous chapter is a simple ASP file called "gethint.asp".

Below we have listed two examples of the server page code, one written in ASP and one in PHP.

AJAX ASP Example

The code in the "gethint.asp" page is written in VBScript for an Internet Information Server (IIS). It just checks an array of names and returns the corresponding names to the client:

<%

dim a(30)

'Fill up array with names

a(1)="Anna"

a(2)="Brittany"

a(3)="Cinderella"

a(4)="Diana"

a(5)="Eva"

a(6)="Fiona"

a(7)="Gunda"

a(8)="Hege"

a(9)="Inga"

a(10)="Johanna"

a(11)="Kitty"

a(12)="Linda"

a(13)="Nina"

a(14)="Ophelia"

a(15)="Petunia"

a(16)="Amanda"

a(17)="Raquel"

a(18)="Cindy"

a(19)="Doris"

a(20)="Eve"

a(21)="Evita"

a(22)="Sunniva"

a(23)="Tove"

a(24)="Unni"

a(25)="Violet"

a(26)="Liza"

a(27)="Elizabeth"

a(28)="Ellen"

a(29)="Wenche"

a(30)="Vicky"

'get the q parameter from URL

q=ucase(request.querystring("q"))

'lookup all hints from array if length of q>0

if len(q)>0 then

hint=""

for i=1 to 30

  if q=ucase(mid(a(i),1,len(q))) then

    if hint="" then

      hint=a(i)

    else

      hint=hint & " , " & a(i)

    end if

  end if

next

end if

'Output "no suggestion" if no hint were found

'or output the correct values

if hint="" then

response.write("no suggestion")

else

response.write(hint)

end if

%>

AJAX PHP Example

The code above rewritten in PHP.

Note: To run the entire example in PHP, remember to change the value of the url variable in "clienthint.js" from "gethint.asp" to "gethint.php".

PHP Example

<?php

// Fill up array with names

$a[]="Anna";

$a[]="Brittany";

$a[]="Cinderella";

$a[]="Diana";

$a[]="Eva";

$a[]="Fiona";

$a[]="Gunda";

$a[]="Hege";

$a[]="Inga";

$a[]="Johanna";

$a[]="Kitty";

$a[]="Linda";

$a[]="Nina";

$a[]="Ophelia";

$a[]="Petunia";

$a[]="Amanda";

$a[]="Raquel";

$a[]="Cindy";

$a[]="Doris";

$a[]="Eve";

$a[]="Evita";

$a[]="Sunniva";

$a[]="Tove";

$a[]="Unni";

$a[]="Violet";

$a[]="Liza";

$a[]="Elizabeth";

$a[]="Ellen";

$a[]="Wenche";

$a[]="Vicky";

//get the q parameter from URL

$q=$_GET["q"];

//lookup all hints from array if length of q>0

if (strlen($q) > 0)

{

$hint="";

for($i=0; $i<count($a); $i++)

{

if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))

  {

  if ($hint=="")

    {

    $hint=$a[$i];

    }

  else

    {

    $hint=$hint." , ".$a[$i];

    }

  }

}

}

// Set output to "no suggestion" if no hint were found

// or to the correct values

if ($hint == "")

{

$response="no suggestion";

}

else

{

$response=$hint;

}

//output the response

echo $response;

?>


AJAX XML

AJAX XML Example

AJAX can be used for interactive communication with an XML file.

AJAX XML Example

In the AJAX example below we will demonstrate how a web page can fetch information from an XML file using AJAX technology.

Select a CD in the Box Below

Select a CD: [TComboFormControlObj]

CD info will be listed here.

AJAX Example Explained

The example above contains a simple HTML form and a link to a JavaScript:

<html>

<head>

<script src="selectcd.js"></script>

</head>

<body>

<form>

Select a CD:

<select name="cds" onchange="showCD(this.value)">

<option value="Bob Dylan">Bob Dylan</option>

<option value="Bonnie Tyler">Bonnie Tyler</option>

<option value="Dolly Parton">Dolly Parton</option>

</select>

</form>

<p>

<div id="txtHint"><b>CD info will be listed here.</b></div>

</p>

</body>

</html>

As you can see it is just a simple HTML form with a simple drop down box called "cds".

The paragraph below the form contains a div called "txtHint". The div is used as a placeholder for info retrieved from the web server.

When the user selects data, a function called "showCD" is executed. The execution of the function is triggered by the "onchange" event. In other words: Each time the user change the value in the drop down box, the function showCD is called.

The JavaScript code is listed below.

The AJAX JavaScript

This is the JavaScript code stored in the file "selectcd.js":

var xmlHttp

function showCD(str)

{

xmlHttp=GetXmlHttpObject();

if (xmlHttp==null)

{

alert ("Your browser does not support AJAX!");

return;

}

var url="getcd.asp";

url=url+"?q="+str;

url=url+"&sid="+Math.random();

xmlHttp.onreadystatechange=stateChanged;

xmlHttp.open("GET",url,true);

xmlHttp.send(null);

}

function stateChanged()

{

if (xmlHttp.readyState==4)

{

document.getElementById("txtHint").innerHTML=xmlHttp.responseText;

}

}

function GetXmlHttpObject()

{

var xmlHttp=null;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

  {

  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

  }

catch (e)

  {

  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

}

return xmlHttp;

}

The AJAX Server Page

The server page called by the JavaScript, is a simple ASP file called "getcd.asp".

The page is written in VBScript for an Internet Information Server (IIS). It could easily be rewritten in PHP, or some other server language. Look at a corresponding example in PHP.

The code runs a query against an XML file and returns the result as HTML:

<%

q=request.querystring("q")

set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")

xmlDoc.async="false"

xmlDoc.load(Server.MapPath("cd_catalog.xml"))

set nodes=xmlDoc.selectNodes("CATALOG/CD[ARTIST='" & q & "']")

for each x in nodes

for each y in x.childnodes

  response.write("<b>" & y.nodename & ":</b> ")

  response.write(y.text)

  response.write("<br />")

next

next

%>


AJAX XMLHttpRequest Object

AJAX - The XMLHttpRequest Object

AJAX - More About the XMLHttpRequest Object

Before sending data to the server, we have to explain three important properties of the XMLHttpRequest object.

The onreadystatechange Property

After a request to the server, we need a function that can receive the data that is returned by the server.

The onreadystatechange property stores the function that will process the response from a server. The following code defines an empty function and sets the onreadystatechange property at the same time:

xmlHttp.onreadystatechange=function()

{

// We are going to write some code here

}

The readyState Property

The readyState property holds the status of the server's response. Each time the readyState changes, the onreadystatechange function will be executed.

Here are the possible values for the readyState propery:

State | Description
0 | The request is not initialized
1 | The request has been set up
2 | The request has been sent
3 | The request is in process
4 | The request is complete

We are going to add an If statement to the onreadystatechange function to test if our response is complete (this means that we can get our data):

xmlHttp.onreadystatechange=function()

{

if(xmlHttp.readyState==4)

  {

  // Get the data from the server's response

  }

}

The responseText Property

The data sent back from the server can be retrieved with the responseText property.

In our code, we will set the value of our "time" input field equal to responseText:

xmlHttp.onreadystatechange=function()

{

if(xmlHttp.readyState==4)

  {

  document.myForm.time.value=xmlHttp.responseText;

  }

}

The next chapter shows how to ask the server for some data!


AJAX Tutorial

AJAX Tutorial

compteacher

AJAX stands for Asynchronous JavaScript And XML.

AJAX is a type of programming made popular in 2005 by Google (with Google Suggest).

AJAX is not a new programming language, but a new way to use existing standards.

With AJAX you can create better, faster, and more user-friendly web applications.

AJAX is based on JavaScript and HTTP requests.


gethint.html

no suggestion


time.html

1:41:46 AM


Introduction to AppML

AppML is an XML language for describing Internet applications.

With AppML you can create Internet applications without programming.

AppML uses the Internet standards HTML, CSS, and XML to describe applications.

With AppML, you can create your own Internet applications with only a few lines of XML. You don't need any programming skills!

Did you ever want your data to be available over the Internet? Start using AppML now. It's open source, and free to use.

What is AppML?

· AppML stands for Application Markup Language
· AppML uses XML to describe Internet applications
· AppML applications are self-describing
· AppML is a declarative language
· AppML is platform independent
· AppML uses AJAX technology
· AppML is an open source initiative from W3Schools

AppML is a Declarative Language

AppML is not a programming language. It is a declarative language, used to describe applications.

Traditional applications are written in a programming language and compiled, with predefined data structures and functions. AppML allows the programmer to redefine both data and functions while the application is running.

Since AppML applications are written in XML, AppML applications are self-describing.

AppML is Browser Independent

Since AppML only uses internet standards like HTML (XHTML), CSS, XML, and JavaScript, AppML will run in all browsers.

AppML Uses AJAX Technology

AppML uses AJAX technology. Internet communication between the web client and the web server is done with HTTP requests.

You can read more about AJAX in our AJAX tutorial.

How can AppML be Used?

AppML can be used as a part of an existing application, as a stand alone application, or a combination of both.

AppML is also ideal for prototyping and extremely rapid application development.

AppML is Open Source

In this tutorial there is an AppML case study, where AppML is used to create a complete application.

At the end of the case study, there is a page where the full AppML source code can be downloaded.

History

In 1999, the staff at W3Schools began developing AppML.

In September 2000, a development project for a large Norwegian customer was started. The goal of the project was to convert a huge information system from a Windows desktop application to a modern Internet application using only AppML.

The new AppML-based system was launched in 2001, several months before schedule, and it was one of the first commercial available AJAX applications.

The project was a huge success, with development time reduced by 75% compared to ordinary web development.

Since then, hundreds of new applications have been added, and AppML now covers over 1000 running applications.

In December 2006, W3Schools decided to offer AppML to the public, as an open source product, free of charge.

Original Design Goals

· AppML must run over the Internet
· AppML must use Internet standards only
· AppML must be platform independent
· AppML must be compatible with XML and XHTML
· AppML must support a variety of application needs
· AppML must be self-describing
· AppML applications must be easy to develop
· AppML applications must be easy to maintain
· AppML applications must be easy to change
· AppML applications must be future proof


AppML Example

AppML applications are described with XML.

How does AppML work?

1. Describe the elements of your application with XML
2. Save the XML file on a web server
3. Link to an AppML web service to execute your application

When you want to change your application, just edit the XML file. The web service will take care of the rest.

That's all...

AppML is Extensible and Flexible

One of the nicest thing about AppML is that it is extensible. You can use AppML to describe existing applications, or only a small part of an application. You can also add your own elements to an AppML description and extend the capabilities of AppML to your own needs.

Since AppML is so flexible, and can be used to describe only small parts of an application, you can start using AppML today!

Start using it against an already existing application. Rebuild a small part of the application. If you like the way AppML works, you can continue your project, until everything is converted to AppML.

The AppML Description

This is a simple AppML description:

<appml>

<title>CUSTOMERS</title>

<database>

<connection>northwind</connection>

<keyfield type="text">customerid</keyfield>

<maintable>customers</maintable>

<sql>

Select CompanyName, City, Country from Customers

</sql>

</database>

<filters>

<query>

  <field>CompanyName</field>

</query>

</filters>

<htmlform />

<htmllist />

<htmlreport />

</appml>

The AppML description above describes a connection to a database and an SQL statement to extract some data from the database. (AppML can do a lot more than this, but we will keep this example as simple as possible).

Copy the example above into Notepad and save it on your Web server as "example.xml".

You have now created your first AppML application.

Executed by Web Services

To execute the example above, you will have to link to an AppML Web Service, like this:

appml.asp?appname=example

Once again: AppML can do a lot more than this, but we will keep this example simple. Don't mind the color, style or layout of the HTML. With AppML you can easily change any part of the layout with your own templates and stylesheets.

Example Explained

The example above is explained in the next chapter of this tutorial.


AppML Explained

AppML Example Explained

This chapter explains the main parts of the AppML description from the previous chapter.

AppML Example

The XML file below is the AppML description from the previous chapter:

<appml>

<title>CUSTOMERS</title>

<database>

<connection>northwind</connection>

<keyfield type="text">customerid</keyfield>

<maintable>customers</maintable>

<sql>

Select CompanyName, City, Country from Customers

</sql>

</database>

<filters>

<query>

  <field>CompanyName</field>

</query>

</filters>

<htmlform />

<htmllist />

<htmlreport />

</appml>

An AppML description always starts with <appml> and ends with </appml>. The description must be saved as an XML file (.xml).

The <title> element defines a default title for the application.

The <database> element contains information about the database connection.

The <filters> element defines a search function for the application.

The <htmlform /> element defines support for a standard HTML input form.

The <htmllist /> element defines support for a standard HTML list.

The <htmlreport /> element defines support for a standard HTML report.

With AppML you can also define your own HTML forms, HTML lists, and HTML reports, to make your AppML applications look and function exactly the way you want.

Note: Each element in an AppML description will be explained in detail in the AppML case study and in the AppML reference.


AppML Web Services

The AppML description is executed by an AppML Web Service.

AppML Separates Data from Process

In application development, it is vital to separate the data from the processes that act on the data.

It is important to understand that the AppML description from the previous page cannot do anything.

The description has to rely on an AppML web service to execute the application.

AppML Web Services

Here are some of the AppML-based web services:

HTML Report Service

A web service that runs an HTML report based on an AppML description.

XML Report Service

A web service that runs an XML report based on an AppML description.

HTML Form Service

A web service that runs an HTML form based on an AppML description.

HTML List Service

A web service that runs an HTML list based on an AppML description.

HTML DB Query Service

A web service that executes a database query based on an AppML description.

Examples of AppML Web Services

<appml>

<database>

<connection>music_db</connection>

<sql>select title,artist,year from cd_catalog</sql>

</database>

</appml>

The AppML description above can be read by different AppML services to produce different results. Here are a few examples:

An HTML Report generated by the HTML Report Service:

TITLE | ARTIST | YEAR
Empire Burlesque | Bob Dylan | 1985
Hide your heart | Bonnie Tyler | 1988
Greatest Hits | Dolly Parton | 1982

An XML Report generated by the XML Report Service:

<cd_catalog>

<row>

  <title>Empire Burlesque</title>

  <artist>Bob Dylan</artist>

  <year>1985</year>

</row>

<row>

  <title>Hide your heart</title>

  <artist>Bonnie Tyler</artist>

  <year>1988</year>

</row>

<row>

  <title>Greatest Hits</title>

  <artist>Dolly Parton</artist>

  <year>1982</year>

</row>

</cd_catalog>

An HTML Form generated by the HTML Form Service:

Input Form

Title: | [TEditFormControlObj]
Artist: | [TEditFormControlObj]
Year: | [TEditFormControlObj]


Delete attribute

Delete Attribute

For HTML list:

The delete attribute removes the "Delete" button (garbage can) from the HTML list.

Note: Only available in an editable HTML list.

For HTML form:

The delete attribute disables the "Delete" button in the HTML input form

Examples

Remove the "Delete" button from the HTML list:

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<keyfield type="text">customerid</keyfield>

<maintable>customers</maintable>

<sql>SELECT CompanyName,ContactName,City FROM Customers</sql>

</database>

<htmllist edit="true" delete="false" />

</appml>

View the output produced by the AppML HTML List Service

View the XML source file

Disable the "Delete" button in the HTML form:

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<keyfield type="text">customerid</keyfield>

<maintable>customers</maintable>

<sql>SELECT CompanyName,ContactName,City FROM Customers</sql>

</database>

<htmllist />

<htmlform delete="false" />

</appml>


Edit attribute

Edit Attribute

The edit attribute defines an editable HTML list.

In this view you may edit the data directly in the list. A garbage can will be displayed on the right side of each record and allows you to delete the record.

After modifying a record you may save it by clicking on the floppy disk image on the left side of each record. If you have modified several records in the list, you can save all the changes by clicking on the Save image over the records.

Example

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<keyfield type="text">customerid</keyfield>

<maintable>customers</maintable>

<sql>SELECT CompanyName,ContactName,City FROM Customers</sql>

</database>

<htmllist edit="true" />

</appml>

View the output produced by the AppML HTML List Service


Filters attribute

Filters Attribute

The filters attribute is used to remove the filter function from the HTML report (no search allowed in the report).

Example

<?xml version="1.0" ?>

<appml>

<title>CUSTOMERS</title>

<database>

<connection>northwind</connection>

<sql>SELECT Companyname,ContactName,Country

FROM Customers</sql>

</database>

<filters>

<orderby>Companyname</orderby>

<query><field>Companyname</field></query>

<query><field>Country</field></query>

</filters>

<htmlreport filters="off" />

</appml>

View the output produced by the HTML Report Service

View the XML source file

Example

The example below has no filters="off" attribute and allows you to filter the report:

<?xml version="1.0" ?>

<appml>

<title>CUSTOMERS</title>

<database>

<connection>northwind</connection>

<sql>SELECT Companyname,ContactName,Country

FROM Customers</sql>

</database>

<filters>

<orderby>Companyname</orderby>

<query><field>Companyname</field></query>

<query><field>Country</field></query>

</filters>

<htmlreport />

</appml>


Maxlines attribute

Maxlines Attribute

The maxlines attribute specifies the maximum number of records to show on each page.

Note: Default number of records to show is 15.

Note: Available in both a regular HTML list and an editable HTML list.

Example

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<keyfield type="text">customerid</keyfield>

<maintable>customers</maintable>

<sql>SELECT CompanyName,ContactName,City FROM Customers</sql>

</database>

<htmllist edit="true" maxlines="5" />

</appml>

View the output produced by the AppML HTML List Service


Name attribute

Name Attribute

The name attribute specifies a unique name for the <htmlreport> element.

This enables the AppML Report Service to run a number of different reports based on the same AppML description.

Example

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

</database>

<htmlreport name="ten_most_expensive">

<title>10 MOST EXPENSIVE PRODUCTS</title>

<sql>

SELECT TenMostExpensiveProducts AS [Product Name],

UnitPrice AS [Price per Unit]

FROM [Ten Most Expensive Products]

ORDER BY TenMostExpensiveProducts

</sql>

</htmlreport>

<htmlreport name="category_sales_1997">

<title>CATEGORY SALES FOR 1997</title>

<sql>

SELECT CategoryName,CategorySales

FROM [Category Sales for 1997]

ORDER BY CategoryName

</sql>

</htmlreport>

</appml>

View the " Ten most expensive" report produced by the AppML HTML Report Service

View the " Category sales 1997" report produced by the AppML HTML Report Service

View the XML source file


Navigate attribute

Navigate Attribute

The navigate attribute removes the "Previous/Next/First/Last" buttons from the HTML list, and displays all the records on one page.

Note: Available in both a regular HTML list and an editable HTML list.

Example

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<keyfield type="text">customerid</keyfield>

<maintable>customers</maintable>

<sql>SELECT CompanyName,ContactName,City FROM Customers</sql>

</database>

<htmllist edit="true" navigate="false" />

</appml>

View the XML source file


New attribute

New Attribute

For HTML list:

The new attribute removes the "New" button from the HTML list.

Note: The "New" button will not work in an editable HTML list if not the newlines attribute is specified OR the AppML description has an <htmlform> element.

For HTML form:

The new attribute disables the "New" button in the HTML input form

For both:

Note: The new="false" attribute is available in an editable HTML list AND in a regular HTML list IF an <htmlform> element also is presented.

Examples

Remove the "New" button from the HTML list:

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<keyfield type="text">customerid</keyfield>

<maintable>customers</maintable>

<sql>SELECT CompanyName,ContactName,City FROM Customers</sql>

</database>

<htmllist edit="true" new="false" />

</appml>

View the output produced by the AppML HTML

View the XML source file

Disable the "New" button in the HTML list and form :

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<keyfield type="text">customerid</keyfield>

<maintable>customers</maintable>

<sql>SELECT CompanyName,ContactName,City FROM Customers</sql>

</database>

<htmllist new="false" />

<htmlform new="false" />

</appml>

View the output produced by the AppML List and Form Service

View the XML source file


Reporttarget attribute

Reporttarget Attribute

The reporttarget attribute specifies the report in an external XML file to be executed when clicking on the "Report" button in the HTML list.

Note: Available in both a regular HTML list and an editable HTML list.

Example

<?xml version="1.0" ?><appml>

<title>CUSTOMERS</title>

<database>

<connection>northwind</connection>

<keyfield type="text">customerid</keyfield>

<maintable>customers</maintable>

<sql>SELECT CompanyName,ContactName,City FROM Customers</sql>

</database>

<htmllist reporttarget="northwind/report_customers_by_country" />

</appml>

View the output produced by the AppML HTML List Service

View the XML source file


Search attribute

Search Attribute

The search attribute removes the "Filter" button from the HTML list.

Note: Available in both a regular HTML list and an editable HTML list.

Example

<?xml version="1.0" ?>

<appml>

<title>CUSTOMERS</title>

<database>

<connection>northwind</connection>

<keyfield type="text">customerid</keyfield>

<maintable>customers</maintable>

<sql>SELECT CompanyName,ContactName,Country FROM Customers</sql>

</database>

<filters>

<orderby>Companyname</orderby>

<query><field>Companyname</field></query>

<query><field>Country</field></query>

<orderselect>

<field>Companyname</field>

<field>Country</field>

</orderselect>

</filters>

<htmllist search="false" />

</appml>


Src attribute

Src Attribute

The src attribute provides a reference to an <htmlreport> element stored in an external AppML description file.

Example

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<sql>SELECT CompanyName,ContactName,City FROM Customers</sql>

</database>

<htmlreport src="northwind/customers_by_country" />

</appml>

View the output produced by the AppML HTML Report Service

View the XML source file


Submit attribute

Submit Attribute

The submit attribute disables the "Submit" button in the HTML input form.

Example

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<keyfield type="text">customerid</keyfield>

<maintable>customers</maintable>

<sql>SELECT CompanyName,ContactName,City FROM Customers</sql>

</database>

<htmllist />

<htmlform submit="false" />

</appml>

View the output produced by the AppML List and Form Service

View the XML source file


AppML Case Study Application

Case Study Application

This page demonstrates some more Northwind AppML applications.

Northwind Reports

Reports | AppML Source
Sales by Category | Sales by Category
Products by Category | Products by Category
Category Sales for 1997 | Category Sales for 1997
 | Product Sales for 1997
Ten Most Expensive Products | Ten Most Expensive Products

Northwind Order System

The Northwind AppML application also has an order system application:

Application | AppML Source
Order system | orders.xml


AppML Case Study AppML

Case Study AppML

AppML describes an application.

An AppML web service executes it.

Describe the Application

The purpose of AppML is to describe applications. AppML does this by describing elements. With AppML you can describe database elements, report elements, form elements, and many other elements.

This is an example of an AppML description:

<appml>

<database>

<connection>northwind</connection>

<sql>SELECT CompanyName, Country FROM Customers</sql>

</database>

</appml>

In the example above, the <appml> tag is used to define an AppML document. The <connection> tag, inside the <database> tag, defines a named connection to a database, and the <sql> tag defines a standard SQL statement to select records from the database.

Execute the Application

To execute an AppML description you will need an AppML web service. The purpose of the web service is to execute the application based on the AppML description.

To access an AppML web service, you only have to link to it.

The following link: appml.asp?appname=customers&displaytype=report

links to "appml.asp" with a request to run an HTML report based on an AppML description named "customers.xml".

The following link: appml.asp?appname=customers&displaytype=list

links to "appml.asp" with a request to run an HTML list, based on an AppML description named "customers.xml".


AppML Case Study Categories

Case Study Categories

This chapter demonstrates AppML on the Categories table in the Northwind database.

The Categories XML File

The "Categories" AppML description:

<?xml version="1.0" encoding="ISO-8859-1" ?>

<appml>

<title>CATEGORIES</title>

<database>

<connection>northwind</connection>

<maintable>categories</maintable>

<keyfield>Categoryid</keyfield>

<sql>SELECT Categoryname, Description FROM Categories</sql>

</database>

<htmllist edit="true" />

<htmlreport />

<htmlform />

</appml>

View XML source: northwind/categories.xml

AppML HTML Report

HTML Report: appml.asp?appname=northwind/categories&

The link above runs the AppML HTML report service. To be able to run an AppML HTML report, the AppML description must contain an <htmlreport> tag.

We see that the report contains a header ("Categories"), a table listing the different categories along with a description, and the number of records in the report. The title and sql selection shown in the report, is taken from the <title> tag and the <sql> tag inside <database>. The number of records are automatically added by AppML.

AppML HTML Form

HTML Form: appml.asp?appname=northwind/categories& displaytype=form

The link above runs the AppML form service. To be able to run AppML form, the AppML description must contain an <htmlform> tag. The AppML description must also contain a <maintable> tag and a <keyfield> tag (inside the <database> tag).

The link above takes you to a page with a blank form. Here you can add a new record. AppML automatically adds New, Submit, and Delete buttons.

AppML HTML List

HTML List: displaytype=list

The link above runs the AppML list service. To be able to run AppML list, the AppML description must contain an <htmllist> tag.

We see that the list contains a header ("Categories"), the number of records in the list, a New button, a Save button, a Report button, and a table listing the different categories along with a description.

The title and sql selection shown in the report, is taken from the <title> tag and the <sql> tag inside <database>. The number of records and the buttons are automatically added by AppML.

The New button is automatically added because the AppML description contains an <htmlform> tag.

The Report button is automatically added because the AppML description contains an <htmlreport> tag.

The Folder image to the left of each records is automatically added because the AppML description contains an <htmlform> tag. If you click on the Folder image, you will be taken to the AppML form.

Notice the edit="true" attribute inside the <htmllist> tag. This attribute automatically makes the list editable. You can modify the data directly in the list. After modifying the data, you can save the changes by clicking on the floppy disk image to the left of each record, or you can click on the Save button on the top of the list (this button saves all changes).

You can also delete records by clicking on the trashcan to the right of each record.

AppML XML Report

XML Report:

appml.asp?appname=northwind/categories& displaytype=report&

The link above runs the AppML XML service.

The AppML XML report service will generate an XML report based on the sql defined in the <database> element. The XML report's root element is <table>. The first element after <table> is <sql>, which lists the sql used in the description. Then there will be one <row> element for each record in the sql. The <row> element contains one element for each field in the sql.

All AppML Services in One

To run all the AppML services above (except XML report) in one, use the following link:


AppML Case Study Customer

Case Study Customers

This chapter demonstrates AppML on the Customers table in the Northwind database.

The Customers XML File

The "Customers" AppML description: northwind/customers.xml

AppML HTML Report

HTML Report: appml.asp?appname=northwind/customers& displaytype=report

The link above runs the AppML HTML report service. To be able to run an AppML HTML report, the AppML description must contain an <htmlreport> tag.

We see that the report contains a header ("Customers"), a table listing the different companies along with their contact person, address, city, and country. The report also lists the number of records at the bottom. The title and sql selection shown in the report, is taken from the <title> tag (under the <appml> tag) and the <sql> tag inside <htmlreport>. The number of records are automatically added by AppML.

This report also have a Filter button. If you click on the Filter button, you can filter and sort the report. You can also determine in what format you want to show the report (Normal, Word, Excel, or XML).

The <filters> tag in "customers.xml" looks like this:

<filters>

<orderby>Companyname</orderby>

<query>

  <field>Companyname</field>

</query>

<query>

  <field>City</field>

  <sql>SELECT DISTINCT city FROM customers ORDER BY city</sql>

</query>

<query>

  <field>Country</field>

  <sql>SELECT DISTINCT country

  FROM customers ORDER BY country</sql>

</query>

<orderselect>

  <field>Companyname</field>

  <field>Contactname</field>

  <field>City</field>

  <field>Country</field>

</orderselect>

</filters>

We see that the <filters> tag contains an <orderby> tag, several <query> tags, and an <orderselect> tag.

The <orderby> tag specifies which field the report should be ordered by. In this case, the report will be ordered by the Companyname field in the Customers table.

The <query> tags defines which fields the user can search on. The <field> tag defines the name of the field in the table, and the <label> tag defines the label that will be visible for the user. In this case, the user can search on "Companyname", "City", and "Country".

Inside the "City" and "Country" <query> tag, there is an <sql> tag. The <sql> tag indicates that AppML should create a drop-down box where the user can select an existing city and/or country to search on.

The <orderselect> tag specifies other order-by options for the user. Here, the user can determine if the report should be ordered by "Companyname", "Contactname", "City", or "Country".

The <filters> tag is used by both <htmlreport> and <htmllist>.

AppML HTML Form

HTML Form: appml.asp?appname=northwind/customers& displaytype=form

The link above runs the AppML form service. To be able to run AppML form, the AppML description must contain an <htmlform> tag. The AppML description must also contain a <maintable> tag and a <keyfield> tag (inside the <database> tag).

The link above takes you to a page with a blank form. Here you can add a new record. AppML automatically adds New, Submit, and Delete buttons.

This time we have specified the look of the form with standard HTML code. The <htmlform> tag in "customers.xml" looks like this:

<htmlform>

<sql>

SELECT customerid,companyname,contactname,contacttitle,

address,city,region,postalcode,country,phone,fax

FROM Customers

</sql>

<elements>

<field name="customerid">

  <required/>

</field>

</elements>

<form>

<br/>

<table width="50%">

<tr>

<td>

<fieldset>

<legend style="color:darkblue">Customer Information</legend>

<br/>

<table>

<tr>

<td>CustomerID:</td>

<td colspan="3"><input size="5" maxlength="5" id="customerid"/>

</td>

</tr>

<tr>

<td>Customer Name:</td>

<td colspan="3"><input size="40" maxlength="40" id="companyname"/>

</td>

</tr>

<tr>

<td>Contact Name:</td>

<td colspan="3"><input size="30" maxlength="30" id="contactname"/>

</td>

</tr>

<tr>

<td>Title:</td>

<td colspan="3"><input size="30" maxlength="30" id="contacttitle"/>

</td>

</tr>

<tr>

<td>Address:</td>

<td colspan="3"><input size="60" maxlength="60" id="address"/></td>

</tr>

<tr>

<td>City:</td>

<td><input size="15" maxlength="15" id="city"/></td>

<td>Region:</td>

<td><input size="15" maxlength="15" id="region"/></td>

</tr>

<tr>

<td>PostalCode:</td>

<td><input size="15" maxlength="10" id="postalcode"/></td>

<td>Country:</td>

<td><input size="15" maxlength="15" id="country"/></td>

</tr>

<tr>

<td>Phone:</td>

<td><input size="24" maxlength="24" id="phone"/></td>

<td>Fax:</td>

<td><input size="24" maxlength="24" id="fax"/></td>

</tr>

</table>

<br/>

</fieldset>

</td>

</tr>

</table>

</form>

</htmlform>

The sql selection for the form is specified in the <sql> tag inside <htmlform>.

The <elements> tag is a container for the data fields in an HTML form or in an editable HTML list that should fulfill special criterions. In the code above, we specify that the field customerid is required (cannot be left blank in the form). If a user leave this field blank, AppML will generate an error message telling that the field has to be filled with data.

The look of the input form is specified inside the <form> and </form> tags. Here we use standard HTML (like <table> tags, <fieldset> and <legend>, and <input>).

Notice that to show the data from a database and to make the data updateable, we set the id attribute of the input tags equal to the fieldnames in our sql selection.

AppML HTML List

HTML List: appml.asp?appname=northwind/customers&

The link above runs the AppML list service. To be able to run AppML list, the AppML description must contain an <htmllist> tag.

We see that the list contains a header ("Customers"), the number of records in the list, a Filter button, a New button, a Report button, and a table listing the different customers.

The title and sql selection shown in the report, is taken from the <title> tag and the <sql> tag inside <htmllist>. The number of records and the buttons are automatically added by AppML.

The Filter button is automatically added because the AppML description contains a <filters> tag.

The New button is automatically added because the AppML description contains an <htmlform> tag.

The Report button is automatically added because the AppML description contains an <htmlreport> tag.

The Folder image to the left of each records is automatically added because the AppML description contains an <htmlform> tag. If you click on the Folder image, you will be taken to the AppML form.

The <htmllist> tag in "customers.xml" looks like this:

<htmllist>

<sql>

SELECT Companyname, ContactName AS [Contact Name],City,Country,

customerid as Orders

FROM Customers

</sql>

<server>

<field name="Orders">

<display>

<a href="appml.asp?appname=northwind/orders&amp;filter=

customers.companyname&amp;value=#appml:field(name='companyname')">

Orders</a>

</display>

</field>

</server>

</htmllist>

In the list, notice the column called "Orders". This column is a link that goes to the "Orders" application and shows the orders for each customer.

AppML XML Report

XML Report:

appml.asp?appname=northwind/customers& type=xml

The link above runs the AppML XML service.

The AppML XML report service above will generate an XML report based on the sql defined in the <htmlreport> element. The XML report's root element is <table>. The first element after <table> is <sql>, which lists the sql used in the description. Then there will be one <row> element for each record in the sql. The <row> element contains one element for each field in the sql.

All AppML Services in One

To run all the AppML services above in one, use the following link:

appml.asp?appname=northwind/customers


AppML Casy Study Database

Case Study Database

The AppML Case study uses the Northwind database.

The Northwind Database

The Northwind company has a traditional database model with data about customers, suppliers, products, orders, and employees.

The information is stored in a database with 8 tables:

· Customers
· Suppliers
· Products
· Categories
· Orders
· Order Details
· Shippers
· Employees

Sample output from the database tables is displayed below. To save space we don't display all tables. We have also reduced the number of columns and rows.

Northwind Customers

CompanyName | Address | City | Country
Alfreds Futterkiste | Obere Str. 57 | Berlin | Germany
Ana Trujillo Emparedados y heladoso | Avda. de la Constituci 222 | Mexico D.F. | Mexico
Antonio Moreno Taquería | Mataderos 2312 | México D.F. | Mexico
Around the Horn | 120 Hanover Sq. | London | UK
Berglunds snabbköp | Berguvsvägen 8 | Luleå | Sweden
Blauer See Delikatessen | Forsterstr. 57 | Mannheim | Germany
Blondel père et fils | 24, place Kléber | Strasbourg | France
Bólido Comidas preparadas | C/ Araquil, 67 | Madrid | Spain
Bon app' | 12, rue des Bouchers | Marseille | France
Bottom-Dollar Markets | 23 Tsawassen Blvd. | Tsawassen | Canada

Northwind Suppliers

CompanyName | Address | City | Country
Exotic Liquid | 49 Gilbert St. | London | UK
New Orleans Cajun Delights | P.O. Box 78934 | New Orleans | USA
Grandma Kelly's Homestead | 707 Oxford Rd. | Ann Arbor | USA
Tokyo Traders | 9-8 SekimaiMusashino-shi | Tokyo | Japan
Cooperativa de Quesos 'Las Cabras' | Calle del Rosal 4 | Oviedo | Spain
Mayumi's | 92 Setsuko Chuo-ku | Osaka | Japan
Pavlova, Ltd. | 74 Rose St. Moonie Ponds | Melbourne | Australia
Specialty Biscuits, Ltd. | 29 King's Way | Manchester | UK
PB Knäckebröd AB | Kaloadagatan 13 | Göteborg | Sweden
Refrescos Americanas LTDA | Av. das Americanas 12.890 | São Paulo | Brazil

Northwind Products

ProductName | QuantityPerUnit | UnitPrice | UnitsInStock
Chai | 10 boxes x 20 bags | 18 | 39
Chang | 24 - 12 oz bottles | 19 | 17
Aniseed Syrup | 12 - 550 ml bottles | 10 | 13
Chai | 10 boxes x 20 bags | 18 | 39
Chef Anton's Gumbo Mix | 36 boxes | 21 | 0
Grandma's Boysenberry Spread | 12 - 8 oz jars | 25 | 120
Uncle Bob's Organic Dried Pears | 12 - 1 lb pkgs. | 30 | 15
Northwoods Cranberry Sauce | 12 - 12 oz jars | 40 | 6
Mishi Kobe Niku | 18 - 500 g pkgs. | 97 | 29
Ikura | 12 - 200 ml jars | 31 | 31

Northwind Orders

CustomerID | OrderDate | ShipAddress | ShipCity | ShipCountry
VINET | 7/4/1996 | 59 rue de l | Reims | France
TOMSP | 7/5/1996 | Luisenstr. 48 | Münster | Germany
VICTE | 7/8/1996 | 2, rue du Commerce | Lyon | France
SUPRD | 7/9/1996 | Boulevard Tirou, 255 | Charleroi | Belgium
HANAR | 7/10/1996 | Rua do Paço, 67 | Rio de Janeiro | Brazil
CHOPS | 7/11/1996 | Hauptstr. 31 | Bern | Switzerland
RICSU | 7/12/1996 | Starenweg 5 | Genève | Switzerland
WELLI | 7/15/1996 | Rua do Mercado, 12 | Resende | Brazil
HILAA | 7/16/1996 | Carrera 22 con Ave. Carlos Soublette #8-35 | San Cristóbal | Venezuela
ERNSH | 7/17/1996 | Kirchgasse 6 | Graz | Austria

Northwind Employees

LastName | FirstName | Title
Davolio | Nancy | Sales Representative
Fuller | Andrew | Vice President, Sales
Leverling | Janet | Sales Representative
Peacock | Margaret | Sales Representative
Buchanan | Steven | Sales Manager
Suyama | Michael | Sales Representative
King | Robert | Sales Representative
Callahan | Laura | Inside Sales Coordinator
Dodsworth | Anne | Sales Representative


AppML Case Study Downloads

Case Study Download

From this page you can download the files from the case study.

How To Begin

To run the examples from the case study you need a Web server that understands ASP (Active Server Pages):

· Microsoft IIS 5.0 for Windows 2000
· Microsoft IIS 6.0 for Windows XP Profesional
· Microsoft IIS 6.0 for Windows 2003 Server

AppML is source only, so you don't have to install any components to start using AppML.

To start using AppML, all you have to do is to copy the files from the case study to a folder on your web:

· Download the zip file containing AppML
· Create a folder called "appmlcase" on your web
· Extract the zipped files to the appmlcase folder
· Create a folder named "db" in your appmlcase folder
· Download the northwind.mdb database
· Copy the northwind.mdb database to the db folder
· Test AppML by browsing the page "appml_test.htm" on your web

Note:

The AppML source is a proposed code for AppML. The code is supposed to be fully functional, but W3Schools provides material for training only. We do not warrant the correctness and the security of the code. The risk from using it lies entirely with the user. You can only download it if you agree to have read and accepted these facts.

I agree to the terms above. Please download AppML

The Northwind example database can be downloaded from Refsnes Data:

Connecting To The Database

The file local.config contains the information about where the database is located. If you want to change the location, just edit the file:

<database name="NORTHWIND">

<provider>Microsoft.Jet.OLEDB.4.0</provider>

<datasource mappath="yes">db/northwind.mdb</datasource>

</database>

When your database is located in a subfolder under your web, use the mappath attribute to map the position.

For security reasons, your web users should only have read access to the database.

For real life applications you should put your database outside your web folders, and grant access from the web server.

When you place the database on a location outside your web, edit the <datasource> element like shown below. If necessary, add a <userid> and <password> tag to your description:

<database name="NORTHWIND">

<provider>Microsoft.Jet.OLEDB.4.0</provider>

<datasource>c:/appmldb/northwind.mdb</datasource>

<userid>user</userid>

<password>password</password>

</database>

Note: You can have as many database descriptions you like in the local.config file.

Connecting To An SQL Server Database

If you want to use AppML against a SQL Server database, add a new <database> element as below:

<database name="PUBS"">

<provider>SQLOLEDB</provider>

<database>PUBS</database>

<datasource>SQLSERVER</datasource>

<userid>USER</userid>

<password>PASSWORD</password>

</database>

Substitute PUBS with the name of your database. Substitute SQLSERVER with the name of your SQL sever. Substitute USER with the name of a defined database user or owner like SA. Substitute PASSWORD with the users' password.

An XML Schema for AppML

If you have Internet Explorer, you can Click to view the full XML Schema for an AppML document.


AppML Case Study Employees

Case Study Employees

This chapter demonstrates AppML on the Employees table in the Northwind database.

The Employees XML File

The "Employees" AppML description: northwind/employees.xml

AppML HTML Report

HTML Report: appml.asp?appname=northwind/employees& displaytype=report

The link above runs the AppML HTML report service. To be able to run an AppML HTML report, the AppML description must contain an <htmlreport> tag.

We see that the report contains a header ("Employees"), a table listing the name of the employees along with their title, city, and country. The report also lists the number of records at the bottom. The title and sql selection shown in the report, is taken from the <title> tag (under the <appml> tag) and the <sql> tag inside <htmlreport>. The number of records are automatically added by AppML.

This report also have a Filter button. If you click on the Filter button, you can filter and sort the report. You can also determine in what format you want to show the report (Normal, Word, Excel, or XML).

The <filters> tag in "employees.xml" looks like this:

<filters>

<orderby>Lastname</orderby>

<query>

  <field>Lastname</field>

</query>

<query>

  <field>Firstname</field>

</query>

<query>

  <field>Title</field>

</query>

<query>

  <field>City</field>

</query>

<query>

  <field>Country</field>

</query>

<orderselect>

  <field>Lastname</field>

  <field>Firstname</field>

  <field>City</field>

  <field>Country</field>

</orderselect>

</filters>

We see that the <filters> tag contains an <orderby> tag, several <query> tags, and an <orderselect> tag.

The <orderby> tag specifies which field the report should be ordered by. In this case, the report will be ordered by the Lastname field in the Employees table.

The <query> tags defines which fields the user can search on. The <field> tag defines the name of the field in the table, and the <label> tag defines the label that will be visible for the user. In this case, the user can search on "Lastname", "Firstname", "Title", "City", and "Country".

The <orderselect> tag specifies other order-by options for the user. Here, the user can determine if the report should be ordered by "Lastname", "Firstname", "City", or "Country".

The <filters> tag is used by both <htmlreport> and <htmllist>.

AppML HTML Form

HTML Form: appml.asp?appname=northwind/employees& displaytype=form

The link above runs the AppML form service. To be able to run AppML form, the AppML description must contain an <htmlform> tag. The AppML description must also contain a <maintable> tag and a <keyfield> tag (inside the <database> tag).

The link above takes you to a page with a blank form. Here you can add a new record. AppML automatically adds New, Submit, and Delete buttons.

This time we have specified the look of the form with standard HTML code. The <htmlform> tag in "employees.xml" looks like this:

<htmlform>

<sql>

SELECT lastname,firstname,title,titleofcourtesy,birthdate,

hiredate,address,city,region,postalcode,country,homephone,

extension,notes,reportsto

FROM employees

</sql>

<form>

<br/>

<table width="70%">

<tr>

<td>

<fieldset>

<legend style="color:darkblue">Company Information</legend>

<br/>

<table>

<tr>

<td>First Name:</td>

<td><input size="20" maxlength="10" id="firstname"/></td>

<td>Last Name:</td>

<td><input size="20" maxlength="20" id="lastname"/></td>

</tr>

<tr>

<td>Title:</td>

<td><input size="30" maxlength="30" id="title"/></td>

<td>Reports To:</td>

<td>

<field name="reportsto">

<function name="dbselect">

<sql>SELECT employeeid,lastname+' '+firstname as n

FROM employees</sql>

<value>employeeid</value>

<options>n</options>

</function>

</field>

</td>

</tr>

<tr>

<td>Hire Date:</td>

<td><input size="8" maxlength="8" id="hiredate"/></td>

<td>Extension:</td>

<td><input size="8" maxlength="4" id="extension"/></td>

</tr>

</table>

<br/>

</fieldset>

</td>

</tr>

</table>

<br/>

<table width="70%">

<tr>

<td>

<fieldset>

<legend style="color:darkblue">Personal Information</legend>

<br/>

<table>

<tr>

<td>Address:</td>

<td colspan="5"><input size="60" maxlength="60" id="address"/></td>

</tr>

<tr>

<td>City:</td>

<td><input size="15" maxlength="15" id="city"/></td>

<td>Region:</td>

<td colspan="3"><input size="15" maxlength="15" id="region"/></td>

</tr>

<tr>

<td>Postal Code:</td>

<td><input size="10" maxlength="10" id="postalcode"/></td>

<td>Country:</td>

<td colspan="3"><input size="15" maxlength="15" id="country"/></td>

</tr>

<tr>

<td>Home Phone:</td>

<td><input size="24" maxlength="24" id="homephone"/></td>

<td>Birth Date:</td>

<td><input size="8" maxlength="8" id="birthdate"/></td>

<td>Title of Courtesy:</td>

<td><input size="10" maxlength="25" id="titleofcourtesy"/></td>

</tr>

<tr>

<td valign="top">Notes:</td>

<td colspan="5">

<textarea rows="10" cols="80" id="notes"></textarea>

</td>

</tr>

</table>

<br/>

</fieldset>

</td>

</tr>

</table>

</form>

</htmlform>

The sql selection for the form is specified in the <sql> tag inside <htmlform>.

The look of the input form is specified inside the <form> and </form> tags. Here we use standard HTML (like <table> tags, <fieldset> and <legend>, and <input>).

Notice that to show the data from a database and to make the data updateable, we set the id attribute of the input tags equal to the fieldnames in our sql selection.

AppML HTML List

HTML List: appml.asp?appname=northwind/employees& displaytype=list

The link above runs the AppML list service. To be able to run AppML list, the AppML description must contain an <htmllist> tag.

We see that the list contains a header ("Employees"), the number of records in the list, a Filter button, a New button, a Report button, and a table listing the different customers.

The title and sql selection shown in the report, is taken from the <title> tag and the <sql> tag inside <htmllist>. The number of records and the buttons are automatically added by AppML.

The Filter button is automatically added because the AppML description contains a <filters> tag.

The New button is automatically added because the AppML description contains an <htmlform> tag.

The Report button is automatically added because the AppML description contains an <htmlreport> tag.

The Folder image to the left of each records is automatically added because the AppML description contains an <htmlform> tag. If you click on the Folder image, you will be taken to the AppML form.

The <htmllist> tag in "employees.xml" looks like this:

<htmllist>

<sql>

SELECT Lastname,Firstname,Title,City,Country,EmployeeID AS Orders

FROM employees

</sql>

<server>

<field name="Orders">

<display>

<a href="appml.asp?appname=northwind/orders&amp;filter=

employees.lastname&amp;value=#appml:field(name='lastname')"

target="_blank">Orders</a>

</display>

</field>

</server>

</htmllist>

In the list, notice the column called "Orders". This column is a link that goes to the "Orders" application and shows the orders for each employee.

AppML XML Report

XML Report:

appml.asp?appname=northwind/employees&

The link above runs the AppML XML service.

The AppML XML report service above will generate an XML report based on the sql defined in the <htmlreport> element. The XML report's root element is <table>. The first element after <table> is <sql>, which lists the sql used in the description. Then there will be one <row> element for each record in the sql. The <row> element contains one element for each field in the sql.

All AppML Services in One

To run all the AppML services above in one, use the following link:

appml.asp?appname=northwind/employees


AppML Case Study FAQ

AppML FAQ

This page contains a selection of common mistakes and problems reported from developers who have tried to download and run the AppML examples on their own computer.

Your Web Server Must Be IIS

The case study examples will only run on a Microsoft Internet Information Server (IIS).

All Windows servers, and Windows XP professional, support IIS.

Files Must Be Stored In A Web Folder

Your downloaded files MUST be stored in a web folder.

The case study examples will only work when the files are stored in a folder that is recognized by your Web server.

Note: For security reasons your databases should NOT be stored in a web folder.

Don't Forget the Database

The case study is using the Microsoft Access database Northwind.

The case application expects to find the Northwind database at db/northwind.mdb on your web.

Please refer to the chapter "Case Download" if you want to use another database.

Your Browser Must Support Cookies

The case study examples use cookies to maintain state information between AppML services.

The examples will only work if your browser supports cookies.

Test the Application Address

After download you can test-run the application by copying the following into the address field of your browser:

http://localhost/appmlcase/appml_test.htm

Remember:

If you have installed the application on a computer different from your own, you must substitute "localhost" with that computer's IP address.

If you have installed the application in a folder different from appmlcase, you must substitute "appmlcase/appml_test.htm" with "foldername/appml_test.htm".

Start the Services From a Link

AppML services should be started from a link on a Web page.

This HTML code example can be used to start an AppML service:

<a href="appml.asp?appname=example&displaytype=report">Testing Example</a>

Remember to include a path if the linking page is not in the same Web folder as the AppML service:

<a href="testfolder/app_htmlreport.asp?appname=example">Testing Example</a>

Remember to include a correct path if your XML files are not in northwind folder:

<a href="app_htmlreport.asp?appname=foldername/example">Testing Example</a>

Remember the Appname Parameter

AppML services will not run without the appname parameter.

This is correct: appml.asp?appname=example

This is wrong: appml.asp

Don't Use XML File Extensions

This is correct: appml.asp?appname=example

This is wrong: appml.asp?appname=example.xml

Remember the ASP File Extensions

This is correct: appml.asp?appname=example

This is wrong: appml?appname=example

Error With Fields Named "id"

AppML will not work correctly if an HTML form contains an input field named "id".

The reason for this is an error in Internet Explorer that returns the content of the field named "id" instead of the form attribute "id" in the statement form.getattribute("id") in the source code.

The result is an "Error in page" message from Internet Explorer.

Error With <textarea>

AppML will not work correctly if an HTML form contains a textarea field that is closed within the opening tag.

Correct: <textarea rows="10" cols="80" id="notes"></textarea>

Incorrect: <textarea rows="10" cols="80" id="notes" />

WHERE Clause In SQL

AppML will not work correctly if you use a WHERE clause in your SQL statements. The correct place to add a WHERE clause is in the <filters> element. This enables AppML to dynamically change the WHERE clause at runtime.

Correct

<sql>SELECT * FROM employees</sql>

<filters>

<where>name="Jonson"</where>

</filters>

Incorrect:

<sql>SELECT * FROM employees WHERE name="Jonson"</sql>

Max 500 Records In Screen Display

AppML limits the screen display of records to 500.

We think it makes no sense to let a user list thousands of records to choose from. If the list is too long the user should use the filter to narrow his search.

This limit does not apply for reports. It is only a limitation for a screen list.


AppML Case Study HTML Reports

Case Study HTML Reports

The AppML HTML Report Service

AppML uses standard SQL to control the selection of data, and a query element to define data fields that can be queried at runtime.

<appml>

<database>

<connection>northwind</connection>

<sql>

SELECT CompanyName,ContactName,City FROM Customers

</sql>

</database>

<filters>

<query>

<field>CompanyName</field>

</query>

</filters>

<htmlreport/>

</appml>

Click here to see the output produced by the HTML Report Service.

When you run the example, use the FILTER link at the top of the report to filter the report!

A Report With Query And Order-By Filters

This AppML description has added information about ordering, querying, and filtering the data:

<appml>

<database>

<connection>northwind</connection>

<sql>

SELECT CompanyName,ContactName,City FROM Customers

</sql>

</database>

<filters>

<orderby>CompanyName</orderby>

<query>

<field>CompanyName</field>

<value>a</value>

</query>

<query>

<field>City</field>

<sql>SELECT DISTINCT city FROM customers ORDER BY city</sql>

</query>

<orderselect>

<field>CompanyName</field>

<field>ContactName</field>

<field>City</field>

</orderselect>

</filters>

<htmlreport/>

</appml>

Click here to see the output produced by the HTML Report Service.

Adding A Corporate Layout

AppML is also perfect for producing HTML reports with a corporate layout.

By adding a <stylesheet> tag with the name of your own CSS file you can easily change the layout of a report.

By modifying the standard stylesheet ("appml_stylesheet.css"), you can easily change the layout of ALL your reports.

<appml>

<database>

<connection>northwind</connection>

<sql>

SELECT CompanyName,ContactName,City FROM Customers

</sql>

</database>

<htmlreport>

<stylesheet>corp_stylesheet.css</stylesheet>

<header>

<h4><img src="images/factory.jpg" /> NORTHWIND

CUSTOMERS pr. #appml:date(format='dd.mm.yyyy')</h4>

</header>

</htmlreport>

</appml>

Click to see the output produced by the HTML Report Service.

A Report With Sections

With AppML it is easy to create reports divided into sections, e.g. Sales per year, Sales per category, Customers by country, Sales per customer, etc.

The AppML <section> element divides the output into sections. Any legal HTML elements can be put inside this element. The AppML <break> element is used to define breaks in the report.

View the output produced by the HTML Report Service

View the AppML source file

Save A Lot Of Development Time

Note: ALL the examples above use the same AppML service to produce the HTML report! This saves you a lot of development time!


AppML Case Study Introduction

Case Study Introduction

This case study will use AppML to build a complete Internet application.

What We Will Demonstrate

In the case study we will demonstrate the power of AppML.

The case study demonstrates how to use AppML to build an Internet application without any programming, and without installing any executables on the user's computer.

What We Will Build

We will build an Internet application based on the Northwind database.

The application will have functions for listing, adding, editing, searching, and printing information from several tables in the Northwind database.

The Case Study Database

The Northwind database is a demo database that comes preinstalled with Microsoft Access. We have decided to use the Northwind database because it is well known and commonly available.

The Case Study Server

The case study application runs on a Windows Internet Information Server (IIS) running ASP (Active Server Pages). No additional components are installed on the server.

The Case Study Client

The case study application will run in Internet Explorer 5+, Firefox 1+, and Opera 9+. No components has to be installed on the client.


AppML Case Study Products

Case Study Products

This chapter demonstrates AppML on the Products table in the Northwind database.

The Products XML File

The "Products" AppML description: northwind/products.xml

AppML HTML Report

HTML Report: appml.asp?appname=northwind/products& displaytype=report

The link above runs the AppML HTML report service. To be able to run an AppML HTML report, the AppML description must contain an <htmlreport> tag.

We see that the report contains a header ("Products"), a table listing the different products along with category, supplier, and quantity per unit. The report also lists the number of records at the bottom. The title and sql selection shown in the report, is taken from the <title> tag (under the <appml> tag) and the <sql> tag inside <htmlreport>. The number of records are automatically added by AppML.

This report also have a Filter button. If you click on the Filter button, you can filter and sort the report. You can also determine in what format you want to show the report (Normal, Word, Excel, or XML).

The <filters> tag in "products.xml" looks like this:

<filters>

<orderby>products.productname</orderby>

<query>

  <field>productname</field>

  <label>Product name</label>

</query>

<query>

  <field>suppliers.companyname</field>

  <label>Supplier</label>

  <sql>SELECT DISTINCT companyname

  FROM suppliers ORDER BY companyname</sql>

</query>

<query>

  <field>categories.categoryname</field>

  <label>Category</label>

  <sql>SELECT DISTINCT categoryname

  FROM categories ORDER BY categoryname</sql>

</query>

<orderselect>

  <field name="products.productname">Product Name</field>

  <field name="suppliers.companyname">Supplier</field>

  <field name="categories.categoryname">Category</field>

</orderselect>

</filters>

We see that the <filters> tag contains an <orderby> tag, several <query> tags, and an <orderselect> tag.

The <orderby> tag specifies which field the report should be ordered by. In this case, the report will be ordered by the productname field in the Products table.

The <query> tags defines which fields the user can search on. The <field> tag defines the name of the field in the table, and the <label> tag defines the label that will be visible for the user. In this case, the user can search on "Product name", "Supplier", and "Category".

Inside the "Supplier" and "Category" <query> tag, there is an <sql> tag. The <sql> tag indicates that AppML should create a drop-down box where the user can select an existing supplier and/or category to search on.

The <orderselect> tag specifies other order-by options for the user. Here, the user can determine if the report should be ordered by "Product name", "Supplier", or "Category".

The <filters> tag is used by both <htmlreport> and <htmllist>.

AppML HTML Form

HTML Form: appml.asp?appname=northwind/products& displaytype=form

The link above runs the AppML form service. To be able to run AppML form, the AppML description must contain an <htmlform> tag. The AppML description must also contain a <maintable> tag and a <keyfield> tag (inside the <database> tag).

The link above takes you to a page with a blank form. Here you can add a new record. AppML automatically adds New, Submit, and Delete buttons.

This time we have specified the look of the form with standard HTML code. The <htmlform> tag in "products.xml" looks like this:

<htmlform>

<sql>

SELECT productname,supplierid,categoryid,QuantityperUnit,unitprice,

unitsinstock,unitsonorder,reorderlevel,discontinued

FROM products

</sql>

<form>

<br/>

<table width="40%">

<tr>

<td>

<fieldset>

<legend style="color:darkblue">Product information</legend>

<br/>

<table>

<tr>

<td>Product Name:</td>

<td><input size="40" maxlength="40" id="productname"/></td>

</tr>

<tr>

<td>Supplier:</td>

<td>

<field name="supplierid">

<function name="dbselect">

<sql>SELECT supplierid,companyname FROM suppliers

ORDER BY companyname</sql>

<value>supplierid</value>

<options>companyname</options>

</function>

</field>

</td>

</tr>

<tr>

<td>Category:</td>

<td>

<field name="categoryid">

<function name="dbselect">

<sql>SELECT categoryid,categoryname FROM categories

ORDER BY categoryname</sql>

<value>categoryid</value>

<options>categoryname</options>

</function>

</field>

</td>

</tr>

<tr>

<td>Quantity per Unit:</td>

<td><input size="20" maxlength="20" id="quantityperunit"/></td>

</tr>

<tr>

<td>Price per Unit:</td>

<td><input size="6" maxlength="8" id="unitprice"/></td>

</tr>

<tr>

<td>Units in Stock:</td>

<td><input size="6" maxlength="2" id="unitsinstock"/></td>

</tr>

<tr>

<td>Units on Order:</td>

<td><input size="6" maxlength="2" id="unitsonorder"/></td>

</tr>

<tr>

<td>Reorder Level:</td>

<td><input size="6" maxlength="2" id="reorderlevel"/></td>

</tr>

<tr>

<td>Discontinued:</td>

<td><input type="checkbox" id="discontinued"/></td>

</tr>

</table>

<br/>

</fieldset>

</td>

</tr>

</table>

</form>

</htmlform>

The sql selection for the form is specified in the <sql> tag inside <htmlform>.

The look of the input form is specified inside the <form> and </form> tags. Here we use standard HTML (like <table> tags, <fieldset> and <legend>, and <input>).

Notice that to show the data from a database and to make the data updateable, we set the id attribute of the input tags equal to the fieldnames in our sql selection.

Another AppML function is also demonstrated in the <htmlform> above. Twice in the code we have used an AppML function called dbselect. Look at the code fragment below:

<td>Supplier:</td>

<td>

<field name="supplierid">

<function name="dbselect">

<sql>SELECT supplierid,companyname FROM suppliers

ORDER BY companyname</sql>

<value>supplierid</value>

<options>companyname</options>

</function>

</field>

</td>

To use the dbselect function, you must first specify the fields you want to use the function on (in this case "supplierid"). The supplierid field contains a supplier ID that refers to a company name in the "Suppliers" table. The <sql> tag selects the supplierid and the companyname fields from the "Suppliers" table. The <value> tag indicates the value that will be saved in the form (supplierid) and the <options> tag indicates the value displayed (companyname) to the user in the drop-down box. This way, AppML gives us the opportunity to create selectable lists inside our forms.

AppML HTML List

HTML List: appml.asp?appname=northwind/products& displaytype=list

The link above runs the AppML list service. To be able to run AppML list, the AppML description must contain an <htmllist> tag.

We see that the list contains a header ("Products"), the number of records in the list, a Filter button, a New button, a Report button, and a table listing the different products.

The title and sql selection shown in the report, is taken from the <title> tag and the <sql> tag inside <htmllist>. The number of records and the buttons are automatically added by AppML.

The Filter button is automatically added because the AppML description contains a <filters> tag.

The New button is automatically added because the AppML description contains an <htmlform> tag.

The Report button is automatically added because the AppML description contains an <htmlreport> tag.

The Folder image to the left of each records is automatically added because the AppML description contains an <htmlform> tag. If you click on the Folder image, you will be taken to the AppML form.

This list is not an editable list (like Categories in the previous chapter). Here you must edit the data in the form.

AppML XML Report

XML Report:

appml.asp?appname=northwind/products& type=xml

The link above runs the AppML XML service.

The AppML XML report service above will generate an XML report based on the sql defined in the <htmlreport> element. The XML report's root element is <table>. The first element after <table> is <sql>, which lists the sql used in the description. Then there will be one <row> element for each record in the sql. The <row> element contains one element for each field in the sql.

All AppML Services in One

To run all the AppML services above in one, use the following link:

appml.asp?appname=northwind/products


AppML Case Study Shippers

Case Study Shippers

This chapter demonstrates AppML on the Shippers table in the Northwind database.

The Shippers XML File

The "Shippers" AppML description: northwind/shippers.xml

AppML HTML Report

HTML Report: appml.asp?appname=northwind/shippers& displaytype=report

The link above runs the AppML HTML report service. To be able to run an AppML HTML report, the AppML description must contain an <htmlreport> tag.

We see that the report contains a header ("Shippers"), a table listing the different companies along with their phone numbers. The report also lists the number of records at the bottom. The title and sql selection shown in the report, is taken from the <title> tag (under the <appml> tag) and the <sql> tag inside <htmlreport>. The number of records are automatically added by AppML.

This report also have a Filter button. If you click on the Filter button, you can filter the report.

The <filters> tag in "shippers.xml" looks like this:

<filters>

<orderby>Companyname</orderby>

<query>

  <field>Companyname</field>

</query>

</filters>

We see that the <filters> tag contains an <orderby> tag and a <query> tag.

The <orderby> tag specifies which field the report should be ordered by. In this case, the report will be ordered by the companyname field in the Shippers table.

The <query> tag define which field the user can search on. The <field> tag defines the name of the field in the table, and the <label> tag defines the label that will be visible for the user. In this case, the user can search on "Companyname".

The <filters> tag is used by both <htmlreport> and <htmllist>.

AppML HTML Form

HTML Form: appml.asp?appname=northwind/shippers&

The link above runs the AppML form service. To be able to run AppML form, the AppML description must contain an <htmlform> tag. The AppML description must also contain a <maintable> tag and a <keyfield> tag (inside the <database> tag).

The link above takes you to a page with a blank form. Here you can add a new record. AppML automatically adds New, Submit, and Delete buttons.

This time we have specified the look of the form with standard HTML code. The <htmlform> tag in "shippers.xml" looks like this:

<htmlform>

<sql>SELECT companyname,phone FROM shippers</sql>

<form>

<br/>

<table width="50%">

<tr>

<td>

<fieldset>

<legend style="color:darkblue">Shipper information</legend>

<br/>

<table border="0">

<tr>

<td>Company Name:</td>

<td><input size="40" maxlength="40" id="companyname"/></td>

</tr>

<tr>

<td>Phone:</td>

<td><input size="24" maxlength="24" id="phone"/></td>

</tr>

</table>

<br/>

</fieldset>

</td>

</tr>

</table>

</form>

</htmlform>

The sql selection for the form is specified in the <sql> tag inside <htmlform>.

The look of the input form is specified inside the <form> and </form> tags. Here we use standard HTML (like <table> tags, <fieldset> and <legend>, and <input>).

Notice that to show the data from a database and to make the data updateable, we set the id attribute of the input tags equal to the fieldnames in our sql selection.

AppML HTML List

HTML List: appml.asp?appname=northwind/shippers& displaytype=list

The link above runs the AppML list service. To be able to run AppML list, the AppML description must contain an <htmllist> tag.

We see that the list contains a header ("Shippers"), the number of records in the list, a Filter button, a New button, a Report button, and a table listing the different shippers.

The title and sql selection shown in the report, is taken from the <title> tag and the <sql> tag inside <htmllist>. The number of records and the buttons are automatically added by AppML.

The Filter button is automatically added because the AppML description contains a <filters> tag.

The New button is automatically added because the AppML description contains an <htmlform> tag.

The Report button is automatically added because the AppML description contains an <htmlreport> tag.

The Folder image to the left of each records is automatically added because the AppML description contains an <htmlform> tag. If you click on the Folder image, you will be taken to the AppML form.

The <htmllist> tag in "shippers.xml" looks like this:

<htmllist>

<sql>

SELECT Companyname,Phone,ShipperID AS Orders FROM shippers

</sql>

<server>

<field name="Orders">

<display>

<a href="appml.asp?appname=northwind/orders&amp;filter=

shippers.companyname&amp;value=#appml:field(name='companyname')">

Orders</a>

</display>

</field>

</server>

</htmllist>

In the list, notice the column called "Orders". This column is a link that goes to the "Orders" application and shows the orders for each shipping company.

AppML XML Report

XML Report:

appml.asp?appname=northwind/shippers& displaytype=report& type=xml

The link above runs the AppML XML service.

The AppML XML report service above will generate an XML report based on the sql defined in the <htmlreport> element. The XML report's root element is <table>. The first element after <table> is <sql>, which lists the sql used in the description. Then there will be one <row> element for each record in the sql. The <row> element contains one element for each field in the sql.

All AppML Services in One

To run all the AppML services above (except XML report) in one, use the following link: appml.asp?appname=northwind/shippers


AppML Case Study Suppliers

Case Study Suppliers

This chapter demonstrates AppML on the Suppliers table in the Northwind database.

The Suppliers XML File

The "Suppliers" AppML description:

AppML HTML Report

HTML Report:

The link above runs the AppML HTML report service. To be able to run an AppML HTML report, the AppML description must contain an <htmlreport> tag.

We see that the report contains a header ("Suppliers"), a table listing the different companies along with their contact person, address, city, and country. The report also lists the number of records at the bottom. The title and sql selection shown in the report, is taken from the <title> tag (under the <appml> tag) and the <sql> tag inside <htmlreport>. The number of records are automatically added by AppML.

This report also have a Filter button. If you click on the Filter button, you can filter and sort the report. You can also determine in what format you want to show the report (Normal, Word, Excel, or XML).

The <filters> tag in "suppliers.xml" looks like this:

<filters>

<orderby>Companyname</orderby>

<query>

  <field>Companyname</field>

</query>

<query>

  <field>City</field>

</query>

<query>

  <field>Country</field>

</query>

<orderselect>

  <field>Companyname</field>

  <field>City</field>

  <field>Country</field>

</orderselect>

</filters>

We see that the <filters> tag contains an <orderby> tag, several <query> tags, and an <orderselect> tag.

The <orderby> tag specifies which field the report should be ordered by. In this case, the report will be ordered by the companyname field in the Suppliers table.

The <query> tags defines which fields the user can search on. The <field> tag defines the name of the field in the table, and the <label> tag defines the label that will be visible for the user. In this case, the user can search on "Companyname", "City", and "Country".

The <orderselect> tag specifies other order-by options for the user. Here, the user can determine if the report should be ordered by "Companyname", "City", or "Country".

The <filters> tag is used by both <htmlreport> and <htmllist>.

AppML HTML Form

HTML Form: appml.asp?appname=northwind/suppliers& displaytype=form

The link above runs the AppML form service. To be able to run AppML form, the AppML description must contain an <htmlform> tag. The AppML description must also contain a <maintable> tag and a <keyfield> tag (inside the <database> tag).

The link above takes you to a page with a blank form. Here you can add a new record. AppML automatically adds New, Submit, and Delete buttons.

This time we have specified the look of the form with standard HTML code. The <htmlform> tag in "suppliers.xml" looks like this:

<htmlform>

<sql>

SELECT companyname,contactname,contacttitle,address,city,

region,postalcode,country,phone,fax,homepage

FROM suppliers

</sql>

<elements>

<field name="companyname">

  <required/>

</field>

<field name="contactname">

  <required/>

</field>

</elements>

<form>

<br/>

<table width="70%">

<tr>

<td>

<fieldset>

<legend style="color:darkblue">Supplier information</legend>

<br/>

<table>

<tr>

<td>Company Name:</td>

<td><input size="35" maxlength="40" id="companyname"/></td>

</tr>

<tr>

<td>Contact Name:</td>

<td><input size="35" maxlength="30" id="contactname"/></td>

</tr>

<tr>

<td>Title:</td>

<td><input size="35" maxlength="30" id="contacttitle"/></td>

</tr>

<tr>

<td>Address:</td>

<td><input size="60" maxlength="60" id="address"/></td>

</tr>

<tr>

<td>City:</td>

<td><input size="15" maxlength="15" id="city"/></td>

</tr>

<tr>

<td>Region:</td>

<td><input size="15" maxlength="15" id="region"/></td>

</tr>

<tr>

<td>Postal Code:</td>

<td><input size="15" maxlength="10" id="postalcode"/></td>

</tr>

<tr>

<td>Country:</td>

<td><input size="15" maxlength="15" id="country"/></td>

</tr>

<tr>

<td>Phone:</td>

<td><input size="24" maxlength="24" id="phone"/></td>

</tr>

<tr>

<td>Fax:</td>

<td><input size="24" maxlength="24" id="fax"/></td>

</tr>

<tr>

<td>HomePage:</td>

<td><input size="100" maxlength="100" id="homepage"/></td>

</tr>

</table>

<br/>

</fieldset>

</td>

</tr>

</table>

</form>

</htmlform>

The sql selection for the form is specified in the <sql> tag inside <htmlform>.

The <elements> tag is a container for the data fields in an HTML form or in an editable HTML list that should fulfill special criterions. In the code above, we specify that the fields companyname and contactname are required (cannot be left blank in the form). If a user leave these two fields blank, AppML will generate an error message telling that the fields have to be filled with data.

The look of the input form is specified inside the <form> and </form> tags. Here we use standard HTML (like <table> tags, <fieldset> and <legend>, and <input>).

Notice that to show the data from a database and to make the data updateable, we set the id attribute of the input tags equal to the fieldnames in our sql selection.

AppML HTML List

HTML List: appml.asp?appname=northwind/suppliers& displaytype=list

The link above runs the AppML list service. To be able to run AppML list, the AppML description must contain an <htmllist> tag.

We see that the list contains a header ("Suppliers"), the number of records in the list, a Filter button, a New button, a Report button, and a table listing the different suppliers.

The title and sql selection shown in the report, is taken from the <title> tag and the <sql> tag inside <htmllist>. The number of records and the buttons are automatically added by AppML.

The Filter button is automatically added because the AppML description contains a <filters> tag.

The New button is automatically added because the AppML description contains an <htmlform> tag.

The Report button is automatically added because the AppML description contains an <htmlreport> tag.

The Folder image to the left of each records is automatically added because the AppML description contains an <htmlform> tag. If you click on the Folder image, you will be taken to the AppML form.

The <htmllist> tag in "suppliers.xml" looks like this:

<htmllist>

<sql>

SELECT Companyname,Contactname,Address,City,Country,

supplierid AS Products

FROM suppliers

</sql>

<server>

<field name="Products">

<display>

<a href="appml.asp?appname=northwind/products&amp;filter=

suppliers.companyname&amp;value=#appml:field(name='companyname')">

Products</a>

</display>

</field>

</server>

</htmllist>

In the list, notice the column called "Products". This column is a link that goes to the "Products" application and shows the products for each supplier company.

AppML XML Report

XML Report:

appml.asp?appname=northwind/suppliers& displaytype=report& type=xml

The link above runs the AppML XML service.

The AppML XML report service above will generate an XML report based on the sql defined in the <htmlreport> element. The XML report's root element is <table>. The first element after <table> is <sql>, which lists the sql used in the description. Then there will be one <row> element for each record in the sql. The <row> element contains one element for each field in the sql.

All AppML Services in One

To run all the AppML services above in one, use the following link:

appml.asp?appname=northwind/suppliers


AppML Document

The AppML Document

The <appml> element defines an AppML description.

The <appml> Element

An AppML description always starts with <appml> and ends with </appml>. The description must be saved as an XML file (.xml).

Inside the <appml> element, there is a mandatory <database> element that contains information about the database connection, and other elements, like <htmlreport> and <htmlform>, that is used to describe different parts of the application.

Below is an example of a very simple AppML description:

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<sql>SELECT CompanyName,ContactName,City FROM Customers</sql>

</database>

<htmlreport/>

</appml>

View the output produced by the AppML HTML Report Service

View the XML source file

<appml> Attributes

The <appml> element may have the following attributes:

Attribute | Value | Description
security | usergroup | Defines which user group that will have access to the application

<appml> Child Elements

The <appml> element may have the following child elements:

Element | Description
database | Contains information about the database connection
filters | Contains the fields the user can query and sort by at runtime
footer | Defines a footer that will be displayed after the output on the page
header | Defines a header that will be displayed before the output on the page
htmlform | Contains the elements of an HTML form
htmllist | Contains the elements of an HTML list
htmlreport | Contains the elements of an HTML report
 | Defines a default stylesheet for the application
title | Defines a default title (browser caption) for the application
xmlreport | Contains the elements of an XML report


Break element

The <break> Element

The <break> element is used to define breaks in the report. This element is used together with the <section> element.

The <break> and <section> elements are used to create reports divided into sections, e.g. Sales per year, Sales per category, Customers by country, Sales per customer, etc.

Note: The HTML report must be ordered by the field it should break on.

<break> Child Elements

The <break> element may have the following child elements:

Element | Description
field | Specifies the field the report should break on
section | Specifies the name of the section the report should jump to after the break

Example

<?xml version="1.0" ?>

<appml>

<title>CUSTOMERS BY COUNTRY</title>

<database>

<connection>northwind</connection>

</database>

<filters>

<orderby>country,companyname,city</orderby>

</filters>

<htmlreport>

<sql>

SELECT companyname,contactname,city,country,phone

FROM Customers

</sql>

<break>

<field>country</field>

<section>C</section>

</break>

<header>

<h3>CUSTOMERS BY COUNTRY</h3>

</header>

<section name="A">

<html><![CDATA[

<p><b>COUNTRY:</b> #appml:field(name='country')</p>

<table width="90%" border="1" cellpadding="1" cellspacing="1">

<tr>

<th width="30%">Company</th>

<th width="30%">Contactperson</th>

<th width="20%">City</th>

<th width="20%">Phone</th>

</tr>

]]>

</html>

</section>

<section name="B" repeat="10000" movenext="yes">

<html><![CDATA[

<tr>

<td>#appml:field(name='companyname')</td>

<td>#appml:field(name='contactname')</td>

<td>#appml:field(name='city')</td>

<td>#appml:field(name='phone')</td>

</tr>

]]>

</html>

</section>

<section name="C">

<html><![CDATA[</table><br />]]></html>

</section>

</htmlreport>

</appml>

View the output produced by the HTML Report Service

View the XML source file


Connection element

The <connection> Element

The <connection> element contains a named database connection.

Note: No connection string is defined in the AppML description. The connection string (with username and password) is defined once in the AppML Web Service (and will not be visible for the users).

Example

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<sql>SELECT CompanyName,ContactName,City FROM Customers</sql>

</database>

....

....

</appml>


AppML Database

The AppML Database Element

The <database> element contains information about the database connection.

The <database> Element

The <database> element contains information about the database connection.

Inside the <database> element, there is a mandatory <connection> element that contains a named database connection, and other elements, like <sql>, that is used to specify a default SQL selection for the application.

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<sql>SELECT CompanyName,ContactName,City FROM Customers</sql>

</database>

....

....

</appml>

<database> Child Elements

The <database> element may have the following child elements:

Element | Description
 | Contains a named database connection
constraint | Defines constraints between tables
keyfield | Defines the primary key of the maintable
maintable | Defines the main table of the database connection
 | Defines a default SQL for the application


Elements element

The <elements> Element

The <elements> element is a container for the data fields in an HTML form or in an editable HTML list that should fulfill special criterions.

<elements> Child Elements

The <elements> element may have the following child elements:

Element | Description
 | Specifies criterions for a data field

Example of creating required fields:

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<keyfield type="text">customerid</keyfield>

<maintable>customers</maintable>

<sql>SELECT CompanyName,ContactName,City FROM Customers</sql>

</database>

<htmllist />

<htmlform>

<elements>

<field name="companyname"><required /></field>

<field name="city"><required /></field>

</elements>

</htmlform>

</appml>

Click on the folder image in the list to enter the input form. Remove the text in the "Companyname" or "City" input field, then move to another field or click the "Submit" button. The field(s) will be yellow and an error message tells that the field is required.

View the output produced by the AppML HTML List and Form Service

View the XML source file

Example of a field that changes when changing another field:

<?xml version="1.0" ?><appml>

<title>Products</title>

<database>

<connection>northwind</connection>

<keyfield>productid</keyfield>

<maintable>products</maintable>

</database>

<filters>

<orderby>productname</orderby>

</filters>

<htmllist>

<sql>

SELECT products.productname AS Product,

suppliers.companyname AS Supplier,

categories.categoryname AS Category

FROM ((Products

LEFT JOIN suppliers ON

products.supplierid=suppliers.supplierid)

LEFT JOIN categories ON

products.categoryid=categories.categoryid)

</sql>

</htmllist>

<htmlform>

<sql>

SELECT productname,supplierid,products.categoryid,

quantityperunit,unitprice,categories.description

FROM (products

LEFT JOIN categories ON products.categoryid=categories.categoryid)

</sql>

<elements>

<field name="description"><submit>false</submit></field>

<field name="categoryid">

<onchange>

<function name="selectfields">

<sql>SELECT description

FROM categories

WHERE categoryid=#appml:field(name="categoryid")</sql>

</function>

</onchange>

</field>

</elements>

<form>

<table>

<tr>

<td>Product</td>

<td><input size="50" maxlength="40" id="productname" /></td>

</tr>

<tr>

<td>Category</td>

<td>

<field name="categoryid">

<function name="dbselect">

<sql>SELECT categoryid,categoryname

FROM categories ORDER BY categoryname</sql>

<value>categoryid</value>

<options>categoryname</options>

</function>

</field>

</td>

</tr>

<tr>

<td>Categorydescription</td>

<td><input size="50" disabled="disabled" id="description" /></td>

</tr>

<tr>

<td>Supplier</td>

<td>

<field name="supplierid">

<function name="dbselect">

<sql>SELECT supplierid,companyname

FROM suppliers ORDER BY companyname</sql>

<value>supplierid</value>

<options>companyname</options>

</function>

</field>

</td>

</tr>

<tr>

<td>Quantity per unit</td>

<td><input size="50" maxlength="20" id="quantityperunit" /></td>

</tr>

<tr>

<td>Unitprice</td>

<td><input size="50" maxlength="8" id="unitprice" /></td>

</tr>

</table>

</form>

</htmlform>

</appml>

If you change the Category field in the form, the Categorydescription field will also change.

View the output produced by the AppML HTML List and Form Service

View the XML source file


Field element

The <field> Element

The <field> element is used to specify criterion(s) for a data field.

<field>Attributes

The <field> element may have the following attributes:

Attribute | Value | Description
name | fieldname | Name of data field

<field> Child Elements

The <field> element may have the following child elements:

Element | Description
<default>text</default> | Inserts a default value for a field if the user leaves the specified field empty/blank
<format>format</format> | The format of the field. E.g. yyyymmdd
<group> <field>fieldname</field> <field>fieldname</field> </group> |
<initial>text</initial> | When a user creates a new record this value will be inserted automatically into the specified field (This value will be changed and saved by the user)
<onchange> <function name="ucase" /> </onchange> | Turns the value of the field to uppercase letters
<onchange> <function name="selectfields"> <sql database="access/sql/oracle">SQL</sql> </function> </onchange> |
<product> <field>fieldname</field> <field>fieldname</field> </product> | Multiplies two fields
<required /> | The field is required (must be filled out by the user)
<submit>false</submit> | The field will not be saved when submitting the form
<type>integer</type> | The field is of type integer
<type>numeric</type> | The field is numeric
<type>date</type> | The field is a date field
<value>text</value> | Specifies a fixed value for a field (This predefined value will be saved even if the user changes it)


AppML Filters

The <filters> element contains the fields the user can query and sort by at runtime.

The <filters> Element

The <filters> element provides a way to define queries and sort orders that can be changed by the user at run time.

The AppML description below defines a Filter function for the HTML report. The AppML Report Service will here sort the report by companyname, and generate a Filter link on top of the report. A search box will be displayed when clicking on the Filter link. The user will be able to search for the fields specified in the AppML description (companyname and country). The user may also select what fields to order the report on, and to specify the sort-order (ASC or DESC). The AppML Report Service also has a built-in function that gives the user the opportunity to open the report in MS Excel, MS Word or to be displayed as XML.

Note: The <sql> MUST contain all the data fields the user may query! ????? Nei ?????

<?xml version="1.0" ?>

<appml>

<title>CUSTOMERS</title>

<database>

<connection>northwind</connection>

<sql>SELECT Companyname,ContactName,Country

FROM Customers</sql>

</database>

<filters>

<orderby>Companyname</orderby>

<query><field>Companyname</field></query>

<query><field>Country</field></query>

<orderselect>

<field>Companyname</field>

<field>Country</field>

</orderselect>

</filters>

<htmlreport />

</appml>

View the XML source file

To create more advanced filters, look at the examples in the sub elements below.

<filters> Attributes

The <filters> element may have the following attributes:

Attribute | Value | Description
preview | false | Disables the preview of records before filtering (for large recordsets?)

<filters> Child Elements

The <filters> element may have the following child elements:

Element | Description
orderby | Defines a fixed ORDER BY clause to be added to the SQL every time the application runs
 | Defines which fields the user can sort by at runtime
query | Defines which fields the user can query at runtime
 | Defines a fixed WHERE clause to be added to the SQL every time the application runs


Form element

The <form> Element

The <form> element is used to define your own layout of the input form. If this element is omitted, a default layout is used.

All legal HTML elements can be put inside the <form> element.

To display the data stored in the database, add id attributes to the form fields that corresponds with the name of the data fields in the recordset (SQL).

Create form layout with HTML elements:

Note: <table>, <tr>, <td>, <fieldset>, and <legend> (and their attributes) are all standard HTML elements.

<?xml version="1.0" ?>

<appml>

<title>Suppliers</title>

<database>

<connection>northwind</connection>

<keyfield>supplierid</keyfield>

<maintable>suppliers</maintable>

<sql>SELECT CompanyName,ContactName,City FROM Suppliers</sql>

</database>

<htmllist />

<htmlform>

<form>

<table width="50%">

<tr>

<td>

<fieldset>

<legend style="color:darkblue;">Supplier information</legend>

<br/>

<table>

<tr>

<td>Company</td>

<td><input size='50' maxlength='40' id='companyname' /></td>

</tr>

<tr>

<td>Contactname</td>

<td><input size='50' maxlength='30' id='contactname' /></td>

</tr>

<tr>

<td>City</td>

<td><input size='50' maxlength='15' id='city' /></td>

</tr>

</table>

</fieldset>

</td>

</tr>

</table>

</form>

</htmlform>

</appml>

List and Form Service

View the XML source file

Extract data from the record and add it to the legend:

<?xml version="1.0" ?>

<appml>

<title>Suppliers</title>

<database>

<connection>northwind</connection>

<keyfield>supplierid</keyfield>

<maintable>suppliers</maintable>

<sql>SELECT CompanyName,ContactName,City FROM Suppliers</sql>

</database>

<htmllist />

<htmlform>

<form>

<table width="50%">

<tr>

<td>

<fieldset>

<legend style="color:darkblue;">

Supplier information for <span id="span_companyname"></span>

</legend>

<br/>

<table>

<tr>

<td>Company</td>

<td><input size='50' maxlength='40' id='companyname' /></td>

</tr>

<tr>

<td>Contactname</td>

<td><input size='50' maxlength='30' id='contactname' /></td>

</tr>

<tr>

<td>City</td>

<td><input size='50' maxlength='15' id='city' /></td>

</tr>

</table>

</fieldset>

</td>

</tr>

</table>

</form>

</htmlform>

</appml>

View the output produced by the AppML List and Form Service

Create drop-down boxes from the data:

<?xml version="1.0" ?>

<appml>

<title>Products</title>

<database>

<connection>northwind</connection>

<keyfield>productid</keyfield>

<maintable>products</maintable>

</database>

<filters>

<orderby>productname</orderby>

</filters>

<htmllist>

<sql>

SELECT products.productname AS Product,

suppliers.companyname AS Supplier,

categories.categoryname AS Category

FROM ((Products

LEFT JOIN suppliers

ON products.supplierid=suppliers.supplierid)

LEFT JOIN categories

ON products.categoryid=categories.categoryid)

</sql>

</htmllist>

<htmlform>

<sql>

SELECT productname,supplierid,categoryid,

quantityperunit,unitprice

FROM products

</sql>

<form>

<table>

<tr>

<td>Product</td>

<td><input size="40" maxlength="40" id="productname" /></td>

</tr>

<tr>

<td>Category</td>

<td>

<field name="categoryid">

<function name="dbselect">

<sql>SELECT categoryid,categoryname

FROM categories ORDER BY categoryname</sql>

<value>categoryid</value>

<options>categoryname</options>

</function>

</field>

</td>

</tr>

<tr>

<td>Supplier</td>

<td>

<field name="supplierid">

<function name="dbselect">

<sql>SELECT supplierid,companyname

FROM suppliers ORDER BY companyname</sql>

<value>supplierid</value>

<options>companyname</options>

</function>

</field>

</td>

</tr>

<tr>

<td>Quantity per unit</td>

<td><input size="40" maxlength="20" id="quantityperunit" /></td>

</tr>

<tr>

<td>Unitprice</td>

<td><input size="40" maxlength="8" id="unitprice" /></td>

</tr>

</table>

</form>

</htmlform>

</appml>

View the output produced by the AppML List and Form Service

View the XML source file


Header and Footer elements

The <header> and <footer> Elements

The <header> element is used to define a header that will be displayed before the output on the page.

The <footer> element is used to define a footer that will be displayed after the output on the page.

Any HTML code may be included inside the <footer> element.

Example

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<sql>SELECT Categoryname,Description FROM Categories</sql>

</database>

<header>

<h1>Categories 2004</h1>

</header>

<footer>

<p><b>Compiled by John Johnson</b></p>

</footer>

<htmlreport />

</appml>

View the output produced by the AppML HTML Report Service

View the XML source file


AppML HTML Forms

The <htmlform> element contains the elements of an HTML form.

The <htmlform> Element

By adding an <htmlform /> element after the <database> element, the AppML Form Service will generate an HTML input form based on the SQL defined in the <database> element. An empty record will be displayed, ready to be filled with data. New/Submit/Delete buttons will automatically be added.

Note: When working with HTML lists and forms, the <keyfield> and <maintable> elements must be presented in the <database> element:

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<keyfield type="text">customerid</keyfield>

<maintable>customers</maintable>

<sql>SELECT CompanyName,ContactName,City FROM Customers</sql>

</database>

<htmlform />

</appml>

View the XML source file

However, when working with data, it is more probable that the user wants to see the data in a list and have the opportunity to modify existing data and add new data to the database. Therefore we add the <htmllist> element. The user will now view the data in a list, but a folder image is added to the left of each record. An input form will open when clicking on the folder image. The user may now modify the data or enter new records (by clicking on the new button in the list OR in the input form):

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<keyfield type="text">customerid</keyfield>

<maintable>customers</maintable>

<sql>SELECT CompanyName,ContactName,City FROM Customers</sql>

</database>

<htmllist />

<htmlform />

</appml>

View the output produced by the AppML HTML List and Form Service

View the XML source file

To create more advanced HTML forms, look at the examples in the attributes and child elements below.

<htmlform> Attributes

The <htmlform> element may have the following attributes:

Attribute | Value | Description
delete | false | Disables the "Delete" button in the HTML input form
name | formname | Specifies a unique name for the input form. This enables the AppML Form Service to run a number of different input forms from the same AppML description
new | false | Disables the "New" button in the HTML input form
 | false | Disables the "Submit" button in the HTML input form
target | URL |

<htmlform> Child Elements

The <htmlform> element may have the following child elements:

Element | Description
elements | A container for the data fields in an HTML form that should fulfill special criterions
footer | Defines a footer that will be displayed after the HTML form on the page
form | Provides a way to define your own input form. All legal HTML elements are allowed
header | Defines a header that will be displayed before the HTML form on the page
 | Defines a script to be executed when the HTML form loads
script | A container for scripts that can be executed from everywhere inside the HTML form
stylesheet | Defines a stylesheet for the HTML form
sql | Defines an SQL statement for the HTML form
title | Defines a title for the HTML form


AppML HTML Lists

The <htmllist> element contains the elements of an HTML list.

The <htmllist> Element

By adding an <htmllist /> element after the <database> element, the AppML List Service will generate an HTML list based on the SQL defined in the <database> element. Previous/Next/First/Last buttons will automatically be added. If there is a <filters> element, a "Filter" button will also be added.

Note: When working with HTML lists and forms, the <keyfield> and <maintable> elements must be present in the <database> element:

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<keyfield type="text">customerid</keyfield>

<maintable>customers</maintable>

<sql>SELECT CompanyName,ContactName,City FROM Customers</sql>

</database>

<htmllist />

</appml>

View the output produced by the AppML HTML

View the XML source file

An example of an editable HTML list:

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<keyfield type="text">customerid</keyfield>

<maintable>customers</maintable>

<sql>SELECT CompanyName,ContactName,City FROM Customers</sql>

</database>

<htmllist edit="true" />

</appml>

View the output produced by the AppML HTML List Service

An example of an HTML list with filter function:

<?xml version="1.0" ?>

<appml>

<title>CUSTOMERS</title>

<database>

<connection>northwind</connection>

<keyfield type="text">customerid</keyfield>

<maintable>customers</maintable>

<sql>SELECT CompanyName,ContactName,Country FROM Customers</sql>

</database>

<filters>

<orderby>Companyname</orderby>

<query><field>Companyname</field></query>

<query><field>Country</field></query>

<orderselect>

<field>Companyname</field>

<field>Country</field>

</orderselect>

</filters>

<htmllist />

</appml>

View the output produced by the AppML HTML

View the XML source file

To create more advanced HTML lists, look at the examples in the attributes and child elements below.

<htmllist> Attributes

The <htmllist> element may have the following attributes:

Attribute | Value | Description
edit | true | Defines an editable HTML list
 | false | Removes the "Delete" button (garbage can) from the list. Only available in an editable HTML list
maxlines | number | Specifies the maximum number of records to show on each page
navigate | false | Removes the "Previous/Next/First/Last" buttons from the HTML list
new | false | Removes the "New" button from the list. Only available in an editable HTML list OR if a <htmlform> element is presented
reporttarget | URL | Specifies the report in an external XML file to be executed when clicking on the "Report" button in the HTML list
search | false | Removes the "Filter" button from the HTML list
window | _self | Where to open the report?

<htmllist> Child Elements

The <htmllist> element may have the following child elements:

Element | Description
displaysql |
elements | A container for the data fields in an editable HTML list that should fulfill special criterions
footer | Defines a footer that will be displayed after the HTML list output on the page
header | Defines a header that will be displayed before the HTML list output on the page
 | A container for scripts that can be executed from everywhere inside the HTML list
stylesheet | Defines a stylesheet for the HTML list
sql | Defines an SQL statement for the HTML list
table | Provides a way to define the style and layout of the list table
td |
title | Defines a title for the HTML list


Keyfield element

The <keyfield> Element

The <keyfield> element defines the primary key of the main table.

The <keyfield> element is used by the AppML Form Service to define how to update the database.

Note: The primary key field is numeric by default.

Note: When working with AppML HTML forms, you must always define the <maintable> and <keyfield> elements.

<keyfield> Attributes

The <keyfield> element may have the following attributes:

Attribute | Value | Description
type | text | Defines that the primary key field is a text field

Example

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<maintable>suppliers</maintable>

<keyfield>supplierid</keyfield>

<sql>

SELECT CompanyName,ContactName,Address,City FROM Suppliers

</sql>

</database>

<htmllist />

<htmlform />

</appml>

View the output produced by the AppML HTML List and Form Service

View the XML source file


Maintable element

The <maintable> Element

The <maintable> element defines the main table for the application.

If the <sql> element is omitted AppML uses the <maintable> element to define a default SQL statement (SELECT * FROM maintable) for the application.

Note: When working with input forms, you must always define the <maintable> and <keyfield> elements.

Example

This AppML description:

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<maintable>customers</maintable>

</database>

</appml>

is equal to:

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<maintable>customers</maintable>

<sql>SELECT * FROM customers</sql>

</database>

</appml>


Onload element

The <onload> Element

The <onload> element defines a script to be executed when the AppML application loads in a browser.

Used in conjunction with the <script> form element.

Example

This example will execute the Javascript "message()" when the AppML page loads.

<?xml version="1.0" ?>

<appml>

<database>

<connection>music_db</connection>

<sql>SELECT Title,Artist,Year FROM cd_catalog</sql>

</database>

<htmlform>

<sql>SELECT Title,Artist FROM cd_catalog</sql>

<onload>javascript:message()</onload>

<script type="text/javascript">

<!--

function message()

{

alert("This alert box was called on the onload event")

}

// -->

</script>

</htmlform>

</appml>


Orderby element

The <orderby> Element

The <orderby> element defines a fixed ORDER BY clause to be added to the SQL every time the application runs.

Example

<?xml version="1.0" ?>

<appml>

<title>CUSTOMERS</title>

<database>

<connection>northwind</connection>

<sql>SELECT Companyname,ContactName,Country

FROM Customers</sql>

</database>

<filters>

<orderby>Companyname</orderby>

</filters>

<htmlreport />

</appml>

View the output produced by the HTML Report Service

Example

<?xml version="1.0" ?>

<appml>

<title>CUSTOMERS</title>

<database>

<connection>northwind</connection>

<sql>SELECT Companyname,ContactName,Country

FROM Customers</sql>

</database>

<filters>

<orderby>Companyname DESC,Country</orderby>

</filters>

<htmlreport />

</appml>

View the output produced by the HTML Report Service


Orderselect element

The <orderselect> Element

The <orderselect> element defines which fields the user can sort by at runtime.

Note: The <orderselect> element will not work without one or more <query> elements defined.

Note: The fields in the <orderselect> element must be presented in the SQL for the report/list.

<orderselect> Child Elements

The <orderselect> element may have the following child elements:

Element | Description
field | Defines which data fields the user can sort by. If you do not want to use the name of the data field you can add a label: <field name="datafield">label</field>
selected | ?
direction | ?

Example

<?xml version="1.0" ?>

<appml>

<title>CUSTOMERS</title>

<database>

<connection>northwind</connection>

<sql>SELECT Companyname,ContactName,Country

FROM Customers</sql>

</database>

<filters>

<orderby>Companyname</orderby>

<query><field>Companyname</field></query>

<query><field>Country</field></query>

<orderselect>

<field>Companyname</field>

<field>Country</field>

</orderselect>

</filters>

<htmlreport />

</appml>

View the output produced by the HTML Report Service

View the XML source file


Query element

The <query> Element

The <query> element defines which fields the user can query at runtime.

Note: The fields in the <query> element must be presented in the SQL for the report/list.

<query> Child Elements

The <query> element may have the following child elements:

Element | Description
field | Defines the data field that can be queried. The default type for the data field is text. If the data field is numeric or is a date field, use the following: <field type="number"> - for a numeric data field <field type="date"> - for a date data field
label | Defines a label for the query field
operator | Defines a query operator
sql | Defines a drop-down box with values to query
value | Defines a predefined query value

Example

A simple query:

<?xml version="1.0" ?>

<appml>

<title>CUSTOMERS</title>

<database>

<connection>northwind</connection>

<sql>SELECT Companyname,ContactName,Country

FROM Customers</sql>

</database>

<filters>

<orderby>Companyname</orderby>

<query><field>Companyname</field></query>

<query><field>Country</field></query>

</filters>

<htmlreport />

</appml>

View the output produced by the HTML Report Service

Example

A query with a predefined value:

<?xml version="1.0" ?>

<appml>

<title>CUSTOMERS</title>

<database>

<connection>northwind</connection>

<sql>SELECT Companyname,ContactName,Country

FROM Customers</sql>

</database>

<filters>

<orderby>Companyname</orderby>

<query>

<field>Companyname</field>

<value>F</value>

</query>

<query><field>Country</field></query>

</filters>

<htmlreport />

</appml>

View the

View the XML source file

Example

A query with a drop-down box on country:

<?xml version="1.0" ?>

<appml>

<title>CUSTOMERS</title>

<database>

<connection>northwind</connection>

<sql>SELECT Companyname,ContactName,Country

FROM Customers</sql>

</database>

<filters>

<orderby>Companyname</orderby>

<query><field>Companyname</field></query>

<query>

<field>Country</field>

<sql>SELECT DISTINCT country FROM customers

ORDER BY country</sql>

</query>

</filters>

<htmlreport />

</appml>


Script element

The <script> Element

The AppML <script> element provides a method for adding standard HTML scripts to the application.

Any legal script code can go inside the <script> element.

Note: The script can be called from the <onload> sub element of <htmlform> OR be called from a field in the HTML form or list.

Example

This example will execute the JavaScript function message() when the AppML HTML form loads:

<?xml version="1.0" ?>

<appml>

<database>

<connection>music_db</connection>

<sql>SELECT Title,Artist,Year FROM cd_catalog</sql>

</database>

<htmlform>

<sql>SELECT Title,Artist FROM cd_catalog</sql>

<onload>javascript:message()</onload>

<script type="text/javascript">

<!--

function message()

{

alert("This alert box was called with the onload event")

}

// -->

</script>

</htmlform>

</appml>


Section element

The <section> Element

The <section> element is used to divide the report output into sections. Any legal HTML elements can be put inside this element.

Tip: The <section> element may be used in conjunction with the <break> element to create reports divided into sections, e.g. Sales per year, Sales per category, Customers by country, Sales per customer, etc.

<section> Attributes

The <section> element may have the following attributes:

Attribute | Value | Description
movenext | yes | Moves to the next record in the recordset after each repeat
name | name | Specifies a unique name for the section
repeat | number | Specifies the number of times to repeat the section. If not the movenext attribute is defined the report will display the same record the number of times specified in this attribute

<section> Sub Elements

The <section> element may have the following sub elements:

Element

Description

<html>[CDATA[

......

......

......

]]>

Inside this element you may put any standard HTML elements and scripts. You may also show data from the database. Data values from the database is inserted with the following syntax:

#appml:field(name='fieldname')

Why CDATA? When working with sections, you often split the HTML code in an incorrect way. There will often be a start element in one section that will be closed in another section. When the AppML description (the .xml file) is parsed by an XML parser, it will report an error because this is not correct HTML. To avoid that the parser reports an error you must embed your report HTML inside a CDATA section

Example

<?xml version="1.0" ?>

<appml>

<title>CUSTOMERS BY COUNTRY</title>

<database>

<connection>northwind</connection>

</database>

<filters>

<orderby>country,companyname,city</orderby>

</filters>

<htmlreport>

<sql>

SELECT companyname,contactname,city,country,phone

FROM Customers

</sql>

<break>

<field>country</field>

<section>C</section>

</break>

<header>

<h3>CUSTOMERS BY COUNTRY</h3>

</header>

<section name="A">

<html><![CDATA[

<p><b>COUNTRY:</b> #appml:field(name='country')</p>

<table width="90%" border="1" cellpadding="1" cellspacing="1">

<tr>

<th width="30%">Company</th>

<th width="30%">Contactperson</th>

<th width="20%">City</th>

<th width="20%">Phone</th>

</tr>

]]>

</html>

</section>

<section name="B" repeat="10000" movenext="yes">

<html><![CDATA[

<tr>

<td>#appml:field(name='companyname')</td>

<td>#appml:field(name='contactname')</td>

<td>#appml:field(name='city')</td>

<td>#appml:field(name='phone')</td>

</tr>

]]>

</html>

</section>

<section name="C">

<html><![CDATA[</table><br />]]></html>

</section>

</htmlreport>

</appml>

View the output produced by the HTML Report Service

View the XML source file


SQL element

The <sql> Element

The <sql> element is used to define a subset of records from a database. The <sql> element can contain any legal SQL statement.

An <sql> element defined as a child of the <database> element will be the DEFAULT SQL for the application.

To define a particular SQL for the HTML report, HTML list, or HTML form, add an <sql> element as a child of <htmlreport>, <htmllist>, or <htmlform>.

If the <sql> element is omitted in either <htmlreport>, <htmllist>, or <htmlform>, the application will use the default SQL under the <database> element.

????? Note: If a <filters> element is present, the <sql> MUST contain all the data fields the user may query!

<sql> Attributes

The <sql> element may have the following attributes:

Attribute | Value | Description
database | access sql oracle | Some part of the SQL syntax is different in different databases. The database attribute allows you to create different SQL's for a MS Access database, an SQL Server database, and an Oracle database

Use the default SQL in the HTML report:

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<sql>SELECT CompanyName,ContactName,City FROM Suppliers</sql>

</database>

<htmlreport />

</appml>

Define a particular SQL for the HTML report:

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<sql>SELECT CompanyName,ContactName,City FROM Suppliers</sql>

</database>

<htmlreport>

<sql>SELECT CompanyName,City FROM Suppliers</sql>

</htmlreport>

</appml>

Define a particular SQL for the HTML list:

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<maintable>suppliers</maintable>

<keyfield>supplierid</keyfield>

<sql>SELECT CompanyName,ContactName,City FROM Suppliers</sql>

</database>

<htmllist>

<sql>SELECT CompanyName,City FROM Suppliers</sql>

</htmllist>

</appml>

Define a particular SQL for the HTML form:

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<maintable>suppliers</maintable>

<keyfield>supplierid</keyfield>

<sql>SELECT CompanyName,ContactName,City FROM Suppliers</sql>

</database>

<htmlform>

<sql>SELECT CompanyName,City FROM Suppliers</sql>

</htmlform>

</appml>

Define a particular SQL for the XML report:

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<maintable>suppliers</maintable>

<keyfield>supplierid</keyfield>

<sql>SELECT CompanyName,ContactName,City FROM Suppliers</sql>

</database>

<xmlreport>

<sql>SELECT CompanyName,City FROM Suppliers</sql>

</xmlreport>

</appml>

Define SQL's for different databases:

In the example below there are no differences between the three SQL's, but it shows how to describe different SQL's for different databases. One example of a different SQL syntax in the three databases is when working with conditional statements (IIF / CASE WHEN).

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<sql>SELECT CompanyName,ContactName,City FROM Suppliers</sql>

</database>

<htmlreport>

<sql database="access">SELECT CompanyName FROM Suppliers</sql>

<sql database="sql">SELECT CompanyName FROM Suppliers</sql>

<sql database="oracle">SELECT CompanyName FROM Suppliers</sql>

</htmlreport>

</appml>


Stylesheet element

The <stylesheet> Element

The <stylesheet> element defines a stylesheet for the application.

If the <stylesheet> element is defined as a child of the <appml> element, it will be the DEFAULT stylesheet for the application.

To define a stylesheet particular for the HTML report, HTML list, or HTML form, add a <stylesheet> element as a child of <htmlreport>, <htmllist>, or <htmlform>.

If the <stylesheet> element is omitted in either <htmlreport>, <htmllist>, or <htmlform>, the application will use the default stylesheet under the <appml> element.

Specify a default stylesheet for the HTML report and list:

<?xml version="1.0" ?>

<appml>

<stylesheet>theme.css</stylesheet>

<database>

<connection>music_db</connection>

<sql>SELECT Title,Artist,Year FROM cd_catalog</sql>

</database>

<htmlreport />

<htmllist />

</appml>

Use a particular stylesheet in HTML report:

<?xml version="1.0" ?>

<appml>

<stylesheet>theme.css</stylesheet>

<database>

<connection>music_db</connection>

<sql>SELECT Title,Artist,Year FROM cd_catalog</sql>

</database>

<htmlreport>

<stylesheet>report_theme.css</stylesheet>

</htmlreport>

</appml>

Use a particular stylesheet in HTML list:

<?xml version="1.0" ?>

<appml>

<stylesheet>theme.css</stylesheet>

<database>

<connection>music_db</connection>

<maintable>cd_catalog</maintable>

<keyfield>cdid</keyfield>

<sql>SELECT Title,Artist,Year FROM cd_catalog</sql>

</database>

<htmllist>

<stylesheet>list_theme.css</stylesheet>

</htmllist>

</appml>


Title element

The <title> Element

The <title> element defines a title for the application.

If the <title> element is defined as a child of the <appml> element, it will be the DEFAULT title for the application.

To define a particular title for the HTML report, HTML list, or HTML form, add a <title> element as a child of <htmlreport>, <htmllist>, or <htmlform>.

If the <title> element is omitted in either <htmlreport>, <htmllist>, or <htmlform>, the application will use the default title under the <appml> element.

Use the default title in the HTML report:

<?xml version="1.0" ?>

<appml>

<title>Northwind Categories</title>

<database>

<connection>northwind</connection>

<sql>SELECT Categoryname,Description FROM Categories</sql>

</database>

<htmlreport />

</appml>

View the output produced by the AppML HTML Report Service

View the XML source file

Define a particular title for the HTML report:

<?xml version="1.0" ?>

<appml>

<title>Northwind Categories</title>

<database>

<connection>northwind</connection>

<sql>SELECT Categoryname,Description FROM Categories</sql>

</database>

<htmlreport>

<title>My own Report Title</title>

</htmlreport>

</appml>

View the XML source file

Define a particular title for the HTML list:

<?xml version="1.0" ?>

<appml>

<title>Northwind Categories</title>

<database>

<connection>northwind</connection>

<maintable>categories</maintable>

<keyfield>categoryid</keyfield>

<sql>SELECT Categoryname,Description FROM Categories</sql>

</database>

<htmllist>

<title>My own List Title</title>

</htmllist>

</appml>

View the output produced by the AppML HTML

View the XML source file


Where element

The <where> Element

The <where> element defines a fixed WHERE clause to be added to the SQL every time the application runs.

Example

<?xml version="1.0" ?>

<appml>

<title>CUSTOMERS</title>

<database>

<connection>northwind</connection>

<sql>SELECT Companyname,ContactName,Country

FROM Customers</sql>

</database>

<filters>

<where>Country='Germany'</where>

</filters>

<htmlreport />

</appml>

View the output produced by the HTML Report Service

View the XML source file


AppML XML Reports

The <xmlreport> element contains the elements of an XML report.

The <xmlreport> Element

By adding an <xmlreport /> element after the <database> element, the AppML XML Report Service will generate an XML report based on the SQL defined in the <database> element. The AppML XML report root element is <table>. The first element after <table> is <sql>, which lists the SQL used in the description. Then there will be one <row> element for each record in the SQL. The <row> element contains one element for each field in the SQL:

<?xml version="1.0" ?>

<appml>

<database>

<connection>northwind</connection>

<sql>SELECT CompanyName,ContactName,City FROM Customers</sql>

</database>

<xmlreport />

</appml>

View the output produced by the AppML XML Report Service

View the XML source file

To create more advanced XML reports, look at the examples in the attributes and child elements below.

<xmlreport> Attributes

The <xmlreport> element may have the following attributes:

Attribute | Value | Description
name | name | Specifies a unique name for the XML report. This enables the AppML Report Service to run a number of different reports from the same AppML description
src | src | Defines a reference to an <xmlreport> element stored in an external AppML description file

<xmlreport> Child Elements

The <xmlreport> element may have the following child elements:

Element | Description
sql | Defines an SQL statement for the XML report


Web Applications

All future applications will be Web applications. Future applications will run over the Internet. The client will be an Internet browser and the server will be an Internet server.

The Future Of Computer Applications

· Future applications will be Web applications
· Future applications will run over the Internet
· The clients (the users) will use an Internet Browser
· The clients will be served by Internet Servers
· The clients will use many different types of devices
· The clients will sometimes use traditional PCs
· The clients will also use wireless devices
· The clients will sometimes be computers (user agents)

Applications Will Run Over The Internet

Future applications will be distributed over the Internet. It will make no sense to create an application that will only run on a single computer, or a local area network.

Future applications will be exactly the same whether they run on single computers, on a local area network, or on the Internet. The client will be an Internet browser, and the server will be an Internet server, even if the application only runs on a single computer or a small network.

Future distributed applications will use Internet communication. Clients will request servers with standard HTTP requests. Servers will respond with standard HTTP responses. The connection between the Client and the Server will be stateless (the client will not maintain a permanent connection to the server).

Clients Will Be Internet Browsers

Application clients will be standard browsers without any additional installed components. No part of the applications will be stored on the client computer.

The application will not use, or rely on, any components, DLL-files, INI-files, Registry settings or other non standard settings or files stored on the client.

Servers Will Be Internet Servers

Application servers will be standard Internet servers running standard software without any additional components.

The application itself will not use, or rely on, any components, DLL-files, INI-files, Registry settings or other non standard settings or files stored on the server, except for standard server components like script engines, database connectors and SQL databases.

Compiled Executables will Die

The need to install compiled executables has been the nightmare of anyone who develops distributed applications.

Neither C++ nor JAVA can create standard components that will run on all types of computers. There will be no room for these languages in the future. We will not let them destroy our dream of creating Internet application that will run on almost any computer in the world.

Traditional client/server applications, with compiled executables installed on the client, will gradually be removed from the map.


Web Services

Future applications will be executed by cooperating Web Services.

Applications Will NOT Be Executables

Future applications will not contain large masses of compiled executable code. Applications will be broken down into a number of smaller individual services that are easier to create and easier to maintain. Individual services will be developed and maintained by smaller groups of people.

Applications Will Be Services

Services are not the same as executables, or COM-objects, or DLL-files. Services will most often return HTML and/or XML pages as answers to submitted requests.

Services will be developed using the following rules:

· Services will be defined in XML
· Services will not be purpose built
· Services will not contain compiled code
· Services will scale and relocate
· Services will be easy to create and edit
· Services will be self describing
· Services will support other services

Services Will Be Defined In XML

We believe that services will be described in an Application Markup Language, and that these descriptions will be stored in a database or in XML files.

We also believe that standard service engines will provide application services by interpreting these XML descriptions.

Services Will NOT Be Purpose Built

Our computers are full of applications that were purpose built. These applications will quickly die, because they cannot manage changes in their requirements.

Creating purpose built applications is a terrible waste of money and time. We (and the people that pay for our applications) want flexible and generalized applications that can gracefully support future changes, without a high additional cost.

Our future applications will have to be created from a set of flexible standard services that can serve a lot of different requests. Future, not even thought about, changes should easily hook into our application without crumbling or destroying it.

Services will be aware of future changes and gracefully adjust to changes in either the amount of services or in the exchange format. The application and the data exchange format must support both extensions, removed elements and version controls.

Services Will NOT Run Compiled Code

Services will not be coded if it can be avoided. If a service has to be coded, a scripting language will be used. Services should not be compiled into executables. That makes services too hard to access and too hard to edit.

Pre-compiled components used in an application will threaten the possibility of creating an application that can move, scale and gracefully support future extensions or changes.

Services Will Scale And Relocate

Services must be able to scale from supporting a few to many thousand requests per day. Services must also be able to spread from one server to many, or to move from one server to another without breaking the application. Services will be independent of physical server, and be located by standard Internet Uniform Resource Locators (URL).

Services Will Be Easy To Create And Edit

Since services are described in XML, a standard XML editor can be used to create and edit services. Future services will be created and modified by editing their properties and methods, not by changing executable code.

Services Will Be Self Describing

Application clients will be able to query a server for a service and to ask for the current server functions.

Clients and servers will also be able to exchange data in a way so that both understand each element in the data.

Applications will use an XML based information vocabulary with a self-describing DTD (Document Type Definition) or Schema, to exchange information and data.

Services Will Support Other Services

Applications should be able to cooperate with other applications. Future services should be created with the same rules, and be able to connect to each other with standard Internet links.


Web Solution

Web Solution - Application Markup

An Application Markup Language is the solution to the problem.

Traditional Programming Languages.

It is not difficult to create Internet applications and Internet services like the ones described in the previous chapter, but traditional programming languages, EXE files, DLL files or COM objects, will not do the job.

There should be no room for executables, C++ or Java compilers, DLL-files, Registry or INI-file settings in Internet applications. Executables should be dismissed from your development projects. Future applications must and will use standard Internet components running on standard Internet enabled computers.

It is time to wake up and get rid of our traditional skills. Find out how to create future Internet applications with the tools that are available today.

An Application Markup Language

To develop future Internet applications, we need an application markup language. With an application markup language we can:

· Create platform independent applications
· Create compile free applications
· Create expandable applications
· Create distributable applications
· Reach a larger audience
· Reduce the development costs
· Reduce the maintenance costs
· Use vendor independent Web standards
· Use thin browser clients

Our suggestion is built on long experience with 4th generation client-server systems, and our vision is to create a new, XML based, application development environment, superior to other systems on the following grounds:

· Shorter development time
· Lower development costs
· Higher flexibility
· Standard based
· Open source


ASP Introduction

Introduction to ASP

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

What you should already know

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

· HTML / XHTML
· A scripting language like JavaScript or VBScript

If you want to study these subjects first, find the tutorials on our Home page.

What is ASP?

· ASP stands for Active Server Pages
· ASP is a program that runs inside IIS
· IIS stands for Internet Information Services
· IIS comes as a free component with Windows 2000
· IIS is also a part of the Windows NT 4.0 Option Pack
· The Option Pack can be downloaded from Microsoft
· PWS is a smaller - but fully functional - version of IIS
· PWS can be found on your Windows 95/98 CD

ASP Compatibility

· ASP is a Microsoft Technology
· To run IIS you must have Windows NT 4.0 or later
· To run PWS you must have Windows 95 or later
· ChiliASP is a technology that runs ASP without Windows OS
· InstantASP is another technology that runs ASP without Windows

What is an ASP File?

· An ASP file is just the same as an HTML file
· An ASP file can contain text, HTML, XML, and scripts
· Scripts in an ASP file are executed on the server
· An ASP file has the file extension ".asp"

How Does ASP Differ from HTML?

· When a browser requests an HTML file, the server returns the file
· When a browser requests an ASP file, IIS passes the request to the ASP engine. The ASP engine reads the ASP file, line by line, and executes the scripts in the file. Finally, the ASP file is returned to the browser as plain HTML

What can ASP do for you?

· 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
· The advantages of using ASP instead of CGI and Perl, are those of simplicity and speed
· Provide security since your ASP code can not be viewed from the browser
· Clever ASP programming can minimize the network traffic

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 Abandon Method

The Abandon method destroys a user session.

Note: When this method is called, the current Session object is not deleted until all of the script on the current page have been processed. This means that it is possible to access session variables on the same page as the call to Abandon, but not from another Web page.

Syntax

Session.Abandon

Examples

File1.asp:

<%

Session("name")="Hege"

Session.Abandon

Response.Write(Session("name"))

%>

Output:

Hege

File2.asp:

<%

Response.Write(Session("name"))

%>

Output:

(none)


ASP Ad Rotator

ASP AdRotator Component

Examples

Simple AdRotator Example

This example shows how to use the AdRotator component to display a different advertisement image, each time a user visits or refreshes the page.

AdRotator - The Images are

This example shows how to use the AdRotator component to display a different advertisement image, each time a user visits or refreshes the page. In addition, the images are hyperlinks.

ASP AdRotator Component

The ASP AdRotator component creates an AdRotator object that displays a different image each time a user enters or refreshes a page. A text file includes information about the images.

Syntax

<%

set adrotator=server.createobject("MSWC.AdRotator")

adrotator.GetAdvertisement("textfile.txt")

%>

Example

Assume we have a file called "banners.asp". It looks like this:

<html>

<body>

<%

set adrotator=Server.CreateObject("MSWC.AdRotator")

response.write(adrotator.GetAdvertisement("ads.txt"))

%>

</body>

</html>

The file "ads.txt" looks like this:

*

w3schools.gif

http://www.w3schools.com/

Visit W3Schools

80

microsoft.gif

http://www.microsoft.com/

Visit Microsoft

20

The lines below the asterisk in the file "ads.txt" specifies the images to be displayed, the hyperlink addresses, the alternate text (for the images), and the display rates in percent of the hits. We see that the W3Schools image will be displayed for 80 % of the hits and the Microsoft image will be displayed for 20 % of the hits in the text file above.

Note: To get the links to work when a user clicks on them, we will have to modify the file "ads.txt" a bit:

REDIRECT banners.asp

*

w3schools.gif

http://www.w3schools.com/

Visit W3Schools

80

microsoft.gif

http://www.microsoft.com/

Visit Microsoft

20

The redirection page (banners.asp) will now receive a querystring with a variable named URL containing the URL to redirect to.

Note: To specify the height, width, and border of the image, you can insert the following lines under REDIRECT:

REDIRECT banners.asp

WIDTH 468

HEIGHT 60

BORDER 0

*

w3schools.gif

...

...

The last thing to do is to add some lines of code to the "banners.asp" file:

<%

url=Request.QueryString("url")

If url<>"" then Response.Redirect(url)

%>

<html>

<body>

<%

set adrotator=Server.CreateObject("MSWC.AdRotator")

response.write(adrotator.GetAdvertisement("textfile.txt"))

%>

</body>

</html>

That's all!!

Properties

Property | Description | Example
Border | Specifies the size of the borders around the advertisement | <% set adrot=Server.CreateObject("MSWC.AdRotator") adrot.Border="2" Response.Write(adrot.GetAdvertisement("ads.txt")) %>
Clickable | Specifies whether the advertisement is a hyperlink | <% set adrot=Server.CreateObject("MSWC.AdRotator") adrot.Clickable=false Response.Write(adrot.GetAdvertisement("ads.txt")) %>
TargetFrame | Name of the frame to display the advertisement | <% set adrot=Server.CreateObject("MSWC.AdRotator") adrot.TargetFrame="target='_blank'" Response.Write(adrot.GetAdvertisement("ads.txt")) %>

Methods

Method | Description | Example
GetAdvertisement | Returns HTML that displays the advertisement in the page | <% set adrot=Server.CreateObject("MSWC.AdRotator") Response.Write(adrot.GetAdvertisement("ads.txt")) %>


ASP Add Method

The Add method adds a new key/item pair to a Dictionary object.

Syntax

DictionaryObject.Add(key,item)

Parameter | Description
key | Required. The key value associated with the item
item | Required. The item value associated with the key

Example

<%

Dim d

Set d=Server.CreateObject("Scripting.Dictionary")

d.Add "re","Red"

d.Add "gr","Green"

d.Add "bl","Blue"

d.Add "pi","Pink"

Response.Write("The value of key gr is: " & d.Item("gr"))

%>

Output:

The value of key gr is: Green


ASP AddHeader Method

The AddHeader method adds a new HTTP header and a value to the HTTP response.

Note: Once a header has been added, it cannot be removed.

Note: In IIS 4.0 you have to call this method before any output is sent to the browser. In IIS 5.0 you can call the AddHeader method at any point in the script, as long as it precedes any calls to the response.Flush method.

Syntax

response.AddHeader name,value

Parameter | Description
name | Required. The name of the new header variable (cannot contain underscores)
value | Required. The initial value of the new header variable

Examples

<%Response.AddHeader "WARNING","Error message text"%>


ASP ADO

Introduction to ADO

ADO can be used to access databases from your web pages.

Accessing a Database from an ASP Page

The common way to access a database from inside an ASP page is to:

1. Create an ADO connection to a database
2. Open the database connection
3. Create an ADO recordset
4. Open the recordset
5. Extract the data you need from the recordset
6. Close the recordset
7. Close the connection

What is ADO?

· ADO is a Microsoft technology
· ADO stands for ActiveX Data Objects
· ADO is a Microsoft Active-X component
· ADO is automatically installed with Microsoft IIS
· ADO is a programming interface to access data in a database

Where to go next?

If you want to study more ADO, read our ADO tutorial.


ASP AppendToLog Method

The AppendToLog method adds a string to the end of server log entry for this request. You can call this method multiple times in a script. Each time it is called it will append the specified string to the log entry.

Syntax

response.AppendToLog string

Parameter | Description
string | Required. The text to append to the log file (cannot contain any comma characters)

Examples

<%Response.AppendToLog "My log message"%>


ASP Application Object

A group of ASP files that work together to perform some purpose is called an application. The Application object in ASP is used to tie these files together.

Application Object

An application on the Web may be a group of ASP files. The ASP files work together to perform some purpose. The Application object in ASP is used to tie these files together.

The Application object is used to store and access variables from any page, just like the Session object. The difference is that ALL users share one Application object, while with Sessions there is one Session object for EACH user.

The Application object should hold information that will be used by many pages in the application (like database connection information). This means that you can access the information from any page. It also means that you can change the information in one place and the changes will automatically be reflected on all pages.

Store and Retrieve Application Variables

Application variables can be accessed and changed by any page in the application.

You can create Application variables in "Global.asa" like this:

<script language="vbscript" runat="server">

Sub Application_OnStart

application("vartime")=""

application("users")=1

End Sub

</script>

In the example above we have created two Application variables: "vartime" and "users".

You can access the value of an Application variable like this:

There are

<%

Response.Write(Application("users"))

%>

active connections.

Loop Through the Contents Collection

The Contents collection contains all application variables. You can loop through the Contents collection, to see what's stored in it:

<%

dim i

For Each i in Application.Contents

Response.Write(i & "<br />")

Next

%>

If you do not know the number of items in the Contents collection, you can use the Count property:

<%

dim i

dim j

j=Application.Contents.Count

For i=1 to j

Response.Write(Application.Contents(i) & "<br />")

Next

%>

Loop Through the StaticObjects Collection

You can loop through the StaticObjects collection, to see the values of all objects stored in the Application object:

<%

dim i

For Each i in Application.StaticObjects

Response.Write(i & "<br />")

Next

%>

Lock and Unlock

You can lock an application with the "Lock" method. When an application is locked, the users cannot change the Application variables (other than the one currently accessing it). You can unlock an application with the "Unlock" method. This method removes the lock from the Application variable:

<%

Application.Lock

'do some application object operations

Application.Unlock

%>


ASP Application Object

A group of ASP files that work together to perform some purpose is called an application. The Application object in ASP is used to tie these files together.

Application Object

An application on the Web may be a group of ASP files. The ASP files work together to perform some purpose. The Application object in ASP is used to tie these files together.

The Application object is used to store and access variables from any page, just like the Session object. The difference is that ALL users share one Application object, while with Sessions there is one Session object for EACH user.

The Application object should hold information that will be used by many pages in the application (like database connection information). This means that you can access the information from any page. It also means that you can change the information in one place and the changes will automatically be reflected on all pages.

The Application object's collections, methods, and events are described below:

Collections

Collection | Description
Contents | Contains all the items appended to the application through a script command
 | Contains all the objects appended to the application with the HTML <object> tag

Methods

Method | Description
Contents.Remove | Deletes an item from the Contents collection
Contents.RemoveAll() | Deletes all items from the Contents collection
 | Prevents other users from modifying the variables in the Application object
Unlock | Enables other users to modify the variables in the Application object (after it has been locked using the Lock method)

Events

Event | Description
Application_OnEnd | Occurs when all user sessions are over, and the application ends
Application_OnStart | Occurs before the first new session is created (when the Application object is first referenced)


ASP Application_OnStart and Application_OnEnd Events

Application_OnStart Event

The Application_OnStart event occurs before the first new session is created (when the Application object is first referenced).

This event is placed in the Global.asa file.

Note: Referencing to a Session, Request, or Response objects in the Application_OnStart event script will cause an error.

Application_OnEnd Event

The Application_OnEnd event occurs when the application ends (when the web server stops).

This event is placed in the Global.asa file.

Note: The MapPath method cannot be used in the Application_OnEnd code.

Syntax

<script language="vbscript" runat="server">

Sub Application_OnStart

. . .

End Sub

Sub Application_OnEnd

. . .

End Sub

</script>

Examples

Global.asa:

<script language="vbscript" runat="server">

Sub Application_OnEnd()

Application("totvisitors")=Application("visitors")

End Sub

Sub Application_OnStart

Application("visitors")=0

End Sub

Sub Session_OnStart

Application.Lock

Application("visitors")=Application("visitors")+1

Application.UnLock

End Sub

Sub Session_OnEnd

Application.Lock

Application("visitors")=Application("visitors")-1

Application.UnLock

End Sub

</script>

To display the number of current visitors in an ASP file:

<html>

<head>

</head>

<body>

<p>

There are <%response.write(Application("visitors"))%>

online now!

</p>

</body>

</html>


ASP ASPError Object

The ASPError object is used to display detailed information of any error that occurs in scripts in an ASP page.

The ASPError Object

The ASPError object was implemented in ASP 3.0 and is available in IIS5 and later.

The ASPError object is used to display detailed information of any error that occurs in scripts in an ASP page. The ASPError object is created when Server.GetLastError is called, so the error information can only be accessed by using the Server.GetLastError method.

The ASPError object's properties are described below (all properties are read-only):

Note: The properties below can only be accessed through the Server.GetLastError() method.

Properties

Property | Description
ASPCode | Returns an error code generated by IIS
ASPDescription | Returns a detailed description of the error (if the error is ASP-related)
 | Returns the source of the error (was the error generated by ASP? By a scripting language? By an object?)
Column | Returns the column position within the file that generated the error
Description | Returns a short description of the error
File | Returns the name of the ASP file that generated the error
 | Returns the line number where the error was detected
Number | Returns the standard COM error code for the error
 | Returns the actual source code of the line where the error occurred


ASP ASPError Object Properties

ASPCode

The ASPCode property returns an error code generated by IIS.

ASPDescription

The ASPDescription property returns a detailed description of the error.

Category

The Category property returns the source of the error (Was the error generated by IIS? A scripting language? Or a component?).

Column

The Column property returns the column position within the ASP file that generated the error.

Description

The Description property returns a short description of the error.

File

The File property returns the name of the ASP file that generated the error.

Line

The Line property returns the number of the line within the ASP file that generated the error.

Number

The Number property returns the standard COM error code for the error.

Source

The Source property returns the actual source code of the line where the error occurred.

Syntax

ASPError.ASPCode()

ASPError.ASPDescription()

ASPError.Category()

ASPError.Column()

ASPError.Description()

ASPError.File()

ASPError.Line()

ASPError.Number()

ASPError.Source()

Example

<%

dim objErr

set objErr=Server.GetLastError()

response.write("ASPCode=" & objErr.ASPCode)

response.write("<br />")

response.write("ASPDescription=" & objErr.ASPDescription)

response.write("<br />")

response.write("Category=" & objErr.Category)

response.write("<br />")

response.write("Column=" & objErr.Column)

response.write("<br />")

response.write("Description=" & objErr.Description)

response.write("<br />")

response.write("File=" & objErr.File)

response.write("<br />")

response.write("Line=" & objErr.Line)

response.write("<br />")

response.write("Number=" & objErr.Number)

response.write("<br />")

response.write("Source=" & objErr.Source)

%>


ASP AtEndOfLine Property

The AtEndOfLine property returns a Boolean value. True indicates that the file pointer is positioned immediately before the end-of-line marker in a TextStream file. Otherwise, it returns False.

Note: This property will only work on a TextStream object that are open for reading.

Syntax

TextStreamObject.AtEndOfLine

Example

<%

dim fs,f,t,x

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.CreateTextFile("c:\test.txt")

f.write("Hello World!")

f.close

set t=fs.OpenTextFile("c:\test.txt",1,false)

do while t.AtEndOfLine<>true

x=t.Read(1)

loop

t.close

Response.Write("The last character is: " & x)

%>

Output:

The last character of the first line in the text file is: !


ASP AtEndOfStream Property

The AtEndOfStream property returns True if the file pointer is at the end of a TextStream file, and False if not.

Note: This property will only work on a TextStream object that are open for reading.

Syntax

TextStreamObject.AtEndOfStream

Example

<%

dim fs,f,t,x

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.CreateTextFile("c:\test.txt")

f.write("Hello World!")

f.close

set t=fs.OpenTextFile("c:\test.txt",1,false)

do while t.AtEndOfStream<>true

x=t.Read(1)

loop

t.close

Response.Write("The last character is: " & x)

%>

Output:

The last character in the text file is: !


ASP Attributes Property

The Attributes property is used to set or return the attribute or attributes of a specified file or folder.

Syntax

FileObject.Attributes[=newattributes]

FolderObject.Attributes[=newattributes]

Parameter | Description
newattributes | Optional. Specifies the attribute value for the file or folder. Can take any of the following values or a combination of the following values: 0 = Normal file 1 = Read-only file 2 = Hidden file 4 = System file 16 = Folder or directory 32 = File has changed since last backup 1024 = Link or shortcut 2048 = Compressed file

Example for the File object

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.GetFile("c:\test.txt")

Response.Write("The attributes of the file are: ")

Response.Write(f.Attributes)

set f=nothing

set fs=nothing

%>

Output:

The attributes of the file are: 32

Example for the Folder object

<%

dim fs,fo

set fs=Server.CreateObject("Scripting.FileSystemObject")

set fo=fs.GetFolder("c:\test")

Response.Write("The attributes of the folder are: ")

Response.Write(fo.Attributes)

set fo=nothing

set fs=nothing

%>

Output:

The attributes of the folder are: 16


ASP AvailableSpace Property

The AvailableSpace property returns the amount of available space to a user on the specified drive or network share.

Note: The value returned is often equal to the value returned by the FreeSpace property.

Syntax

DriveObject.AvailableSpace

Example

<%

Dim fs,d

Set fs=Server.CreateObject("Scripting.FileSystemObject")

Set d=fs.GetDrive("c:")

Response.Write("Drive " & d)

Response.Write(" Available space in bytes: " & d.AvailableSpace)

set d=nothing

set fs=nothing

%>

Output:

Drive c: Available space in bytes: 884465152


ASP BinaryRead Method

The BinaryRead method is used to retrieve the data sent to the server from the client as part of a POST request. It will store the data in a safe array (an array that stores information about the number of dimensions and the bounds of its dimensions).

Note: A call to Request.Form after a call to BinaryRead, and vice-versa, will cause an error.

Syntax

Request.BinaryRead(count)

Parameter | Description
count | Required. Specifies how many bytes to read from the client

Examples

The following example uses the BinaryRead method to place the content of a request into a safe array:

<%

dim a,b

a=Request.TotalBytes

b=Request.BinaryRead(a)

%>


ASP BinaryWrite Method

The BinaryWrite method writes data directly to the output without any character conversion.

Tip: This method is used to write image data (BLOB) from a database to a browser.

Syntax

response.BinaryWrite data

Parameter | Description
data | Required. The binary information to be sent

Examples

Example 1

If you have an object that generates an array of bytes, you can use BinaryWrite to send the bytes to an application:

<%

Set objBinaryGen=Server.CreateObject("MyComponents.BinaryGenerator")

pic=objBinaryGen.MakePicture

response.BinaryWrite pic

%>


ASP Browser Capabilities

ASP Browser Capabilities Component

Examples

The Browser Capabilities Component

This example shows how to determine the type, capabilities and version number of each browser visiting your site.

ASP Browser Capabilities Component

The ASP Browser Capabilities component creates a BrowserType object that determines the type, capabilities and version number of each browser that visits your site.

When a browser connects to a server, an HTTP User Agent Header is also sent to the server. This header contains information about the browser (like browser type and version number). The BrowserType object then compares the information in the header with information in a file on the server called "Browscap.ini".

If there is a match between the browser type and version number sent in the header and the information in the "Browsercap.ini" file, you can use the BrowserType object to list the properties of the matching browser. If there is no match for the browser type and version number in the Browscap.ini file, it will set every property to "UNKNOWN".

Syntax

<%

Set MyBrow=Server.CreateObject("MSWC.BrowserType")

%>

The example below creates a BrowserType object in an ASP file, and displays a table showing some of the capabilities of the current browser:

<html>

<body>

<%

Set MyBrow=Server.CreateObject("MSWC.BrowserType")

%>

<table border="1" width="100%">

<tr>

<th>Client OS</th>

<th><%=MyBrow.platform%></th>

</tr><tr>

<td >Web Browser</td>

<td ><%=MyBrow.browser%></td>

</tr><tr>

<td>Browser version</td>

<td><%=MyBrow.version%></td>

</tr><tr>

<td>Frame support?</td>

<td><%=MyBrow.frames%></td>

</tr><tr>

<td>Table support?</td>

<td><%=MyBrow.tables%></td>

</tr><tr>

<td>Sound support?</td>

<td><%=MyBrow.backgroundsounds%></td>

</tr><tr>

<td>Cookies support?</td>

<td><%=MyBrow.cookies%></td>

</tr><tr>

<td>VBScript support?</td>

<td><%=MyBrow.vbscript%></td>

</tr><tr>

<td>JavaScript support?</td>

<td><%=MyBrow.javascript%></td>

</tr>

</table>

</body>

</html>

Output:

Client OS | WinNT
Web Browser | IE
Browser version | 5.0
Frame support? | True
Table support? | True
Sound support? | True
Cookies support? | True
VBScript support? | True
JavaScript support? | True

The Browscap.ini File

The "Browsercap.ini" file is used to declare properties and to set default values for browsers.

This section is not a tutorial on how to maintain "Browsercap.ini" files, it only shows you the basics; so you get an idea what a "Browsercap.ini" file is all about.

The "Browsercap.ini" file can contain the following:

[;comments]

[HTTPUserAgentHeader]

[parent=browserDefinition]

[property1=value1]

[propertyN=valueN]

[Default Browser Capability Settings]

[defaultProperty1=defaultValue1]

[defaultPropertyN=defaultValueN]

Parameter

Description

comments

Optional. Any line that starts with a semicolon are ignored by the BrowserType object

HTTPUserAgentHeader

Optional. Specifies the HTTP User Agent header to associate with the browser-property value statements specified in propertyN. Wildcard characters are allowed

browserDefinition

Optional. Specifies the HTTP User Agent header-string of a browser to use as the parent browser. The current browser's definition will inherit all of the property values declared in the parent browser's definition

propertyN

Optional. Specifies the browser properties. The following table lists some possible properties:

· ActiveXControls - Support ActiveX® controls?
· Backgroundsounds - Support background sounds?
· Cdf - Support Channel Definition Format for Webcasting?
· Tables - Support tables?
· Cookies - Support cookies?
· Frames - Support frames?
· Javaapplets - Support Java applets?
· Javascript - Supports JScript?
· Vbscript - Supports VBScript?
· Browser - Specifies the name of the browser
· Beta - Is the browser beta software?
· Platform - Specifies the platform that the browser runs on
· Version - Specifies the version number of the browser

valueN

Optional. Specifies the value of propertyN. Can be a string, an integer (prefix with #), or a Boolean value

defaultPropertyN

Optional. Specifies the name of the browser property to which to assign a default value if none of the defined HTTPUserAgentHeader values match the HTTP User Agent header sent by the browser

defaultValueN

Optional. Specifies the value of defaultPropertyN. Can be a string, an integer (prefix with #), or a Boolean value

A "Browsercap.ini" file might look something like this:

;IE 5.0

[IE 5.0]

browser=IE

Version=5.0

majorver=#5

minorver=#0

frames=TRUE

tables=TRUE

cookies=TRUE

backgroundsounds=TRUE

vbscript=TRUE

javascript=TRUE

javaapplets=TRUE

ActiveXControls=TRUE

beta=False

;DEFAULT BROWSER

[*]

browser=Default

frames=FALSE

tables=TRUE

cookies=FALSE

backgroundsounds=FALSE

vbscript=FALSE

javascript=FALSE


ASP Buffer Property

The Buffer property specifies whether to buffer the output or not. When the output is buffered, the server will hold back the response to the browser until all of the server scripts have been processed, or until the script calls the Flush or End method.

Note: If this property is set, it should be before the <html> tag in the .asp file

Syntax

response.Buffer[=flag]

Parameter

Description

flag

A boolean value that specifies whether to buffer the page output or not.

False indicates no buffering. The server will send the output as it is processed. False is default for IIS version 4.0 (and earlier). Default for IIS version 5.0 (and later) is true.

True indicates buffering. The server will not send output until all of the scripts on the page have been processed, or until the Flush or End method has been called.

Examples

Example 1

In this example, there will be no output sent to the browser before the loop is finished. If buffer was set to False, then it would write a line to the browser every time it went through the loop.

<%response.Buffer=true%>

<html>

<body>

<%

for i=1 to 100

response.write(i & "<br />")

next

%>

</body>

</html>

Example 2

<%response.Buffer=true%>

<html>

<body>

<p>I write some text, but I will control when

the text will be sent to the browser.</p>

<p>The text is not sent yet. I hold it back!</p>

<p>OK, let it go!</p>

<%response.Flush%>

</body>

</html>

Example 3

<%response.Buffer=true%>

<html>

<body>

<p>This is some text I want to send to the user.</p>

<p>No, I changed my mind. I want to clear the text.</p>

<%response.Clear%>

</body>

</html>


ASP BuildPath Method

The BuildPath method appends a name to an existing path.

Syntax

[newpath=]FileSystemObject.BuildPath(path,name)

Parameter | Description
path | Required. The path to append a name to
name | Required. The name to append to the path

Example

<%

dim fs,path

set fs=Server.CreateObject("Scripting.FileSystemObject")

path=fs.BuildPath("c:\mydocuments","test")

response.write(path)

set fs=nothing

%>

Output:

c:\mydocuments\test


ASP CacheControl Property

The CacheControl property sets whether a proxy server can cache the output generated by ASP or not. By default, a proxy server will not keep a cache copy.

Syntax

response.CacheControl[=control_header]

Parameter | Description
control_header | A cache control header that can be set to "Public" or "Private". Private is default and indicates that only private caches may cache this page. Proxy servers will not cache pages with this setting. Public indicates public caches. Proxy servers will cache pages with this setting.

Examples

<%response.CacheControl="Public"%>

or

<%response.CacheControl="Private"%>


ASP Charset Property

The Charset property appends the name of a character-set to the content-type header in the Response object. Default character set is ISO-LATIN-1.

Note: This property will accept any string, regardless of whether it is a valid character set or not, for the name.

Syntax

response.Charset(charsetname)

Parameter | Description
charsetname | A string that specifies a character set for the page

Examples

If an ASP page has no Charset property set, the content-type header would be:

content-type:text/html

If we included the Charset property:

<%response.Charset="ISO-8859-1"%>

the content-type header would be:

content-type:text/html; charset=ISO-8859-1


ASP Clear Method

The Clear method clears any buffered HTML output.

Note: This method does not clear the response headers, only the response body.

Note: If response.Buffer is false, this method will cause a run-time error.

Syntax

response.Clear

Examples

<%

response.Buffer=true

%>

<html>

<body>

<p>This is some text I want to send to the user.</p>

<p>No, I changed my mind. I want to clear the text.</p>

<%

response.Clear

%>

</body>

</html>

Output:

(nothing)


ASP Close Method

The Close method closes an open TextStream file.

Syntax

TextStreamObject.Close

Example

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.CreateTextFile("c:\test.txt",true)

f.WriteLine("Hello World!")

f.Close

set f=nothing

set fs=nothing

%>


ASP CodePage Property

The CodePage property specifies the character set that will be used when displaying dynamic content.

Example of some code pages:

· 1252 - American English and most European languages
· 932 - Japanese Kanji

Syntax

Session.CodePage(=Codepage)

Parameter | Description
codepage | Defines a code page (character set) for the system running the script engine

Examples

<%

Response.Write(Session.CodePage)

%>

Output:

1252


ASP Column Property

The Column property returns the column number of the current character position in an input stream.

Note: This property is 1 after a new line character is written (even before any other character is written).

Syntax

TextStreamObject.Column

Example

<%

dim fs,f,t,x,y

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.CreateTextFile("c:\test.txt")

f.write("Hello World!")

f.close

set t=fs.OpenTextFile("c:\test.txt",1,false)

do while t.AtEndOfStream<>true

x=t.Read(1)

y=t.Column-1

loop

t.close

Response.Write("The last character in the text file is: " & x)

Response.Write("<br /> at character position: " & y)

%>

Output:

The last character in the text file is: !

at character position: 12


ASP CompareMode Property

The CompareMode property sets or returns the comparison mode for comparing keys in a Dictionary object.

Syntax

DictionaryObject.CompareMode[=compare]

Parameter | Description
compare | Optional. Specifies the comparison mode. Can take one of the following values: 0 = vbBinaryCompare - binary comparison 1 = vbTextCompare - textual comparison 2 = vbDatabaseCompare - database comparison

Example

<%

dim d

set d=Server.CreateObject("Scripting.Dictionary")

d.CompareMode=1

d.Add "n","Norway"

d.Add "i","Italy"

'The Add method will fail on the line below!

d.Add "I","Ireland" 'The letter i already exists

%>


ASP Content Linking

ASP Content Linking Component

Examples

This example builds a table of contents.

The Content Linking Component 2

The example uses the Content Linking Component to navigate between the pages in a text file.

ASP Content Linking Component

The ASP Content Linking component is used to create a quick and easy navigation system!

The Content Linking component returns a Nextlink object that is used to hold a list of Web pages to be navigated.

Syntax

<%

Set nl=Server.CreateObject( "MSWC.NextLink" )

%>

First we create a text file - "links.txt". This file contains the pages to be navigated. The pages must be listed in the same order you want them to be displayed, and it also must contain a description for each file name (use the tab key to separate file name from description). Note: If you want to add a page to the list or change the order of the pages in the list; all you have to do is to modify the text file! The navigation will automatically be correct!

"links.txt":

asp_intro.asp ASP Intro

asp_syntax.asp ASP Syntax

asp_variables.asp ASP Variables

asp_procedures.asp ASP Procedures

On each of the pages listed above, put one line of code: <!-- #include file="nlcode.inc"-->. This line will include the code below on every page listed in "links.txt" and the navigation will work.

"nlcode.inc":

<%

'Use the Content Linking Component

'to navigate between the pages listed

'in links.txt

dim nl

Set nl=Server.CreateObject("MSWC.NextLink")

if (nl.GetListIndex("links.txt")>1) then

Response.Write("<a href='" & nl.GetPreviousURL("links.txt"))

Response.Write("'>Previous Page</a>")

end if

Response.Write("<a href='" & nl.GetNextURL("links.txt"))

Response.Write("'>Next Page</a>")

%>

The ASP Content Linking Component's methods are described below:

Methods

Method | Description | Example
GetListCount | Returns the number of items listed in the Content Linking List file | <% dim nl,c Set nl=Server.CreateObject("MSWC.NextLink") c=nl.GetListCount("links.txt") Response.Write("There are ") Response.Write(c) Response.Write(" items in the list") %> Output: There are 4 items in the list
GetListIndex | Returns the index number of the current item in the Content Linking List file. The index number of the first item is 1. 0 is returned if the current page is not in the Content Linking List file | <% dim nl,c Set nl=Server.CreateObject("MSWC.NextLink") c=nl.GetListIndex("links.txt") Response.Write("Item number ") Response.Write(c) %> Output: Item number 3
GetNextDescription | Returns the text description of the next item listed in the Content Linking List file. If the current page is not found in the list file it returns the text description of the last page on the list | <% dim nl,c Set nl=Server.CreateObject("MSWC.NextLink") c=nl.GetNextDescription("links.txt") Response.Write("Next ") Response.Write("description is: ") Response.Write(c) %> Next description is: ASP Variables
GetNextURL | Returns the URL of the next item listed in the Content Linking List file. If the current page is not found in the list file it returns the URL of the last page on the list | <% dim nl,c Set nl=Server.CreateObject("MSWC.NextLink") c=nl.GetNextURL("links.txt") Response.Write("Next ") Response.Write("URL is: ") Response.Write(c) %> Next URL is: asp_variables.asp
GetNthDescription | Returns the description of the Nth page listed in the Content Linking List file | <% dim nl,c Set nl=Server.CreateObject("MSWC.NextLink") c=nl.GetNthDescription("links.txt",3) Response.Write("Third ") Response.Write("description is: ") Response.Write(c) %> Third description is: ASP Variables
GetNthURL | Returns the URL of the Nth page listed in the Content Linking List file | <% dim nl,c Set nl=Server.CreateObject("MSWC.NextLink") c=nl.GetNthURL("links.txt",3) Response.Write("Third ") Response.Write("URL is: ") Response.Write(c) %> Third URL is: asp_variables.asp
GetPreviousDescription | Returns the text description of the previous item listed in the Content Linking List file. If the current page is not found in the list file it returns the text description of the first page on the list | <% dim nl,c Set nl=Server.CreateObject("MSWC.NextLink") c=nl.GetPreviousDescription("links.txt") Response.Write("Previous ") Response.Write("description is: ") Response.Write(c) %> Previous description is: ASP Variables
GetPreviousURL | Returns the URL of the previous item listed in the Content Linking List file. If the current page is not found in the list file it returns the URL of the first page on the list | <% dim nl,c Set nl=Server.CreateObject("MSWC.NextLink") c=nl.GetPreviousURL("links.txt") Response.Write("Previous ") Response.Write("URL is: ") Response.Write(c) %> Previous URL is: asp_variables.asp


ASP Content Rotator

ASP Content Rotator (ASP 3.0)

 Top Previous Next

Examples

The Content Rotator Component

This component displays a different HTML content string each time a user visits or refreshes the page.

ASP Content Rotator Component

The ASP Content Rotator component creates a ContentRotator object that displays a different HTML content string each time a user enters or refreshes a page. A text file, called the Content Schedule File, includes the information about the content strings.

The content strings can contain HTML tags so you can display any type of content that HTML can represent: text, images, colors, or hyperlinks.

Syntax

<%

Set cr=Server.CreateObject( "MSWC.ContentRotator" )

%>

The following example displays a different content each time a user views the Web page. Create a text file named "textads.txt" in your default Web Site folder, in a subfolder called text.

"textads.txt":

%% #1

This is a great day!!

%% #2

<h1>Smile</h1>

%% #3

<img src="smiley.gif">

%% #4

Here's a <a href="http://www.w3schools.com">link.</a>

Notice the #number at the beginning of each content string. This number is an optional parameter that indicates the relative weight of the HTML content string. In this example, the Content Rotator will display the first content string one-tenth of the time, the second string two-tenths of the time, the third string three-tenths of the time, and the fourth string four-tenths of the time.

Then, create an ASP file, and insert the following code:

<html>

<body>

<%

set cr=server.createobject("MSWC.ContentRotator")

response.write(cr.ChooseContent("text/textads.txt"))

%>

</body>

</html>

The ASP Content Rotator Component's methods are described below:

Methods

Method | Description | Example
ChooseContent | Gets and displays a content string | <% dim cr Set cr=Server.CreateObject("MSWC.ContentRotator") response.write(cr.ChooseContent("text/textads.txt")) %> Output:
GetAllContent | Retrieves and displays all of the content strings in the text file | <% dim cr Set cr=Server.CreateObject("MSWC.ContentRotator") response.write(cr.GetAllContent("text/textads.txt")) %> Output: This is a great day!! Smile Here's a link.


ASP Contents Collection

The Contents collection contains all the items appended to the application/session through a script command.

Tip: To remove items from the Contents collection, use the Remove and RemoveAll methods.

Syntax

Application.Contents(Key)

Session.Contents(Key)

Parameter | Description
key | Required. The name of the item to retrieve

Examples for the Application Object

Example 1

Notice that both name and objtest would be appended to the Contents collection:

<%

Application("name")="W3Schools"

Set Application("objtest")=Server.CreateObject("ADODB.Connection")

%>

Example 2

To loop through the Contents collection:

<%

for each x in Application.Contents

Response.Write(x & "=" & Application.Contents(x) & "<br />")

next

%>

or:

<%

For i=1 to Application.Contents.Count

Response.Write(i & "=" & Application.Contents(i) & "<br />")

Next

%>

Example 3

<%

Application("date")="2001/05/05"

Application("author")="W3Schools"

for each x in Application.Contents

Response.Write(x & "=" & Application.Contents(x) & "<br />")

next

%>

Output:

date=2001/05/05

author=W3Schools

Examples for the Session Object

Example 1

Notice that both name and objtest would be appended to the Contents collection:

<%

Session("name")="Hege"

Set Session("objtest")=Server.CreateObject("ADODB.Connection")

%>

Example 2

To loop through the Contents collection:

<%

for each x in Session.Contents

Response.Write(x & "=" & Session.Contents(x) & "<br />")

next

%>

or:

<%

For i=1 to Session.Contents.Count

Response.Write(i & "=" & Session.Contents(i) & "<br />")

Next

%>

Example 3

<%

Session("name")="Hege"

Session("date")="2001/05/05"

for each x in Session.Contents

Response.Write(x & "=" & Session.Contents(x) & "<br />")

next

%>

Output:

name=Hege

date=2001/05/05


ASP Contents.Remove Method

The Contents.Remove method deletes an item from the Contents collection.

Syntax

Application.Contents.Remove(name|index)

Session.Contents.Remove(name|index)

Parameter | Description
name | The name of the item to remove
index | The index of the item to remove

Examples for the Application Object

Example 1

<%

Application("test1")=("First test")

Application("test2")=("Second test")

Application("test3")=("Third test")

Application.Contents.Remove("test2")

for each x in Application.Contents

Response.Write(x & "=" & Application.Contents(x) & "<br />")

next

%>

Output:

test1=First test

test3=Third test

Example 2

<%

Application("test1")=("First test")

Application("test2")=("Second test")

Application("test3")=("Third test")

Application.Contents.Remove(2)

for each x in Application.Contents

Response.Write(x & "=" & Application.Contents(x) & "<br />")

next

%>

Output:

test1=First test

test3=Third test

Examples for the Session Object

Example 1

<%

Session("test1")=("First test")

Session("test2")=("Second test")

Session("test3")=("Third test")

Session.Contents.Remove("test2")

for each x in Session.Contents

Response.Write(x & "=" & Session.Contents(x) & "<br />")

next

%>

Output:

test1=First test

test3=Third test

Example 2

<%

Session("test1")=("First test")

Session("test2")=("Second test")

Session("test3")=("Third test")

Session.Contents.Remove(2)

for each x in Session.Contents

Response.Write(x & "=" & Session.Contents(x) & "<br />")

next

%>

Output:

test1=First test

test3=Third test


ASP Contents.RemoveAll Method

The Contents.RemoveAll method deletes all items from the Contents collection.

Syntax

Application.Contents.RemoveAll()

Session.Contents.RemoveAll()

Example for the Application Object

<%

Application.Contents.RemoveAll()

%>

Example for the Session Object

<%

Session.Contents.RemoveAll()

%>


ASP ContentType Property

The ContentType property sets the HTTP content type for the response object.

Syntax

response.ContentType[=contenttype]

Parameter | Description
contenttype | A string describing the content type. For a full list of content types, see your browser documentation or the HTTP specification.

Examples

If an ASP page has no ContentType property set, the default content-type header would be:

content-type:text/html

Some other common ContentType values:

<%response.ContentType="text/HTML"%>

<%response.ContentType="image/GIF"%>

<%response.ContentType="image/JPEG"%>

<%response.ContentType="text/plain"%>

<%response.ContentType="image/JPEG"%>

This example will open an Excel spreadsheet in a browser (if the user has Excel installed):

<%response.ContentType="application/vnd.ms-excel"%>

<html>

<body>

<table>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>5</td>

<td>6</td>

<td>7</td>

<td>8</td>

</tr>

</table>

</body>

</html>


ASP Cookies

A cookie is often used to identify a user.

Examples

How to create a Welcome cookie.

What is a Cookie?

A cookie is often used to identify a user. A cookie is a small file that the server embeds on the user's computer. Each time the same computer requests a page with a browser, it will send the cookie too. With ASP, you can both create and retrieve cookie values.

How to Create a Cookie?

The "Response.Cookies" command is used to create cookies.

Note: The Response.Cookies command must appear BEFORE the <html> tag.

In the example below, we will create a cookie named "firstname" and assign the value "Alex" to it:

<%

Response.Cookies("firstname")="Alex"

%>

It is also possible to assign properties to a cookie, like setting a date when the cookie should expire:

<%

Response.Cookies("firstname")="Alex"

Response.Cookies("firstname").Expires=#May 10,2002#

%>

How to Retrieve a Cookie Value?

The "Request.Cookies" command is used to retrieve a cookie value.

In the example below, we retrieve the value of the cookie named "firstname" and display it on a page:

<%

fname=Request.Cookies("firstname")

response.write("Firstname=" & fname)

%>

Output:

Firstname=Alex

A Cookie with Keys

If a cookie contains a collection of multiple values, we say that the cookie has Keys.

In the example below, we will create a cookie collection named "user". The "user" cookie has Keys that contains information about a user:

<%

Response.Cookies("user")("firstname")="John"

Response.Cookies("user")("lastname")="Smith"

Response.Cookies("user")("country")="Norway"

Response.Cookies("user")("age")="25"

%>

Read all Cookies

Look at the following code:

<%

Response.Cookies("firstname")="Alex"

Response.Cookies("user")("firstname")="John"

Response.Cookies("user")("lastname")="Smith"

Response.Cookies("user")("country")="Norway"

Response.Cookies("user")("age")="25"

%>

Assume that your server has sent all the cookies above to a user.

Now we want to read all the cookies sent to a user. The example below shows how to do it (note that the code below checks if a cookie has Keys with the HasKeys property):

<html>

<body>

<%

dim x,y

for each x in Request.Cookies

response.write("<p>")

if Request.Cookies(x).HasKeys then

  for each y in Request.Cookies(x)

    response.write(x & ":" & y & "=" & Request.Cookies(x)(y))

    response.write("<br />")

  next

else

  Response.Write(x & "=" & Request.Cookies(x) & "<br />")

end if

response.write "</p>"

next

%>

</body>

</html>

Output:

firstname=Alex

user:firstname=John

user:lastname=Smith

user:country=Norway

user:age=25

What if a Browser Does NOT Support Cookies?

If your application deals with browsers that do not support cookies, you will have to use other methods to pass information from one page to another in your application. There are two ways of doing this:

1. Add parameters to a URL

You can add parameters to a URL:

<a href="welcome.asp?fname=John&lname=Smith">

Go to Welcome Page</a>

And retrieve the values in the "welcome.asp" file like this:

<%

fname=Request.querystring("fname")

lname=Request.querystring("lname")

response.write("<p>Hello " & fname & " " & lname & "!</p>")

response.write("<p>Welcome to my Web site!</p>")

%>

2. Use a form

You can use a form. The form passes the user input to "welcome.asp" when the user clicks on the Submit button:

<form method="post" action="welcome.asp">

First Name:  <input type="text" name="fname" value="">

Last Name: <input type="text" name="lname" value="">

<input type="submit" value="Submit">

</form>

Retrieve the values in the "welcome.asp" file like this:

<%

fname=Request.form("fname")

lname=Request.form("lname")

response.write("<p>Hello " & fname & " " & lname & "!</p>")

response.write("<p>Welcome to my Web site!</p>")

%>


ASP Cookies Collection

The Cookies collection is used to set or get cookie values. If the cookie does not exist, it will be created, and take the value that is specified.

Note: The Response.Cookies command must appear before the <html> tag.

Syntax

Response.Cookies(name)[(key)|.attribute]=value

variablename=Request.Cookies(name)[(key)|.attribute]

Parameter

Description

name

Required. The name of the cookie

value

Required for the Response.Cookies command. The value of the cookie

attribute

Optional. Specifies information about the cookie. Can be one of the following parameters:

· Domain - Write-only. The cookie is sent only to requests to this domain
· Expires - Write-only. The date when the cookie expires. If no date is specified, the cookie will expire when the session ends
· HasKeys - Read-only. Specifies whether the cookie has keys (This is the only attribute that can be used with the Request.Cookies command)
· Path - Write-only. If set, the cookie is sent only to requests to this path. If not set, the application path is used
· Secure - Write-only. Indicates if the cookie is secure

key

Optional. Specifies the key to where the value is assigned

Examples

The "Response.Cookies" command is used to create a cookie or to set a cookie value:

<%

Response.Cookies("firstname")="Alex"

%>

In the code above, we have created a cookie named "firstname" and assigned the value "Alex" to it.

It is also possible to assign some attributes to a cookie, like setting a date when a cookie should expire:

<%

Response.Cookies("firstname")="Alex"

Response.Cookies("firstname").Expires=#May 10,2002#

%>

Now the cookie named "firstname" has the value of "Alex", and it will expire from the user's computer at May 10, 2002.

The "Request.Cookies" command is used to get a cookie value.

In the example below, we retrieve the value of the cookie "firstname" and display it on a page:

<%

fname=Request.Cookies("firstname")

response.write("Firstname=" & fname)

%>

Output:

Firstname=Alex

A cookie can also contain a collection of multiple values. We say that the cookie has Keys.

In the example below, we will create a cookie-collection named "user". The "user" cookie has Keys that contains information about a user:

<%

Response.Cookies("user")("firstname")="John"

Response.Cookies("user")("lastname")="Smith"

Response.Cookies("user")("country")="Norway"

Response.Cookies("user")("age")="25"

%>

The code below reads all the cookies your server has sent to a user. Note that the code checks if a cookie has Keys with the HasKeys property:

<html>

<body>

<%

dim x,y

for each x in Request.Cookies

response.write("<p>")

if Request.Cookies(x).HasKeys then

  for each y in Request.Cookies(x)

    response.write(x & ":" & y & "=" & Request.Cookies(x)(y))

    response.write("<br /")

  next

else

  Response.Write(x & "=" & Request.Cookies(x) & "<br />")

end if

response.write "</p>"

next

%>

</body>

</html>

%>

Output:

firstname=Alex

user:firstname=John

user:lastname=Smith

user: country=Norway

user: age=25


ASP Copy Method

The Copy method copies the specified file or folder from one location to another.

Syntax

FileObject.Copy(destination[,overwrite])

FolderObject.Copy(destination[,overwrite])

Parameter | Description
destination | Required. Where to copy the file or folder. Wildcard characters are not allowed
overwrite | Optional. A Boolean value indicating whether an existing file or folder can be overwritten. True indicates that the file/folder can be overwritten, false indicates that the file/folder cannot be overwritten. Default is true.

Example for the File object

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.GetFile("c:\test.txt")

f.Copy("c:\new_test.txt",false)

set f=nothing

set fs=nothing

%>

Example for the Folder object

<%

dim fs,fo

set fs=Server.CreateObject("Scripting.FileSystemObject")

set fo=fs.GetFolder("c:\test")

fo.Copy("c:\new_test",false)

set fo=nothing

set fs=nothing

%>


ASP CopyFile Method

The CopyFile method copies one or more files from one location to another.

Syntax

FileSystemObject.CopyFile source,destination[,overwrite]

Parameter | Description
source | Required. The file or files to copy (wildcards can be used}
destination | Required. Where to copy the file or files (wildcards cannot be used}
overwrite | Optional. A Boolean value that specifies whether an existing file can be overwritten. True allows existing files to be overwritten and False prevents existing files from being overwritten. Default is True

Example

<%

dim fs

set fs=Server.CreateObject("Scripting.FileSystemObject")

fs.CopyFile "c:\mydocuments\web\*.htm","c:\webpages\"

set fs=nothing

%>


ASP CopyFolder Method

The CopyFolder method copies one or more folders from one location to another.

Syntax

FileSystemObject.CopyFolder source,destination[,overwrite]

Parameter | Description
source | Required. The folder or folders to copy (wildcards can be used)
destination | Required. Where to copy the folder or folders (wildcards cannot be used)
overwrite | Optional. A Boolean value that indicates whether an existing folder can be overwritten. True allows existing folders to be overwritten and False prevents existing folders from being overwritten. Default is True

Examples

<%

'copy all the folders in c:\mydocuments\web

'to the folder c:\webpages

dim fs

set fs=Server.CreateObject("Scripting.FileSystemObject")

fs.CopyFolder "c:\mydocuments\web\*","c:\webpages\"

set fs=nothing

%>

<%

'copy only the folder test from c:\mydocuments\web

'to the folder c:\webpages

dim fs

set fs=Server.CreateObject("Scripting.FileSystemObject")

fs.CopyFolder "c:\mydocuments\web\test","c:\webpages\"

set fs=nothing

%>


ASP Count Property

The Count property returns the number of key/item pairs in the Dictionary object.

Syntax

DictionaryObject.Count

Example

<%

dim d

set d=Server.CreateObject("Scripting.Dictionary")

d.Add "n","Norway"

d.Add "i","Italy"

d.Add "s","Sweden"

Response.Write("The number of key/item pairs: " & d.Count)

set d=nothing

%>

Output:

The number of key/item pairs: 3


ASP CreateFolder Method

The CreateFolder method creates a new folder.

Syntax

FileSystemObject.CreateFolder(name)

Parameter | Description
name | Required. The name of the folder to create

Example

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.CreateFolder("c:\asp")

set f=nothing

set fs=nothing

%>


ASP CreateObject Method

The CreateObject method creates an instance of an object.

Note: Objects created with this method have page scope. They are destroyed when the server are finished processing the current ASP page. To create an object with session or application scope, you can either use the <object> tag in the Global.asa file, or store the object in a session or application variable.

Syntax

Server.CreateObject(progID)

Part | Description
progID | Required. The type of object to create

Example

Example 1

This example creates an instance of the server component MSWC.AdRotator:

<%

Set adrot=Server.CreateObject("MSWC.AdRotator")

%>

Example 2

An object stored in a session variable is destroyed when the session ends. However, you can also destroy the object by setting the variable to Nothing or to a new value:

<%

Session("ad")=Nothing

%>

or

<%

Session("ad")="a new value"

%>

Example 3

You cannot create an instance of an object with the same name as a built-in object:

<%

Set Application=Server.CreateObject("Application")

%>


ASP CreateTextFile Method

The CreateTextFile method creates a new text file in the current folder and returns a TextStream object that can be used to read from, or write to the file.

Syntax

FileSystemObject.CreateTextFile(filename[,overwrite[,unicode]])

FolderObject.CreateTextFile(filename[,overwrite[,unicode]])

Parameter | Description
filename | Required. The name of the file to create
overwrite | Optional. A Boolean value that indicates whether an existing file can be overwritten. True indicates that the file can be overwritten and False indicates that the file can not be overwritten. Default is True
unicode | Optional. A Boolean value that indicates whether the file is created as a Unicode or an ASCII file. True indicates that the file is created as a Unicode file, False indicates that the file is created as an ASCII file. Default is False

Example for the FileSystemObject object

<%

dim fs,tfile

set fs=Server.CreateObject("Scripting.FileSystemObject")

set tfile=fs.CreateTextFile("c:\somefile.txt")

tfile.WriteLine("Hello World!")

tfile.close

set tfile=nothing

set fs=nothing

%>

Example for the Folder object

<%

dim fs,fo,tfile

Set fs=Server.CreateObject("Scripting.FileSystemObject")

Set fo=fs.GetFolder("c:\test")

Set tfile=fo.CreateTextFile("test.txt",false)

tfile.WriteLine("Hello World!")

tfile.Close

set tfile=nothing

set fo=nothing

set fs=nothing

%>


ASP DateCreated Property

The DateCreated property is used to return the date and time when a specified file or folder was created.

Syntax

FileObject.DateCreated

FolderObject.DateCreated

Example for the File object

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.GetFile("c:\test.txt")

Response.Write("File created: ")

Response.Write(f.DateCreated)

set f=nothing

set fs=nothing

%>

Output:

File created: 9/19/2001 10:01:19 AM

Example for the Folder object

<%

dim fs,fo

set fs=Server.CreateObject("Scripting.FileSystemObject")

set fo=fs.GetFolder("c:\test")

Response.Write("Folder created: ")

Response.Write(fo.DateCreated)

set fo=nothing

set fs=nothing

%>

Output:

Folder created: 9/19/2001 10:01:19 AM


ASP DateLastAccessed Property

The DateLastAccessed property is used to return the date and time when a specified file or folder was last accessed.

Syntax

FileObject.DateLastAccessed

FolderObject.DateLastAccessed

Example for the File object

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.GetFile("c:\test.txt")

Response.Write("File last accessed on: ")

Response.Write(f.DateLastAccessed)

set f=nothing

set fs=nothing

%>

Output:

File last accessed on: 10/29/2001 10:21:23 AM

Example for the Folder object

<%

dim fs,fo

set fs=Server.CreateObject("Scripting.FileSystemObject")

set fo=fs.GetFolder("c:\test")

Response.Write("Folder last accessed on: ")

Response.Write(fo.DateLastAccessed)

set fo=nothing

set fs=nothing

%>

Output:

Folder last accessed on: 9/19/2001 10:01:19 AM


ASP DateLastModified Property

The DateLastModified property is used to return the date and time when a specified file or folder was last modified.

Syntax

FileObject.DateLastModified

FolderObject.DateLastModified

Example for the File object

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.GetFile("c:\test.txt")

Response.Write("File last modified on: ")

Response.Write(f.DateLastModified)

set f=nothing

set fs=nothing

%>

Output:

File last modified on: 1/10/2001 10:01:19 AM

Example for the Folder object

<%

dim fs,fo

set fs=Server.CreateObject("Scripting.FileSystemObject")

set fo=fs.GetFolder("c:\test")

Response.Write("Folder last modified on: ")

Response.Write(fo.DateLastModified)

set fo=nothing

set fs=nothing

%>

Output:

Folder last modified on: 9/19/2001 10:01:19 AM


ASP Delete Method

The Delete method deletes a specified file or folder.

Syntax

FileObject.Delete[(force)]

FolderObject.Delete[(force)]

Parameter | Description
force | Optional. A Boolean value that indicates whether a read-only file or folder are to be deleted. True indicates that a read-only file/folder will be deleted and false indicates that it will not be deleted. Default is false.

Example for the File object

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.GetFile("c:\test.txt")

f.Delete

set f=nothing

set fs=nothing

%>

Example for the Folder object

<%

dim fs,fo

set fs=Server.CreateObject("Scripting.FileSystemObject")

set fo=fs.GetFolder("c:\test")

fo.Delete

set fo=nothing

set fs=nothing

%>


ASP DeleteFile Method

The DeleteFile method deletes one or more specified files.

Note: An error will occur if you try to delete a file that doesn't exist.

Syntax

FileSystemObject.DeleteFile(filename[,force])

Parameter | Description
filename | Required. The name of the file or files to delete (Wildcards are allowed)
force | Optional. A Boolean value that indicates whether read-only files will be deleted. True indicates that the read-only files will be deleted, False indicates that they will not be deleted. Default is False

Example

<%

dim fs

Set fs=Server.CreateObject("Scripting.FileSystemObject")

fs.CreateTextFile("c:\test.txt",True)

if fs.FileExists("c:\test.txt") then

fs.DeleteFile("c:\test.txt")

end if

set fs=nothing

%>


ASP DeleteFolder Method

The DeleteFolder method deletes one or more specified folders.

Note: An error will occur if you try to delete a folder that does not exist.

Syntax

FileSystemObject.DeleteFolder(foldername[,force])

Parameter | Description
foldername | Required. The name of the folder or folders to delete (Wildcards are allowed)
force | Optional. A Boolean value that indicates whether read-only folders will be deleted. True indicates that read-only folders will be deleted, False indicates that they will not be deleted. Default is False

Example

<%

dim fs

set fs=Server.CreateObject("Scripting.FileSystemObject")

if fs.FolderExists("c:\temp") then

fs.DeleteFolder("c:\temp")

end if

set fs=nothing

%>


ASP Dictionary Object

The Dictionary object is used to store information in name/value pairs (referred to as key and item)

Examples

Does a specified key exist?

This example demonstrates how to first create a Dictionary object, and then use the Exists method to check if a specified key exists.

Return an array of all items

This example demonstrates how to use the Items method to return an array of all the items.

This example demonstrates how to use the Keys method to return an array of all the keys.

Return the value of an item

This example demonstrates how to use the Item property to return the value of an item.

Set a key

This example demonstrates how to use the Key property to set a key in a Dictionary object.

This example demonstrates how to use the Count property to return the number of key/item pairs.

The Dictionary Object

The Dictionary object is used to store information in name/value pairs (referred to as key and item). The Dictionary object might seem similar to Arrays, however, the Dictionary object is a more desirable solution to manipulate related data.

Comparing Dictionaries and Arrays:

· Keys are used to identify the items in a Dictionary object
· You do not have to call ReDim to change the size of the Dictionary object
· When deleting an item from a Dictionary, the remaining items will automatically shift up
· Dictionaries cannot be multidimensional, Arrays can
· Dictionaries have more built-in functions than Arrays
· Dictionaries work better than arrays on accessing random elements frequently
· Dictionaries work better than arrays on locating items by their content

The following example creates a Dictionary object, adds some key/item pairs to it, and retrieves the item value for the key gr:

<%

Dim d

Set d=Server.CreateObject("Scripting.Dictionary")

d.Add "re","Red"

d.Add "gr","Green"

d.Add "bl","Blue"

d.Add "pi","Pink"

Response.Write("The value of key gr is: " & d.Item("gr"))

%>

Output:

The value of key gr is: Green

The Dictionary object's properties and methods are described below:

Properties

Property | Description
CompareMode | Sets or returns the comparison mode for comparing keys in a Dictionary object
Count | Returns the number of key/item pairs in a Dictionary object
Item | Sets or returns the value of an item in a Dictionary object
Key | Sets a new key value for an existing key value in a Dictionary object

Methods

Method | Description
Add | Adds a new key/item pair to a Dictionary object
Exists | Returns a Boolean value that indicates whether a specified key exists in the Dictionary object
Items | Returns an array of all the items in a Dictionary object
Keys | Returns an array of all the keys in a Dictionary object
Remove | Removes one specified key/item pair from the Dictionary object
RemoveAll | Removes all the key/item pairs in the Dictionary object


ASP Drive Object

The Drive object is used to return information about a local disk drive or a network share.

Examples

Get the available space of a specified drive

This example demonstrates how to first create a FileSystemObject object, and then use the AvailableSpace property to get the available space of a specified drive.

Get the free space of a specified drive

This example demonstrates how to use the FreeSpace property to get the free space of a specified drive.

Get the total size of a specified drive

This example demonstrates how to use the TotalSize property to get the total size of a specified drive.

Get the drive letter of a specified drive

This example demonstrates how to use the DriveLetter property to get the drive letter of a specified drive.

Get the drive type of a specified drive

This example demonstrates how to use the DriveType property to get the drive type of a specified drive.

Get the file system of a

This example demonstrates how to use the FileSystem property to get the file system of a specified drive.

Is the drive ready?

This example demonstrates how to use the IsReady property to check whether a specified drive is ready.

Get the path of a specified drive

This example demonstrates how to use the Path property to get the path of a specified drive.

Get the root folder of a specified drive

This example demonstrates how to use the RootFolder property to get the root folder of a specified drive.

Get the serialnumber of a

This example demonstrates how to use the Serialnumber property to get the serialnumber of a specified drive.

The Drive Object

The Drive object is used to return information about a local disk drive or a network share. The Drive object can return information about a drive's type of file system, free space, serial number, volume name, and more.

Note: You cannot return information about a drive's content with the Drive object. For this purpose you will have to use the Folder object.

To work with the properties of the Drive object, you will have to create an instance of the Drive object through the FileSystemObject object. First; create a FileSystemObject object and then instantiate the Drive object through the GetDrive method or the Drives property of the FileSystemObject object.

The following example uses the GetDrive method of the FileSystemObject object to instantiate the Drive object and the TotalSize property to return the total size in bytes of the specified drive (c:):

<%

Dim fs,d

Set fs=Server.CreateObject("Scripting.FileSystemObject")

Set d=fs.GetDrive("c:")

Response.Write("Drive " & d & ":")

Response.Write("Total size in bytes: " & d.TotalSize)

set d=nothing

set fs=nothing

%>

Output:

Drive c: Total size in bytes: 4293563392

The Drive object's properties are described below:

Properties

Property | Description
AvailableSpace | Returns the amount of available space to a user on a specified drive or network share
 | Returns one uppercase letter that identifies the local drive or a network share
DriveType | Returns the type of a specified drive
FileSystem | Returns the file system in use for a specified drive
FreeSpace | Returns the amount of free space to a user on a specified drive or network share
IsReady | Returns true if the specified drive is ready and false if not
 | Returns an uppercase letter followed by a colon that indicates the path name for a specified drive
RootFolder | Returns a Folder object that represents the root folder of a specified drive
SerialNumber | Returns the serial number of a specified drive
ShareName | Returns the network share name for a specified drive
TotalSize | Returns the total size of a specified drive or network share
VolumeName | Sets or returns the volume name of a specified drive


ASP Drive Property

The Drive property is used to return the drive letter of the drive where the specified file or folder resides.

Syntax

FileObject.Drive

FolderObject.Drive

Example for the File object

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.GetFile("c:\test.txt")

Response.Write("File resides on drive: ")

Response.Write(f.Drive)

set f=nothing

set fs=nothing

%>

Output:

File resides on drive: c:

Example for the Folder object

<%

dim fs,fo

set fs=Server.CreateObject("Scripting.FileSystemObject")

set fo=fs.GetFolder("c:\test")

Response.Write("Folder resides on drive: ")

Response.Write(fo.Drive)

set fo=nothing

set fs=nothing

%>

Output:

Folder resides on drive: c:


ASP DriveExists Method

The DriveExists method returns a Boolean value that indicates whether a specified drive exists. It returns True if the drive exists and False if not.

Syntax

FileSystemObject.DriveExists(drive)

Parameter | Description
drive | Required. A drive letter or a complete path specification

Example

<%

dim fs

set fs=Server.CreateObject("Scripting.FileSystemObject")

if fs.DriveExists("c:")=true then

response.write("Drive c: exists!")

else

response.write("Drive c: does not exist.")

end If

set fs=nothing

%>


ASP DriveLetter Property

The DriveLetter property returns one uppercase letter that identifies the local drive or a network share.

Syntax

DriveObject.DriveLetter

Example

<%

dim fs,d

set fs=Server.CreateObject("Scripting.FileSystemObject")

set d=fs.GetDrive("c:")

Response.Write("The drive letter is: " & d.driveletter)

set d=nothing

set fs=nothing

%>

Output:

The drive letter is: C


ASP Drives Property

The Drives property returns a collection of all Drive objects on the computer.

Syntax

[drivecoll=]FileSystemObject.Drives


ASP DriveType Property

The DriveType property returns a value that indicates the type of a specified drive.

This property can return one of the following values:

· 0 = unknown
· 1 = removable
· 2 = fixed
· 3 = network
· 4 = CD-ROM
· 5 = RAM disk

Syntax

DriveObject.DriveType

Example

<%

dim fs,d

set fs=Server.CreateObject("Scripting.FileSystemObject")

set d=fs.GetDrive("a:")

Response.Write("The drive type is: " & d.DriveType)

set d=nothing

set fs=nothing

%>

Output:

The drive type is: 1


ASP End Method

The End method stops processing a script, and returns the current result.

Note: This method will flush the buffer if Response.Buffer has been set to true. If you do not want to return any output to the user, you should call Response.Clear first.

Syntax

Response.End

Examples

<html>

<body>

<p>I am writing some text. This text will never be

<%

Response.End

%>

finished! It's too late to write more!</p>

</body>

</html>

Output:

I am writing some text. This text will never be


ASP Examples

Basic

Write text using ASP

Format text with HTML tags

Variables

Create a variable

Looping through HTML headers

Time-based greeting using VBScript

Time-based greeting using JavaScript

Date/Time Functions (VBScript)

Date and time

Get the name of a month

Get todays' day and month

Countdown to year 3000

Calculate the day which is n days from today

Some Other Functions (VBScript)

Trim a string

How to round a number?

Replace some characters in a string

Return a specified number of characters from a string

Procedures

Call a JavaScript procedure and a VBScript procedure using VBScript in ASP

Forms

Interact with a user in a form that uses the " get" method

Interact with a user in a form that uses the " post" method

Interact with a user in a form with radio buttons

Cookies

Create a welcome cookie

Response Object

Format text with HTML tags

Redirect the user to another URL

Random links

Clear the buffer

End a script in the middle of processing

Set how many minutes a page will be cached in a browser before it expires

Set a date/time when a page cached in a browser will expire

Check if the user is still connected

Set the type of content

Set the name of character set

Request Object

A QueryString collection in its simplest use

More information from a form

A form collection in its simplest use

How to use information from forms

More information from a form

A form with radio buttons

A form with checkboxes

How to find the visitors' browser type, IP address and more

List all servervariables you can ask for

Total number of bytes the user sent

Session Object

Return session id number for a user

Get a session's timeout

Server Object

When was a file last modified?

Home made hit counter

FileSystem Object

Does a specified file exist?

Does a specified folder exist?

Does a specified drive exist?

Get the name of the parent folder of a specified path

Get the file extension

Get the base name of a file or folder

TextStream Object

Read textfile

Read only a part of a textfile

Read one line of a textfile

Read all lines from a textfile

Skip a part of a textfile

Skip a line of a textfile

Return current line-number in a text file

Get column number of the current character in a text file

Drive Object

Get the available space of a specified drive

Get the free space of a specified drive

Get the total size of a specified drive

Get the drive type of a specified drive

Get the file system of a specified drive

Is the drive ready?

Get the root folder of a specified drive

Get the serialnumber of a specified drive

File Object

When was the file created?

When was the file last modified?

When was the file last accessed?

Dictionary Object

Does a specified key exist?

Return an array of all items

Return an array of all keys

Return the value of an item

Set a key

Return the number of key/item pairs

AdRotator

Display a different image each time a user visits a page

Display a different image each time a user visits a page + the images are links

Browser Capabilities

Find the type, capabilities, and version of each browser that visits your site

ContentRotator

Display a different content each time a user visits a page (ASP 3.0)

Content Linking

Build a table of contents

Navigate between pages in a text file


ASP Execute Method

The Execute method executes an ASP file from inside another ASP file. After executing the called .asp file, the control is returned to the original .asp file.

Syntax

Server.Execute(path)

Parameter | Description
path | Required. The location of the ASP file to execute

Example

File1.asp:

<%

response.write("I am in File 1!<br />")

Server.Execute("file2.asp")

response.write("I am back in File 1!")

%>

File2.asp:

<%

response.write("I am in File 2!<br />")

%>

Output:

I am in File 1!

I am in File 2!

I am back in File 1!

Also look at the Server.Transfer method to see the difference between the Server.Execute and Server.Transfer methods.


ASP Exists Method

The Exists method returns a Boolean value that indicates whether a specified key exists in the Dictionary object. It returns true if the key exists, and false if not.

Syntax

DictionaryObject.Exists(key)

Parameter | Description
key | Required. The key value to search for

Example

<%

dim d

set d=Server.CreateObject("Scripting.Dictionary")

d.Add "n","Norway"

d.Add "i","Italy"

d.Add "s","Sweden"

if d.Exists("n")=true then

Response.Write("Key exists!")

else

Response.Write("Key does not exist!")

end if

set d=nothing

%>

Output:

Key exists!


ASP Expires Property

The Expires property sets how long (in minutes) a page will be cached on a browser before it expires. If a user returns to the same page before it expires, the cached version is displayed.

Syntax

response.Expires[=number]

Parameter | Description
number | The time in minutes before the page expires

Examples

Example 1

The following code indicates that the page will never be cached:

<%response.Expires=-1%>

Example 2

The following code indicates that the page will expire after 1440 minutes (24 hours):

<%response.Expires=1440%>


ASP ExpiresAbsolute Property

The ExpiresAbsolute property sets a date and time when a cached page on a browser will expire. If a user returns to the same page before this date/time, the cached version is displayed.

Syntax

response.ExpiresAbsolute[=[date][time]]

Parameter | Description
date | Specifies the date on which the page will expire. If this parameter is not specified, the page will expire at the specified time on the day that the script is run.
time | Specifies the time at which the page will expire. If this parameter is not specified, the page will expire at midnight of the specified day.

Examples

The following code indicates that the page will expire at 4:00 PM on October 11, 2003:

<%response.ExpiresAbsolute=#October 11,2003 16:00:00#%>


ASP File Object

The File object is used to return information about a specified file.

Examples

When was the file created?

This example demonstrates how to first create a FileSystemObject object, and then use the DateCreated property of the File object to get the date and time a specified file was created.

modified?

This example demonstrates how to use the DateLastModified property to get the date and time a specified file was last modified.

When was the file last

This example demonstrates how to use the DateLastAccessed property to get the date and time a specified file was last accessed.

specified file

This example demonstrates how to use the Attributes property to return the attributes of a specified file.

The File Object

The File object is used to return information about a specified file.

To work with the properties and methods of the File object, you will have to create an instance of the File object through the FileSystemObject object. First; create a FileSystemObject object and then instantiate the File object through the GetFile method of the FileSystemObject object or through the Files property of the Folder object.

The following code uses the GetFile method of the FileSystemObject object to instantiate the File object and the DateCreated property to return the date when the specified file was created:

<%

Dim fs,f

Set fs=Server.CreateObject("Scripting.FileSystemObject")

Set f=fs.GetFile("c:\test.txt")

Response.Write("File created: " & f.DateCreated)

set f=nothing

set fs=nothing

%>

Output:

File created: 9/19/2001 10:01:19 AM

The File object's properties and methods are described below:

Properties

Property | Description
 | Sets or returns the attributes of a specified file
DateCreated | Returns the date and time when a specified file was created
 | Returns the date and time when a specified file was last accessed
DateLastModified | Returns the date and time when a specified file was last modified
Drive | Returns the drive letter of the drive where a specified file or folder resides
Name | Sets or returns the name of a specified file
ParentFolder | Returns the folder object for the parent of the specified file
 | Returns the path for a specified file
ShortName | Returns the short name of a specified file (the 8.3 naming convention)
 | Returns the short path of a specified file (the 8.3 naming convention)
Size | Returns the size, in bytes, of a specified file
Type | Returns the type of a specified file

Methods

Method | Description
Copy | Copies a specified file from one location to another
Delete | Deletes a specified file
Move | Moves a specified file from one location to another
OpenAsTextStream | Opens a specified file and returns a TextStream object to access the file


ASP FileExists Method

The FileExists method returns a Boolean value that indicates whether a specified file exists. It returns True if the file exists and False if not.

Syntax

FileSystemObject.FileExists(filename)

Parameter | Description
filename | Required. The name of the file to check if exist

Example

<%

dim fs

set fs=Server.CreateObject("Scripting.FileSystemObject")

if fs.FileExists("c:\asp\introduction.asp")=true then

response.write("File c:\asp\introduction.asp exists!")

else

 response.write("File c:\asp\introduction.asp does not exist!")

end if

set fs=nothing

%>


ASP Files Collection

The Files collection returns a collection of all the files in a specified folder.

Syntax

FolderObject.Files

Example

<%

dim fs,fo,x

set fs=Server.CreateObject("Scripting.FileSystemObject")

set fo=fs.GetFolder("c:\test\")

for each x in fo.files

'Print the name of all files in the test folder

Response.write(x.Name & "<br />")

next

set fo=nothing

set fs=nothing

%>

Output:

test_adv.txt

guestbook.txt

links.txt

links2.txt

textads.txt

textfile.txt


ASP FileSystem Object

ASP FileSystemObject Object

The FileSystemObject object is used to access the file system on the server.

Examples

This example demonstrates how to first create a FileSystemObject Object, and then use the FileExists method to check if the file exists.

This example demonstrates how to use the FolderExists method to check if a folder exists.

Does a specified drive exist?

This example demonstrates how to use the DriveExists method to check if a drive exists.

Get the name of a specified drive

This example demonstrates how to use the GetDriveName method to get the name of a specified drive.

Get the name of the parent folder of a specified path

This example demonstrates how to use the GetParentFolderName method to get the name of the parent folder of a specified path.

Get the file extension

This example demonstrates how to use the GetExtensionName method to get the file extension of the last component in a specified path.

Get file name

This example demonstrates how to use the GetFileName method to get the file name of the last component in a specified path.

Get the base name of a file or folder

This example demonstrates how to use the GetBaseName method to return the base name of the file or folder, in a specified path.

The FileSystemObject Object

The FileSystemObject object is used to access the file system on the server. This object can manipulate files, folders, and directory paths. It is also possible to retrieve file system information with this object.

The following code creates a text file (c:\test.txt) and then writes some text to the file:

<%

dim fs,fname

set fs=Server.CreateObject("Scripting.FileSystemObject")

set fname=fs.CreateTextFile("c:\test.txt",true)

fname.WriteLine("Hello World!")

fname.Close

set fname=nothing

set fs=nothing

%>

The FileSystemObject object's properties and methods are described below:

Properties

Property | Description
Drives | Returns a collection of all Drive objects on the computer

Methods

Method | Description
BuildPath | Appends a name to an existing path
 | Copies one or more files from one location to another
 | Copies one or more folders from one location to another
CreateFolder | Creates a new folder
CreateTextFile | Creates a text file and returns a TextStream object that can be used to read from, or write to the file
 | Deletes one or more specified files
 | Deletes one or more specified folders
DriveExists | Checks if a specified drive exists
FileExists | Checks if a specified file exists
FolderExists | Checks if a specified folder exists
GetAbsolutePathName | Returns the complete path from the root of the drive for the specified path
GetBaseName | Returns the base name of a specified file or folder
GetDrive | Returns a Drive object corresponding to the drive in a specified path
 | Returns the drive name of a specified path
GetExtensionName | Returns the file extension name for the last component in a specified path
GetFile | Returns a File object for a specified path
GetFileName | Returns the file name or folder name for the last component in a specified path
GetFolder | Returns a Folder object for a specified path
GetParentFolderName | Returns the name of the parent folder of the last component in a specified path
GetSpecialFolder | Returns the path to some of Windows' special folders
GetTempName | Returns a randomly generated temporary file or folder
 | Moves one or more files from one location to another
MoveFolder | Moves one or more folders from one location to another
OpenTextFile | Opens a file and returns a TextStream object that can be used to access the file


ASP FileSystem Property

The FileSystem property returns the file system in use for a specified drive.

This property will return one of the following:

· FAT - for removable drives
· CDFS - for CD-ROM drives
· FAT, FAT32 or NTFS - for hard disks on Windows 2000 or Windows NT
· FAT or FAT32 - for hard disks on Windows 9x

Syntax

DriveObject.FileSystem

Example

<%

dim fs,d

set fs=Server.CreateObject("Scripting.FileSystemObject")

set d=fs.GetDrive("c:")

Response.Write("The file system in use is: " & d.FileSystem)

set d=nothing

set fs=nothing

%>

Output:

The file system in use is: FAT


ASP Flush Method

The Flush method sends buffered HTML output immediately.

Note: If response.Buffer is false, this method will cause a run-time error.

Syntax

Response.Flush

Examples

<%

Response.Buffer=true

%>

<html>

<body>

<p>I write some text, but I will control when the

text will be sent to the browser.</p>

<p>The text is not sent yet. I hold it back!</p>

<p>OK, let it go!</p>

<%

Response.Flush

%>

</body>

</html>

Output:

I write some text, but I will control when the

text will be sent to the browser.

The text is not sent yet. I hold it back!

OK, let it go!


ASP Folder Object

The Folder Object is used to return information about a specified folder.

The Folder Object

The Folder object is used to return information about a specified folder.

To work with the properties and methods of the Folder object, you will have to create an instance of the Folder object through the FileSystemObject object. First; create a FileSystemObject object and then instantiate the Folder object through the GetFolder method of the FileSystemObject object.

The following code uses the GetFolder method of the FileSystemObject object to instantiate the Folder object and the DateCreated property to return the date when the specified folder was created:

<%

Dim fs,fo

Set fs=Server.CreateObject("Scripting.FileSystemObject")

Set fo=fs.GetFolder("c:\test")

Response.Write("Folder created: " & fo.DateCreated)

set fo=nothing

set fs=nothing

%>

Output:

Folder created: 10/22/2001 10:01:19 AM

The Folder object's collections, properties, and methods are described below:

Collections

Collection | Description
Files | Returns a collection of all the files in a specified folder
SubFolders | Returns a collection of all subfolders in a specified folder

Properties

Property | Description
 | Sets or returns the attributes of a specified folder
DateCreated | Returns the date and time when a specified folder was created
DateLastAccessed | Returns the date and time when a specified folder was last accessed
DateLastModified | Returns the date and time when a specified folder was last modified
Drive | Returns the drive letter of the drive where the specified folder resides
IsRootFolder | Returns true if a folder is the root folder and false if not
Name | Sets or returns the name of a specified folder
ParentFolder | Returns the parent folder of a specified folder
Path | Returns the path for a specified folder
ShortName | Returns the short name of a specified folder (the 8.3 naming convention)
ShortPath | Returns the short path of a specified folder (the 8.3 naming convention)
Size | Returns the size of a specified folder
Type | Returns the type of a specified folder

Methods

Method | Description
Copy | Copies a specified folder from one location to another
Delete | Deletes a specified folder
 | Moves a specified folder from one location to another
CreateTextFile | Creates a new text file in the specified folder and returns a TextStream object to access the file


ASP FolderExists Method

The FolderExists method returns a Boolean value that indicates whether a specified folder exists. It returns True if the folder exists and False if not.

Syntax

FileSystemObject.FolderExists(foldername)

Parameter | Description
foldername | Required. The name of the folder to check if exist

Example

<%

dim fs

set fs=Server.CreateObject("Scripting.FileSystemObject")

if fs.FolderExists("c:\asp")=true then

response.write("Folder c:\asp exists!")

else

response.write("Folder c:\asp does not exist!")

end if

set fs=nothing

%>


ASP Form Collection

The Form collection is used to retrieve the values of form elements from a form that uses the POST method.

Note: If you want to post large amounts of data (beyond 100 kb) the Request.Form cannot be used.

Syntax

Request.Form(element)[(index)|.Count]

Parameter | Description
element | Required. The name of the form element from which the collection is to retrieve values
index | Optional. Specifies one of multiple values for a parameter. From 1 to Request.Form(parameter).Count.

Examples

Example 1

You can loop through all the values in a form request. If a user filled out a form by specifying two values - Blue and Green - for the color element, you could retrieve those values like this:

<%

for i=1 to Request.Form("color").Count

Response.Write(Request.Form("color")(i) & "<br />")

next

%>

Output:

Blue

Green

Example 2

Consider the following form:

<form action="submit.asp" method="post">

<p>First name: <input name="firstname"></p>

<p>Last name: <input name="lastname"></p>

<p>Your favorite color:

<select name="color">

<option>Blue</option>

<option>Green</option>

<option>Red</option>

<option>Yellow</option>

<option>Pink</option>

</select>

</p>

<p><input type="submit"></p>

</form>

The following request might be sent:

firstname=John&lastname=Dove&color=Red

Now we can use the information from the form in a script:

Hi, <%=Request.Form("firstname")%>.

Your favorite color is <%=Request.Form("color")%>.

Output:

Hi, John. Your favorite color is Red.

If you do not specify any element to display, like this:

Form data is: <%=Request.Form%>

the output would look like this:

Form data is: firstname=John&lastname=Dove&color=Red


ASP FreeSpace Property

The FreeSpace property returns the amount of free space to a user on the specified drive or network share.

Note: The value returned is often equal to the value returned by the AvailableSpace property.

Syntax

DriveObject.FreeSpace

Example

<%

dim fs,d

set fs=Server.CreateObject("Scripting.FileSystemObject")

set d=fs.GetDrive("c:")

Response.Write("Drive " & d)

Response.Write(" Free space in bytes: " & d.FreeSpace)

set d=nothing

set fs=nothing

%>

Output:

Drive c: Free space in bytes: 884465664


ASP GetAbsolutePathName Method

The GetAbsolutePathName method returns the complete path from the root of the drive for the specified path.

Syntax

FileSystemObject.GetAbsolutePathName(path)

Parameter | Description
path | Required. The path to change to a complete path

Examples

Assume that the current directory is c:\temp\test:

Example 1

<%

dim fs,path

set fs=Server.CreateObject("Scripting.FileSystemObject")

path=fs.GetAbsolutePathName("c:")

response.write(path)

%>

Output:

c:\temp\test

Example 2

<%

dim fs,path

set fs=Server.CreateObject("Scripting.FileSystemObject")

path=fs.GetAbsolutePathName("mydoc.txt")

response.write(path)

%>

Output:

c:\temp\test\mydoc.txt

Example 3

<%

dim fs,path

set fs=Server.CreateObject("Scripting.FileSystemObject")

path=fs.GetAbsolutePathName("private\mydoc.txt")

response.write(path)

%>

Output:

c:\temp\test\private\mydoc.txt


ASP GetBaseName Method

The GetBaseName method returns the base name of a file or folder in the specified path.

Syntax

FileSystemObject.GetBaseName(path)

Parameter | Description
path | Required. The path for the file or folder whose base name is to be returned

Example

<%

dim fs

set fs=Server.CreateObject("Scripting.FileSystemObject")

Response.Write(fs.GetBaseName("c:\winnt\cursors\3dgarro.cur"))

set fs=nothing

%>

Output:

3dgarro


ASP GetDrive Method

The GetDrive method returns a Drive object that is specified by the drivespec parameter.

Syntax

FileSystemObject.GetDrive(drivespec)

Parameter | Description
drivespec | Required. Can be a drive letter (c), or a drive letter followed by a colon (c:), or a drive letter followed by a colon and path separator (c:\), or any network share specification (\\computer2\share1)

Example

<%

dim fs,d

set fs=Server.CreateObject("Scripting.FileSystemObject")

set d=fs.GetDrive("c:\")

set fs=nothing

%>


ASP GetDriveName Method

The GetDriveName method returns a string that contains the drive name of the specified path.

Syntax

FileSystemObject.GetDriveName(path)

Parameter | Description
path | Required. The path that will return a drive name

Example

<%

dim fs,dname

set fs=Server.CreateObject("Scripting.FileSystemObject")

dname=fs.GetDriveName("c:\test\test.htm")

Response.Write(dname)

set fs=nothing

%>

Output:

c:


ASP GetExtensionName Method

The GetExtensionName method returns a string that contains the file extension name for the last component in a specified path.

Syntax

FileSystemObject.GetExtensionName(path)

Parameter | Description
path | Required. The path for the file whose file extension name is to be returned

Example

<%

dim fs

set fs=Server.CreateObject("Scripting.FileSystemObject")

Response.Write(fs.GetExtensionName("c:\test\test.htm"))

set fs=nothing

%>

Output:

htm


ASP GetFile Method

The GetFile method returns a File object for the specified path.

Syntax

FileSystemObject.GetFile(path)

Parameter | Description
path | Required. The path to a specific file

Example

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.GetFile("c:\test\test.htm")

Response.Write("The file was last modified on: ")

Response.Write(f.DateLastModified)

set f=nothing

set fs=nothing

%>

Output:

The file was last modified on 01/01/20 4:23:56 AM


ASP GetFileName Method

The GetFileName method returns a string that contains the file name or folder name for the last component in a specified path.

Syntax

FileSystemObject.GetFileName(path)

Parameter | Description
path | Required. The path to a specific file or folder

Examples

<%

dim fs,p

set fs=Server.CreateObject("Scripting.FileSystemObject")

p=fs.getfilename("c:\test\test.htm")

response.write(p)

set fs=nothing

%>

Output:

test.htm

<%

dim fs,p

set fs=Server.CreateObject("Scripting.FileSystemObject")

p=fs.getfilename("c:\test\")

response.write(p)

set fs=nothing

%>

Output:

test


ASP GetFolder Method

The GetFolder method returns a Folder object for the specified path.

Syntax

FileSystemObject.GetFolder(path)

Parameter | Description
path | Required. The path to a specific folder

Syntax

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.GetFolder("c:\test\")

Response.Write("The folder was last modified on: ")

Response.Write(f.DateLastModified)

set f=nothing

set fs=nothing

%>

Output:

The folder was last modified on 01/01/20 4:23:56 AM


ASP GetLastError Method

ASP GetLastError() Method (ASP 3.0)

 Top Previous Next

The GetLastError method returns an ASPError object that describes the error condition that occurred.

By default, a Web site uses the file \iishelp\common\500-100.asp for processing ASP errors. You can either use this file, or create your own. If you want to change the ASP file for processing the 500;100 custom errors you can use the IIS snap-in.

Note: A 500;100 custom error will be generated if IIS encounters an error while processing either an ASP file or the application's Global.asa file.

Note: This method is available only before the ASP file has sent any content to the browser.

Syntax

Server.GetLastError()

Examples

Example 1

In the example an error will occur when IIS tries to include the file, because the include statement is missing the file parameter:

<!--#include f="header.inc" -->

<%

response.write("sometext")

%>

Example 2

In this example an error will occur when compiling the script, because the "next" keyword is missing:

<%

dim i

for i=1 to 10

........

nxt

%>

Example 3

In this example an error will occur because the script attempts to divide by 0:

<%

dim i,tot,j

i=0

tot=0

j=0

for i=1 to 10

tot=tot+1

next

tot=tot/j

%>


ASP GetParentFolderName Method

The GetParentFolderName method returns the name of the parent folder of the last component in the specified path.

Syntax

FileSystemObject.GetParentFolderName(path)

Parameter | Description
path | Required. The path for the file or folder whose parent folder name is to be returned

Example

<%

dim fs,p

set fs=Server.CreateObject("Scripting.FileSystemObject")

p=fs.GetParentFolderName("c:\winnt\cursors\3dgarro.cur")

Response.Write(p)

set fs=nothing

%>

Output:

c:\winnt\cursors


ASP GetSpecialFolder Method

The GetSpecialFolder method returns the path to some of Windows' special folders.

Syntax

FileSystemObject.GetSpecialFolder(foldername)

Parameter | Description
foldername | Required. The folder to be returned. 0=WindowsFolder - Contains files installed by the Windows operating system 1=SystemFolder - Contains libraries, fonts, and device drivers 2=TemporaryFolder - Used to store temporary files

Example

<%

dim fs,p

set fs=Server.CreateObject("Scripting.FileSystemObject")

set p=fs.GetSpecialFolder(1)

Response.Write(p)

set p=nothing

set fs=nothing

%>

Output:

C:\WINNT\system32


ASP GetTempName Method

The GetTempName method returns a randomly generated temporary file or folder.

Syntax

FileSystemObject.GetTempName

Example

<%

dim fs,tfolder,tname, tfile

Set fs=Server.CreateObject("Scripting.FileSystemObject")

Set tfolder=fs.GetSpecialFolder(2)

tname=fs.GetTempName

Set tfile=tfolder.CreateTextFile(tname)

Response.write (tfile)

%>

Output:

trb2007.tmp


ASP Global.asa

ASP The Global.asa file

The Global.asa file is an optional file that can contain declarations of objects, variables, and methods that can be accessed by every page in an ASP application.

The Global.asa file

The Global.asa file is an optional file that can contain declarations of objects, variables, and methods that can be accessed by every page in an ASP application. All valid browser scripts (JavaScript, VBScript, JScript, PerlScript, etc.) can be used within Global.asa.

The Global.asa file can contain only the following:

· Application events
· Session events
· <object> declarations
· TypeLibrary declarations
· the #include directive

Note: The Global.asa file must be stored in the root directory of the ASP application, and each application can only have one Global.asa file.

Events in Global.asa

In Global.asa you can tell the application and session objects what to do when the application/session starts and what to do when the application/session ends. The code for this is placed in event handlers. The Global.asa file can contain four types of events:

Application_OnStart - This event occurs when the FIRST user calls the first page from an ASP application. This event occurs after the Web server is restarted or after the Global.asa file is edited. The "Session_OnStart" event occurs immediately after this event.

Session_OnStart - This event occurs EVERY time a NEW user requests his or her first page in the ASP application.

Session_OnEnd - This event occurs EVERY time a user ends a session. A user ends a session after a page has not been requested by the user for a specified time (by default this is 20 minutes).

Application_OnEnd - This event occurs after the LAST user has ended the session. Typically, this event occurs when a Web server stops. This procedure is used to clean up settings after the Application stops, like delete records or write information to text files.

A Global.asa file could look something like this:

<script language="vbscript" runat="server">

sub Application_OnStart

'some code

end sub

sub Application_OnEnd

'some code

end sub

sub Session_OnStart

'some code

end sub

sub Session_OnEnd

'some code

end sub

</script>

Note: Because we cannot use the ASP script delimiters (<% and %>) to insert scripts in the Global.asa file, we put subroutines inside an HTML <script> element.

<object> Declarations

It is possible to create objects with session or application scope in Global.asa by using the <object> tag.

Note: The <object> tag should be outside the <script> tag!

Syntax

<object runat="server" scope="scope" id="id"

{progid="progID"|classid="classID"}>

....

</object>

Parameter | Description
scope | Sets the scope of the object (either Session or Application)
id | Specifies a unique id for the object
ProgID | An id associated with a class id. The format for ProgID is [Vendor.]Component[.Version] Either ProgID or ClassID must be specified.
ClassID | Specifies a unique id for a COM class object. Either ProgID or ClassID must be specified.

Examples

The first example creates an object of session scope named "MyAd" by using the ProgID parameter:

<object runat="server" scope="session" id="MyAd"

progid="MSWC.AdRotator">

</object>

The second example creates an object of application scope named "MyConnection" by using the ClassID parameter:

<object runat="server" scope="application" id="MyConnection"

classid="Clsid:8AD3067A-B3FC-11CF-A560-00A0C9081C21">

</object>

The objects declared in the Global.asa file can be used by any script in the application:

GLOBAL.ASA:

<object runat="server" scope="session" id="MyAd"

progid="MSWC.AdRotator">

</object>

You could reference the object "MyAd" from any page in the ASP application:

SOME .ASP FILE:

<%=MyAd.GetAdvertisement("/banners/adrot.txt")%>

TypeLibrary Declarations

A TypeLibrary is a container for the contents of a DLL file corresponding to a COM object. By including a call to the TypeLibrary in the Global.asa file, the constants of the COM object can be accessed, and errors can be better reported by the ASP code. If your Web application relies on COM objects that have declared data types in type libraries, you can declare the type libraries in Global.asa.

Syntax

<!--METADATA TYPE="TypeLib"

file="filename"

uuid="typelibraryuuid"

version="versionnumber"

lcid="localeid"

-->

Parameter | Description
file | Specifies an absolute path to a type library. Either the file parameter or the uuid parameter is required
uuid | Specifies a unique identifier for the type library. Either the file parameter or the uuid parameter is required
version | Optional. Used for selecting version. If the requested version is not found, then the most recent version is used
lcid | Optional. The locale identifier to be used for the type library

Error Values

The server can return one of the following error messages:

Error Code | Description
ASP 0222 | Invalid type library specification
ASP 0223 | Type library not found
ASP 0224 | Type library cannot be loaded
ASP 0225 | Type library cannot be wrapped

Note: METADATA tags can appear anywhere in the Global.asa file (both inside and outside <script> tags). However, it is recommended that METADATA tags appear near the top of the Global.asa file.

Restrictions

Restrictions on what you can include in the Global.asa file:

· You can not display text that is written in the Global.asa file. This file can't display information
· You can only use Server and Application objects in the Application_OnStart and Application_OnEnd subroutines. In the Session_OnEnd subroutine, you can use Server, Application, and Session objects. In the Session_OnStart subroutine you can use any built-in object

How to use the Subroutines

Global.asa is often used to initialize variables.

The example below shows how to detect the exact time a visitor first arrives on a Web site. The time is stored in a Session variable named "started", and the value of the "started" variable can be accessed from any ASP page in the application:

<script language="vbscript" runat="server">

sub Session_OnStart

Session("started")=now()

end sub

</script>

Global.asa can also be used to control page access.

The example below shows how to redirect every new visitor to another page, in this case to a page called "newpage.asp":

<script language="vbscript" runat="server">

sub Session_OnStart

Response.Redirect("newpage.asp")

end sub

</script>

And you can include functions in the Global.asa file.

In the example below the Application_OnStart subroutine occurs when the Web server starts. Then the Application_OnStart subroutine calls another subroutine named "getcustomers". The "getcustomers" subroutine opens a database and retrieves a record set from the "customers" table. The record set is assigned to an array, where it can be accessed from any ASP page without querying the database:

<script language="vbscript" runat="server">

sub Application_OnStart

getcustomers

end sub

sub getcustomers

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open "c:/webdata/northwind.mdb"

set rs=conn.execute("select name from customers")

Application("customers")=rs.GetRows

rs.Close

conn.Close

end sub

</script>

Global.asa Example

In this example we will create a Global.asa file that counts the number of current visitors.

· The Application_OnStart sets the Application variable "visitors" to 0 when the server starts
· The Session_OnStart subroutine adds one to the variable "visitors" every time a new visitor arrives
· The Session_OnEnd subroutine subtracts one from "visitors" each time this subroutine is triggered

The Global.asa file:

<script language="vbscript" runat="server">

Sub Application_OnStart

Application("visitors")=0

End Sub

Sub Session_OnStart

Application.Lock

Application("visitors")=Application("visitors")+1

Application.UnLock

End Sub

Sub Session_OnEnd

Application.Lock

Application("visitors")=Application("visitors")-1

Application.UnLock

End Sub

</script>

To display the number of current visitors in an ASP file:

<html>

<head>

</head>

<body>

<p>

There are <%response.write(Application("visitors"))%>

online now!

</p>

</body>

</html>


ASP HTMLEncode Method

The HTMLEncode method applies HTML encoding to a specified string.

Syntax

Server.HTMLEncode(string)

Parameter | Description
string | Required. The string to encode

Example

The following script:

<%

response.write(Server.HTMLEncode("The image tag: <img>"))

%>

Output:

The image tag: &lt;img&gt;

Web browser output:

The image tag: <img>


ASP Including Files

The #include directive is used to create functions, headers, footers, or elements that will be reused on multiple pages.

The #include Directive

You can insert the content of one ASP file into another ASP file before the server executes it, with the #include directive. The #include directive is used to create functions, headers, footers, or elements that will be reused on multiple pages.

How to Use the #include Directive

Here is a file called "mypage.asp":

<html>

<body>

<h3>Words of Wisdom:</h3>

<p><!--#include file="wisdom.inc"--></p>

<h3>The time is:</h3>

<p><!--#include file="time.inc"--></p>

</body>

</html>

Here is the "wisdom.inc" file:

"One should never increase, beyond what is necessary,

the number of entities required to explain anything."

Here is the "time.inc" file:

<%

Response.Write(Time)

%>

If you look at the source code in a browser, it will look something like this:

<html>

<body>

<h3>Words of Wisdom:</h3>

<p>"One should never increase, beyond what is necessary,

the number of entities required to explain anything."</p>

<h3>The time is:</h3>

<p>11:33:42 AM</p>

</body>

</html>

Syntax for Including Files

To include a file in an ASP page, place the #include directive inside comment tags:

<!--#include virtual="somefilename"-->

or

<!--#include file ="somefilename"-->

The Virtual Keyword

Use the virtual keyword to indicate a path beginning with a virtual directory.

If a file named "header.inc" resides in a virtual directory named /html, the following line would insert the contents of "header.inc":

<!-- #include virtual ="/html/header.inc" -->

The File Keyword

Use the file keyword to indicate a relative path. A relative path begins with the directory that contains the including file.

If you have a file in the html directory, and the file "header.inc" resides in html\headers, the following line would insert "header.inc" in your file:

<!-- #include file ="headers\header.inc" -->

Note that the path to the included file (headers\header.inc) is relative to the including file. If the file containing this #include statement is not in the html directory, the statement will not work.

You can also use the file keyword with the syntax (..\) to include a file from a higher-level directory.

Tips and Notes

In the sections above we have used the file extension ".inc" for included files. Notice that if a user tries to browse an INC file directly, its content will be displayed. If your included file contains confidential information or information you do not want any users to see, it is better to use an ASP extension. The source code in an ASP file will not be visible after the interpretation. An included file can also include other files, and one ASP file can include the same file more than once.

Important: Included files are processed and inserted before the scripts are executed.

The following script will not work because ASP executes the #include directive before it assigns a value to the variable:

<%

fname="header.inc"

%>

<!--#include file="<%=fname%>"-->

You cannot open or close a script delimiter in an INC file. This script will not work:

<%

For i = 1 To n

<!--#include file="count.inc"-->

Next

%>

But this script will work:

<% For i = 1 to n %>

<!--#include file="count.inc" -->

<% Next %>


ASP IsClientConnected Property

The IsClientConnected property indicates if the client has disconnected from the server.

Syntax

response.IsClientConnected

Examples

<%

If response.IsClientConnected=true then

response.write("The user is still connected!")

else

response.write("The user is not connected!")

end if

%>


ASP IsReady Property

The IsReady property returns true if a specified drive is ready and false if not.

Syntax

DriveObject.IsReady

Example

<%

dim fs,d,n

set fs=Server.CreateObject("Scripting.FileSystemObject")

set d=fs.GetDrive("a:")

n = "The " & d.DriveLetter

if d.IsReady=true then

n=n & " drive is ready!"

else

n=n & " drive is not ready!"

end if

Response.Write(n)

set d=nothing

set fs=nothing

%>

Output:

The A drive is not ready!


ASP IsRootFolder Property

The IsRootFolder property returns true if the specified folder is the root folder and false if not.

Syntax

FolderObject.IsRootFolder

Example

<%

dim fs,fo

set fs=Server.CreateObject("Scripting.FileSystemObject")

set fo=fs.GetFolder("c:\asp\test")

if fo.IsRootFolder=true then

 Response.Write("The folder is the root folder!")

else

 Response.Write("The folder is not the root folder!")

end if

set fo=nothing

set fs=nothing

%>

Output:

The folder is not the root folder!


ASP Item Property

The Item property sets or returns the value of an item in a Dictionary object.

Syntax

DictionaryObject.Item(key)[=newitem]

Parameter | Description
key | Required. The key associated with the item
newitem | Optional. Specifies the value associated with the key

Example

<%

Dim d

Set d=Server.CreateObject("Scripting.Dictionary")

d.Add "re","Red"

d.Add "gr","Green"

d.Add "bl","Blue"

d.Add "pi","Pink"

Response.Write("The value of key pi is: " & d.Item("pi"))

%>

Output:

The value of key pi is: Pink


ASP Items Method

The Items method returns an array of all the items in a Dictionary object.

Syntax

DictionaryObject.Items

Example

<%

dim d,a,i

set d=Server.CreateObject("Scripting.Dictionary")

d.Add "n","Norway"

d.Add "i","Italy"

d.Add "s","Sweden"

Response.Write("<p>Item values:</p>")

a=d.Items

for i=0 to d.Count-1

Response.Write(a(i))

Response.Write("<br />")

next

set d=nothing

%>

Output:

Item values:

Norway

Italy

Sweden


ASP Key Property

The Key property sets a new key value for an existing key value in a Dictionary object.

Syntax

DictionaryObject.Key(key)=newkey

Parameter | Description
key | Required. The name of the key that will be changed
newkey | Required. The new name of the key

Example

<%

Dim d

Set d=Server.CreateObject("Scripting.Dictionary")

d.Add "re","Red"

d.Add "gr","Green"

d.Add "bl","Blue"

d.Add "pi","Pink"

d.Key("re")="r"

Response.Write("The value of key r is: " & d.Item("r"))

%>

Output:

The value of key r is: Red


ASP Keys Method

The Keys method returns an array of all the keys in a Dictionary object.

Syntax

DictionaryObject.Keys

Example

<%

dim d,a,i

set d=Server.CreateObject("Scripting.Dictionary")

d.Add "n","Norway"

d.Add "i","Italy"

d.Add "s","Sweden"

Response.Write("<p>Key values:</p>")

a=d.Keys

for i=0 to d.Count-1

Response.Write(a(i))

Response.Write("<br />")

next

set d=nothing

%>

Output:

Key values:

n

i

s


ASP LCID Property

The LCID property sets or returns an integer that specifies a location or region. Contents like date, time, and currency will be displayed according to that location or region.

Syntax

Session.LCID(=LCID)

Parameter | Description
LCID | A locale identifier

Examples

<%

response.write("<p>")

response.write("Default LCID is: " & Session.LCID & "<br />")

response.write("Date format is: " & date() & "<br />")

response.write("Currency format is: " & FormatCurrency(350))

response.write("</p>")

Session.LCID=1036

response.write("<p>")

response.write("LCID is now: " & Session.LCID & "<br />")

response.write("Date format is: " & date() & "<br />")

response.write("Currency format is: " & FormatCurrency(350))

response.write("</p>")

Session.LCID=3079

response.write("<p>")

response.write("LCID is now: " & Session.LCID & "<br />")

response.write("Date format is: " & date() & "<br />")

response.write("Currency format is: " & FormatCurrency(350))

response.write("</p>")

Session.LCID=2057

response.write("<p>")

response.write("LCID is now: " & Session.LCID & "<br />")

response.write("Date format is: " & date() & "<br />")

response.write("Currency format is: " & FormatCurrency(350))

response.write("</p>")

%>

Output:

Default LCID is: 2048

Date format is: 12/11/2001

Currency format is: $350.00

LCID is now: 1036

Date format is: 11/12/2001

Currency format is: 350,00 F

LCID is now: 3079

Date format is: 11.12.2001

Currency format is: öS 350,00

LCID is now: 2057

Date format is: 11/12/2001

Currency format is: £350.00


ASP Line Property

The Line property returns the current line number in a TextStream file (starting at 1).

Syntax

TextStreamObject.Line

Example

<%

dim fs,f,t

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.CreateTextFile("c:\test.txt",true)

f.WriteLine("Hello World!")

f.WriteLine("How are you today?")

f.WriteLine("Goodbye!")

f.close

Set t=fs.OpenTextFile("c:\test.txt",1)

do while t.AtEndOfStream=false

Response.Write("Line " & t.Line & ": ")

Response.Write(t.ReadLine)

Response.Write("<br>")

loop

t.Close

%>

Output:

Line 1: Hello World!

Line 2: How are you today?

Line 3: Goodbye!


ASP Lock and Unlock Methods

Lock Method

The Lock method prevents other users from modifying the variables in the Application object (used to ensure that only one client at a time can modify the Application variables).

Unlock Method

The Unlock method enables other users to modify the variables stored in the Application object (after it has been locked using the Lock method).

Syntax

Application.Lock

Application.Unlock

Examples

The example below uses the Lock method to prevent more than one user from accessing the variable visits at a time, and the Unlock method to unlock the locked object so that the next client can increment the variable visits:

<%

Application.Lock

Application("visits")=Application("visits")+1

Application.Unlock

%>

This page has been visited

<%=Application("visits")%> times!


ASP MapPath Method

The MapPath method maps a specified path to a physical path.

Note: This method cannot be used in Session.OnEnd and Application.OnEnd.

Syntax

Server.MapPath(path)

Parameter | Description
path | Required. A relative or virtual path to map to a physical path. If this parameter starts with / or \, it returns a path as if this parameter is a full virtual path. If this parameter doesn't start with / or \, it returns a path relative to the directory of the .asp file being processed

Examples

Example 1

For the example below, the file test.asp is located in C:\Inetpub\Wwwroot\Script.

The file Test.asp (located in C:\Inetpub\Wwwroot\Script) contains the following code:

<%

response.write(Server.MapPath("test.asp") & "<br />")

response.write(Server.MapPath("script/test.asp") & "<br />")

response.write(Server.MapPath("/script/test.asp") & "<br />")

response.write(Server.MapPath("\script") & "<br />")

response.write(Server.MapPath("/") & "<br />")

response.write(Server.MapPath("\") & "<br />")

%>

Output:

c:\inetpub\wwwroot\script\test.asp

c:\inetpub\wwwroot\script\script\test.asp

c:\inetpub\wwwroot\script\test.asp

c:\inetpub\wwwroot\script

c:\inetpub\wwwroot

c:\inetpub\wwwroot

Example 2

How to use a relative path to return the relative physical path to the page that is being viewed in the browser:

<%

response.write(Server.MapPath("../"))

%>

or

<%

response.write(Server.MapPath("..\"))

%>


ASP Move Method

The Move method moves the specified file or folder from one location to another.

Syntax

FileObject.Move(destination)

FolderObject.Move(destination)

Parameter | Description
destination | Required. Where to move the file or folder. Wildcard characters are not allowed

Example for the File object

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

Set f=fs.GetFile("c:\test.txt")

f.Move("c:\test\test.txt")

set f=nothing

set fs=nothing

%>

Example for the Folder object

<%

dim fs,fo

set fs=Server.CreateObject("Scripting.FileSystemObject")

set fo=fs.GetFolder("c:\test")

fo.Move("c:\asp\test")

set fo=nothing

set fs=nothing

%>


ASP MoveFile Method

The MoveFile method moves one or more files from one location to another.

Syntax

FileSystemObject.MoveFile source,destination

Parameter | Description
source | Required. The path to the file/files to be moved. Can contain wildcard characters in the last component.
destination | Required. Where to move the file/files. Cannot contain wildcard characters

Example

<%

dim fs

set fs=Server.CreateObject("Scripting.FileSystemObject")

fs.MoveFile "c:\web\*.gif","c:\images\"

set fs=nothing

%>


ASP MoveFolder Method

The MoveFolder method moves one or more folders from one location to another.

Syntax

FileSystemObject.MoveFolder source,destination

Parameter | Description
source | Required. The path to the folder/folders to be moved. Can contain wildcard characters in the last component.
destination | Required. Where to move the folder/folders. Cannot contain wildcard characters

Example

<%

dim fs

set fs=Server.CreateObject("Scripting.FileSystemObject")

fs.MoveFolder "c:\test\web\","c:\windows\"

set fs=nothing

%>


ASP Name Property

The Name property is used to set or return the name of a specified file or folder.

Syntax

FileObject.Name[=newname]

FolderObject.Name[=newname]

Parameter | Description
newname | Optional. Specifies the name of the file or folder

Example for the File object

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.GetFile("c:\test.txt")

Response.Write("The file's name: ")

Response.Write(f.Name)

set f=nothing

set fs=nothing

%>

Output:

The file's name: test.txt

Example for the Folder object

<%

dim fs,fo

set fs=Server.CreateObject("Scripting.FileSystemObject")

set fo=fs.GetFolder("c:\test")

Response.Write("The folder's name: ")

Response.Write(fo.Name)

set fo=nothing

set fs=nothing

%>

Output:

The folder's name: test


ASP OpenAsTextStream Method

The OpenAsTextStream method opens the specified file and returns a TextStream object to access the file.

Syntax

FileObject.OpenAsTextStream(mode,format)

Parameter

Description

mode

Optional. How to open the file.

· 1 = ForReading - Open a file for reading. You cannot write to this file
· 2 = ForWriting - Open a file for writing
· 8 = ForAppending - Open a file and write to the end of the file

format

Optional. The format of the file.

· 0 = TristateFalse - Default. Open the file as ASCII
· -1 = TristateTrue - Open the file as Unicode
· -2 = TristateUseDefault - Open the file using the system default

Example

<%

dim fs,f,ts

set fs=Server.CreateObject("Scripting.FileSystemObject")

Set f=fs.GetFile("c:\test.txt")

Set ts=f.OpenAsTextStream(ForWriting)

ts.Write("Hello World!")

ts.Close

Set ts=f.OpenAsTextStream(ForReading)

Response.Write(ts.ReadAll)

ts.Close

set ts=nothing

set f=nothing

set fs=nothing

%>

Output:

Hello World!


ASP OpenTextFile Method

The OpenTextFile method opens a specified file and returns a TextStream object that can be used to access the file.

Syntax

FileSystemObject.OpenTextFile(fname,mode,create,format)

Parameter | Description
fname | Required. The name of the file to open
mode | Optional. How to open the file 1=ForReading - Open a file for reading. You cannot write to this file. 2=ForWriting - Open a file for writing. 8=ForAppending - Open a file and write to the end of the file.
create | Optional. Sets whether a new file can be created if the filename does not exist. True indicates that a new file can be created, and False indicates that a new file will not be created. False is default
format | Optional. The format of the file 0=TristateFalse - Open the file as ASCII. This is default. -1=TristateTrue - Open the file as Unicode. -2=TristateUseDefault - Open the file using the system default.

Example

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.OpenTextFile(Server.MapPath("testread.txt"),8,true)

f.WriteLine("This text will be added to the end of file")

f.Close

set f=Nothing

set fs=Nothing

%>


ASP ParentFolder Property

The ParentFolder property is used to return the folder object for the parent of the specified file or folder.

Syntax

FileObject.ParentFolder

FolderObject.ParentFolder

Example for the File object

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.GetFile("c:\asp\test\test.asp")

Response.Write("The file test.asp is in the folder: ")

Response.Write(f.ParentFolder)

set f=nothing

set fs=nothing

%>

Output:

The file test.asp is in the folder: C:\asp\test

Example for the Folder object

<%

dim fs,fo

set fs=Server.CreateObject("Scripting.FileSystemObject")

set fo=fs.GetFolder("c:\asp\test")

Response.Write("The folder test is in the folder: ")

Response.Write(fo.ParentFolder)

set fo=nothing

set fs=nothing

%>

Output:

The folder test is in the folder: C:\asp


ASP Path Property

The Path property is used to return the path for a specified drive, file, or folder.

Syntax

DriveObject.Path

FileObject.Path

FolderObject.Path

Example for the Drive object

<%

dim fs,d

set fs=Server.CreateObject("Scripting.FileSystemObject")

set d=fs.GetDrive("c:")

Response.Write("The path is " & d.Path)

set d=nothing

set fs=nothing

%>

Output:

The path is C:

Example for the File object

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.GetFile("c:\asp\test\test.asp")

Response.Write("The path is: " & f.Path)

set f=nothing

set fs=nothing

%>

Output:

The path is: C:\asp\test\test.asp

Example for the Folder object

<%

dim fs,fo

set fs=Server.CreateObject("Scripting.FileSystemObject")

set fo=fs.GetFolder("c:\asp\test")

Response.Write("The path is: " & fo.Path)

set fo=nothing

set fs=nothing

%>

Output:

The path is: C:\asp\test


ASP PICS Property

The PICS property appends a value to the PICS label response header.

Note: This property will accept any string value, regardless of whether it is a valid PICS label or not.

What is PICS?

The PICS (Platform for Internet Content Selection) rating system is used to rate the content in a web site. It looks something like this:

PICS-1.1 "http://www.rsac.org/ratingsv01.html" by "your@name.com" for "http://www.somesite.com" on "2002.10.05T02:15-0800" r (n 0 s 0 v 0 l 0)

Part | Description
PICS-1.1 | PICS version number
"http://www.rsac.org/ratingsv01.html" | Rating organization
by "your@name.com" | Author of the label
for "http://www.somesite.com" | The URL or the document that has been rated
on "2002.10.05T02:15-0800" | Expiration date
r (n 0 s 0 v 0 l 0) | Rating

One of the most popular rating system is RSACi (Recreational Software Advisory Council on the Internet). RSACi rating system uses four categories: violence, nudity, sex, and language. A number between 0 to 4 is assigned to each category. 0 means that the page does not contain any potentially offensive content and 4 means that the page contains the highest levels of potentially offensive content.

Level | Violence Rating | Nudity Rating | Sex Rating | Language Rating
0 | None of the below or sports related | None of the below | None of the below or innocent kissing; romance | None of the below
1 | Injury to human being | Revealing attire | Passionate kissing | Mild expletives
2 | Destruction of realistic objects | Partial nudity | Clothed sexual touching | Moderate expletives or profanity
3 | Aggressive violence or death to humans | Frontal nudity | Non-explicit sexual acts | Strong language or hate speech
4 | Rape or wanton, gratuitous violence | Frontal nudity (qualifying as provocative display) | Explicit sexual acts or sex crimes | Crude, vulgar language or extreme hate speech

There are two ways you can obtain rating for your site. You can either rate your site yourself or use a rating provider, like RSACi. They'll ask you fill out some questions. After filling out the questions, you will get the rating label for your site.

Microsoft IE 3.0 and above and Netscape 4.5 and above support the content ratings. You can set the ratings in IE 5, by selecting Tools and Internet Options. Select the Content tab and click the Enable. When the rating exceeds the defined levels the Content Advisor will block the site. You can set the ratings in Netscape 4.7, by selecting Help and NetWatch.

We can use the META tag or the response.PICS property to add a rating to our site.

Syntax

response.PICS(picslabel)

Parameter | Description
picslabel | A properly formatted PICS label

Examples

For an ASP file that includes:

Note: Because PICS labels contain quotes, you

must replace quotes with " & chr(34) & ".

<%

response.PICS("(PICS-1.1 <http://www.rsac.org/ratingv01.html>

by " & chr(34) & "your@name.com" & chr(34) &

" for " & chr(34) & "http://www.somesite.com" & chr(34) &

" on " & chr(34) & "2002.10.05T02:15-0800" & chr(34) &

" r (n 2 s 0 v 1 l 2))")

%>

the following header is added:

PICS-label:(PICS-1.1 <http://www.rsac.org/ratingv01.html>

by "your@name.com"

for "http://www.somesite.com"

on "2002.10.05T02:15-0800"

r (n 2 s 0 v 1 l 2))


ASP Procedures

In ASP you can call a JavaScript procedure from a VBScript and vice versa.

Examples

Call a procedure using VBScript

How to call a VBScript procedure from ASP.

Call a procedure using JavaScript

How to call a JavaScript procedure from ASP.

Call procedures using VBScript

How to call both a JavaScript procedure and a VBScript procedure in an ASP file.

Procedures

The ASP source code can contain procedures and functions:

<html>

<head>

<%

sub vbproc(num1,num2)

response.write(num1*num2)

end sub

%>

</head>

<body>

<p>Result: <%call vbproc(3,4)%></p>

</body>

</html>

Insert the <%@ language="language" %> line above the <html> tag to write procedures or functions in another scripting language than default:

<%@ language="javascript" %>

<html>

<head>

<%

function jsproc(num1,num2)

{

Response.Write(num1*num2)

}

%>

</head>

<body>

<p>Result: <%jsproc(3,4)%></p>

</body>

</html>

Differences Between VBScript and JavaScript

When calling a VBScript or a JavaScript procedure from an ASP file written in VBScript, you can use the "call" keyword followed by the procedure name. If a procedure requires parameters, the parameter list must be enclosed in parentheses when using the "call" keyword. If you omit the "call" keyword, the parameter list must not be enclosed in parentheses. If the procedure has no parameters, the parentheses are optional.

When calling a JavaScript or a VBScript procedure from an ASP file written in JavaScript, always use parentheses after the procedure name.


ASP QueryString Collection

The QueryString collection is used to retrieve the variable values in the HTTP query string.

The HTTP query string is specified by the values following the question mark (?), like this:

<a href= "test.asp?txt=this is a query string test">Link with a query string</a>

The line above generates a variable named txt with the value "this is a query string test".

Query strings are also generated by form submission, or by a user typing a query into the address bar of the browser.

Syntax

Request.QueryString(variable)[(index)|.Count]

Parameter | Description
variable | Required. The name of the variable in the HTTP query string to retrieve
index | Optional. Specifies one of multiple values for a variable. From 1 to Request.QueryString(variable).Count

Examples

Example 1

To loop through all the n variable values in a Query String:

The following request is sent:

http://www.w3schools.com/test/names.asp?n=John&n=Susan

and names.asp contains the following script:

<%

for i=1 to Request.QueryString("n").Count

Response.Write(Request.QueryString("n")(i) & "<br />")

next

%>

The file names.asp would display the following:

John

Susan

Example 2

The following string might be sent:

http://www.w3schools.com/test/names.asp?name=John&age=30

this results in the following QUERY_STRING value:

name=John&age=30

Now we can use the information in a script:

Hi, <%=Request.QueryString("name")%>.

Your age is <%= Request.QueryString("age")%>.

Output:

Hi, John. Your age is 30.

If you do not specify any variable values to display, like this:

Query string is: <%=Request.QueryString%>

the output would look like this:

Query string is: name=John&age=30


ASP Quick Reference

ASP Quick Reference from W3Schools. Print it, and fold it in your pocket.

Basic Syntax

ASP scripts are surrounded by <% and %>. To write some output to a browser:

<html>

<body>

<% response.write("Hello World!") %>

</body>

</html>

The default language in ASP is VBScript. To use another scripting language, insert a language specification at the top of the ASP page:

<%@ language="javascript" %>

<html>

<body>

<%

....

%>

Forms and User Input

Request.QueryString is used to collect values in a form with method="get". Information sent from a form with the GET method is visible to everyone (it will be displayed in the browser's address bar) and has limits on the amount of information to send.

Request.Form is used to collect values in a form with method="post". Information sent from a form with the POST method is invisible to others and has no limits on the amount of information to send.

ASP Cookies

A cookie is often used to identify a user. A cookie is a small file that the server embeds on the user's computer. Each time the same computer requests for a page with a browser, it will send the cookie too.

The Response.Cookies command is used to create cookies:

<%

Response.Cookies("firstname")="Alex"

Response.Cookies("firstname").Expires="May 10,2002"

%>

Note: The Response.Cookies command must appear BEFORE the <html> tag!

The "Request.Cookies" command is used to retrieve a cookie value:

<%

fname=Request.Cookies("firstname")

response.write("Firstname=" & fname)

%>

Including Files

You can insert the content of one ASP file into another ASP file before the server executes it, with the #include directive. The #include directive is used to create functions, headers, footers, or elements that will be reused on multiple pages

Syntax:

<!--#include virtual="somefile.inc"-->

or

<!--#include file ="somefile.inc"-->

Use the virtual keyword to indicate a path beginning with a virtual directory. If a file named "header.inc" resides in a virtual directory named /html, the following line would insert the contents of "header.inc":

<!-- #include virtual ="/html/header.inc" -->

Use the file keyword to indicate a relative path. A relative path begins with the directory that contains the including file. If you have a file in the html directory, and the file "header.inc" resides in html\headers, the following line would insert "header.inc" in your file:

<!-- #include file ="headers\header.inc" -->

Use the file keyword with the syntax (..\) to include a file from a higher-level directory.

Global.asa

The Global.asa file is an optional file that can contain declarations of objects, variables, and methods that can be accessed by every page in an ASP application.

Note: The Global.asa file must be stored in the root directory of the ASP application, and each application can only have one Global.asa file.

The Global.asa file can contain only the following:

· Application events
· Session events
· <object> declarations
· TypeLibrary declarations
· the #include directive

Application and Session Events

In Global.asa you can tell the application and session objects what to do when the application/session starts and what to do when the application/session ends. The code for this is placed in event handlers. Note: We do not use <% and %>, to insert scripts in the Global.asa file, we have to put the subroutines inside the HTML <script> tag:

<script language="vbscript" runat="server">

sub Application_OnStart

' some code

end sub

sub Application_OnEnd

' some code

end sub

sub Session_OnStart

' some code

end sub

sub Session_OnEnd

' some code

end sub

</script>

<object> Declarations

It is also possible to create objects with session or application scope in Global.asa by using the <object> tag. Note: The <object> tag should be outside the <script> tag!

Syntax:

<object runat="server" scope="scope" id="id"

{progid="progID"|classid="classID"}>

.......

</object>

TypeLibrary Declarations

A TypeLibrary is a container for the contents of a DLL file corresponding to a COM object. By including a call to the TypeLibrary in the Global.asa file, the constants of the COM object can be accessed, and errors can be better reported by the ASP code. If your Web application relies on COM objects that have declared data types in type libraries, you can declare the type libraries in Global.asa.

Syntax:

<!--METADATA TYPE="TypeLib"

file="filename"

uuid="typelibraryuuid"

version="versionnumber"

lcid="localeid"

-->

The Session Object

The Session object is used to store information about, or change settings for a user session. Variables stored in the Session object hold information about one single user, and are available to all pages in one application.

Collections

· Contents - Holds every item added to the session with script commands
· StaticObjects - Holds every object added to the session with the <object> tag, and a given session
· Contents.Remove(item/index) - Deletes an item from the Contents collection
· Contents.RemoveAll() - Deletes every item from the Contents collection

Properties

· CodePage - Sets the code page that will be used to display dynamic content
· LCID - Sets the locale identifier that will be used to display dynamic content
· SessionID - Returns the session id
· Timeout - Sets the timeout for the session

Method

· Abandon - Kills every object in a session object

Application Object

A group of ASP files that work together to perform some purpose is called an application. The Application object in ASP is used to tie these files together. All users share one Application object. The Application object should hold information that will be used by many pages in the application (like database connection information).

Collections

· Contents - Holds every item added to the application with script commands
· StaticObjects - Holds every object added to the application with the <object> tag
· Contents.Remove - Deletes an item from a collection
· Contents.RemoveAll - Deletes every item from a collection

Methods

· Lock - Prevents a user from changing the application object properties
· Unlock - Allows a user to change the application object properties

The Response Object

The Response Object is used to send output to the user from the server.

Collection

· Cookies(name) - Sets a cookie value. If the cookie does not exist, it will be created, and take the value that is specified

Properties

· Buffer - Whether to buffer the output or not. When the output is buffered, the server will hold back the response until all of the server scripts have been processed, or until the script calls the Flush or End method. If this property is set, it should be before the <html> tag in the ASP file
· CacheControl - Sets whether proxy servers can cache the output or not. When set to Public, the output can be cached by a proxy server
· Charset(charset_name) - Sets the name of the character set (like "ISO8859-1") to the content type header
· ContentType - Sets the HTTP content type (like "text/html", "image/gif", "image/jpeg", "text/plain"). Default is "text/html"
· Expires - Sets how long a page will be cached on a browser before it expires
· ExpiresAbsolute - Sets a date and time when a page cached on a browser will expire
· IsClientConnected - Checks if the client is still connected to the server
· Pics(pics_label) - Adds a value to the pics label response header
· Status - Specifies the value of the status line

Methods

· AddHeader(name, value) - Adds an HTML header with a specified value
· AppendToLog string - Adds a string to the end of the server log entry
· BinaryWrite(data_to_write) - Writes the given information without any character-set conversion
· Clear - Clears the buffered output. Use this method to handle errors. If Response.Buffer is not set to true, this method will cause a run-time error
· End - Stops processing the script, and return the current result
· Flush - Sends buffered output immediately. If Response.Buffer is not set to true, this method will cause a run-time error
· Redirect(url) - Redirects the user to another url
· Write(data_to_write) - Writes a text to the user

Request Object

When a browser asks for a page from a server, it is called a request. The Request Object is used to get information from the user.

Collection

· ClientCertificate - Holds field values stored in the client certificate
· Cookies(name) - Holds cookie values
· Form(element_name) - Holds form (input) values. The form must use the post method
· QueryString(variable_name) - Holds variable values in the query string
· ServerVariables(server_variable) - Holds server variable values

Property

· TotalBytes - Holds the total number of bytes the client is sending in the body of the request

Method

· BinaryRead - Fetches the data that is sent to the server from the client as part of a post request

Server Object

The Server Object is used to access properties and methods on the server.

Property

· ScriptTimeout - Sets how long a script can run before it is terminated

Method

· CreateObject(type_of_object) - Creates an instance of an object
· Execute(path) - Executes an ASP file from inside another ASP file. After executing the called ASP file, the control is returned to the original ASP file
· GetLastError() - Returns an ASPError object that will describe the error that occurred
· HTMLEncode(string) - Applies HTML encoding to a string
· MapPath(path) - Maps a relative or virtual path to a physical path
· Transfer(path) - Sends all of the state information to another ASP file for processing. After the transfer, procedural control is not returned to the original ASP file
· URLEncode(string) - Applies URL encoding rules to a string

Source : http://www.w3schools.com/asp/asp_quickref.asp


ASP Quiz

You can test your ASP skills with W3Schools' Quiz.

The Test

The test contains 20 questions and there is no time limit.

The test is not official, it's just a nice way to see how much you know, or don't know, about ASP.

Your Score Will be Counted

You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 20 points.

Good luck! ASP Quiz


ASP Read Method

The Read method reads a specified number of characters from a TextStream file and returns the result as a string.

Syntax

TextStreamObject.Read(numchar)

Parameter | Description
numchar | Required. The number of characters to read from the file

Example

<%

dim fs,f,t,x

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.CreateTextFile("c:\test.txt")

f.write("Hello World!")

f.close

set t=fs.OpenTextFile("c:\test.txt",1,false)

x=t.Read(5)

t.close

Response.Write("The first five characters are: " & x)

%>

Output:

The first five characters are: Hello


ASP ReadAll Method

The ReadAll method reads an entire TextStream file and returns the result as a string.

Note: This method is not suitable for large files (it wastes memory resources).

Syntax

TextStreamObject.ReadAll

Example

<%

dim fs,f,t,x

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.CreateTextFile("c:\test.txt")

f.write("Hello World!")

f.close

set t=fs.OpenTextFile("c:\test.txt",1,false)

x=t.ReadAll

t.close

Response.Write("The text in the file is: " & x)

%>

Output:

The text in the file is: Hello World!


ASP ReadLine Method

The ReadLine method reads one line from a TextStream file and returns the result as a string.

Syntax

TextStreamObject.ReadLine

Example

<%

dim fs,f,t,x

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.CreateTextFile("c:\test.txt")

f.writeline("Line 1")

f.writeline("Line 2")

f.writeline("Line 3")

f.close

set t=fs.OpenTextFile("c:\test.txt",1,false)

x=t.ReadLine

t.close

Response.Write("The first line in the file ")

Response.Write("contains this text: " & x)

%>

Output:

The first line in the file contains this text: Line 1


ASP Redirect Method

The Redirect method redirects the user to a different URL.

Syntax

Response.Redirect URL

Parameter | Description
URL | Required. The URL that the user (browser) is redirected to

Examples

<%

Response.Redirect "http://www.w3schools.com"

%>


ASP Remove Method

The Remove method removes one specified key/item pair from the Dictionary object.

Syntax

DictionaryObject.Remove(key)

Parameter | Description
key | Required. The key associated with the key/item pair to remove

Example

<%

dim d,a,i

set d=Server.CreateObject("Scripting.Dictionary")

d.Add "n","Norway"

d.Add "i","Italy"

d.Add "s","Sweden"

d.Remove("n")

Response.Write("<p>Key values:</p>")

a=d.Keys

for i=0 to d.Count-1

Response.Write(a(i))

Response.Write("<br />")

next

set d=nothing

%>

Output:

Key values:

i

s


ASP RemoveAll Method

The Remove method removes all the key/item pairs from a Dictionary object.

Syntax

DictionaryObject.RemoveAll

Example

<%

dim d,a,i

set d=Server.CreateObject("Scripting.Dictionary")

d.Add "n","Norway"

d.Add "i","Italy"

d.Add "s","Sweden"

d.RemoveAll

Response.Write("<p>Key values:</p>")

a=d.Keys

for i=0 to d.Count-1

Response.Write(a(i))

Response.Write("<br />")

next

set d=nothing

%>

Output:

Key values:

(nothing)


ASP Request Object

The ASP Request object is used to get information from the user.

QueryString Collection Examples

Send query information when a user clicks on a link

This example demonstrates how to send some extra query information to a page within a link, and retrieve that information on the destination page (which is, in this example, the same page).

A QueryString collection in its simplest use

This example demonstrates how the QueryString collection retrieves the values from a form. The form uses the GET method, which means that the information sent is visible to everybody (in the address field). The GET method also limits the amount of information that can be sent.

forms

This example demonstrates how to use the values retrieved from a form. We use the QueryString collection. The form uses the get method.

More information from a form

This example demonstrates what the QueryString contains if several input fields have the same name. It shows how to separate input fields with equal names from each other. It also shows how to use the Count keyword to count the "name" property. The form uses the get method.

Form Collection Examples

A form collection in its simplest use

This example demonstrates how the Form collection retrieves the values from a form. The form uses the POST method, which means that the information sent is invisible to others, and it has no limits (you can send a large amount of information).

How to use information from forms

This example demonstrates how to use the values retrieved from a form. We use the Form collection. The form uses the post method.

More information from a form

This example demonstrates what the Form collection contains if several input fields have the same name. It shows how to separate input fields with equal names from each other. It also shows how to use the Count keyword to count the "name" property. The form uses the post method.

A form with radio buttons

This example demonstrates how to interact with the user through radio buttons, with the Form collection. The form uses the post method.

A form with checkboxes

This example demonstrates how to interact with the user through checkboxes, with the Form collection. The form uses the post method.

Other Examples

Get the server variables

This example demonstrates how to find out the visitors (yours) browser type, IP address, and more with the ServerVariables collection.

This example demonstrates how to create a Welcome Cookie with the Cookies Collection.

Find the total number of bytes the user sent

This example demonstrates how to use the TotalBytes property to find out the total number of bytes the user sent in the Request object.

Request Object

When a browser asks for a page from a server, it is called a request. The ASP Request object is used to get information from the user. Its collections, properties, and methods are described below:

Collections

Collection | Description
ClientCertificate | Contains all the field values stored in the client certificate
Cookies | Contains all the cookie values sent in a HTTP request
Form | Contains all the form (input) values from a form that uses the post method
QueryString | Contains all the variable values in a HTTP query string
ServerVariables | Contains all the server variable values

Properties

Property | Description
TotalBytes | Returns the total number of bytes the client sent in the body of the request

Methods

Method | Description
 | Retrieves the data sent to the server from the client as part of a post request and stores it in a safe array


ASP Response Object

The ASP Response object is used to send output to the user from the server.

Examples

Write text with ASP

This example demonstrates how to write text with ASP.

This example demonstrates how to combine text and HTML tags with ASP.

Redirect the user to a different URL

This example demonstrates how to redirect the user to a different URL.

Show a random link

This example demonstrates a link, each time you load the page, it will display one of two links: W3Schools.com! OR Refsnesdata.no! There is a 50% chance for each of them.

Controlling the buffer

This example demonstrates how you can control the buffer.

Clear the buffer

This example demonstrates how you can clear the buffer.

End a script in the middle of processing and return the result

This example demonstrates how to end a script in the middle of processing.

Set how many minutes a page will be cached in a browser before it expires

This example demonstrates how to specify how many minutes a page will be cached in a browser before it expires.

This example demonstrates how to specify a date/time a page cached in a browser will expire.

Check if the user is still connected to the server

This example demonstrates how to check if a user is disconnected from the server.

Set the type of content

This example demonstrates how to specify the type of content.

This example demonstrates how to specify the name of the character set.

Response Object

The ASP Response object is used to send output to the user from the server. Its collections, properties, and methods are described below:

Collections

Collection | Description
 | Sets a cookie value. If the cookie does not exist, it will be created, and take the value that is specified

Properties

Property | Description
Buffer | Specifies whether to buffer the page output or not
CacheControl | Sets whether a proxy server can cache the output generated by ASP or not
Charset | Appends the name of a character-set to the content-type header in the Response object
ContentType | Sets the HTTP content type for the Response object
Expires | Sets how long (in minutes) a page will be cached on a browser before it expires
 | Sets a date and time when a page cached on a browser will expire
IsClientConnected | Indicates if the client has disconnected from the server
Pics | Appends a value to the PICS label response header
Status | Specifies the value of the status line returned by the server

Methods

Method | Description
AddHeader | Adds a new HTTP header and a value to the HTTP response
AppendToLog | Adds a string to the end of the server log entry
BinaryWrite | Writes data directly to the output without any character conversion
Clear | Clears any buffered HTML output
 | Stops processing a script, and returns the current result
Flush | Sends buffered HTML output immediately
Redirect | Redirects the user to a different URL
Write | Writes a specified string to the output


ASP RootFolder Property

The RootFolder property returns a Folder object that represents the root folder of a specified drive.

Syntax

DriveObject.RootFolder

Example

<%

dim fs,d

set fs=Server.CreateObject("Scripting.FileSystemObject")

set d=fs.GetDrive("c:")

Response.Write("The root folder is: " & d.RootFolder)

set d=nothing

set fs=nothing

%>

Output:

The root folder is: C:\


ASP ScriptTimeout Property

The ScriptTimeout property sets or returns the maximum number of seconds a script can run before it is terminated.

Syntax

Server.ScriptTimeout[=NumSeconds]

Parameter | Description
NumSeconds | The maximum number of seconds a script can run before the server terminates it. Default is 90 seconds

Examples

Example 1

Set the script timeout:

<%

Server.ScriptTimeout=200

%>

Example 2

Retrieve the current value of the ScriptTimeout property:

<%

response.write(Server.ScriptTimeout)

%>


ASP Sending e-mail with CDOSYS

CDOSYS is a built-in component in ASP. This component is used to send e-mails with ASP.

Sending e-mail with CDOSYS

CDO (Collaboration Data Objects) is a Microsoft technology that is designed to simplify the creation of messaging applications.

CDOSYS is a built-in component in ASP. We will show you how to use this component to send e-mail with ASP.

How about CDONTs?

Microsoft has discontinued the use of CDONTs on Windows 2000, Windows XP and Windows 2003. If you have used CDONTs in your ASP applications, you should update the code and use the new CDO technology.

Examples using CDOSYS

Sending a text e-mail:

<%

Set myMail=CreateObject("CDO.Message")

myMail.Subject="Sending email with CDO"

myMail.From="mymail@mydomain.com"

myMail.To="someone@somedomain.com"

myMail.TextBody="This is a message."

myMail.Send

set myMail=nothing

%>

Sending a text e-mail with Bcc and CC fields:

<%

Set myMail=CreateObject("CDO.Message")

myMail.Subject="Sending email with CDO"

myMail.From="mymail@mydomain.com"

myMail.To="someone@somedomain.com"

myMail.Bcc="someoneelse@somedomain.com"

myMail.Cc="someoneelse2@somedomain.com"

myMail.TextBody="This is a message."

myMail.Send

set myMail=nothing

%>

Sending an HTML e-mail:

<%

Set myMail=CreateObject("CDO.Message")

myMail.Subject="Sending email with CDO"

myMail.From="mymail@mydomain.com"

myMail.To="someone@somedomain.com"

myMail.HTMLBody = "<h1>This is a message.</h1>"

myMail.Send

set myMail=nothing

%>

Sending an HTML e-mail that sends a webpage from a website:

<%

Set myMail=CreateObject("CDO.Message")

myMail.Subject="Sending email with CDO"

myMail.From="mymail@mydomain.com"

myMail.To="someone@somedomain.com"

myMail.CreateMHTMLBody "http://www.w3schools.com/asp/"

myMail.Send

set myMail=nothing

%>

Sending an HTML e-mail that sends a webpage from a file on your computer:

<%

Set myMail=CreateObject("CDO.Message")

myMail.Subject="Sending email with CDO"

myMail.From="mymail@mydomain.com"

myMail.To="someone@somedomain.com"

myMail.CreateMHTMLBody "file://c:/mydocuments/test.htm"

myMail.Send

set myMail=nothing

%>

Sending a text e-mail with an Attachment:

<%

Set myMail=CreateObject("CDO.Message")

myMail.Subject="Sending email with CDO"

myMail.From="mymail@mydomain.com"

myMail.To="someone@somedomain.com"

myMail.TextBody="This is a message."

myMail.AddAttachment "c:\mydocuments\test.txt"

myMail.Send

set myMail=nothing

%>

Sending a text e-mail using a remote server:

<%

Set myMail=CreateObject("CDO.Message")

myMail.Subject="Sending email with CDO"

myMail.From="mymail@mydomain.com"

myMail.To="someone@somedomain.com"

myMail.TextBody="This is a message."

myMail.Configuration.Fields.Item _

("http://schemas.microsoft.com/cdo/configuration/sendusing")=2

'Name or IP of remote SMTP server

myMail.Configuration.Fields.Item _

("http://schemas.microsoft.com/cdo/configuration/smtpserver") _

="smtp.server.com"

'Server port

myMail.Configuration.Fields.Item _

("http://schemas.microsoft.com/cdo/configuration/smtpserverport") _

=25

myMail.Configuration.Fields.Update

myMail.Send

set myMail=nothing

%>


ASP SerialNumber Property

The SerialNumber property returns the serial number of a specified drive.

Syntax

DriveObject.SerialNumber

Example

<%

dim fs,d

set fs=Server.CreateObject("Scripting.FileSystemObject")

set d=fs.GetDrive("c:")

Response.Write("The serial number is: " & d.SerialNumber)

set d=nothing

set fs=nothing

%>

Output:

The serial number is: 474680516


ASP Server Object

The ASP Server object is used to access properties and methods on the server.

Examples

When was a file last

Checks when this file was last modified.

Open a text file for reading

This example opens the file "Textfile.txt" for reading.

This example reads a number from a file, adds 1 to the number, and writes the number back to the file.

Server Object

The ASP Server object is used to access properties and methods on the server. Its properties and methods are described below:

Properties

Property | Description
ScriptTimeout | Sets or returns the maximum number of seconds a script can run before it is terminated

Methods

Method | Description
CreateObject | Creates an instance of an object
Execute | Executes an ASP file from inside another ASP file
GetLastError() | Returns an ASPError object that describes the error condition that occurred
HTMLEncode | Applies HTML encoding to a specified string
 | Maps a specified path to a physical path
Transfer | Sends (transfers) all the information created in one ASP file to a second ASP file
 | Applies URL encoding rules to a specified string


ASP ServerVariables Collection

The ServerVariables collection is used to retrieve the server variable values.

Syntax

Request.ServerVariables (server_variable)

Parameter | Description
server_variable | Required. The name of the server variable to retrieve

Server Variables

Variable | Description
ALL_HTTP | Returns all HTTP headers sent by the client. Always prefixed with HTTP_ and capitalized
ALL_RAW | Returns all headers in raw form
APPL_MD_PATH | Returns the meta base path for the application for the ISAPI DLL
APPL_PHYSICAL_PATH | Returns the physical path corresponding to the meta base path
AUTH_PASSWORD | Returns the value entered in the client's authentication dialog
AUTH_TYPE | The authentication method that the server uses to validate users
AUTH_USER | Returns the raw authenticated user name
CERT_COOKIE | Returns the unique ID for client certificate as a string
CERT_FLAGS | bit0 is set to 1 if the client certificate is present and bit1 is set to 1 if the cCertification authority of the client certificate is not valid
CERT_ISSUER | Returns the issuer field of the client certificate
CERT_KEYSIZE | Returns the number of bits in Secure Sockets Layer connection key size
CERT_SECRETKEYSIZE | Returns the number of bits in server certificate private key
CERT_SERIALNUMBER | Returns the serial number field of the client certificate
CERT_SERVER_ISSUER | Returns the issuer field of the server certificate
CERT_SERVER_SUBJECT | Returns the subject field of the server certificate
CERT_SUBJECT | Returns the subject field of the client certificate
CONTENT_LENGTH | Returns the length of the content as sent by the client
CONTENT_TYPE | Returns the data type of the content
GATEWAY_INTERFACE | Returns the revision of the CGI specification used by the server
HTTP_<HeaderName> | Returns the value stored in the header HeaderName
HTTP_ACCEPT | Returns the value of the Accept header
HTTP_ACCEPT_LANGUAGE | Returns a string describing the language to use for displaying content
HTTP_COOKIE | Returns the cookie string included with the request
HTTP_REFERER | Returns a string containing the URL of the page that referred the request to the current page using an <a> tag. If the page is redirected, HTTP_REFERER is empty
HTTP_USER_AGENT | Returns a string describing the browser that sent the request
HTTPS | Returns ON if the request came in through secure channel or OFF if the request came in through a non-secure channel
HTTPS_KEYSIZE | Returns the number of bits in Secure Sockets Layer connection key size
HTTPS_SECRETKEYSIZE | Returns the number of bits in server certificate private key
HTTPS_SERVER_ISSUER | Returns the issuer field of the server certificate
HTTPS_SERVER_SUBJECT | Returns the subject field of the server certificate
INSTANCE_ID | The ID for the IIS instance in text format
INSTANCE_META_PATH | The meta base path for the instance of IIS that responds to the request
LOCAL_ADDR | Returns the server address on which the request came in
LOGON_USER | Returns the Windows account that the user is logged into
PATH_INFO | Returns extra path information as given by the client
PATH_TRANSLATED | A translated version of PATH_INFO that takes the path and performs any necessary virtual-to-physical mapping
QUERY_STRING | Returns the query information stored in the string following the question mark (?) in the HTTP request
REMOTE_ADDR | Returns the IP address of the remote host making the request
REMOTE_HOST | Returns the name of the host making the request
REMOTE_USER | Returns an unmapped user-name string sent in by the user
REQUEST_METHOD | Returns the method used to make the request
SCRIPT_NAME | Returns a virtual path to the script being executed
SERVER_NAME | Returns the server's host name, DNS alias, or IP address as it would appear in self-referencing URLs
SERVER_PORT | Returns the port number to which the request was sent
SERVER_PORT_SECURE | Returns a string that contains 0 or 1. If the request is being handled on the secure port, it will be 1. Otherwise, it will be 0
SERVER_PROTOCOL | Returns the name and revision of the request information protocol
SERVER_SOFTWARE | Returns the name and version of the server software that answers the request and runs the gateway
URL | Returns the base portion of the URL

Examples

Example 1

You can loop through all of the server variables like this:

<%

for each x in Request.ServerVariables

response.write(x & "<br />")

next

%>

Example 2

This example demonstrates how to find out the visitor's browser type, IP address, and more:

<html>

<body>

<p>

<b>You are browsing this site with:</b>

<%Response.Write(Request.ServerVariables("http_user_agent"))%>

</p>

<p>

<b>Your IP address is:</b>

<%Response.Write(Request.ServerVariables("remote_addr"))%>

</p>

<p>

<b>The DNS lookup of the IP address is:</b>

<%Response.Write(Request.ServerVariables("remote_host"))%>

</p>

<p>

<b>The method used to call the page:</b>

<%Response.Write(Request.ServerVariables("request_method"))%>

</p>

<p>

<b>The server's domain name:</b>

<%Response.Write(Request.ServerVariables("server_name"))%>

</p>

<p>

<b>The server's port:</b>

<%Response.Write(Request.ServerVariables("server_port"))%>

</p>

<p>

<b>The server's software:</b>

<%Response.Write(Request.ServerVariables("server_software"))%>

</p>

</body>

</html>


ASP Session Object

The Session object is used to store information about, or change settings for a user session. Variables stored in the Session object hold information about one single user, and are available to all pages in one application.

The Session object

When you are working with an application, you open it, do some changes and then you close it. This is much like a Session. The computer knows who you are. It knows when you start the application and when you end. But on the internet there is one problem: the web server does not know who you are and what you do because the HTTP address doesn't maintain state.

ASP solves this problem by creating a unique cookie for each user. The cookie is sent to the client and it contains information that identifies the user. This interface is called the Session object.

The Session object is used to store information about, or change settings for a user session. Variables stored in the Session object hold information about one single user, and are available to all pages in one application. Common information stored in session variables are name, id, and preferences. The server creates a new Session object for each new user, and destroys the Session object when the session expires.

When does a Session Start?

A session starts when:

· A new user requests an ASP file, and the Global.asa file includes a Session_OnStart procedure
· A value is stored in a Session variable
· A user requests an ASP file, and the Global.asa file uses the <object> tag to instantiate an object with session scope

When does a Session End?

A session ends if a user has not requested or refreshed a page in the application for a specified period. By default, this is 20 minutes.

If you want to set a timeout interval that is shorter or longer than the default, you can set the Timeout property.

The example below sets a timeout interval of 5 minutes:

<%

Session.Timeout=5

%>

To end a session immediately, you may use the Abandon method:

<%

Session.Abandon

%>

Note: The main problem with sessions is WHEN they should end. We do not know if the user's last request was the final one or not. So we do not know how long we should keep the session "alive". Waiting too long for an idle session uses up resources on the server, but if the session is deleted too soon the user has to start all over again because the server has deleted all the information. Finding the right timeout interval can be difficult!

Tip: If you are using session variables, store SMALL amounts of data in them.

Store and Retrieve Session Variables

The most important thing about the Session object is that you can store variables in it.

The example below will set the Session variable username to "Donald Duck" and the Session variable age to "50":

<%

Session("username")="Donald Duck"

Session("age")=50

%>

When the value is stored in a session variable it can be reached from ANY page in the ASP application:

Welcome <%Response.Write(Session("username"))%>

The line above returns: "Welcome Donald Duck".

You can also store user preferences in the Session object, and then access that preference to choose what page to return to the user.

The example below specifies a text-only version of the page if the user has a low screen resolution:

<%If Session("screenres")="low" Then%>

This is the text version of the page

<%Else%>

This is the multimedia version of the page

<%End If%>

Remove Session Variables

The Contents collection contains all session variables.

It is possible to remove a session variable with the Remove method.

The example below removes the session variable "sale" if the value of the session variable "age" is lower than 18:

<%

If Session.Contents("age")<18 then

Session.Contents.Remove("sale")

End If

%>

To remove all variables in a session, use the RemoveAll method:

<%

Session.Contents.RemoveAll()

%>

Loop Through the Contents Collection

The Contents collection contains all session variables. You can loop through the Contents collection, to see what's stored in it:

<%

Session("username")="Donald Duck"

Session("age")=50

dim i

For Each i in Session.Contents

Response.Write(i & "<br />")

Next

%>

Result:

username

age

If you do not know the number of items in the Contents collection, you can use the Count property:

<%

dim i

dim j

j=Session.Contents.Count

Response.Write("Session variables: " & j)

For i=1 to j

Response.Write(Session.Contents(i) & "<br />")

Next

%>

Result:

Session variables: 2

Donald Duck

50

Loop Through the StaticObjects Collection

You can loop through the StaticObjects collection, to see the values of all objects stored in the Session object:

<%

dim i

For Each i in Session.StaticObjects

Response.Write(i & "<br />")

Next

%>


ASP Session Object

The Session object is used to store information about, or change settings for a user session. Variables stored in the Session object hold information about one single user, and are available to all pages in one application.

Examples

Set and return the LCID

This example demonstrates the "LCID" property. This property sets or returns an integer that specifies a location or region. Contents like date, time, and currency will be displayed according to that location or region.

Return the SessionID

This example demonstrates the "SessionID" property. This property returns a unique id for each user. The id is generated by the server.

A session's timeout

This example demonstrates the "Timeout" property. This example sets and returns the timeout (in minutes) for the session.

Session Object

When you are working with an application, you open it, do some changes and then you close it. This is much like a Session. The computer knows who you are. It knows when you start the application and when you end. But on the internet there is one problem: the web server does not know who you are and what you do because the HTTP address doesn't maintain state.

ASP solves this problem by creating a unique cookie for each user. The cookie is sent to the client and it contains information that identifies the user. This interface is called the Session object.

The Session object is used to store information about, or change settings for a user session. Variables stored in the Session object hold information about one single user, and are available to all pages in one application. Common information stored in session variables are name, id, and preferences. The server creates a new Session object for each new user, and destroys the Session object when the session expires.

The Session object's collections, properties, methods, and events are described below:

Collections

Collection | Description
Contents | Contains all the items appended to the session through a script command
StaticObjects | Contains all the objects appended to the session with the HTML <object> tag

Properties

Property | Description
CodePage | Specifies the character set that will be used when displaying dynamic content
LCID | Sets or returns an integer that specifies a location or region. Contents like date, time, and currency will be displayed according to that location or region
SessionID | Returns a unique id for each user. The unique id is generated by the server
 | Sets or returns the timeout period (in minutes) for the Session object in this application

Methods

Method | Description
Abandon | Destroys a user session
Contents.Remove | Deletes an item from the Contents collection
 | Deletes all items from the Contents collection

Events

Event | Description
 | Occurs when a session ends
 | Occurs when a session starts


ASP Session_OnStart and Session_OnEnd Events

Session_OnStart Event

The Session_OnStart event occurs when the server creates a session.

This event is placed in the Global.asa file.

Session_OnEnd Event

The Session_OnEnd event occurs when the session ends (abandoned or times out).

This event is placed in the Global.asa file.

Note: The MapPath method cannot be used in the Session_OnEnd code.

Syntax

<script language="vbscript" runat="server">

Sub Session_OnStart

. . .

End Sub

Sub Session_OnEnd

. . .

End Sub

</script>

Examples

Global.asa:

<script language="vbscript" runat="server">

Sub Application_OnEnd()

Application("totvisitors")=Application("visitors")

End Sub

Sub Application_OnStart

Application("visitors")=0

End Sub

Sub Session_OnStart

Application.Lock

Application("visitors")=Application("visitors")+1

Application.UnLock

End Sub

Sub Session_OnEnd

Application.Lock

Application("visitors")=Application("visitors")-1

Application.UnLock

End Sub

</script>

To display the number of current visitors in an ASP file:

<html>

<head>

</head>

<body>

<p>

There are <%response.write(Application("visitors"))%>

online now!

</p>

</body>

</html>


ASP SessionID Property

The SessionID property returns a unique id for each user. The unique id is generated by the server.

Syntax

Session.SessionID

Examples

<%

Response.Write(Session.SessionID)

%>

Output:

772766038


ASP ShareName Property

The ShareName property returns the network share name for a specified drive.

Syntax

DriveObject.ShareName

Example

<%

dim fs,d

set fs=Server.CreateObject("Scripting.FileSystemObject")

set d=fs.GetDrive("c:")

Response.Write("The sharename is: " & d.ShareName)

set d=nothing

set fs=nothing

%>


ASP ShortName Property

The ShortName property is used to return the short name of a specified file or folder (the 8.3 naming convention).

Syntax

FileObject.ShortName

FolderObject.ShortName

Example for the File object

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.GetFile("c:\hitcounterfile.txt"))

Response.Write("Name: " & f.Name)

Response.Write("<br />ShortName: " & f.ShortName)

set f=nothing

set fs=nothing

%>

Output:

Name: hitcounterfile.txt

ShortName: HITCOU~1.TXT

Example for the Folder object

<%

dim fs,fo

set fs=Server.CreateObject("Scripting.FileSystemObject")

set fo=fs.GetFolder("c:\asp_test_web")

Response.Write("Name: " & fo.Name)

Response.Write("<br />ShortName: " & fo.ShortName)

set fo=nothing

set fs=nothing

%>

Output:

Name: asp_test_web

ShortName: ASP_TE~1


ASP ShortPath Property

The ShortPath property is used to return the short path of the specified file or folder (the 8.3 naming convention).

Syntax

FileObject.ShortPath

FolderObject.ShortPath

Example for the File object

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.GetFile("c:\asp_test_web\hitcounterfile.txt")

Response.Write("Path: " & f.Path)

Response.Write("<br />ShortPath: " & f.ShortPath)

set f=nothing

set fs=nothing

%>

Output:

Path: C:\asp_test_web\hitcounterfile.txt

ShortPath: C:\ASP_TE~1\HITCOU~1.TXT

Example for the Folder object

<%

dim fs,fo

set fs=Server.CreateObject("Scripting.FileSystemObject")

set fo=fs.GetFolder("c:\asp_test_web")

Response.Write("Path: " & fo.Path)

Response.Write("<br />ShortPath: " & fo.ShortPath)

set fo=nothing

set fs=nothing

%>

Output:

Path: C:\asp_test_web

ShortPath: C:\ASP_TE~1


ASP Size Property

The Size property is used to return the size, in bytes, of the specified file or folder.

Syntax

FileObject.Size

FolderObject.Size

Example for the File object

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.GetFile("c:\test.asp")

Response.Write("The size of test.asp is: ")

Response.Write(f.Size & " bytes.")

set f=nothing

set fs=nothing

%>

Output:

The size of test.asp is: 10556 bytes.

Example for the Folder object

<%

dim fs,fo

set fs=Server.CreateObject("Scripting.FileSystemObject")

set fo=fs.GetFolder("c:\test")

Response.Write("The size of the folder test is: ")

Response.Write(fo.Size & " bytes.")

set fo=nothing

set fs=nothing

%>

Output:

The size of the folder test is: 123456 bytes.


ASP Skip Method

The Skip method skips a specified number of characters when reading a TextStream file.

Syntax

TextStreamObject.Skip(numchar)

Parameter | Description
numchar | Required. The number of characters to skip

Example

<%

dim fs,f,t,x

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.CreateTextFile("c:\test.txt")

f.write("Hello World!")

f.close

set t=fs.OpenTextFile("c:\test.txt",1,false)

t.Skip(7)

x=t.ReadAll

t.close

Response.Write("The output after skipping some characters: " & x)

%>

Output:

The output after skipping some characters: orld!


ASP SkipLine Method

The SkipLine method skips a line when reading a TextStream file.

Syntax

TextStreamObject.SkipLine

Example

<%

dim fs,f,t,x

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.CreateTextFile("c:\test.txt")

f.writeline("Line 1")

f.writeline("Line 2")

f.writeline("Line 3")

f.close

set t=fs.OpenTextFile("c:\test.txt",1,false)

t.SkipLine

x=t.ReadAll

t.close

Response.Write("Output after skipping the first ")

Response.Write(" line in the file: " & x)

%>

Output:

Output after skipping the first line in the file: Line 2

Line 3


ASP StaticObjects Collection

The StaticObjects collection contains all the objects appended to the application/session with the HTML <object> tag.

Syntax

Application.StaticObjects(Key)

Session.StaticObjects(Key)

Parameter | Description
key | Required. The name of the item to retrieve

Examples for the Application Object

Example 1

To loop through the StaticObjects collection:

<%

for each x in Application.StaticObjects

Response.Write(x & "<br />")

next

%>

Example 2

In Global.asa:

<object runat="server" scope="application"

id="MsgBoard" progid="msgboard.MsgBoard">

</object>

<object runat="server" scope="application"

id="AdRot" progid="MSWC.AdRotator">

</object>

In an ASP file:

<%

for each x in Application.StaticObjects

Response.Write(x & "<br />")

next

%>

Output:

MsgBoard

AdRot

Examples for the Session Object

Example 1

To loop through the StaticObjects collection:

<%

for each x in Session.StaticObjects

Response.Write(x & "<br />")

next

%>

Example 2

In Global.asa:

<object runat="server" scope="session"

id="MsgBoard" progid="msgboard.MsgBoard">

</object>

<object runat="server" scope="session"

id="AdRot" progid="MSWC.AdRotator">

</object>

In an ASP file:

<%

for each x in Session.StaticObjects

Response.Write(x & "<br />")

next

%>

Output:

MsgBoard

AdRot


ASP Status Property

The Status property specifies the value of the status line returned by the server.

Tip: Use this property to modify the status line returned by the server.

Syntax

response.Status=statusdescription

Parameter | Description
statusdescription | A three-digit number and a description of that code, like 404 Not Found Note: Status values are defined in the HTTP specification.

Examples

<%

ip=request.ServerVariables("REMOTE_ADDR")

if ip<>"194.248.333.500" then

response.Status="401 Unauthorized"

response.Write(response.Status)

response.End

end if

%>


ASP SubFolders Collection

The SubFolders collection returns a collection of all subfolders in a specified folder.

Syntax

FolderObject.SubFolders

Example

<%

dim fs,fo,x

set fs=Server.CreateObject("Scripting.FileSystemObject")

set fo=fs.GetFolder("c:\test\")

for each x in fo.SubFolders

'Print the name of all subfolders in the test folder

Response.write(x.Name & "<br />")

next

set fo=nothing

set fs=nothing

%>

Output:

html

css

asp

vbscript


ASP Summary

You Have Learned ASP, Now What?

 Top Previous Next

ASP Summary

This tutorial has taught you how to add server-side scripts to your web site, to make your web site more dynamic and interactive.

You have learned how to dynamically edit, change or add any content of a web page, respond to 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.

For more information on ASP, please look at our ASP examples.

Now You Know ASP, What's Next?

The next step is to learn SQL and ADO.

SQL

SQL is a 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, and other database systems.

If you want to learn more about SQL, please visit our .

ADO

ADO is a programming interface to access data in a database from a web site.

ADO uses SQL to query data in a database.

If you want to learn more about ADO, please visit our ADO tutorial.


ASP Syntax

You cannot view the ASP source code by selecting "View source" in a browser, you will only see the output from the ASP file, which is plain HTML. This is because the scripts are executed on the server before the result is sent back to the browser.

In our ASP tutorial, every example displays the hidden ASP source code. This will make it easier for you to understand how it works.

Examples

Write text with ASP

How to write some text with ASP.

Add some HTML to the text

How to format the text with HTML tags.

The Basic Syntax Rule

An ASP file normally contains HTML tags, just like an HTML file. However, an ASP file can also contain server scripts, surrounded by the delimiters <% and %>. Server scripts are executed on the server, and can contain any expressions, statements, procedures, or operators valid for the scripting language you prefer to use.

Write Output to a Browser

The response.write command is used to write output to a browser. The following example sends the text "Hello World" to the browser:

<html>

<body>

<%

response.write("Hello World!")

%>

</body>

</html>

There is also a shorthand method for the response.write command. The following example also sends the text "Hello World" to the browser:

<html>

<body>

<%="Hello World!"%>

</body>

</html>

VBScript

You can use several scripting languages in ASP. However, the default scripting language is VBScript:

<html>

<body>

<%

response.write("Hello World!")

%>

</body>

</html>

The example above writes "Hello World!" into the body of the document.

JavaScript

To set JavaScript as the default scripting language for a particular page you must insert a language specification at the top of the page:

<%@ language="javascript"%>

<html>

<body>

<%

Response.Write("Hello World!")

%>

</body>

</html>

Note: Unlike VBScript - JavaScript is case sensitive. You will have to write your ASP code with uppercase letters and lowercase letters when the language requires it.

Other Scripting Languages

ASP is shipped with VBScript and JScript (Microsoft's implementation of JavaScript). If you want to script in another language, like PERL, REXX, or Python, you will have to install script engines for them.

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 TextStream Object

The TextStream object is used to access the contents of a text file.

Examples

Read textfile

This example demonstrates how to use the OpenTextFile method of the FileSystemObject to create a TextStream Object. The ReadAll method of the TextStream Object reads from the opened text file.

Read only a part of

This example demonstrates how to only read a part of a TextStream file.

This example demonstrates how to read one line from a TextStream file.

Read all lines from a textfile

This example demonstrates how to read all the lines from a TextStream file.

This example demonstrates how to skip a specified number of characters when reading the TextStream file.

Skip a line of a textfile

This example demonstrates how to skip a line when reading the TextStream file.

Return line-number

This example demonstrates how to return the current line number in a TextStream file.

Get column number

This example demonstrates how to get the column number of the current character in a file.

The TextStream Object

The TextStream object is used to access the contents of text files.

The following code creates a text file (c:\test.txt) and then writes some text to the file (the variable f is an instance of the TextStream object):

<%

dim fs, f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.CreateTextFile("c:\test.txt",true)

f.WriteLine("Hello World!")

f.Close

set f=nothing

set fs=nothing

%>

To create an instance of the TextStream object you can use the CreateTextFile or OpenTextFile methods of the FileSystemObject object, or you can use the OpenAsTextStream method of the File object.

The TextStream object's properties and methods are described below:

Properties

Property | Description
AtEndOfLine | Returns true if the file pointer is positioned immediately before the end-of-line marker in a TextStream file, and false if not
 | Returns true if the file pointer is at the end of a TextStream file, and false if not
Column | Returns the column number of the current character position in an input stream
Line | Returns the current line number in a TextStream file

Methods

Method | Description
 | Closes an open TextStream file
Read | Reads a specified number of characters from a TextStream file and returns the result
ReadAll | Reads an entire TextStream file and returns the result
 | Reads one line from a TextStream file and returns the result
Skip | Skips a specified number of characters when reading a TextStream file
SkipLine | Skips the next line when reading a TextStream file
Write | Writes a specified text to a TextStream file
WriteLine | Writes a specified text and a new-line character to a TextStream file
WriteBlankLines | Writes a specified number of new-line character to a TextStream file


ASP Timeout Property

The Timeout property sets or returns the timeout period for the Session object for this application, in minutes. If the user does not refresh or request a page within the timeout period, the session will end.

Syntax

Session.Timeout[=nMinutes]

Parameter | Description
nMinutes | The number of minutes a session can remain idle before the server terminates it. Default is 20 minutes

Examples

<%

response.write("<p>")

response.write("Default Timeout is: " & Session.Timeout)

response.write("</p>")

Session.Timeout=30

response.write("<p>")

response.write("Timeout is now: " & Session.Timeout)

response.write("</p>")

%>

Output:

Default Timeout is: 20

Timeout is now: 30


ASP TotalBytes Property

The TotalBytes property is a read-only property that returns the total number of bytes the client sent in the body of the request.

Syntax

varbytes=Request.Totalbytes

Example

The following code sets the variable a equal to the total number of bytes sent in the body of the request:

<%

dim a

a=Request.TotalBytes

%>


ASP TotalSize Property

The TotalSize property returns the total size, in bytes, of a specified drive or network share.

Syntax

DriveObject.TotalSize

Example

<%

dim fs,d

set fs=Server.CreateObject("Scripting.FileSystemObject")

set d=fs.GetDrive("c:")

Response.Write("The total size in bytes is: " & d.TotalSize)

set d=nothing

set fs=nothing

%>

Output:

The total size in bytes is: 4293563392


ASP Transfer Method

The Transfer method sends (transfers) all the state information (all application/session variables and all items in the request collections) created in one ASP file to a second ASP file.

When the second ASP page completes its tasks, it will NOT return to the first ASP page (like the Execute method).

Note: The Transfer method is an efficient alternate for the Response.Redirect. A redirect forces the Web server to handle an extra request while the Server.Transfer method transfers execution to a different ASP page on the server, and avoids the extra round trip.

Syntax

Server.Transfer(path)

Parameter | Description
path | Required. The location of the ASP file to which control should be transferred

Example

File1.asp:

<%

response.write("Line 1 in File 1<br />")

Server.Transfer("file2.asp")

response.write("Line 2 in File 1<br />")

%>

File2.asp:

<%

response.write("Line 1 in File 2<br />")

response.write("Line 2 in File 2<br />")

%>

Output:

Line 1 in File 1

Line 1 in File 2

Line 2 in File 2

Also look at the Server.Execute method to see the difference between the Server.Transfer and Server.Execute methods.


ASP Tutorial

ASP Tutorial

asp4

In our ASP tutorial you will learn about ASP, and how to execute scripts on your server.

You will see that ASP is a powerful tool for making dynamic and interactive Web pages.

Start learning ASP!

ASP References

At W3Schools you will find complete ASP references about built-in objects and components, and their properties and methods.

ASP

ASP Examples

Learn by 100 examples! Because ASP scripts are executed on the server, you can not view ASP code in a browser, you will only see the output from ASP which is plain HTML. At W3Schools every example displays the hidden ASP code. This will make it easier for you to understand how it works.

ASP Examples!

ASP Quiz Test

Test your ASP skills at W3Schools!

Start ASP quiz!

ASP 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 ASP Developer Certificate is for developers who want to document their knowledge of ASP, SQL, and ADO.

ASP Developer Certificate!


ASP Type Property

The Type property is used to return the type of the specified file or folder.

Syntax

FileObject.Type

FolderObject.Type

Examples for the File object

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.GetFile("c:test.txt")

Response.Write("The file test.txt is of type: ")

Response.Write(f.Type)

set f=nothing

set fs=nothing

%>

Output:

The file test.txt is of type: Text Document

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.GetFile("c:test.asp")

Response.Write("The file test.asp is of type: ")

Response.Write(f.Type)

set f=nothing

set fs=nothing

%>

Output:

The file test.asp is of type: Active Server Document

Example for the Folder object

<%

dim fs,fo

set fs=Server.CreateObject("Scripting.FileSystemObject")

set fo=fs.GetFolder("c:\test")

Response.Write("The folder test is of type: ")

Response.Write(fo.Type)

set fo=nothing

set fs=nothing

%>

Output:

The folder test is of type: File Folder


ASP URLEncode Method

The URLEncode method applies URL encoding rules to a specified string.

Syntax

Server.URLEncode(string)

Parameter | Description
string | Required. The string to encode

Example

<%

response.write(Server.URLEncode("http://www.w3schools.com"))

%>

Output:

http%3A%2F%2Fwww%2Ew3schools%2Ecom


ASP Variables

A variable is used to store information.

If the variable is declared outside a procedure it can be changed by any script in the ASP file. If the variable is declared inside a procedure, it is created and destroyed every time the procedure is executed.

Examples

Declare a variable

Variables are used to store information. This example demonstrates how to declare a variable, assign a value to it, and use the value in a text.

Declare an array

Arrays are used to store a series of related data items. This example demonstrates how to declare an array that stores names.

Loop through the HTML headers

How to loop through the six headers in HTML.

Time-based greeting using VBScript

This example will display a different message to the user depending on the time on the server.

Time-based greeting using JavaScript

This example is the same as the one above, but the syntax is different.

Lifetime of Variables

A variable declared outside a procedure can be accessed and changed by any script in the ASP file.

A variable declared inside a procedure is created and destroyed every time the procedure is executed. No scripts outside the procedure can access or change the variable.

To declare variables accessible to more than one ASP file, declare them as session variables or application variables.

Session Variables

Session variables are used to store information about ONE single user, and are available to all pages in one application. Typically information stored in session variables are name, id, and preferences.

Application Variables

Application variables are also available to all pages in one application. Application variables are used to store information about ALL users in a specific application.


ASP VolumeName Property

The VolumeName property sets or returns the volume name of a specified drive.

Syntax

DriveObject.VolumeName[=newname]

Parameter | Description
newname | Optional. Sets the new name of the specified drive

Example

<%

dim fs,d

set fs=Server.CreateObject("Scripting.FileSystemObject")

set d=fs.GetDrive("c:")

Response.Write("The volume name is: " & d.VolumeName)

set d=nothing

set fs=nothing

%>


ASP Write Method

The Write method writes a specified string to the output.

Syntax

Response.Write variant

Parameter | Description
variant | Required. The data to write

Examples

Example 1

<%

Response.Write "Hello World"

%>

Output:

Hello World

Example 2

<%

name="John"

Response.Write(name)

%>

Output:

John

Example 3

<%

Response.Write("Hello<br />World")

%>

Output:

Hello

World


ASP Write Method

The Write method writes a specified text to a TextStream file.

Note: This method write text to the TextStream file with no spaces or line breaks between each string.

Syntax

TextStreamObject.Write(text)

Parameter | Description
text | Required. The text to write to the file

Example

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.CreateTextFile("c:\test.txt",true)

f.write("Hello World!")

f.write("How are you today?")

f.close

set f=nothing

set fs=nothing

%>

The file test.txt will look like this after executing the code above:

Hello World!How are you today?


ASP WriteBlankLines Method

The WriteBlankLines method writes a specified number of new-line characters to a TextStream file.

Syntax

TextStreamObject.WriteBlankLines(numlines)

Parameter | Description
numlines | Required. The number of new-line characters to write to the file

Example

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.CreateTextFile("c:\test.txt",true)

f.WriteLine("Hello World!")

f.WriteBlankLines(2)

f.WriteLine("How are you today?")

f.close

set f=nothing

set fs=nothing

%>

The file test.txt will look like this after executing the code above:

Hello World!

How are you today?


ASP WriteLine Method

The WriteLine method writes a specified text and a new-line character to a TextStream file.

Syntax

TextStreamObject.WriteLine(text)

Parameter | Description
text | Optional. The text to write to the file. If you do not specify this parameter, a new-line character will be written to the file

Example

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.CreateTextFile("c:\test.txt",true)

f.WriteLine("Hello World!")

f.WriteLine("How are you today?")

f.WriteLine("Goodbye!")

f.close

set f=nothing

set fs=nothing

%>

The file test.txt will look like this after executing the code above:

Hello World!

How are you today?

Goodbye!


demo_adrotator.html

NOTE: Because images are changed randomly, and because this page has few images to choose from, it will often display the same advertisement twice in a row.


demo_adrotator2.html

NOTE: Because images are changed randomly, and because this page has few images to choose from, it will often display the same advertisement twice in a row.


demo_adrotator3b2e.html

NOTE: Because images are changed randomly, and because this page has few images to choose from, it will often display the same advertisement twice in a row.


demo_adrotatore0c1.html

NOTE: Because images are changed randomly, and because this page has few images to choose from, it will often display the same advertisement twice in a row.


demo_array.html

Jan Egil

Tove

Hege

Stale

Kai Jim

Borge


demo_asp_3000.html

Countdown to year 3000:

It is 993 years to year 3000!

It is 11915 months to year 3000!

It is 51804 weeks to year 3000!

It is 362629 days to year 3000!

It is 8703093 hours to year 3000!

It is 522185561 minutes to year 3000!

It is 31331133648 seconds to year 3000!


demo_asp_date.html

Today's date is: 27/02/2007.

The server's local time is: 03:19:05.


demo_asp_dateadd.html

29/03/2007

Syntax for DateAdd: DateAdd(interval,number,date). You can use DateAdd to for example calculate a date 30 days from today.


demo_asp_day.html

VBScripts' function WeekdayName is used to get a weekday:

Sunday

Monday

Abbreviated name of a weekday:

Sun

Mon

Current weekday:

Tuesday

Tue


demo_asp_formatdatetime.html

27/02/2007

27 February 2007

27/02/2007

03:19:24

03:19

Syntax for FormatDateTime: FormatDateTime(date,namedformat).


demo_asp_isdate.html

True


demo_asp_mid.html

to


demo_asp_month.html

Today it is Tuesday,

and the month is February


demo_asp_monthname.html

VBScripts' function MonthName is used to get a month:

January

February

Abbreviated name of a month:

Jan

Feb

Current month:

February

Feb


demo_asp_replace.html

Welcome to this Page!!


demo_asp_right.html

Welco

s Web


demo_asp_rnd.html

0.1443903


demo_asp_round.html

49

48


demo_asp_strreverse.html

!enoyrevE olleH


demo_asp_trim.html

visit W3Schools now

visitW3Schoolsnow

visitW3Schools now

visit W3Schoolsnow


demo_asp_ucase.html

BILL GATES

bill gates


demo_attributes.html

The attributes of the file testread.txt are: 0


demo_availablespace.html

Drive: C:

Available Space in bytes: 884465152


demo_browsercap.html

Client OS | unknown
Web Browser | Default
Browser version | 0.0
Frame support? | False
Table support? | True
Sound support? | False
Cookies support? | False
VBScript support? | False
JavaScript support? | False


demo_buffer.html

This text will be sent to your browser when my response buffer is flushed.


demo_bufferclear.html


demo_charset.html

This is some text


demo_checkboxes.html

Which of these fruits do you prefer:

[TCheckBoxFormControlObj] Apple

[TCheckBoxFormControlObj] Orange

[TCheckBoxFormControlObj] Banana


demo_column.html

He

The cursor is now standing in position 3 in the text file.


demo_contentlinking.html

The example below builds a table of contents.

· ASP Intro
· ASP Syntax
· ASP Variables
· ASP Procedures

The text file contains a list of page urls and link descriptions. It contains one line of text for each page. Note that the url and description MUST be separated by the TAB character.


demo_contentlinking2.html

This is page 1!

 Top Previous Next

Next Page

The example uses the Content Linking Component to navigate between the pages in a text file.


demo_contentrotator.html

Note: This example won't work because ASP 3.0 is not installed on our server.

Here's a link.

NOTE: Because the content strings are changed randomly in the text file, and this page has only four content strings to choose from, sometimes the page will display the same content strings twice in a row.


demo_contenttype.html

This is some text


demo_cookies.html


demo_count.html

The number of key/item pairs is: 2


demo_datecreated.html

The file testread.txt was created on: 12/09/2006 06:41:08


demo_datelastaccessed.html

The file testread.txt was last accessed on: 27/02/2007 02:42:13


demo_datelastmodified.html

The file testread.txt was last modified on: 12/09/2006 06:41:08


demo_driveexists.html

Drive c: exists.

Drive g: does not exist.


demo_driveletter.html

The drive letter is: C


demo_drivetype.html

The drive type is: 2


demo_end.html

I am writing some text. This text will never be


demo_exists.html

Key exists.


demo_expires.html

This page will be refreshed with each access!


demo_expiresabs.html

This page will expire on May 05, 2001 05:30:30!


demo_fileexists.html

File c:\winnt\cursors\3dgarro.cur exists.


demo_filesystem.html

The file system is: NTFS


demo_folderexists.html

Folder c:\temp exists.


demo_form2.html

First name: [TEditFormControlObj]

Last name: [TEditFormControlObj]

The information received from the form above was:


demo_formatting.html

You can use HTML tags to format the text!

This text is styled with the style attribute!


demo_fornext2.html

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6


demo_freespace.html

Drive: C:

Free Space in bytes: 884465664


demo_getbasename.html

3dgarro

cursors

winnt


demo_getdrivename.html

The drive name is: c:


demo_getextensionname.html

The file extension of the file 3dgarro is: cur


demo_getfilename.html

The file name of the last component is: 3dgarro.cur


demo_getparentfoldername.html

The parent folder name of c:\winnt\cursors\3dgarro.cur is: c:\winnt\cursors


demo_gettimeout.html

Default Timeout is: 10 minutes.

Timeout is now: 30 minutes.


demo_hitcounter.html

This page has been visited 12345 times.


demo_isclientconnected.html

The user is still connected!


demo_isready.html

The C drive is ready.


demo_item.html

The value of the item n is: Norway


demo_items.html

The values of the items are:

Norway

Italy


demo_jsproc.html

Result: 12


demo_jstime.html

Tue Feb 27 03:11:27 EST 2007 (Norwegian Time)

Good Morning!


demo_key.html

The key i has been set to it, and the value is: Italy


demo_keys.html

The value of the keys are:

n

i


demo_lastmodified.html

This file was last modified on: 12/09/2006 06:40:45


demo_lcid.html

The default LCID for this page is: 1033

The Date format for the above LCID is: 2/27/2007

The Currency format for the above LCID is: $350.00

The LCID is now changed to: 1036

The Date format for the above LCID is: 27/02/2007

The Currency format for the above LCID is: 350,00 €

The LCID is now changed to: 3079

The Date format for the above LCID is: 27.02.2007

The Currency format for the above LCID is: € 350,00

The LCID is now changed to: 2057

The Date format for the above LCID is: 27/02/2007

The Currency format for the above LCID is: £350.00


demo_line.html

This is all the lines in the text file (with line numbers):

Line:1 Hello!

Line:2 How are you today?


demo_path.html

The path is C:


demo_radiob.html

Please select your favorite car:

[TRadioButtonFormControlObj]Volvo

[TRadioButtonFormControlObj]Saab

[TRadioButtonFormControlObj]BMW


demo_randomlink.html

W3Schools.com!

This example demonstrates a link, each time you load the page, it will display one of two links: W3Schools.com! OR Refsnesdata.no! There is a 50% chance for each of them.


demo_readline.html

This is the first line of the text file:

Hello!


demo_readlines.html

This is all the lines in the text file:

Hello!

How are you today?


demo_readpartoftextfile.html

This is the first five characters from the text file:

Hello


demo_readtextfile.html

This is the text in the text file:

Hello! How are you today?


demo_redirect.html

[TRadioButtonFormControlObj] Server Example

[TRadioButtonFormControlObj] Text Example


demo_reqquery.html

Your name: [TEditFormControlObj]


demo_reqquery2.html

First name: [TEditFormControlObj]

Last name: [TEditFormControlObj]


demo_rootfolder.html

The rootfolder is C:\


demo_serialnumber.html

The serialnumber is 474680516


demo_server.html

You are browsing this site with: Mozilla/4.5 (compatible; HTTrack 3.0x; Windows 98)

Your IP address is: 121.247.163.105

The DNS lookup of the IP address is: 121.247.163.105

The method used to call the page: GET

The server's domain name: www.w3schools.com

The server's port: 80

The server's software: Microsoft-IIS/6.0


demo_servervariables.html

All possible server variables:

ALL_HTTP

ALL_RAW

APPL_MD_PATH

APPL_PHYSICAL_PATH

AUTH_PASSWORD

AUTH_TYPE

AUTH_USER

CERT_COOKIE

CERT_FLAGS

CERT_ISSUER

CERT_KEYSIZE

CERT_SECRETKEYSIZE

CERT_SERIALNUMBER

CERT_SERVER_ISSUER

CERT_SERVER_SUBJECT

CERT_SUBJECT

CONTENT_LENGTH

CONTENT_TYPE

GATEWAY_INTERFACE

HTTPS

HTTPS_KEYSIZE

HTTPS_SECRETKEYSIZE

HTTPS_SERVER_ISSUER

HTTPS_SERVER_SUBJECT

INSTANCE_ID

INSTANCE_META_PATH

LOCAL_ADDR

LOGON_USER

PATH_INFO

PATH_TRANSLATED

QUERY_STRING

REMOTE_ADDR

REMOTE_HOST

REMOTE_USER

REQUEST_METHOD

SCRIPT_NAME

SERVER_NAME

SERVER_PORT

SERVER_PORT_SECURE

SERVER_PROTOCOL

SERVER_SOFTWARE

URL

HTTP_CONNECTION

HTTP_ACCEPT

HTTP_ACCEPT_CHARSET

HTTP_ACCEPT_ENCODING

HTTP_ACCEPT_LANGUAGE

HTTP_COOKIE

HTTP_HOST

HTTP_USER_AGENT


demo_sessionid.html

517986751


demo_simpleform.html

Your name: [TEditFormControlObj]


demo_simpleform1.html

First name: [TEditFormControlObj]

Last name: [TEditFormControlObj]


demo_simplequerystring.html

Example


demo_simplequerystring779e.html

Example color=green


demo_simplereqquery.html

First name: [TEditFormControlObj]

Last name: [TEditFormControlObj]


demo_skip.html

The first four characters in the text file are skipped:

o! How are you today?


demo_text.html

Hello World!


demo_textads.html

Smile

%% #1 This is a great day!! %% #2

%% #3 smiley %% #4 Here's a link.


demo_textstream.html

Hello World line 1

Hello World line 2

Hello World line 3


demo_totalbytes.html

Please type something: [TEditFormControlObj]


demo_totalsize.html

Drive: C:

Total size in bytes: 4293563392


demo_variable.html

My name is: Donald Duck


demo_vbproc.html

You can call a procedure like this:

Result: 12

Or, like this:

Result: 12


demo_vbproc2.html

Result: 12

Result: 12


demo_vbtime.html

2/27/2007 3:11:25 AM (Norwegian Time)

Good Morning!


showcode0000.html

<html>

<body>

<%

somedate="10/30/99"

response.write(IsDate(somedate))

%>

</body>

</html>


showcode06a2.html

<html>

<body>

<%

response.write("Hello World!")

%>

</body>

</html>


showcode06f0.html

<html>

<body>

<%

Dim fs, d, n

Set fs=Server.CreateObject("Scripting.FileSystemObject")

Set d=fs.GetDrive("c:")

n = "Drive: " & d

n = n & "<br>Available Space in bytes: " & d.AvailableSpace

Response.Write(n)

set d=nothing

set fs=nothing

%>

</body>

</html>


showcode074d.html

<html>

<body>

<p>This is the text in the text file:</p>

<%

Set fs=Server.CreateObject("Scripting.FileSystemObject")

Set f=fs.OpenTextFile(Server.MapPath("testread.txt"), 1)

Response.Write(f.ReadAll)

f.Close

Set f=Nothing

Set fs=Nothing

%>

</body>

</html>


showcode075a.html

<html>

<body>

<%

dim d,a,i,s

set d=Server.CreateObject("Scripting.Dictionary")

d.Add "n", "Norway"

d.Add "i", "Italy"

Response.Write("<p>The value of the keys are:</p>")

a=d.Keys

for i = 0 To d.Count -1

s = s & a(i) & "<br>"

next

Response.Write(s)

set d=nothing

%>

</body>

</html>


showcode0898.html

<%

Response.ExpiresAbsolute=#May 05,2001 05:30:30#

%>

<html>

<body>

<p>This page will expire on May 05, 2001 05:30:30!</p>

</body>

</html>


showcode0b85.html

<html>

<body>

<form action="demo_simpleform1.asp" method="post">

First name:

<input type="text" name="fname" value="Donald" />

<br />

Last name:

<input type="text" name="lname" value="Duck" />

<br />

<input type="submit" value="Submit" />

</form>

<%

Response.Write(Request.Form)

%>

</body>

</html>


showcode0fbc.html

<html>

<body>

<%

dim d,a,i,s

set d=Server.CreateObject("Scripting.Dictionary")

d.Add "n", "Norway"

d.Add "i", "Italy"

Response.Write("<p>The values of the items are:</p>")

a=d.Items

for i = 0 To d.Count -1

s = s & a(i) & "<br>"

next

Response.Write(s)

set d=nothing

%>

</body>

</html>


showcode128a.html

<html>

<body>

<%

set adrotator=Server.CreateObject("MSWC.AdRotator")

adrotator.Border="2"

Response.Write(adrotator.GetAdvertisement("text/advertisements.txt"))

%>

<p>

NOTE: Because images are changed randomly, and because this page has few images to choose from, it will often display the same advertisement twice in a row.

</p>

<p>

<a href="text/advertisements.txt">

<img border="0" src="/images/btn_view_text.gif">

</a>

</p>

</body>

</html>


showcode158d.html

<html>

<body>

<%

Set fs=Server.CreateObject("Scripting.FileSystemObject")

p=fs.GetParentFolderName("c:\winnt\cursors\3dgarro.cur")

Response.Write("The parent folder name of c:\winnt\cursors\3dgarro.cur is: " & p)

set fs=nothing

%>

</body>

</html>


showcode1998.html

<html>

<body>

<form action="demo_simpleform.asp" method="post">

Your name: <input type="text" name="fname" size="20" />

<input type="submit" value="Submit" />

</form>

<%

dim fname

fname=Request.Form("fname")

If fname<>"" Then

Response.Write("Hello " & fname & "!<br />")

Response.Write("How are you today?")

End If

%>

</body>

</html>


showcode1d86.html

<html>

<body>

<%

response.write(DateAdd("d",30,date()))

%>

<p>

Syntax for DateAdd: DateAdd(interval,number,date). You can use <b>DateAdd</b> to for example calculate a date 30 days from today.

</p>

</body>

</html>


showcode1efa.html

<html>

<body>

<p>The first four characters in the text file are skipped:</p>

<%

Set fs=Server.CreateObject("Scripting.FileSystemObject")

Set f=fs.OpenTextFile(Server.MapPath("testread.txt"), 1)

f.Skip(4)

Response.Write(f.ReadAll)

f.Close

Set f=Nothing

Set fs=Nothing

%>

</body>

</html>


showcode20e6.html

<html>

<body>

<p>This is all the lines in the text file (with line numbers):</p>

<%

Set fs=Server.CreateObject("Scripting.FileSystemObject")

Set f=fs.OpenTextFile(Server.MapPath("testread.txt"), 1)

do while f.AtEndOfStream = false

Response.Write("Line:" & f.Line & " ")

Response.Write(f.ReadLine)

Response.Write("<br>")

loop

f.Close

Set f=Nothing

Set fs=Nothing

%>

</body>

</html>


showcode2234.html

<html>

<body>

<p>

All possible server variables:

</p>

<%

For Each Item in Request.ServerVariables

Response.Write(Item & "<br />")

Next

%>

</body>

</html>


showcode2261.html

<html>

<body>

<%

Dim famname(6),i

famname(1) = "Jan Egil"

famname(2) = "Tove"

famname(3) = "Hege"

famname(4) = "Stale"

famname(5) = "Kai Jim"

famname(6) = "Borge"

For i = 1 to 6

response.write(famname(i) & "<br />")

Next

%>

</body>

</html>


showcode22b9.html

<html>

<body>

<%

dim d

set d=Server.CreateObject("Scripting.Dictionary")

d.Add "n", "Norway"

d.Add "i", "Italy"

d.Key("i") = "it"

Response.Write("The key i has been set to it, and the value is: " & d.Item("it"))

set d=nothing

%>

</body>

</html>


showcode2306.html

<html>

<body>

<%

Set fs=Server.CreateObject("Scripting.FileSystemObject")

Response.Write("The file name of the last component is: ")

Response.Write(fs.GetFileName("c:\winnt\cursors\3dgarro.cur"))

set fs=nothing

%>

</body>

</html>


showcode269b.html

<%

dim numvisits

response.cookies("NumVisits").Expires=date+365

numvisits=request.cookies("NumVisits")

if numvisits="" then

response.cookies("NumVisits")=1

response.write("Welcome! This is the first time you are visiting this Web page.")

else

response.cookies("NumVisits")=numvisits+1

response.write("You have visited this ")

response.write("Web page " & numvisits)

if numvisits=1 then

response.write " time before!"

else

response.write " times before!"

end if

end if

%>

<html>

<body>

</body>

</html>


showcode2733.html

<html>

<body>

<form action="demo_reqquery.asp" method="get">

Your name: <input type="text" name="fname" size="20" />

<input type="submit" value="Submit" />

</form>

<%

dim fname

fname=Request.QueryString("fname")

If fname<>"" Then

Response.Write("Hello " & fname & "!<br />")

Response.Write("How are you today?")

End If

%>

</body>

</html>


showcode2ac2.html

<%

url=Request.QueryString("url")

If url<>"" then Response.Redirect(url)

%>

<html>

<body>

<%

set adrotator=Server.CreateObject("MSWC.AdRotator")

adrotator.TargetFrame="target='_blank'"

response.write(adrotator.GetAdvertisement("text/advertisements2.txt"))

%>

<p>

NOTE: Because images are changed randomly, and because this page has few images to choose from, it will

often display the same advertisement twice in a row.

</p>

<p>

<a href="text/advertisements2.txt">

<img border="0" src="/images/btn_view_text.gif"></a>

</p>

</body>

</html>


showcode30d2.html

<html>

<body>

<%

dim fs,d

set fs=Server.CreateObject("Scripting.FileSystemObject")

set d=fs.GetDrive("c:")

Response.Write("The serialnumber is " & d.SerialNumber)

set d=nothing

set fs=nothing

%>

</body>

</html>


showcode31cf.html

<html>

<body>

<%

Set FS = Server.CreateObject("Scripting.FileSystemObject")

Set RS = FS.OpenTextFile(Server.MapPath("text") & "\TextFile.txt",1)

While not rs.AtEndOfStream

Response.Write RS.ReadLine

Response.Write("<br />")

Wend

%>

<p>

<a href="text/textfile.txt"><img border="0" src="/images/btn_view_text.gif"></a>

</p>

</body>

</html>


showcode31df.html

<%@ language="javascript" %>

<html>

<head>

<%

function jsproc(num1,num2)

{

Response.Write(num1*num2)

}

%>

</head>

<body>

<p>

Result: <%jsproc(3,4)%>

</p>

</body>

</html>


showcode3496.html

<html>

<body>

<p>The first line in the text file is skipped:</p>

<%

Set fs=Server.CreateObject("Scripting.FileSystemObject")

Set f=fs.OpenTextFile(Server.MapPath("testread.txt"), 1)

f.SkipLine

Response.Write(f.ReadAll)

f.Close

Set f=Nothing

Set fs=Nothing

%>

</body>

</html>


showcode3534.html

<html>

<body>

<%

dim h

h=hour(now())

response.write("<p>" & now())

response.write(" (Norwegian Time) </p>")

If h<12 then

response.write("Good Morning!")

else

response.write("Good day!")

end if

%>

</body>

</html>


showcode42bd.html

<html>

<body>

<%

dim name

name="Donald Duck"

response.write("My name is: " & name)

%>

</body>

</html>


showcode45c3.html

<%Response.Expires=-1%>

<html>

<body>

<p>This page will be refreshed with each access!</p>

</body>

</html>


showcode4727.html

<html>

<body>

<p>I am writing some text. This text will never be<br>

<%

Response.End

%>

finished! It's too late to write more!</p>

</body>

</html>


showcode48bc.html

<html>

<body>

<%

dim fs,d

set fs=Server.CreateObject("Scripting.FileSystemObject")

set d=fs.GetDrive("c:")

Response.Write("The rootfolder is " & d.RootFolder)

set d=nothing

set fs=nothing

%>

</body>

</html>


showcode49c2.html

<html>

<body>

<%

dim fs, f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.GetFile(Server.MapPath("testread.txt"))

Response.Write("The file testread.txt was created on: " & f.DateCreated)

set f=nothing

set fs=nothing

%>

</body>

</html>


showcode4b9c.html

<html>

<body>

<p>VBScripts' function <b>MonthName</b> is used to get a month:</p>

<%

response.Write(MonthName(1))

response.Write("<br>")

response.Write(MonthName(2))

%>

<p>Abbreviated name of a month:</p>

<%

response.Write(MonthName(1,true))

response.Write("<br>")

response.Write(MonthName(2,true))

%>

<p>Current month:</p>

<%

response.Write(MonthName(month(date)))

response.Write("<br>")

response.Write(MonthName(month(date), true))

%>

</body>

</html>


showcode4dcb.html

<html>

<body>

<%

dim fs, d, n

set fs=Server.CreateObject("Scripting.FileSystemObject")

set d=fs.GetDrive("c:")

Response.Write("The file system is: " & d.FileSystem)

set d=nothing

set fs=nothing

%>

</body>

</html>


showcode4e03.html

<html>

<body>

<%

name = "Bill Gates"

response.write(ucase(name))

response.write("<br>")

response.write(lcase(name))

%>

</body>

</html>


showcode4fbf.html

<html>

<body>

<%

Set fs=Server.CreateObject("Scripting.FileSystemObject")

Set f=fs.OpenTextFile(Server.MapPath("testread.txt"), 1)

Response.Write(f.Read(2))

Response.Write("<p>The cursor is now standing in position " & f.Column & " in the text file.</p>")

f.Close

Set f=Nothing

Set fs=Nothing

%>

</body>

</html>


showcode55f8.html

<html>

<%

dim cars

cars=Request.Form("cars")

%>

<body>

<form action="demo_radiob.asp" method="post">

<p>Please select your favorite car:</p>

<input type="radio" name="cars"

<%if cars="Volvo" then Response.Write("checked")%>

value="Volvo">Volvo</input>

<br />

<input type="radio" name="cars"

<%if cars="Saab" then Response.Write("checked")%>

value="Saab">Saab</input>

<br />

<input type="radio" name="cars"

<%if cars="BMW" then Response.Write("checked")%>

value="BMW">BMW</input>

<br /><br />

<input type="submit" value="Submit" />

</form>

<%

if cars<>"" then

Response.Write("<p>Your favorite car is: " & cars & "</p>")

end if

%>

</body>

</html>


showcode58a4.html

<html>

<body>

<%

Dim fs, d, n

Set fs=Server.CreateObject("Scripting.FileSystemObject")

Set d=fs.GetDrive("c:")

n = "Drive: " & d

n = n & "<br />Free Space in bytes: " & d.FreeSpace

Response.Write(n)

set d=nothing

set fs=nothing

%>

</body>

</html>


showcode59ca.html

<html>

<body>

<%

dim i

for i=1 to 6

response.write("<h" & i & ">Header " & i & "</h" & i & ">")

next

%>

</body>

</html>


showcode5b07.html

<html>

<body>

<%

i = 48.66776677

j = 48.3333333

response.write(Round(i))

response.write("<br>")

response.write(Round(j))

%>

</body>

</html>


showcode5e2b.html

<%

Response.ContentType="text/html"

%>

<html>

<body>

<p>This is some text</p>

</body>

</html>


showcode5f76.html

<%

Response.Charset="ISO8859-1"

%>

<html>

<body>

<p>This is some text</p>

</body>

</html>


showcode6041.html

<html>

<body>

<%

dim fs,d,n

set fs=Server.CreateObject("Scripting.FileSystemObject")

set d=fs.GetDrive("c:")

n = "The " & d.DriveLetter

if d.IsReady=true then

n = n & " drive is ready."

else

n = n & " drive is not ready."

end if

Response.Write(n)

set d=nothing

set fs=nothing

%>

</body>

</html>


showcode6096.html

<html>

<body>

<h1>

This is page 1!

</h1>

<%

Set nl=Server.CreateObject("MSWC.NextLink")

If (nl.GetListIndex("text/links2.txt")>1) Then

%>

<a href="<%Response.Write(nl.GetPreviousURL("text/links2.txt"))%>">Previous Page</a>

<%End If%>

<a href="<%Response.Write(nl.GetNextURL("text/links2.txt"))%>">Next Page</a>

<p>The example uses the Content Linking Component

to navigate between the pages in a text file.</p>

<p>

<a href="text/links2.txt"><img border="0" src="/images/btn_view_text.gif"></a>

</p>

</body>

</html>


showcode621e.html

<html>

<body>

<%

If Response.IsClientConnected=true then

Response.Write("The user is still connected!")

else

Response.Write("The user is not connected!")

end if

%>

</body>

</html>


showcode6a6c.html

<html>

<body>

<%

dim fs,f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.GetFile(Server.MapPath("testread.txt"))

Response.Write("The attributes of the file testread.txt are: " & f.Attributes)

set f=nothing

set fs=nothing

%>

</body>

</html>


showcode6b04.html

<html>

<body>

<form action="demo_form2.asp" method="post">

First name:

<input type="text" name="name" value="Donald" />

<br />

Last name:

<input type="text" name="name" value="Duck" />

<br />

<input type="submit" value="Submit" />

</form>

<hr />

<p>The information received from the form above was:</p>

<%

If Request.Form("name")<>"" Then

Response.Write("<p>")

Response.Write("name=" & Request.Form("name"))

Response.Write("</p><p>")

Response.Write("The name property's count is: ")

Response.Write(Request.Form("name").Count)

Response.Write("</p><p>")

Response.Write("First name=" & Request.Form("name")(1))

Response.Write("</p><p>")

Response.Write("Last name=" & Request.Form("name")(2))

Response.Write("</p>")

End if

%>

</body>

</html>


showcode6b94.html

<html>

<body>

<p>

<b>You are browsing this site with:</b>

<%Response.Write(Request.ServerVariables("http_user_agent"))%>

</p>

<p>

<b>Your IP address is:</b>

<%Response.Write(Request.ServerVariables("remote_addr"))%>

</p>

<p>

<b>The DNS lookup of the IP address is:</b>

<%Response.Write(Request.ServerVariables("remote_host"))%>

</p>

<p>

<b>The method used to call the page:</b>

<%Response.Write(Request.ServerVariables("request_method"))%>

</p>

<p>

<b>The server's domain name:</b>

<%Response.Write(Request.ServerVariables("server_name"))%>

</p>

<p>

<b>The server's port:</b>

<%Response.Write(Request.ServerVariables("server_port"))%>

</p>

<p>

<b>The server's software:</b>

<%Response.Write(Request.ServerVariables("server_software"))%>

</p>

</body>

</html>


showcode6c08.html

<html>

<body>

<%

dim fs, f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.GetFile(Server.MapPath("testread.txt"))

Response.Write("The file testread.txt was last accessed on: " & f.DateLastAccessed)

set f=nothing

set fs=nothing

%>

</body>

</html>


showcode70b6.html

<html>

<body>

<%

dim fs, d, n

set fs=Server.CreateObject("Scripting.FileSystemObject")

set d=fs.GetDrive("c:")

Response.Write("The drive letter is: " & d.driveletter)

set d=nothing

set fs=nothing

%>

</body>

</html>


showcode8109.html

<html>

<body>

<%

response.write(FormatDateTime(date(),vbgeneraldate))

response.write("<br />")

response.write(FormatDateTime(date(),vblongdate))

response.write("<br />")

response.write(FormatDateTime(date(),vbshortdate))

response.write("<br />")

response.write(FormatDateTime(now(),vblongtime))

response.write("<br />")

response.write(FormatDateTime(now(),vbshorttime))

%>

<p>

Syntax for FormatDateTime: FormatDateTime(date,namedformat).

</p>

</body>

</html>


showcode823b.html

<html>

<body>

<%

sometext="Welcome to this Web"

response.write(Left(sometext,5))

response.write("<br>")

response.write(Right(sometext,5))

%>

</body>

</html>


showcode8553.html

<html>

<body>

<%

dim d

set d=Server.CreateObject("Scripting.Dictionary")

d.Add "n", "Norway"

d.Add "i", "Italy"

Response.Write("The value of the item n is: " & d.item("n"))

set d=nothing

%>

</body>

</html>


showcode856c.html

<html>

<body>

<p>Countdown to year 3000:</p>

<p>

<%millennium=cdate("1/1/3000 00:00:00")%>

It is

<%response.write(DateDiff("yyyy", Now(), millennium))%>

years to year 3000!

<br>

It is

<%response.write(DateDiff("m", Now(), millennium))%>

months to year 3000!

<br>

It is

<%response.write(DateDiff("ww", Now(), millennium))%>

weeks to year 3000!

<br>

It is

<%response.write(DateDiff("d", Now(), millennium))%>

days to year 3000!

<br>

It is

<%response.write(DateDiff("h", Now(), millennium))%>

hours to year 3000!

<br>

It is

<%response.write(DateDiff("n", Now(), millennium))%>

minutes to year 3000!

<br>

It is

<%response.write(DateDiff("s", Now(), millennium))%>

seconds to year 3000!

</p>

</body>

</html>


showcode88f1.html

<html>

<body>

<%

sometext = "Hello Everyone!"

response.write(strReverse(sometext))

%>

</body>

</html>


showcode8ade.html

<html>

<body>

<%

Set fs=Server.CreateObject("Scripting.FileSystemObject")

If fs.FolderExists("c:\temp") = true Then

Response.Write("Folder c:\temp exists.")

Else

Response.Write("Folder c:\temp does not exist.")

End If

set fs=nothing

%>

</body>

</html>


showcode8f24.html

<html>

<body>

<%

If Request.QueryString<>"" Then

If Request.QueryString("name")<>", " Then

name1=Request.QueryString("name")(1)

name2=Request.QueryString("name")(2)

end if

end if

%>

<form action="demo_reqquery2.asp" method="get">

First name:

<input type="text" name="name" value="<%=name1%>" />

<br />

Last name:

<input type="text" name="name" value="<%=name2%>" />

<br />

<input type="submit" value="Submit" />

</form>

<hr>

<%

If Request.QueryString<>"" Then

Response.Write("<p>")

Response.Write("The information received from the form was:")

Response.Write("</p><p>")

Response.Write("name=" & Request.QueryString("name"))

Response.Write("</p><p>")

Response.Write("The name property's count is: ")

Response.Write(Request.QueryString("name").Count)

Response.Write("</p><p>")

Response.Write("First name=" & name1)

Response.Write("</p><p>")

Response.Write("Last name=" & name2)

Response.Write("</p>")

end if

%>

</body>

</html>


showcode8f51.html

<%

if Request.Form("select")<>"" then

Response.Redirect(Request.Form("select"))

end if

%>

<html>

<body>

<form action="demo_redirect.asp" method="post">

<input type="radio" name="select"

value="demo_server.asp">

Server Example<br>

<input type="radio" name="select"

value="demo_text.asp">

Text Example<br><br>

<input type="submit" value="Go!">

</form>

</body>

</html>


showcode995c.html

<html>

<body>

<%

Set fs=Server.CreateObject("Scripting.FileSystemObject")

If (fs.FileExists("c:\winnt\cursors\3dgarro.cur"))=true Then

Response.Write("File c:\winnt\cursors\3dgarro.cur exists.")

Else

Response.Write("File c:\winnt\cursors\3dgarro.cur does not exist.")

End If

set fs=nothing

%>

</body>

</html>


showcode9988.html

<html>

<body>

<form action="demo_simplereqquery.asp" method="get">

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

<input type="submit" value="Submit">

</form>

<%

Response.Write(Request.QueryString)

%>

</body>

</html>


showcode99b7.html

<html>

<body>

<%

sometext="Welcome to this Web!!"

response.write(Replace(sometext, "Web", "Page"))

%>

</body>

</html>


showcode9a1b.html

<html>

<body>

<%

randomize()

r=rnd()

if r>0.5 then

response.write("<a href='http://www.w3schools.com'>W3Schools.com!</a>")

else

response.write("<a href='http://www.refsnesdata.no'>Refsnesdata.no!</a>")

end if

%>

<p>

This example demonstrates a link, each time you load the page, it will display

one of two links: W3Schools.com! OR Refsnesdata.no! There is a 50% chance for

each of them.

</p>

</body>

</html>


showcode9b44.html

<html>

<body>

<p>This is the first five characters from the text file:</p>

<%

Set fs=Server.CreateObject("Scripting.FileSystemObject")

Set f=fs.OpenTextFile(Server.MapPath("testread.txt"), 1)

Response.Write(f.Read(5))

f.Close

Set f=Nothing

Set fs=Nothing

%>

</body>

</html>


showcode9cac.html

<html>

<body>

<p>

VBScripts' function <b>WeekdayName</b> is used to get a weekday:

</p>

<%

response.Write(WeekDayName(1))

response.Write("<br>")

response.Write(WeekDayName(2))

%>

<p>Abbreviated name of a weekday:</p>

<%

response.Write(WeekDayName(1,true))

response.Write("<br>")

response.Write(WeekDayName(2,true))

%>

<p>Current weekday:</p>

<%

response.Write(WeekdayName(weekday(date)))

response.Write("<br>")

response.Write(WeekdayName(weekday(date), true))

%>

</body>

</html>


showcode9ce6.html

<html>

<body>

<form action="demo_totalbytes.asp" method="post">

Please type something:

<input type="text" name="txt"><br><br>

<input type="submit" value="Submit">

</form>

<%

If Request.Form("txt")<>"" Then

Response.Write("You submitted: ")

Response.Write(Request.Form)

Response.Write("<br><br>")

Response.Write("Total bytes: ")

Response.Write(Request.Totalbytes)

End If

%>

</body>

</html>


showcodea1f7.html

<%

Set FS=Server.CreateObject("Scripting.FileSystemObject")

Set RS=FS.OpenTextFile(Server.MapPath("counter.txt"), 1, False)

fcount=RS.ReadLine

RS.Close

fcount=fcount+1

'This code is disabled due to the write access security on our server:

'Set RS=FS.OpenTextFile(Server.MapPath("counter.txt"), 2, False)

'RS.Write fcount

'RS.Close

Set RS=Nothing

Set FS=Nothing

%>

<html>

<body>

<p>

This page has been visited <%=fcount%> times.

</p>

</body>

</html>


showcodea288.html

<%

Response.Buffer=true

%>

<html>

<body>

<p>

This text will be sent to your browser when my response buffer is flushed.

</p>

<%

Response.Flush

%>

</body>

</html>


showcodea3e1.html

<html>

<body>

<a href="demo_simplequerystring.asp?color=green">Example</a>

<%

Response.Write(Request.QueryString)

%>

</body>

</html>


showcodeab34.html

<html>

<body>

<%

dim d

set d=Server.CreateObject("Scripting.Dictionary")

d.Add "n", "Norway"

d.Add "i", "Italy"

if d.Exists("n")= true then

Response.Write("Key exists.")

else

Response.Write("Key does not exist.")

end if

set d=nothing

%>

</body>

</html>


showcodeaf06.html

<html>

<body>

<%

dim fs,d

set fs=Server.CreateObject("Scripting.FileSystemObject")

set d=fs.GetDrive("c:")

Response.Write("The path is " & d.Path)

set d=nothing

set fs=nothing

%>

</body>

</html>


showcodeaf55.html

<html>

<body>

<%

response.write("<p>")

response.write("Default Timeout is: " & Session.Timeout & " minutes.")

response.write("</p>")

Session.Timeout=30

response.write("<p>")

response.write("Timeout is now: " & Session.Timeout & " minutes.")

response.write("</p>")

%>

</body>

</html>


showcodeb05c.html

<html>

<body>

<%

dim d, a, s, i

set d=Server.CreateObject("Scripting.Dictionary")

d.Add "n", "Norway"

d.Add "i", "Italy"

Response.Write("The number of key/item pairs is: " & d.Count)

set d=nothing

%>

</body>

</html>


showcodeb376.html

<html>

<body>

<p>This is the first line of the text file:</p>

<%

Set fs=Server.CreateObject("Scripting.FileSystemObject")

Set f=fs.OpenTextFile(Server.MapPath("testread.txt"), 1)

Response.Write(f.ReadLine)

f.Close

Set f=Nothing

Set fs=Nothing

%>

</body>

</html>


showcodeb746.html

<html>

<body>

Today's date is: <%response.write(date())%>.

<br>

The server's local time is: <%response.write(time())%>.

</body>

</html>


showcodec49d.html

<html>

<body>

<%

Set fs=Server.CreateObject("Scripting.FileSystemObject")

Response.Write(fs.GetBaseName("c:\winnt\cursors\3dgarro.cur"))

Response.Write("<br />")

Response.Write(fs.GetBaseName("c:\winnt\cursors\"))

Response.Write("<br />")

Response.Write(fs.GetBaseName("c:\winnt\"))

set fs=nothing

%>

</body>

</html>


showcodec80c.html

<html>

<body>

<%

fruits=Request.Form("fruits")

%>

<form action="demo_checkboxes.asp" method="post">

<p>Which of these fruits do you prefer:</p>

<input type="checkbox" name="fruits" value="Apples"

<%if instr(fruits,"Apple") then Response.Write("checked")%>>

Apple

<br>

<input type="checkbox" name="fruits" value="Oranges"

<%if instr(fruits,"Oranges") then Response.Write("checked")%>>

Orange

<br>

<input type="checkbox" name="fruits" value="Bananas"

<%if instr(fruits,"Banana") then Response.Write("checked")%>>

Banana

<br>

<input type="submit" value="Submit">

</form>

<%

if fruits<>"" then%>

<p>You like: <%Response.Write(fruits)%></p>

<%end if

%>

</body>

</html>


showcodecaa3.html

<html>

<body>

<%

response.write("<p>")

response.write("The default LCID for this page is: " & Session.LCID & "<br />")

response.write("The Date format for the above LCID is: " & date() & "<br />")

response.write("The Currency format for the above LCID is: " & FormatCurrency(350))

response.write("</p>")

Session.LCID=1036

response.write("<p>")

response.write("The LCID is now changed to: " & Session.LCID & "<br />")

response.write("The Date format for the above LCID is: " & date() & "<br />")

response.write("The Currency format for the above LCID is: " & FormatCurrency(350))

response.write("</p>")

Session.LCID = 3079

response.write("<p>")

response.write("The LCID is now changed to: " & Session.LCID & "<br />")

response.write("The Date format for the above LCID is: " & date() & "<br />")

response.write("The Currency format for the above LCID is: " & FormatCurrency(350))

response.write("</p>")

Session.LCID = 2057

response.write("<p>")

response.write("The LCID is now changed to: " & Session.LCID & "<br />")

response.write("The Date format for the above LCID is: " & date() & "<br />")

response.write("The Currency format for the above LCID is: " & FormatCurrency(350))

response.write("</p>")

%>

</body>

</html>


showcodecd16.html

<html>

<body>

<%

sometext="Welcome to this Web!!"

response.write(Mid(sometext, 9, 2))

%>

</body>

</html>


showcodece41.html

<html>

<body>

<%

dim fs, d, n

set fs=Server.CreateObject("Scripting.FileSystemObject")

set d=fs.GetDrive("c:")

Response.Write("The drive type is: " & d.DriveType)

set d=nothing

set fs=nothing

%>

</body>

</html>


showcoded3f8.html

<html>

<head>

<%

sub vbproc(num1,num2)

Response.Write(num1*num2)

end sub

%>

<script language="javascript" runat="server">

function jsproc(num1,num2)

{

Response.Write(num1*num2)

}

</script>

</head>

<body>

<p>Result: <%call vbproc(3,4)%></p>

<p>Result: <%call jsproc(3,4)%></p>

</body>

</html>


showcoded534.html

<html>

<body>

<%

Response.Write(Session.SessionID)

%>

</body>

</html>


showcoded5dd.html

<html>

<body>

<%

Dim fs,d,n

Set fs=Server.CreateObject("Scripting.FileSystemObject")

Set d=fs.GetDrive("c:")

n = "Drive: " & d

n = n & "<br>Total size in bytes: " & d.TotalSize

Response.Write(n)

set d=nothing

set fs=nothing

%>

</body>

</html>


showcoded6b3.html

<html>

<body>

<%

name = " W3Schools "

response.write("visit" & name & "now<br />")

response.write("visit" & trim(name) & "now<br />")

response.write("visit" & ltrim(name) & "now<br />")

response.write("visit" & rtrim(name) & "now")

%>

</body>

</html>


showcoded75e.html

<html>

<body>

<%

Set fs = Server.CreateObject("Scripting.FileSystemObject")

Set rs = fs.GetFile(Server.MapPath("demo_lastmodified.asp"))

modified = rs.DateLastModified

%>

This file was last modified on: <%response.write(modified)

Set rs = Nothing

Set fs = Nothing

%>

</body>

</html>


showcoded8b5.html

<html>

<body>

<p>This is all the lines in the text file:</p>

<%

Set fs=Server.CreateObject("Scripting.FileSystemObject")

Set f=fs.OpenTextFile(Server.MapPath("testread.txt"), 1)

do while f.AtEndOfStream = false

Response.Write(f.ReadLine)

Response.Write("<br>")

loop

f.Close

Set f=Nothing

Set fs=Nothing

%>

</body>

</html>


showcodeda42.html

<html>

<body>

<%

response.write("<h2>You can use HTML tags to format the text!</h2>")

%>

<%

response.write("<p style='color:#0000ff'>This text is styled with the style attribute!</p>")

%>

</body>

</html>


showcodeda68.html

<html>

<body>

<p>

The example below builds a table of contents.

</p>

<%

dim c

dim i

set nl=server.createobject("MSWC.Nextlink")

c = nl.GetListCount("text\links.txt")

i = 1

%>

<ul>

<%do while (i <= c) %>

<li><a href="<%=nl.GetNthURL("text\links.txt", i)%>">

<%=nl.GetNthDescription("text\links.txt", i)%></a>

<%

i = (i + 1)

loop

%>

</ul>

<p>

The text file contains a list of page urls

and link descriptions. It contains one line of text for each page. Note that the url and

description MUST be separated by the TAB character.

</p>

<p>

<a href="text/links.txt"><img border="0" src="/images/btn_view_text.gif"></a>

</p>

</body>

</html>


showcodee2b2.html

<html>

<body>

<%

Set fs=Server.CreateObject("Scripting.FileSystemObject")

Response.Write("The file extension of the file 3dgarro is: ")

Response.Write(fs.GetExtensionName("c:\winnt\cursors\3dgarro.cur"))

set fs=nothing

%>

</body>

</html>


showcodee624.html

<html>

<body>

<%

randomize()

response.write(rnd())

%>

</body>

</html>


showcodee7bb.html

<%@ language="javascript" %>

<html>

<body>

<%

var d=new Date()

var h=d.getHours()

Response.Write("<p>")

Response.Write(d + " (Norwegian Time)")

Response.Write("</p>")

if (h<12)

{

Response.Write("Good Morning!")

}

else

{

Response.Write("Good day!")

}

%>

</body>

</html>


showcodee8ac.html

<html>

<body>

<%

Set MyBrow=Server.CreateObject("MSWC.BrowserType")

%>

<table border="1" width="65%">

<tr>

<td width="52%">Client OS</td>

<td width="48%"><%=MyBrow.platform%></td>

</tr>

<tr>

<td >Web Browser</td>

<td ><%=MyBrow.browser%></td>

</tr>

<tr>

<td>Browser version</td>

<td><%=MyBrow.version%></td>

</tr>

<tr>

<td>Frame support?</td>

<td><%=MyBrow.frames%></td>

</tr>

<tr>

<td>Table support?</td>

<td><%=MyBrow.tables%></td>

</tr>

<tr>

<td>Sound support?</td>

<td><%=MyBrow.backgroundsounds%></td>

</tr>

<tr>

<td>Cookies support?</td>

<td><%=MyBrow.cookies%></td>

</tr>

<tr>

<td>VBScript support?</td>

<td><%=MyBrow.vbscript%></td>

</tr>

<tr>

<td>JavaScript support?</td>

<td><%=MyBrow.javascript%></td>

</tr>

</table>

</body>

</html>


showcodeec3f.html

<html>

<body>

<p><b>Note:</b> This example won't work because ASP 3.0 is not installed on our server.

</p>

<p>

<a href="demo_textads.asp"><img border="0" src="/images/btn_view_text.gif"></a>

</p>

<%

set cr=server.createobject("MSWC.ContentRotator")

response.write(cr.ChooseContent("text/textads.txt"))

%>

<p>

NOTE: Because the content strings are changed randomly in the text file, and this page has only four content strings to choose from, sometimes the page will display the same content strings twice in a row.

</p>

</body>

</html>


showcodeed3f.html

<html>

<head>

<%

sub vbproc(num1,num2)

response.write(num1*num2)

end sub

%>

</head>

<body>

<p>

You can call a procedure like this:

</p>

<p>

Result: <%call vbproc(3,4)%>

</p>

<p>

Or, like this:

</p>

<p>

Result: <%vbproc 3,4%>

</p>

</body>

</html>


showcodef58a.html

<%

Response.Buffer=true

%>

<html>

<body>

<p>This is some text I want to send to the user.</p>

<p>No, I changed my mind. I want to clear the text.</p>

<%

Response.Clear

%>

</body>

</html>


showcodef7f6.html

<html>

<body>

<%

Set fs=Server.CreateObject("Scripting.FileSystemObject")

if fs.driveexists("c:") = true then

Response.Write("Drive c: exists.")

Else

Response.Write("Drive c: does not exist.")

End If

Response.write("<br>")

if fs.driveexists("g:") = true then

Response.Write("Drive g: exists.")

Else

Response.Write("Drive g: does not exist.")

End If

set fs=nothing

%>

</body>

</html>


showcodef835.html

<html>

<body>

<%

dim fs, f

set fs=Server.CreateObject("Scripting.FileSystemObject")

set f=fs.GetFile(Server.MapPath("testread.txt"))

Response.Write("The file testread.txt was last modified on: " & f.DateLastModified)

set f=nothing

set fs=nothing

%>

</body>

</html>


showcodef8d4.html

<html>

<body>

Today it is

<%response.write(WeekdayName(weekday(date)))%>,

<br />

and the month is

<%response.write(MonthName(month(date)))%>

</body>

</html>


showcodefd2a.html

<html>

<body>

<%

Set fs=Server.CreateObject("Scripting.FileSystemObject")

p=fs.GetDriveName("c:\winnt\cursors\3dgarro.cur")

Response.Write("The drive name is: " & p)

set fs=nothing

%>

</body>

</html>


Run ASP on Your Computer

Run ASP on Your PC

You can run ASP on your own PC without an external server. To do that, you must install Microsoft's Personal Web Server (PWS) or Internet Information Services (IIS) on your PC.

How to Run ASP on your own PC

You can run ASP on your own PC without an external server. To do that, you must install Microsoft's Personal Web Server (PWS) or Internet Information Services (IIS) on your PC.

If you are serious about using ASP, you should have at least Windows 98, Second Edition.

If you are really serious about using ASP, you should go for Windows 2000.

How to install PWS and run ASP on Windows 95

Personal Web Server (PWS) is not shipped with Windows 95 !!

To run ASP on Windows 95, you will have to download "Windows NT 4.0 Option Pack" from Microsoft.

Download the " Windows NT 4.0 Option Pack"

How to install PWS and run ASP on Windows NT

Personal Web Server (PWS) is not shipped with Windows NT !!

To run ASP on Windows NT, you will have to download "Windows NT 4.0 Option Pack" from Microsoft.

Download the " Windows NT 4.0 Option Pack"

How to install PWS and run ASP on Windows 98

1. Open the Add-ons folder on your Windows98 CD, find the PWS folder and run the setup.exe file.
2. An Inetpub folder will be created on your harddrive. Open it and find the wwwroot folder.
3. Create a new folder, like "MyWeb", under wwwroot.
4. Use a text editor to write some ASP code, save the file as "test1.asp" in the "MyWeb" folder.
5. Make sure your Web server is running - The installation program has added a new icon on your task bar (this is the PWS symbol). Click on the icon and press the Start button in the window that appears.
6. Open your browser and type in "http://localhost/MyWeb/test1.asp", to view your first ASP page.

How to install PWS and run ASP on Windows ME

Personal Web Server (PWS) is not included with Windows Me !!

Read article from Microsoft

A workaround!

How to install IIS and run ASP on Windows 2000

1. From your Start Button, go to Settings, and Control Panel
2. In the Control Panel window select Add/Remove Programs
3. In the Add/Remove window select Add/Remove Windows Components
4. In the Wizard window check Internet Information Services, click OK
5. An Inetpub folder will be created on your harddrive
6. Open the Inetpub folder, and find a folder named wwwroot
7. Create a new folder, like "MyWeb", under wwwroot.
8. Use a text editor to write some ASP code, save the file as "test1.asp" in the "MyWeb" folder
9. Make sure your Web server is running - The installation program has added a new icon on your task bar (this is the IIS symbol). Click on the icon and press the Start button in the window that appears.
10. Open your browser and type in "http://localhost/MyWeb/test1.asp", to view your first ASP page

How to install IIS and run ASP on Windows XP Professional

Note: You cannot run ASP on Windows XP Home Edition.

1. Insert the Windows XP Professional CD-Rom into your CD-Rom Drive
2. From your Start Button, go to Settings, and Control Panel
3. In the Control Panel window select Add/Remove Programs
4. In the Add/Remove window select Add/Remove Windows Components
5. In the Wizard window check Internet Information Services, click OK
6. An Inetpub folder will be created on your harddrive
7. Open the Inetpub folder, and find a folder named wwwroot
8. Create a new folder, like "MyWeb", under wwwroot.
9. Use a text editor to write some ASP code, save the file as "test1.asp" in the "MyWeb" folder
10. Make sure your Web server is running - its status can be checked by going into the Control Panel, then Administrative Tools, and double-click the "IIS Manager" icon
11. Open your browser and type in "http://localhost/MyWeb/test1.asp", to view your first ASP page

How to install IIS and run ASP on Windows Server 2003 (Windows .NET Server)

1. When you start the Windows Server 2003, you should see the Manage Your Server wizard
2. If the wizard is not displayed, go to Administrative Tools, and select Manage Your Server
3. In the wizard, click Add or Remove a Role, click Next
4. Select Custom Configuration, click Next
5. Select Application Server role, click Next
6. Select Enable ASP.NET, click Next
7. Now, the wizard may ask for the Server 2003 CD. Insert the CD and let it run until it is finished, then click the Finish button
8. The wizard should now show the Application Server role installed
9. Click on Manage This Application Server to bring up the Application Server Management Console (MMC)
10. Expand the Internet Information Services (IIS) Manager, then expand your server, and then the Web Sites folder
11. You should see the Default Web Site, and it should not say (Stopped)
12. IIS is running!
13. In the Internet Information Services (IIS) Manager click on the Web Service Extensions folder
14. Here you will see that Active Server Pages are Prohibited (this is the default configuration of IIS 6)
15. Highlight Active Server Pages and click the Allow button
16. ASP is now active!


ASP.NET Introduction

ASP.NET is the latest version of Microsoft's Active Server Pages technology (ASP).

What you should already know

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

· WWW, HTML and the basics of building Web pages
· Scripting languages like JavaScript or VBScript
· The basics of server side scripting

If you want to study these subjects first, find the tutorials on our Home Page

What is ASP?

ASP is a server side scripting technology that enables scripts (embedded in web pages) to be executed by an Internet server.

· ASP is a Microsoft Technology
· ASP stands for Active Server Pages
· ASP is a program that runs inside IIS
· IIS stands for Internet Information Services
· IIS comes as a free component with Windows 2000
· IIS is also a part of the Windows NT 4.0 Option Pack
· The Option Pack can be downloaded from Microsoft
· PWS is a smaller - but fully functional - version of IIS
· PWS can be found on your Windows 95/98 CD

What is an ASP File?

· An ASP file is just the same as an HTML file
· An ASP file can contain text, HTML, XML, and scripts
· Scripts in an ASP file are executed on the server
· An ASP file has the file extension ".asp"

How Does it Work?

· When a browser requests an HTML file, the server returns the file
· When a browser requests an ASP file, IIS passes the request to the ASP engine on the server
· The ASP engine reads the file, line by line, and executes the scripts in the file
· Finally, the ASP file is returned to the browser as plain HTML

Before you study ASP .NET, it would help to have a basic understanding of Microsoft's ASP technology.

To learn more about ASP, you can study our ASP tutorial.

What is ASP+?

ASP+ is the same as ASP.NET.

ASP+ is just an early name used by Microsoft when they developed ASP.NET.

What is ASP.NET?

ASP 3.0 is the latest version of ASP, but there will never be an ASP 4.0 version.

ASP.NET is the next generation ASP, but it's not an upgraded version of ASP. ASP.NET is an entirely new paradigm for server-side ASP scripting.

ASP.NET is a part of the .NET Framework. Microsoft spent three years rewriting ASP.NET from the ground up, and ASP.NET is not fully backward compatible with ASP 3.0.

You can read more about the differences between ASP and ASP.NET in the next chapter of this tutorial.

.NET Framework

The .NET Framework is the infrastructure for the Microsoft .NET platform.

The .NET Framework is an environment for building, deploying, and running Web applications and Web Services.

The .NET Framework contains a common language runtime and common class libraries - like ADO.NET, ASP.NET and Windows Forms - to provide advanced standard services that can be integrated into a variety of computer systems.

The .NET Framework provides a feature-rich application environment, simplified development and easy integration between a number of different development languages.

The .NET Framework is language neutral. Currently it supports C++, C#, Visual Basic, and JScript (Microsoft's version of JavaScript).

Microsoft's Visual Studio.NET is a common development environment for the .NET Framework.


ASP.NET AdRotator Control

Definition and Usage

The AdRotator control is used to display a sequence of ad images.

This control uses an XML file to store the ad information. The XML file must begin and end with an <Advertisements> tag. Inside the <Advertisements> tag there may be several <Ad> tags which defines each ad.

The predefined elements inside the <Ad> tag are listed below:

Element | Description
<ImageUrl> | Optional. The path to the image file
<NavigateUrl> | Optional. The URL to link to if the user clicks the ad
<AlternateText> | Optional. An alternate text for the image
<Keyword> | Optional. A category for the ad
<Impressions> | Optional. The display rates in percent of the hits

Properties

Property | Description
AdvertisementFile | The path to the XML file that contains ad information
id | A unique id for the control
KeywordFilter | A filter to limit ads after categories
OnAdCreated | The name of the function to be executed after the creation of the control, before page rendering
runat | Specifies that the control is a server control. Must be set to "server"
Target | Where to open the URL

Examples

AdRotator

In this example we declare an AdRotator control in an .aspx file. Then we create an event handler for the AdCreated event, in the .aspx file, to override the value of the NavigateUrl element in the XML file.


ASP.NET ArrayList

ASP.NET - The ArrayList Object

The ArrayList object is a collection of items containing a single data value.

Examples

Example 2 - ArrayList DropDownList

Create an ArrayList

The ArrayList object is a collection of items containing a single data value.

Items are added to the ArrayList with the Add() method.

The following code creates a new ArrayList object named mycountries and four items are added:

<script runat="server">

Sub Page_Load

if Not Page.IsPostBack then

dim mycountries=New ArrayList

mycountries.Add("Norway")

mycountries.Add("Sweden")

mycountries.Add("France")

mycountries.Add("Italy")

end if

end sub

</script>

By default, an ArrayList object contains 16 entries. An ArrayList can be sized to its final size with the TrimToSize() method:

<script runat="server">

Sub Page_Load

if Not Page.IsPostBack then

dim mycountries=New ArrayList

mycountries.Add("Norway")

mycountries.Add("Sweden")

mycountries.Add("France")

mycountries.Add("Italy")

mycountries.TrimToSize()

end if

end sub

</script>

An ArrayList can also be sorted alphabetically or numerically with the Sort() method:

<script runat="server">

Sub Page_Load

if Not Page.IsPostBack then

dim mycountries=New ArrayList

mycountries.Add("Norway")

mycountries.Add("Sweden")

mycountries.Add("France")

mycountries.Add("Italy")

mycountries.TrimToSize()

mycountries.Sort()

end if

end sub

</script>

To sort in reverse order, apply the Reverse() method after the Sort() method:

<script runat="server">

Sub Page_Load

if Not Page.IsPostBack then

dim mycountries=New ArrayList

mycountries.Add("Norway")

mycountries.Add("Sweden")

mycountries.Add("France")

mycountries.Add("Italy")

mycountries.TrimToSize()

mycountries.Sort()

mycountries.Reverse()

end if

end sub

</script>

Data Binding to an ArrayList

An ArrayList object may automatically generate the text and values to the following controls:

· asp:RadioButtonList
· asp:CheckBoxList
· asp:DropDownList
· asp:Listbox

To bind data to a RadioButtonList control, first create a RadioButtonList control (without any asp:ListItem elements) in an .aspx page:

<html>

<body>

<form runat="server">

<asp:RadioButtonList id="rb" runat="server" />

</form>

</body>

</html>

Then add the script that builds the list and binds the values in the list to the RadioButtonList control:

<script runat="server">

Sub Page_Load

if Not Page.IsPostBack then

dim mycountries=New ArrayList

mycountries.Add("Norway")

mycountries.Add("Sweden")

mycountries.Add("France")

mycountries.Add("Italy")

mycountries.TrimToSize()

mycountries.Sort()

rb.DataSource=mycountries

rb.DataBind()

end if

end sub

</script>

<html>

<body>

<form runat="server">

<asp:RadioButtonList id="rb" runat="server" />

</form>

</body>

</html>

The DataSource property of the RadioButtonList control is set to the ArrayList and it defines the data source of the RadioButtonList control. The DataBind() method of the RadioButtonList control binds the data source with the RadioButtonList control.

Note: The data values are used as both the Text and Value properties for the control. To add Values that are different from the Text, use either the Hashtable object or the SortedList object.


ASP.NET Button Control

Definition and Usage

The Button control is used to display a push button. The push button may be a submit button or a command button. By default, this control is a submit button.

A submit button does not have a command name and it posts the Web page back to the server when it is clicked. It is possible to write an event handler to control the actions performed when the submit button is clicked.

A command button has a command name and allows you to create multiple Button controls on a page. It is possible to write an event handler to control the actions performed when the command button is clicked.

Properties

Property | Description
CausesValidation | By default, a page is validated when a Button control is clicked. To prevent a page from being validated when clicking on a Button control, set this property to "false"
CommandArgument | Additional information about the command to perform
CommandName | The command associated with the Command event
id | A unique id for the control
OnClick | The name of the function to be executed when the button is clicked
runat | Specifies that the control is a server control. Must be set to "server"
Text | The text on the button

Examples

Button

In this example we declare a submit Button control in an .aspx file. Then we create an event handler for the Click event which changes the text on the button.

Button 2

In this example we declare a submit Button control in an .aspx file. Then we create an event handler for the Click event which changes the text and the style of the button.


ASP.NET Calendar Control

Definition and Usage

The Calendar control is used to display a calendar in the browser.

This control displays a one-month calendar that allows the user to select dates and move to the next and previous months.

Properties

Property

Description

CellPadding

The space, in pixels, between the cell walls and contents

CellSpacing

The space, in pixels, between cells

DayHeaderStyle

The style for displaying the names of the days

DayNameFormat

The format for displaying the names of the days. Can take one of the following values:

· FirstLetter
· FirstTwoLetters
· Full
· Short

DayStyle

The style for displaying days

FirstDayOfWeek

What should be the first day of week. Can take one of the following values:

· Default
· Monday
· Tuesday
· Wednesday
· Thursday
· Friday
· Saturday
· Sunday

id

A unique id for the control

NextMonthText

The text displayed for the next month link

NextPrevFormat

The format of the next and previous month links. Can take one of the following values:

· ShortMonth
· FullMonth
· CustomText

NextPrevStyle

The style for displaying next and previous month links

OnDayRender

The name of the function to be executed when when each day cell is created

OnSelectionChanged

The name of the function to be executed when the user selects a day, week, or month

OnVisibleMonthChanged

The name of the function to be executed when the user navigates to a different month

OtherMonthDayStyle

The style for displaying days that are not in the current month

PrevMonthText

The text displayed for the previous month link

runat

Specifies that the control is a server control. Must be set to "server"

SelectedDate

The selected date

SelectedDates

The selected dates

SelectedDayStyle

The style for selected days

SelectionMode

How a user is allowed to select dates. Can take one of the following values:

· None
· Day
· DayWeek
· DayWeekMonth

SelectMonthText

The text displayed for the month selection link

SelectorStyle

The style for the month and weeks selection links

SelectWeekText

The text displayed for the week selection link

ShowDayHeader

A Boolean value that specifies whether the days of the week header should be shown

ShowGridLines

A Boolean value that specifies whether the grid lines between days should be shown

ShowNextPrevMonth

A Boolean value that specifies whether the next and previous month links should be shown

ShowTitle

A Boolean value that specifies whether the title of the calendar should be shown

TitleFormat

The format for the title of the calendar. Can take one of the following values:

· Month
· MonthYear

TitleStyle

The style of the title of the calendar

TodayDayStyle

The style for today's date

TodaysDate

Today's date

VisibleDate

The date that specifies the month that is currently visible in the calendar

WeekendDayStyle

The style for weekends

Examples

Calendar

In this example we declare a Calendar control in its simplest use, in an .aspx file.

In this example we declare a Calendar control in an .aspx file. The days are displayed with full names in blue, the weekends are displayed in red on a yellow background, and the current date is displayed with a green background.

In this example we declare a Calendar control in an .aspx file. The days are displayed with full names, the user may select a day, a week, or the whole month, and the selected day/week/month is displayed with a grey background color.


ASP.NET CheckBox Control

Definition and Usage

The CheckBox control is used to display a check box.

Properties

Property | Description
AutoPostBack | A Boolean value that specifies whether the form should be posted immediately after the Checked property has changed or not. Default is false
Checked | A Boolean value that specifies whether the check box is checked or not
id | A unique id for the control
OnCheckedChanged | The name of the function to be executed when the Checked property has changed
runat | Specifies that the control is a server control. Must be set to "server"
Text | The text next to the check box
TextAlign | On which side of the check box the text should appear (right or left)

Examples

Checkbox

In this example we declare two TextBox controls and one CheckBox control in an .aspx file. Then we create an event handler for the CheckedChanged event to copy the contents of a text box containing the home phone of a customer into a text box that contains the work phone.


ASP.NET CheckBoxList Control

Definition and Usage

The CheckBoxList control is used to create a multi-selection check box group.

Each selectable item in a CheckBoxList control is defined by a ListItem element!

Tip: This control supports data binding!

Properties

Property | Description
AutoPostBack | A Boolean value that specifies whether the form should be posted immediately after one of the items changes select status or not. Default is false
CellPadding | The space, in pixels, between the cell walls and the check box group
DataSource | The data source to use
DataTextField | A field in the data source to be displayed in the check box group
DataValueField | A field in the data source that specifies the value of each selectable item in the check box group
id | A unique id for the control
OnSelectedIndexChanged | The name of the function to be executed when one of the items changes select status
RepeatColumns | The number of columns to use when displaying the check box group. Default is "1"
RepeatDirection | Specifies whether the check box group should be repeated horizontally or vertically. Legal values are "Horizontal" and "Vertical". Default is Vertical
RepeatLayout | The layout of the check box group. Can be "Table" or "Flow". Default is Table
runat | Specifies that the control is a server control. Must be set to "server"
TextAlign | On which side of the check box the text should appear (right or left)

Examples

In this example we declare one CheckBoxList control in an .aspx file. Then we create an event handler for the SelectedIndexChanged event. The selectable list contains six check boxes. When a user checks one of the boxes, the page is immediately posted back to the server, and the Check subroutine is executed. The subroutine loops through the control's Items collection and tests each item's Selected property. The selected items are then displayed in the Label control.


ASP.NET CompareValidator Control

Definition and Usage

The CompareValidator control is used to compare the value of one input control to the value of another input control or to a fixed value.

Note: If the input control is empty, the validation will succeed. Use the RequiredFieldValidator control to make the field required.

Properties

Property

Description

BackColor

The background color of the CompareValidator control

ControlToCompare

The name of the control to compare with

ControlToValidate

The id of the control to validate

Display

The display behavior for the validation control. Legal values are:

· None (the control is not displayed. Used to show the error message only in the ValidationSummary control)
· Static (the control displays an error message if validation fails. Space is reserved on the page for the message even if the input passes validation.
· Dynamic (the control displays an error message if validation fails. Space is not reserved on the page for the message if the input passes validation

EnableClientScript

A Boolean value that specifies whether client-side validation is enabled or not

Enabled

A Boolean value that specifies whether the validation control is enabled or not

ErrorMessage

The text to display in the ValidationSummary control when validation fails. Note: This text will also be displayed in the validation control if the Text property is not set

ForeColor

The foreground color of the control

id

A unique id for the control

IsValid

A Boolean value that indicates whether the control specified by ControlToValidate is determined to be valid

Operator

The type of comparison to perform. The operators are:

· Equal
· GreaterThan
· GreaterThanEqual
· LessThan
· LessThanEqual
· NotEqual
· DataTypeCheck

runat

Specifies that the control is a server control. Must be set to "server"

Text

The message to display when validation fails

Type

Specifies the data type of the values to compare. The types are:

· Currency
· Date
· Double
· Integer
· String

ValueToCompare

A specified value to compare with

Examples

CompareValidator

In this example we declare two TextBox controls, one Button control, and one CompareValidator control in an .aspx file. If validation fails, the text "Validation Failed!" will be displayed in red on a yellow background in the CompareValidator control.

CompareValidator 2

In this example we declare two TextBox controls, one ListBox control, one Button control, and one CompareValidator control in an .aspx file. The check_operator() function sets the operator of the CompareValidator control equal to the selected operator in the ListBox control, then it validates the CompareValidator control. If validation fails, the text "Validation Failed!" will be displayed in red on a yellow background in the CompareValidator control.


ASP.NET CustomValidator Control

Definition and Usage

The CustomValidator control allows you to write a method to handle the validation of the value entered.

Properties

Property

Description

BackColor

The background color of the CustomValidator control

ClientValidationFunction

Specifies the name of the client-side validation script function to be executed. Note: The script must be in a language that the browser supports, such as VBScript or JScript

With VBScript, the function must be in the form:

Sub FunctionName (source, arguments)

With JScript, the function must be in the form:

Function FunctionName (source, arguments)

ControlToValidate

The id of the control to validate

Display

The display behavior for the validation control. Legal values are:

· None (the control is not displayed. Used to show the error message only in the ValidationSummary control)
· Static (the control displays an error message if validation fails. Space is reserved on the page for the message even if the input passes validation.
· Dynamic (the control displays an error message if validation fails. Space is not reserved on the page for the message if the input passes validation

EnableClientScript

A Boolean value that specifies whether client-side validation is enabled or not

Enabled

A Boolean value that specifies whether the validation control is enabled or not

ErrorMessage

The text to display in the ValidationSummary control when validation fails. Note: This text will also be displayed in the validation control if the Text property is not set

ForeColor

The foreground color of the control

id

A unique id for the control

IsValid

A Boolean value that indicates whether the control specified by ControlToValidate is determined to be valid

OnServerValidate

Specifies the name of the server-side validation script function to be executed

runat

Specifies that the control is a server control. Must be set to "server"

Text

The message to display when validation fails

Examples

CustomValidator

In this example we declare two Label controls, one TextBox control, one Button control, and one CustomValidator control in an .aspx file. The user() function checks the length of the input value. If the length is <8 or >16 the text "A username must be between 8 and 16 characters!" will appear in the CustomValidator control.


ASP.NET - Data Binding

We may use data binding to fill lists with selectable items from an imported data source, like a database, an XML file, or a script.

Data Binding

The following controls are list controls which support data binding:

· asp:RadioButtonList
· asp:CheckBoxList
· asp:DropDownList
· asp:Listbox

The selectable items in each of the above controls are usually defined by one or more asp:ListItem controls, like this:

<html>

<body>

<form runat="server">

<asp:RadioButtonList id="countrylist" runat="server">

<asp:ListItem value="N" text="Norway" />

<asp:ListItem value="S" text="Sweden" />

<asp:ListItem value="F" text="France" />

<asp:ListItem value="I" text="Italy" />

</asp:RadioButtonList>

</form>

</body>

</html>

However, with data binding we may use a separate source, like a database, an XML file, or a script to fill the list with selectable items.

By using an imported source, the data is separated from the HTML, and any changes to the items are made in the separate data source.

In the next three chapters, we will describe how to bind data from a scripted data source.


ASP.NET Data Binding with XML

ASP .NET - XML Files

We can bind an XML file to a list control.

Examples

XML RadiobuttonList

An XML File

Here is an XML file named "countries.xml":

<?xml version="1.0" encoding="ISO-8859-1"?>

<countries>

<country>

<text>Norway</text>

<value>N</value>

</country>

<country>

<text>Sweden</text>

<value>S</value>

</country>

<country>

<text>France</text>

<value>F</value>

</country>

<country>

<text>Italy</text>

<value>I</value>

</country>

</countries>

Take a look at the XML file:

Bind a DataSet to a List Control

First, import the "System.Data" namespace. We need this namespace to work with DataSet objects. Include the following directive at the top of an .aspx page:

<%@ Import Namespace="System.Data" %>

Next, create a DataSet for the XML file and load the XML file into the DataSet when the page is first loaded:

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycountries=New DataSet

mycountries.ReadXml(MapPath("countries.xml"))

end if

end sub

To bind the DataSet to a RadioButtonList control, first create a RadioButtonList control (without any asp:ListItem elements) in an .aspx page:

<html>

<body>

<form runat="server">

<asp:RadioButtonList id="rb" runat="server"

AutoPostBack="True" />

</form>

</body>

</html>

Then add the script that builds the XML DataSet:

<%@ Import Namespace="System.Data" %>

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycountries=New DataSet

mycountries.ReadXml(MapPath("countries.xml"))

rb.DataSource=mycountries

rb.DataValueField="value"

rb.DataTextField="text"

rb.DataBind()

end if

end sub

</script>

<html>

<body>

<form runat="server">

<asp:RadioButtonList id="rb" runat="server"

AutoPostBack="True" onSelectedIndexChanged="displayMessage" />

</form>

</body>

</html>

Then we add a sub routine to be executed when the user clicks on an item in the RadioButtonList control. When a radio button is clicked, a text will appear in a label:

<%@ Import Namespace="System.Data" %>

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycountries=New DataSet

mycountries.ReadXml(MapPath("countries.xml"))

rb.DataSource=mycountries

rb.DataValueField="value"

rb.DataTextField="text"

rb.DataBind()

end if

end sub

sub displayMessage(s as Object,e As EventArgs)

lbl1.text="Your favorite country is: " & rb.SelectedItem.Text

end sub

</script>

<html>

<body>

<form runat="server">

<asp:RadioButtonList id="rb" runat="server"

AutoPostBack="True" onSelectedIndexChanged="displayMessage" />

<p><asp:label id="lbl1" runat="server" /></p>

</form>

</body>

</html>


ASP.NET - Database Connection

ADO.NET is also a part of the .NET Framework. ADO.NET is used to handle data access. With ADO.NET you can work with databases.

Examples

Database connection - Bind to a Repeater control

What is ADO.NET?

· ADO.NET is a part of the .NET Framework
· ADO.NET consists of a set of classes used to handle data access
· ADO.NET is entirely based on XML
· ADO.NET has, unlike ADO, no Recordset object

Create a Database Connection

We are going to use the Northwind database in our examples.

First, import the "System.Data.OleDb" namespace. We need this namespace to work with Microsoft Access and other OLE DB database providers. We will create the connection to the database in the Page_Load subroutine. We create a dbconn variable as a new OleDbConnection class with a connection string which identifies the OLE DB provider and the location of the database. Then we open the database connection:

<%@ Import Namespace="System.Data.OleDb" %>

<script runat="server">

sub Page_Load

dim dbconn

dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;

data source=" & server.mappath("northwind.mdb"))

dbconn.Open()

end sub

</script>

Note: The connection string must be a continuous string without a line break!

Create a Database Command

To specify the records to retrieve from the database, we will create a dbcomm variable as a new OleDbCommand class. The OleDbCommand class is for issuing SQL queries against database tables:

<%@ Import Namespace="System.Data.OleDb" %>

<script runat="server">

sub Page_Load

dim dbconn,sql,dbcomm

dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;

data source=" & server.mappath("northwind.mdb"))

dbconn.Open()

sql="SELECT * FROM customers"

dbcomm=New OleDbCommand(sql,dbconn)

end sub

</script>

Create a DataReader

The OleDbDataReader class is used to read a stream of records from a data source. A DataReader is created by calling the ExecuteReader method of the OleDbCommand object:

<%@ Import Namespace="System.Data.OleDb" %>

<script runat="server">

sub Page_Load

dim dbconn,sql,dbcomm,dbread

dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;

data source=" & server.mappath("northwind.mdb"))

dbconn.Open()

sql="SELECT * FROM customers"

dbcomm=New OleDbCommand(sql,dbconn)

dbread=dbcomm.ExecuteReader()

end sub

</script>

Bind to a Repeater Control

Then we bind the DataReader to a Repeater control:

<%@ Import Namespace="System.Data.OleDb" %>

<script runat="server">

sub Page_Load

dim dbconn,sql,dbcomm,dbread

dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;

data source=" & server.mappath("northwind.mdb"))

dbconn.Open()

sql="SELECT * FROM customers"

dbcomm=New OleDbCommand(sql,dbconn)

dbread=dbcomm.ExecuteReader()

customers.DataSource=dbread

customers.DataBind()

dbread.Close()

dbconn.Close()

end sub

</script>

<html>

<body>

<form runat="server">

<asp:Repeater id="customers" runat="server">

<HeaderTemplate>

<table border="1" width="100%">

<tr>

<th>Companyname</th>

<th>Contactname</th>

<th>Address</th>

<th>City</th>

</tr>

</HeaderTemplate>

<ItemTemplate>

<tr>

<td><%#Container.DataItem("companyname")%></td>

<td><%#Container.DataItem("contactname")%></td>

<td><%#Container.DataItem("address")%></td>

<td><%#Container.DataItem("city")%></td>

</tr>

</ItemTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

</form>

</body>

</html>

Close the Database Connection

Always close both the DataReader and database connection after access to the database is no longer required:

dbread.Close()

dbconn.Close()


ASP.NET DropDownList Control

Definition and Usage

The DropDownList control is used to create a drop-down list.

Each selectable item in a DropDownList control is defined by a ListItem element!

Tip: This control supports data binding!

Properties

Property | Description
AutoPostBack | A Boolean value that specifies whether the form should be posted immediately after one of the items changes select status or not. Default is false
BorderColor | Specifies the color of the border around the drop-down list
BorderStyle | Specifies the style of the border around the drop-down list
BorderWidth | Specifies the width of the border around the drop-down list
DataSource | The data source to use
DataTextField | A field in the data source to be displayed in the drop-down list
DataValueField | A field in the data source that specifies the value of each selectable item in the drop-down list
id | A unique id for the control
OnSelectedIndexChanged | The name of the function to be executed when the index of the selected item has changed
runat | Specifies that the control is a server control. Must be set to "server"

Examples

DropdownList

In this example we declare one DropDownList control in an .aspx file. Then we create an event handler for the Click event which displays some text and the selected item, in a Label control.


ASP.NET Event Handlers

ASP.NET - Events

An Event Handler is a subroutine that executes code for a given event.

ASP.NET - Event Handlers

Look at the following code:

<%

lbl1.Text="The date and time is " & now()

%>

<html>

<body>

<form runat="server">

<h3><asp:label id="lbl1" runat="server" /></h3>

</form>

</body>

</html>

When will the code above be executed? The answer is: "You don't know..."

The Page_Load Event

The Page_Load event is one of many events that ASP.NET understands. The Page_Load event is triggered when a page loads, and ASP.NET will automatically call the subroutine Page_Load, and execute the code inside it:

<script runat="server">

Sub Page_Load

lbl1.Text="The date and time is " & now()

End Sub

</script>

<html>

<body>

<form runat="server">

<h3><asp:label id="lbl1" runat="server" /></h3>

</form>

</body>

</html>

Note: The Page_Load event contains no object references or event arguments!

The Page.IsPostBack Property

The Page_Load subroutine runs EVERY time the page is loaded. If you want to execute the code in the Page_Load subroutine only the FIRST time the page is loaded, you can use the Page.IsPostBack property. If the Page.IsPostBack property is false, the page is loaded for the first time, if it is true, the page is posted back to the server (i.e. from a button click on a form):

<script runat="server">

Sub Page_Load

if Not Page.IsPostBack then

lbl1.Text="The date and time is " & now()

end if

End Sub

Sub Submit(s As Object, e As EventArgs)

lbl2.Text="Hello World!"

End Sub

</script>

<html>

<body>

<form runat="server">

<h3><asp:label id="lbl1" runat="server" /></h3>

<h3><asp:label id="lbl2" runat="server" /></h3>

<asp:button text="Submit" onclick="submit" runat="server" />

</form>

</body>

</html>

The example above will write the "The date and time is...." message only the first time the page is loaded. When a user clicks on the Submit button, the submit subroutine will write "Hello World!" to the second label, but the date and time in the first label will not change.


ASP.NET Examples

ASP.NET HTML Controls

HTMLAnchor

HTMLButton

HTMLImage 2

HTMLInputCheckbox

HTMLInputHidden

HTMLInputImage

HTMLInputRadiobutton

HTMLTable

HTMLTextarea

ASP.NET Web Controls

AdRotator

Button

Button 2

Calendar

Calendar 2

Calendar 3

Checkbox

CheckboxList

DropdownList

Hyperlink

Image

LinkButton

Literal

Literal 2

Panel

Radiobutton

RadiobuttonList

Repeater

Repeater with < AlternatingItemTemplate>

Repeater with < SeparatorTemplate>

Table

Table 2

Textbox

Textbox 2

Textbox 3

XML

ASP.NET Validation Controls

CompareValidator

CustomValidator

RangeValidator

RangeValidator 2

RegularExpressionValidator

RequiredFieldValidator

Validationsummary

Validationsummary 2

ASP.NET Events

Page_Load

ASP.NET Data Binding

ArrayList RadioButtonList

ArrayList DropDownList

Hashtable RadioButtonList 1

Hashtable RadiobuttonList 2

SortedList RadioButtonList 1

SortedList RadiobuttonList 2

SortedList DropDownList

ASP.NET Database

Database connection - Bind to a DataList control


ASP.NET Hashtable

ASP.NET - The Hashtable Object

The Hashtable object contains items in key/value pairs.

Examples

Example 1 - Hashtable RadioButtonList

Example 2 - Hashtable RadiobuttonList

Example 3 - Hashtable DropDownList

Create a Hashtable

The Hashtable object contains items in key/value pairs. The keys are used as indexes, and very quick searches can be made for values by searching through their keys.

Items are added to the Hashtable with the Add() method.

The following code creates a Hashtable named mycountries and four elements are added:

<script runat="server">

Sub Page_Load

if Not Page.IsPostBack then

dim mycountries=New Hashtable

mycountries.Add("N","Norway")

mycountries.Add("S","Sweden")

mycountries.Add("F","France")

mycountries.Add("I","Italy")

end if

end sub

</script>

Data Binding

A Hashtable object may automatically generate the text and values to the following controls:

· asp:RadioButtonList
· asp:CheckBoxList
· asp:DropDownList
· asp:Listbox

To bind data to a RadioButtonList control, first create a RadioButtonList control (without any asp:ListItem elements) in an .aspx page:

<html>

<body>

<form runat="server">

<asp:RadioButtonList id="rb" runat="server"

AutoPostBack="True" />

</form>

</body>

</html>

Then add the script that builds the list:

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycountries=New Hashtable

mycountries.Add("N","Norway")

mycountries.Add("S","Sweden")

mycountries.Add("F","France")

mycountries.Add("I","Italy")

rb.DataSource=mycountries

rb.DataValueField="Key"

rb.DataTextField="Value"

rb.DataBind()

end if

end sub

</script>

<html>

<body>

<form runat="server">

<asp:RadioButtonList id="rb" runat="server"

AutoPostBack="True" />

</form>

</body>

</html>

Then we add a sub routine to be executed when the user clicks on an item in the RadioButtonList control. When a radio button is clicked, a text will appear in a label:

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycountries=New Hashtable

mycountries.Add("N","Norway")

mycountries.Add("S","Sweden")

mycountries.Add("F","France")

mycountries.Add("I","Italy")

rb.DataSource=mycountries

rb.DataValueField="Key"

rb.DataTextField="Value"

rb.DataBind()

end if

end sub

sub displayMessage(s as Object,e As EventArgs)

lbl1.text="Your favorite country is: " & rb.SelectedItem.Text

end sub

</script>

<html>

<body>

<form runat="server">

<asp:RadioButtonList id="rb" runat="server"

AutoPostBack="True" onSelectedIndexChanged="displayMessage" />

<p><asp:label id="lbl1" runat="server" /></p>

</form>

</body>

</html>

Note: You cannot choose the sort order of the items added to the Hashtable. To sort items alphabetically or numerically, use the SortedList object.


ASP.NET HTML Server Controls

HTML Server Controls

HTML server controls are HTML tags understood by the server.

HTML Server Controls

HTML elements in ASP.NET files are, by default, treated as text. To make these elements programmable, add a runat="server" attribute to the HTML element. This attribute indicates that the element should be treated as a server control.

Note: All HTML server controls must be within a <form> tag with the runat="server" attribute!

Note: ASP.NET requires that all HTML elements must be properly closed and properly nested.

HTML Server Control | Description
 | Controls an <a> HTML element
 | Controls a <button> HTML element
HtmlForm | Controls a <form> HTML element
HtmlGeneric | Controls other HTML element not specified by a specific HTML server control, like <body>, <div>, <span>, etc.
HtmlImage | Controls an <image> HTML element
HtmlInputButton | Controls <input type="button">, <input type="submit">, and <input type="reset"> HTML elements
 | Controls an <input type="checkbox"> HTML element
HtmlInputFile | Controls an <input type="file"> HTML element
 | Controls an <input type="hidden"> HTML element
 | Controls an <input type="image"> HTML element
HtmlInputRadioButton | Controls an <input type="radio"> HTML element
HtmlInputText | Controls <input type="text"> and <input type="password"> HTML elements
HtmlSelect | Controls a <select> HTML element
HtmlTable | Controls a <table> HTML element
HtmlTableCell | Controls <td>and <th> HTML elements
HtmlTableRow | Controls a <tr> HTML element
 | Controls a <textarea> HTML element


ASP.NET HtmlAnchor Control

Definition and Usage

The HtmlAnchor control is used to control an <a> element. In HTML, the <a> element is used to create a hyperlink. The hyperlink may link to a bookmark or to another Web page.

Properties

Property | Description
Attributes | Returns all attribute name and value pairs of the element
Disabled | A Boolean value that indicates whether or not the control should be disabled. Default is false
HRef | The URL target of the link
id | A unique id for the control
InnerHtml | Sets or returns the content between the opening and closing tags of the HTML element. Special characters are not automatically converted to HTML entities
InnerText | Sets or returns all text between the opening and closing tags of the HTML element. Special characters are automatically converted to HTML entities
Name | The name of the anchor
OnServerClick | The name of the function to be executed when the link is clicked
runat | Specifies that the control is a server control. Must be set to "server"
Style | Sets or returns the CSS properties that are applied to the control
TagName | Returns the element tag name
Target | The target window to open
Title | A title to be displayed by the browser (like the alt attribute of the img element)
Visible | A Boolean value that indicates whether or not the control should be visible

Examples

HTMLAnchor

In this example we declare two HtmlAnchor controls in an .aspx file (remember to embed the control inside an HtmlForm control). Then we modify the URL, target, and title of the HtmlAnchor controls in an event handler (an event handler is a subroutine that executes code for a given event). The Page_Load event is one of many events that ASP .NET understands.


ASP.NET HtmlButton Control

Definition and Usage

The HtmlButton control is used to control a <button> element. In HTML, the <button> element is used to create a push button.

Properties

Property | Description
Attributes | Returns all attribute name and value pairs of the element
Disabled | A Boolean value that indicates whether or not the control should be disabled. Default is false
id | A unique id for the control
InnerHtml | Sets or returns the content between the opening and closing tags of the HTML element. Special characters are not automatically converted to HTML entities
InnerText | Sets or returns all text between the opening and closing tags of the HTML element. Special characters are automatically converted to HTML entities
OnServerClick | The name of the function to be executed when the button is clicked
runat | Specifies that the control is a server control. Must be set to "server"
Style | Sets or returns the CSS properties that are applied to the control
TagName | Returns the element tag name
Visible | A Boolean value that indicates whether or not the control should be visible

Examples

In this example we declare two HtmlButton controls in an .aspx file (remember to embed the control inside an HtmlForm control). Next, we write an event handler that specifies what to happen when a button is clicked.


ASP.NET HtmlForm Control

Definition and Usage

The HtmlForm control is used to control a <form> element. In HTML, the <form> element is used to create a form.

Note: All HTML server controls must be within the HtmlForm control!

Note: You can only have one HtmlForm control on a single page!

Properties

Property | Description
Action | A URL that defines where to send the data when the form is submitted. Note: This attribute is always set to the URL of the page itself!
Attributes | Returns all attribute name and value pairs of the element
Disabled | A Boolean value that indicates whether or not the control should be disabled. Default is false
EncType | The mime type used to encode the content of the form
id | A unique id for the control
InnerHtml | Sets or returns the content between the opening and closing tags of the HTML element. Special characters are not automatically converted to HTML entities
InnerText | Sets or returns all text between the opening and closing tags of the HTML element. Special characters are automatically converted to HTML entities
Method | How the form posts data to the server. Legal values are: "post" and "get". Default is "post"
Name | The name of the form
runat | Specifies that the control is a server control. Must be set to "server"
Style | Sets or returns the CSS properties that are applied to the control
TagName | Returns the element tag name
Target | The target window to load the URL
Visible | A Boolean value that indicates whether or not the control should be visible

Examples

HTMLForm

In this example we declare one HtmlInputText controls, one HtmlInputButton control, and one HtmlGeneric control in an .aspx file (remember to embed the controls inside an HtmlForm control). When the submit button is triggered, the submit subroutine is executed. The submit subroutine writes a welcome message to the p element.


ASP.NET HtmlGeneric Control

Definition and Usage

The HtmlGeneric control is used to control other HTML element not specified by a specific HTML server control, like <body>, <div>, <span>, <font>, <p>, etc.

Properties

Property | Description
Attributes | Returns all attribute name and value pairs of the element
Disabled | A Boolean value that indicates whether or not the control should be disabled. Default is false
id | A unique id for the control
InnerHtml | Sets or returns the content between the opening and closing tags of the HTML element. Special characters are not automatically converted to HTML entities
InnerText | Sets or returns all text between the opening and closing tags of the HTML element. Special characters are automatically converted to HTML entities
runat | Specifies that the control is a server control. Must be set to "server"
Style | Sets or returns the CSS properties that are applied to the control
TagName | Returns the element tag name
Visible | A Boolean value that indicates whether or not the control should be visible

Examples

HTMLGeneric

In this example we declare one HtmlInputText controls, one HtmlInputButton control, and one HtmlGeneric control (the <p> tag) in an .aspx file (remember to embed the controls inside an HtmlForm control). When the submit button is triggered, the submit subroutine is executed. The submit subroutine writes a welcome message to the p element.


ASP.NET HtmlImage Control

Definition and Usage

The HtmlImage control is used to control an <img> element. In HTML, the <img> element is used to display an image.

Properties

Property

Description

Align

How to align the image according to surrounding elements. Legal values are:

· top
· middle
· bottom
· left
· right

Alt

A short description of the image

Attributes

Returns all attribute name and value pairs of the element

Border

The width of the borders around the image

Disabled

A Boolean value that indicates whether or not the control should be disabled. Default is false

Height

The height of the image

id

A unique id for the control

runat

Specifies that the control is a server control. Must be set to "server"

Src

The URL of the image to display

Style

Sets or returns the CSS properties that are applied to the control

TagName

Returns the element tag name

Visible

A Boolean value that indicates whether or not the control should be visible

Width

The width of the image

Examples

HTMLImage

In this example we declare an HtmlImage control in an .aspx file (remember to embed the control inside an HtmlForm control). Then we modify the src, alt and border properties of the HtmlImage control in an event handler (an event handler is a subroutine that executes code for a given event). The Page_Load event is one of many events that ASP .NET understands:

HTMLImage 2

In this example we declare an HtmlImage and an HTMLSelect control in an .aspx file (remember to embed the controls inside an HtmlForm control). Then we modify the src property of the HtmlImage control based on user choices. The value selected in the HtmlSelect control determines which image to display.


ASP.NET HtmlInputFile Control

Definition and Usage

The HtmlInputFile control is used to control an <input type="file"> element. In HTML, this element is used to upload a file to the server.

Properties

Property | Description
Accept | List of acceptable MIME types
Attributes | Returns all attribute name and value pairs of the element
Disabled | A Boolean value that indicates whether or not the control should be disabled. Default is false
id | A unique id for the element
MaxLength | The maximum number of characters allowed in this element
Name | The name of the element
PostedFile | Gets access to the posted file
runat | Specifies that the element is a server control. Must be set to "server"
Size | The width of the element
Style | Sets or returns the CSS properties that are applied to the control
TagName | Returns the element tag name
Type | The type of the element
Value | The value of the element
Visible | A Boolean value that indicates whether or not the control should be visible

Example 1

In the following example we declare one HtmlInputFile control, one HtmlInputButton control, and three HtmlGeneric controls in an .aspx file (remember to embed the controls inside an HtmlForm control). When the submit button is triggered, the submit subroutine is executed. The file name and file type are displayed on the page, while the file itself is uploaded to the c directory on the server:

<script runat="server">

Sub submit(Sender as Object, e as EventArgs)

fname.InnerHtml=MyFile.PostedFile.FileName

clength.InnerHtml=MyFile.PostedFile.ContentLength

MyFile.PostedFile.SaveAs("c:\uploadfile.txt")

End Sub

</script>

<html>

<body>

<form method="post"

enctype="multipart/form-data" runat="server">

<p>

Select file to upload to server:

<input id="MyFile" type="file" size="40" runat="server">

</p>

<p>

<input type="submit" value="Upload!" OnServerclick="submit"

runat="server">

</p>

<p>

<div runat="server">

FileName: <span id="fname" runat="server"/><br />

ContentLength: <span id="clength" runat="server"/> bytes

</div>

</p>

</form>

</body>

</html>


ASP.NET HtmlInputHidden Control

Definition and Usage

The HtmlInputHidden control is used to control an <input type="hidden"> element. In HTML, this element is used to create a hidden input field.

Properties and Events

Property | Description
Attributes | Returns all attribute name and value pairs of the element
Disabled | A Boolean value that indicates whether or not the control should be disabled. Default is false
id | A unique id for the element
Name | The name of the element
runat | Specifies that the element is a server control. Must be set to "server"
Style | Sets or returns the CSS properties that are applied to the control
TagName | Returns the element tag name
Type | The type of the element
Value | The value of the hidden field
Visible | A Boolean value that indicates whether or not the control should be visible

Event | Description
ServerChange | When the content of the element has changed

Examples

HTMLInputHidden

In this example we declare one HtmlInputHidden control, one HtmlInputText control, one HtmlInputButton control, and one HtmlGeneric control in an .aspx file (remember to embed the controls inside an HtmlForm control). When the submit button is triggered, the submit subroutine is executed. The submit subroutine sets the value of the hidden field equal to value of the input field and then displays the value of the hidden field in the p element.


ASP.NET HtmlInputImage Control

Definition and Usage

The HtmlInputImage control is used to control an <input type="image"> element. In HTML, this element is used to create an input button using an image, instead of a regular push-style button.

Properties and Events

Property | Description
Align | The alignment of the image
Alt | An alternate text to display for the image
Attributes | Returns all attribute name and value pairs of the element
Border | The width of the borders around the element
Disabled | A Boolean value that indicates whether or not the control should be disabled. Default is false
id | A unique id for the control
Name | The name of the element
OnServerClick | The name of the function to be executed when the image is clicked
runat | Specifies that the element is a server control. Must be set to "server"
Src | The source of the image
Style | Sets or returns the CSS properties that are applied to the control
TagName | Returns the element tag name
Type | The type of the element
Value | The value of the element
Visible | A Boolean value that indicates whether or not the control should be visible

Examples

In this example we declare two HtmlInputImage controls and one HtmlGeneric control in an .aspx file (remember to embed the controls inside an HtmlForm control). If the user clicks on the first image, the button1 subroutine is executed. This subroutine sends the message "You clicked the smiley button!" to the p element. If the user clicks on the second image, the button2 subroutine is executed. This subroutine sends the message "You clicked the angry button!" to the p element.


ASP.NET HtmlInputRadioButton Control

Definition and Usage

The HtmlInputRadioButton control is used to control an <input type="radio"> element. In HTML, this element is used to create a radiobutton.

Properties

Property | Description
Attributes | Returns all attribute name and value pairs of the element
Checked | A Boolean value that specifies whether or not the element is to be selected
Disabled | A Boolean value that indicates whether or not the control should be disabled. Default is false
id | A unique id for the element
Name | The name of the radio button group
runat | Specifies that the element is a server control. Must be set to "server"
Style | Sets or returns the CSS properties that are applied to the control
TagName | Returns the element tag name
Type | The type of the element
Value | The value of the element
Visible | A Boolean value that indicates whether or not the control should be visible

Examples

HTMLInputRadiobutton

In this example we declare three HtmlInputRadioButton controls, one HtmlInputButton control, and one HtmlGeneric control in an .aspx file (remember to embed the controls inside an HtmlForm control). When the submit button is triggered, the submit subroutine is executed. The submit subroutine may respond in three ways: if the radiobutton with id="r1" is selected, the server sends the message "Your favorite color is red" to the p element. If the radiobutton with id="r2" is selected, the server sends the message "Your favorite color is green" to the p element. If the radiobutton with id="r3" is selected, the server sends the message "Your favorite color is blue" to the p element.


ASP.NET HtmlInputText Control

Definition and Usage

The HtmlInputText control is used to control <input type="text"> and <input type="password"> elements. In HTML, these elements are used to create a text field and a password field.

Properties

Property | Description
Attributes | Returns all attribute name and value pairs of the element
Disabled | A Boolean value that indicates whether or not the control should be disabled. Default is false
id | A unique id for the element
MaxLength | The maximum number of characters allowed in this element
Name | The name of the element
runat | Specifies that the element is a server control. Must be set to "server"
Size | The width of the element
Style | Sets or returns the CSS properties that are applied to the control
TagName | Returns the element tag name
Type | The type of the element
Value | The value of the element
Visible | A Boolean value that indicates whether or not the control should be visible

Examples

In this example we declare one HtmlInputText controls, one HtmlInputButton control, and one HtmlGeneric control in an .aspx file (remember to embed the controls inside an HtmlForm control). When the submit button is triggered, the submit subroutine is executed. The submit subroutine writes a welcome message to the p element.


ASP.NET HtmlSelect Control

Definition and Usage

The HtmlSelect control is used to control a <select> element. In HTML, the <select> element is used to create a drop-down list.

Properties

Property | Description
Attributes | Returns all attribute name and value pairs of the element
DataMember | A name of a data table to use
DataSource | A data source to use
DataTextField | A field in the data source to be displayed in the drop-down list
DataValueField | A field in the data source that specifies the value of each selectable item in the drop-down list
Disabled | A Boolean value that indicates whether or not the control should be disabled. Default is false
id | A unique id for the control
InnerHtml | Sets or returns the content between the opening and closing tags of the HTML element. Special characters are not automatically converted to HTML entities
InnerText | Sets or returns all text between the opening and closing tags of the HTML element. Special characters are automatically converted to HTML entities
Items | The list of items in the drop-down list
Multiple | Whether multiple items can be selected at a time
OnServerChange | The name of the function to be executed when the selected item has changed
runat | Specifies that the control is a server control. Must be set to "server"
SelectedIndex | The index of the currently selected item
Size | The number of visible items in the drop-down list
Style | Sets or returns the CSS properties that are applied to the control
TagName | Returns the element tag name
Value | The value of the currently selected item
Visible | A Boolean value that indicates whether or not the control should be visible

Examples

HTMLSelect

In this example we declare an HtmlImage and an HTMLSelect control in an .aspx file (remember to embed the controls inside an HtmlForm control). Then we modify the src property of the HtmlImage control based on user choices. The value selected in the HtmlSelect control determines which image to display.


ASP.NET HtmlTable Control

Definition and Usage

The HtmlTable control is used to control a <table> element. In HTML, the <table> element is used to create a table.

Properties

Property | Description
Align | Specifies the alignment of the table
Attributes | Returns all attribute name and value pairs of the element
BGColor | Specifies the background color of the table
Border | Specifies the width of the borders Tip: Set border="0" to display tables with no borders!
BorderColor | Specifies the color of the borders
CellPadding | Specifies the space between the cell walls and contents
CellSpacing | Specifies the space between cells
Disabled | A Boolean value that indicates whether or not the control should be disabled. Default is false
Height | Specifies the height of the table
id | A unique id for the control
InnerHtml | Sets or returns the content between the opening and closing tags of the HTML element. Special characters are not automatically converted to HTML entities
InnerText | Sets or returns all text between the opening and closing tags of the HTML element. Special characters are automatically converted to HTML entities
Rows | Returns an HtmlRowCollection object which represents all rows in the table
runat | Specifies that the control is a server control. Must be set to "server"
Style | Sets or returns the CSS properties that are applied to the control
TagName | Returns the element tag name
Visible | A Boolean value that indicates whether or not the control should be visible
Width | Specifies the width of the table

Examples

In this example we declare two HtmlSelect controls, one HtmlInputButton control, and one HtmlTable control in an .aspx file (remember to embed the controls inside an HtmlForm control). The user may choose number of cells and rows. When the submit button is triggered, the submit subroutine is executed. The submit subroutine generates the table based on what the user did input.

HTMLTable 2

In this example we declare an HtmlTable control and an HtmlInputButton control in an .aspx file (remember to embed the controls inside an HtmlForm control). When the submit button is triggered, the submit subroutine is executed. The submit subroutine modifies the background color and the border color of the table, it also changes the contents of the cells.


ASP.NET HtmlTableCell Control

Definition and Usage

The HtmlTableCell control is used to control <td> and <th> elements. In HTML, these elements are used to create table cells and header table cells.

Properties

Property | Description
Align | The horizontal alignment of cell content
Attributes | Returns all attribute name and value pairs of the element
BGColor | The background color of the cell
BorderColor | The color of the borders
ColSpan | The number of columns this cell should span
Disabled | A Boolean value that indicates whether or not the control should be disabled. Default is false
Height | The height of the cell
id | A unique id for the control
InnerHtml | Sets or returns the content between the opening and closing tags of the HTML element. Special characters are not automatically converted to HTML entities
InnerText | Sets or returns all text between the opening and closing tags of the HTML element. Special characters are automatically converted to HTML entities
Nowrap | A Boolean value that specifies whether or not the text within this control should wrap
RowSpan | The number of rows this cell should span
runat | Specifies that the control is a server control. Must be set to "server"
Style | Sets or returns the CSS properties that are applied to the control
TagName | Returns the element tag name
VAlign | The vertical alignment of cell content
Visible | A Boolean value that indicates whether or not the control should be visible
Width | The width of the cell

Examples

HTMLTable

In this example we declare two HtmlSelect controls, one HtmlInputButton control, and one HtmlTable control in an .aspx file (remember to embed the controls inside an HtmlForm control). The user may choose number of cells and rows. When the submit button is triggered, the submit subroutine is executed. The submit subroutine generates the table based on what the user did input.

HTMLTable 2

In this example we declare an HtmlTable control and an HtmlInputButton control in an .aspx file (remember to embed the controls inside an HtmlForm control). When the submit button is triggered, the submit subroutine is executed. The submit subroutine modifies the background color and the border color of the table, it also changes the contents of the cells.


ASP.NET HyperLink Control

Definition and Usage

The HyperLink control is used to create a hyperlink.

Properties

Property

Description

id

A unique id for the control

ImageUrl

The URL of the image to display for the link

NavigateUrl

The target URL of the link

runat

Specifies that the control is a server control. Must be set to "server"

Target

Where to open the target URL.

· _blank - the target URL will open in a new window
· _self - the target URL will open in the same frame as it was clicked
· _parent - the target URL will open in the parent frameset
· _top - the target URL will open in the full body of the window

Text

The text to display for the link

Examples

Hyperlink

In this example we declare a HyperLink control in an .aspx file.


ASP.NET Image Control

Definition and Usage

The Image control is used to display an image.

Properties

Property

Description

AlternateText

An alternate text for the image

Enabled

Specifies whether this control is enabled

Font

Specifies the font for the alternate text

id

A unique id for the control

ImageAlign

Specifies the alignment of the image. Legal values are:

· NotSet
· AbsBottom
· AbsMiddle
· BaseLine
· Bottom
· Left
· Middle
· Right
· TextTop
· Top

ImageUrl

The URL of the image to display for the link

runat

Specifies that the control is a server control. Must be set to "server"

Examples

Image

In this example we declare an Image control in an .aspx file.


ASP.NET Label Control

Definition and Usage

The Label control is used to display text on a page. The text is programmable.

Note: This control lets you apply styles to its content!

Properties

Property | Description
id | A unique id for the control
runat | Specifies that the control is a server control. Must be set to "server"
Text | The text to display in the label

Examples

Label

In this example we declare one Label control, one TextBox control, and one Button control in an .aspx file. When the user clicks on the button, the submit subroutine is executed. The subroutine copies the content of the TextBox control to the Label control.


ASP.NET LinkButton Control

Definition and Usage

The LinkButton control is used to create a hyperlink button.

Note: This control looks like a HyperLink control but has the same functionality as the Button control!

Properties

Property | Description
CausesValidation | By default, a page is validated when a Button control is clicked. To prevent a page from being validated when clicking on a Button control, set this property to "false"
Command | The command associated with the Command event
CommandArgument | Additional information about the command to perform
id | A unique id for the control
OnClick | The name of the function to be executed when the link is clicked
runat | Specifies that the control is a server control. Must be set to "server"
Text | The text to display for the link

Examples

LinkButton

In this example we declare one LinkButton control and one Label control in an .aspx file. When the user clicks on the link, the lbClick subroutine is executed. The subroutine sends the text "You clicked the LinkButton control" to the Label control.


ASP.NET ListBox Control

Definition and Usage

The ListBox control is used to create a single- or multi-selection drop-down list.

Each selectable item in a ListBox control is defined by a ListItem element!

Tip: This control supports data binding!

Properties

Property | Description
AutoPostBack | A Boolean value that specifies whether the form should be posted immediately after the index of the selected item has changed or not. Default is false
BorderColor | Specifies the color of the border around the drop-down list
BorderStyle | Specifies the style of the border around the drop-down list
BorderWidth | Specifies the width of the border around the drop-down list
DataSource | The data source to use
DataTextField | A field in the data source to be displayed in the drop-down list
DataValueField | A field in the data source that specifies the value of each selectable item in the drop-down list
id | A unique id for the control
OnSelectedIndexChanged | The name of the function to be executed when the index of the selected item has changed
Rows | Specifies the height of the control
runat | Specifies that the control is a server control. Must be set to "server"
SelectionMode | Allows single or multiple selections. Legal values: "single" and "multiple". Default is "single"

Examples

Listbox

In this example we declare one ListBox control in an .aspx file. Then we create an event handler for the Click event which displays some text and the selected item, in a Label control.


ASP.NET Literal Control

Definition and Usage

The Literal control is used to display text on a page. The text is programmable.

Note: This control does not let you apply styles to its content!

Properties

Property | Description
id | A unique id for the control
runat | Specifies that the control is a server control. Must be set to "server"
Text | Specifies the text to display

Examples

Literal

In this example we declare one Literal control which displays some static text in an .aspx file.

Literal 2

In this example we declare one Literal control and one Button control in an .aspx file. When the user clicks on the button, the submit subroutine is executed. The subroutine changes the text of the Literal control.


ASP.NET Panel Control

Definition and Usage

The Panel control is used as a container for other controls.

Tip: This control is often used to generate controls by code and to display and hide groups of controls.

Note: This control renders as an HTML <div> element in IE and as a <table> tag in Mozilla.

Properties

Property

Description

BackImageUrl

Specifies a URL to an image file to display as a background for this control

HorizontalAlign

Specifies the horizontal alignment of the content. Legal values are:

· Center
· Justify
· Left
· NotSet
· Right

id

A unique id for the control

runat

Specifies that the control is a server control. Must be set to "server"

Wrap

A Boolean value that specifies whether the content should wrap or not

Examples

Panel

In this example we declare one Panel control, one CheckBox control, and one Button control in an .aspx file. When the user checks the CheckBox control, and the clicks the Refresh button, the Panel control will hide.


ASP.NET PlaceHolder Control

Definition and Usage

The PlaceHolder control is used to reserve space for controls added by code.

Note: The PlaceHolder control does not produce any visible output (it only acts as a container for other controls on the Web page).

Properties

Property | Description
id | A unique id for the control
runat | Specifies that the control is a server control. Must be set to "server"


ASP.NET RadioButton Control

Definition and Usage

The RadioButton control is used to display a radio button.

Tip: To create a set of radio buttons using data binding, use the RadioButtonList control!

Properties

Property | Description
AutoPostBack | A Boolean value that specifies whether the form should be posted immediately after the Checked property has changed or not. Default is false
Checked | A Boolean value that specifies whether the radio button is checked or not
id | A unique id for the control
GroupName | The name of the group to which this radio button belongs
OnCheckedChanged | The name of the function to be executed when the Checked property has changed
runat | Specifies that the control is a server control. Must be set to "server"
Text | The text next to the radio button
TextAlign | On which side of the radio button the text should appear (right or left)

Examples

Radiobutton

In this example we declare three RadioButton controls, one Button control, and one Label control in an .aspx file. When the submit button is triggered, the submit subroutine is executed. The submit subroutine may respond in three ways: if the radiobutton with id="red" is selected, the server sends the message "You selected Red" to the Label control. If the radiobutton with id="green" is selected, the server sends the message "You selected Green" to the Label control. If the radiobutton with id="green" is selected, the server sends the message "You selected Blue" to the Label control.


ASP.NET RadioButtonList Control

Definition and Usage

The RadioButtonList control is used to create a group of radio buttons.

Each selectable item in a RadioButtonList control is defined by a ListItem element!

Tip: This control supports data binding!

Properties

Property | Description
AutoPostBack | A Boolean value that specifies whether the form should be posted immediately after the index of the selected item has changed or not. Default is false
CellPadding | The space, in pixels, between the cell walls and the radio button group
DataSource | The data source to use
DataTextField | A field in the data source to be displayed in the radio button group
DataValueField | A field in the data source that specifies the value of each selectable item in the radio button group
id | A unique id for the control
OnSelectedIndexChanged | The name of the function to be executed when the index of the selected item has changed
RepeatColumns | The number of columns to use when displaying the radio button group. Default is "1"
RepeatDirection | Specifies whether the radio button group should be repeated horizontally or vertically. Legal values are "Horizontal" and "Vertical". Default is Vertical
RepeatLayout | The layout of the radio button group. Can be "Table" or "Flow". Default is Table
runat | Specifies that the control is a server control. Must be set to "server"
TextAlign | On which side of the radio button the text should appear (right or left)

Examples

RadiobuttonList

In this example we declare one RadioButtonList control, one Button control, and one Label control in an .aspx file. Then we create an event handler for the Click event which displays some text and the selected item, in a Label control.


ASP.NET RangeValidator Control

Definition and Usage

The RangeValidator control is used to check that the user enters an input value that falls between two values. It is possible to check ranges within numbers, dates, and characters.

Note: The validation will not fail if the input control is empty. Use the RequiredFieldValidator control to make the field required.

Note: The validation will not fail if the input value cannot be converted to the data type specified. Use the CompareValidator control, with its Operator property set to ValidationCompareOperator.DataTypeCheck, to verify the data type of the input value.

Properties

Property

Description

BackColor

The background color of the RangeValidator control

ControlToValidate

The id of the control to validate

Display

The display behavior for the validation control. Legal values are:

· None (the control is not displayed. Used to show the error message only in the ValidationSummary control)
· Static (the control displays an error message if validation fails. Space is reserved on the page for the message even if the input passes validation.
· Dynamic (the control displays an error message if validation fails. Space is not reserved on the page for the message if the input passes validation

EnableClientScript

A Boolean value that specifies whether client-side validation is enabled or not

Enabled

A Boolean value that specifies whether the validation control is enabled or not

ErrorMessage

The text to display in the ValidationSummary control when validation fails. Note: This text will also be displayed in the validation control if the Text property is not set

ForeColor

The foreground color of the control

id

A unique id for the control

IsValid

A Boolean value that indicates whether the control specified by ControlToValidate is determined to be valid

MaximumValue

Specifies the maximum value of the input control

MinimumValue

Specifies the minimum value of the input control

runat

Specifies that the control is a server control. Must be set to "server"

Type

Specifies the data type of the value to check. The types are:

· Currency
· Date
· Double
· Integer
· String

Text

The message to display when validation fails

Examples

RangeValidator

In this example we declare one TextBox control, one Button control, and one RangeValidator control in an .aspx file. If validation fails, the text "The date must be between 1/1/2002 and 31/5/2002!" will be displayed in the RangeValidator control.

RangeValidator 2

In this example we declare one TextBox control, one Button control, one Label control, and one RangeValidator control in an .aspx file. The submit() function checks if the page is valid. If it is valid, it returns "The page is valid!" in the Label control. If it is not valid, it returns "The page is not valid!" in the Label control. If validation fails, the text "The value must be from 1 to 100!" will be displayed in the RangeValidator control.


ASP.NET RequiredFieldValidator Control

Definition and Usage

The RequiredFieldValidator control is used to make an input control a required field.

With this control, the validation fails if the input value does not change from its initial value. By default, the initial value is an empty string ("").

Note: Leading and trailing spaces of the input value are removed before validation.

Note: The InitialValue property does not set the default value for the input control. It indicates the value that you do not want the user to enter in the input control.

Properties

Property

Description

BackColor

The background color of the RequiredFieldValidator control

ControlToValidate

The id of the control to validate

Display

The display behavior for the validation control. Legal values are:

· None (the control is not displayed. Used to show the error message only in the ValidationSummary control)
· Static (the control displays an error message if validation fails. Space is reserved on the page for the message even if the input passes validation.
· Dynamic (the control displays an error message if validation fails. Space is not reserved on the page for the message if the input passes validation

EnableClientScript

A Boolean value that specifies whether client-side validation is enabled or not

Enabled

A Boolean value that specifies whether the validation control is enabled or not

ErrorMessage

The text to display in the ValidationSummary control when validation fails. Note: This text will also be displayed in the validation control if the Text property is not set

ForeColor

The foreground color of the control

id

A unique id for the control

InitialValue

Specifies the starting value of the input control. Default value is ""

IsValid

A Boolean value that indicates whether the control specified by ControlToValidate is determined to be valid

runat

Specifies that the control is a server control. Must be set to "server"

Text

The message to display when validation fails

Examples

RequiredFieldValidator

In this example we declare two TextBox controls, one Button control, and one RequiredFieldValidator control in an .aspx file. It shows how to use the RequiredFieldValidator control to make the "txt_name" textbox a required field.


ASP.NET - Server Controls

Server controls are tags that are understood by the server.

Limitations in Classic ASP

The listing below was copied from the previous chapter:

<html>

<body bgcolor="yellow">

<center>

<h2>Hello W3Schools!</h2>

<p><%Response.Write(now())%></p>

</center>

</body>

</html>

The code above illustrates a limitation in Classic ASP: The code block has to be placed where you want the output to appear.

With Classic ASP it is impossible to separate executable code from the HTML itself. This makes the page difficult to read, and difficult to maintain.

ASP.NET - Server Controls

ASP.NET has solved the "spaghetti-code" problem described above with server controls.

Server controls are tags that are understood by the server.

There are three kinds of server controls:

· HTML Server Controls - Traditional HTML tags
· Web Server Controls - New ASP.NET tags
· Validation Server Controls - For input validation

ASP.NET - HTML Server Controls

HTML server controls are HTML tags understood by the server.

HTML elements in ASP.NET files are, by default, treated as text. To make these elements programmable, add a runat="server" attribute to the HTML element. This attribute indicates that the element should be treated as a server control. The id attribute is added to identify the server control. The id reference can be used to manipulate the server control at run time.

Note: All HTML server controls must be within a <form> tag with the runat="server" attribute. The runat="server" attribute indicates that the form should be processed on the server. It also indicates that the enclosed controls can be accessed by server scripts.

In the following example we declare an HtmlAnchor server control in an .aspx file. Then we manipulate the HRef attribute of the HtmlAnchor control in an event handler (an event handler is a subroutine that executes code for a given event). The Page_Load event is one of many events that ASP.NET understands:

<script runat="server">

Sub Page_Load

link1.HRef="http://www.w3schools.com"

End Sub

</script>

<html>

<body>

<form runat="server">

<a id="link1" runat="server">Visit W3Schools!</a>

</form>

</body>

</html>

The executable code itself has been moved outside the HTML.

ASP.NET - Web Server Controls

Web server controls are special ASP.NET tags understood by the server.

Like HTML server controls, Web server controls are also created on the server and they require a runat="server" attribute to work. However, Web server controls do not necessarily map to any existing HTML elements and they may represent more complex elements.

The syntax for creating a Web server control is:

<asp:control_name id="some_id" runat="server" />

In the following example we declare a Button server control in an .aspx file. Then we create an event handler for the Click event which changes the text on the button:

<script runat="server">

Sub submit(Source As Object, e As EventArgs)

button1.Text="You clicked me!"

End Sub

</script>

<html>

<body>

<form runat="server">

<asp:Button id="button1" Text="Click me!"

runat="server" OnClick="submit"/>

</form>

</body>

</html>

ASP.NET - Validation Server Controls

Validation server controls is used to validate user-input. If the user-input does not pass validation, it will display an error message to the user.

Each validation control performs a specific type of validation (like validating against a specific value or a range of values).

By default, page validation is performed when a Button, ImageButton, or LinkButton control is clicked. You can prevent validation when a button control is clicked by setting the CausesValidation property to false.

The syntax for creating a Validation server control is:

<asp:control_name id="some_id" runat="server" />

In the following example we declare one TextBox control, one Button control, and one RangeValidator control in an .aspx file. If validation fails, the text "The value must be from 1 to 100!" will be displayed in the RangeValidator control:

<html>

<body>

<form runat="server">

Enter a number from 1 to 100:

<asp:TextBox id="tbox1" runat="server" />

<br /><br />

<asp:Button Text="Submit" runat="server" />

<br />

<asp:RangeValidator

ControlToValidate="tbox1"

MinimumValue="1"

MaximumValue="100"

Type="Integer"

EnableClientScript="false"

Text="The value must be from 1 to 100!"

runat="server" />

</form>

</body>

</html>


ASP.NET SortedList

ASP.NET - The SortedList Object

The SortedList object combines the features of both the ArrayList object and the Hashtable object.

Examples

Example 1 - SortedList RadioButtonList

Example 2 - SortedList RadiobuttonList

Example 3 - SortedList DropDownList

The SortedList Object

The SortedList object contains items in key/value pairs. A SortedList object automatically sort the items in alphabetic or numeric order.

Items are added to the SortedList with the Add() method. A SortedList can be sized to its final size with the TrimToSize() method.

The following code creates a SortedList named mycountries and four elements are added:

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycountries=New SortedList

mycountries.Add("N","Norway")

mycountries.Add("S","Sweden")

mycountries.Add("F","France")

mycountries.Add("I","Italy")

end if

end sub

</script>

Data Binding

A SortedList object may automatically generate the text and values to the following controls:

· asp:RadioButtonList
· asp:CheckBoxList
· asp:DropDownList
· asp:Listbox

To bind data to a RadioButtonList control, first create a RadioButtonList control (without any asp:ListItem elements) in an .aspx page:

<html>

<body>

<form runat="server">

<asp:RadioButtonList id="rb" runat="server"

AutoPostBack="True" />

</form>

</body>

</html>

Then add the script that builds the list:

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycountries=New SortedList

mycountries.Add("N","Norway")

mycountries.Add("S","Sweden")

mycountries.Add("F","France")

mycountries.Add("I","Italy")

rb.DataSource=mycountries

rb.DataValueField="Key"

rb.DataTextField="Value"

rb.DataBind()

end if

end sub

</script>

<html>

<body>

<form runat="server">

<asp:RadioButtonList id="rb" runat="server"

AutoPostBack="True" />

</form>

</body>

</html>

Then we add a sub routine to be executed when the user clicks on an item in the RadioButtonList control. When a radio button is clicked, a text will appear in a label:

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycountries=New SortedList

mycountries.Add("N","Norway")

mycountries.Add("S","Sweden")

mycountries.Add("F","France")

mycountries.Add("I","Italy")

rb.DataSource=mycountries

rb.DataValueField="Key"

rb.DataTextField="Value"

rb.DataBind()

end if

end sub

sub displayMessage(s as Object,e As EventArgs)

lbl1.text="Your favorite country is: " & rb.SelectedItem.Text

end sub

</script>

<html>

<body>

<form runat="server">

<asp:RadioButtonList id="rb" runat="server"

AutoPostBack="True" onSelectedIndexChanged="displayMessage" />

<p><asp:label id="lbl1" runat="server" /></p>

</form>

</body>

</html>


ASP.NET Table Control

Definition and Usage

The Table control is used in conjunction with the TableCell control and the TableRow control to create a table.

Properties

Property

Description

BackImageUrl

A URL to an image to use as an background for the table

BorderWidth

The width of the border around the table

CellPadding

The space between the cell walls and contents

CellSpacing

The space between cells

GridLines

The gridlines in the table. Legal values are:

· None
· Horizontal
· Vertical
· Both

HorizontalAlign

The horizontal alignment of the table in the page. Legal values are:

· Center
· Justify
· Left
· NotSet
· Right

id

A unique id for the control

runat

Specifies that the control is a server control. Must be set to "server"

Examples

Table

In this example we declare two Table controls in an .aspx file.

Table 2

In this example we declare a Table control, three TableRow controls, and two TableCell controls in an .aspx file.


ASP.NET TableCell Control

Definition and Usage

The TableCell control is used in conjunction with the Table control and the TableRow control to create a cell in a table.

Tip: The cells of each row are stored in the Cells collection of the TableRow control.

Properties

Property

Description

ColumnSpan

The number of columns this cell should span

HorizontalAlign

The horizontal alignment of the contents in the table cell. Legal values are:

· Center
· Justify
· Left
· NotSet
· Right

id

A unique id for the control

RowSpan

The number of rows this cell should span

runat

Specifies that the control is a server control. Must be set to "server"

VerticalAlign

The vertical alignment of the contents in the table cell. Legal values are:

· Bottom
· Middle
· NotSet
· Top

Wrap

A Boolean value that indicates whether the cell's contents should wrap or not

Examples

Table

In this example we declare two Table controls in an .aspx file.

Table 2

In this example we declare a Table control, three TableRow controls, and two TableCell controls in an .aspx file.


ASP.NET TableRow Control

Definition and Usage

The TableRow control is used in conjunction with the TableCell control and the Table control to create a row in a table.

Tip: The rows of a table are stored in the Rows collection of the Table control.

Properties

Property

Description

HorizontalAlign

The horizontal alignment of the contents in the table row. Legal values are:

· Center
· Justify
· Left
· NotSet
· Right

id

A unique id for the control

runat

Specifies that the control is a server control. Must be set to "server"

VerticalAlign

The vertical alignment of the contents in the table row. Legal values are:

· Bottom
· Middle
· NotSet
· Top

Examples

Table

In this example we declare two Table controls in an .aspx file.

Table 2

In this example we declare a Table control, three TableRow controls, and two TableCell controls in an .aspx file.


ASP.NET TextBox Control

Definition and Usage

The TextBox control is used to create a text box where the user can input text.

Properties

Property

Description

AutoPostBack

A Boolean value that specifies whether the control is automatically posted back to the server when the contents change or not. Default is false

Columns

The width of the textbox

id

A unique id for the control

MaxLength

The maximum number of characters allowed in the textbox

OnTextChanged

The name of the function to be executed when the text in the textbox has changed

Rows

The height of the textbox (only used if TextMode="Multiline")

runat

Specifies that the control is a server control. Must be set to "server"

Text

The contents of the textbox

TextMode

SingleLine creates a text box with only one line. MultiLine creates a text box with multiple lines. Password creates a one-line text box that masks the value entered by the user. Default is SingleLine. Legal values are:

· SingleLine
· MultiLine
· Password

Wrap

A Boolean value that indicates whether the contents of the textbox should wrap or not

Examples

Textbox

In this example we declare one TextBox control, one Button control, and one Label control in an .aspx file. When the submit button is triggered, the submit subroutine is executed. The submit subroutine writes a text to the Label control.

Textbox 2

In this example we declare one TextBox control, one Button control, and one Label control in an .aspx file. When the submit button is triggered, the submit subroutine is executed. The submit subroutine copies the contents of the textbox to the Label control.


ASP.NET - The Button Control

The Button control is used to display a push button.

The Button Control

The Button control is used to display a push button. The push button may be a submit button or a command button. By default, this control is a submit button.

A submit button does not have a command name and it posts the page back to the server when it is clicked. It is possible to write an event handler to control the actions performed when the submit button is clicked.

A command button has a command name and allows you to create multiple Button controls on a page. It is possible to write an event handler to control the actions performed when the command button is clicked.

The Button control's attributes and properties are listed in our web controls reference page.

The example below demonstrates a simple Button control:

<html>

<body>

<form runat="server">

<asp:Button id="b1" Text="Submit" runat="server" />

</form>

</body>

</html>

Add a Script

A form is most often submitted by clicking on a button.

In the following example we declare one TextBox control, one Button control, and one Label control in an .aspx file. When the submit button is triggered, the submit subroutine is executed. The submit subroutine writes a text to the Label control:

<script runat="server">

Sub submit(sender As Object, e As EventArgs)

lbl1.Text="Your name is " & txt1.Text

End Sub

</script>

<html>

<body>

<form runat="server">

Enter your name:

<asp:TextBox id="txt1" runat="server" />

<asp:Button OnClick="submit" Text="Submit" runat="server" />

<p><asp:Label id="lbl1" runat="server" /></p>

</form>

</body>

</html>

Example


ASP.NET - The DataList Control

The DataList control is, like the Repeater control, used to display a repeated list of items that are bound to the control. However, the DataList control adds a table around the data items by default.

Examples

DataList control

DataList control with styles

DataList control with < AlternatingItemTemplate>

Bind a DataSet to a DataList Control

The DataList control is, like the Repeater control, used to display a repeated list of items that are bound to the control. However, the DataList control adds a table around the data items by default. The DataList control may be bound to a database table, an XML file, or another list of items. Here we will show how to bind an XML file to a DataList control.

We will use the following XML file in our examples ("cdcatalog.xml"):

<?xml version="1.0" encoding="ISO-8859-1"?>

<catalog>

<cd>

<title>Empire Burlesque</title>

<artist>Bob Dylan</artist>

<country>USA</country>

<company>Columbia</company>

<price>10.90</price>

<year>1985</year>

</cd>

<cd>

<title>Hide your heart</title>

<artist>Bonnie Tyler</artist>

<country>UK</country>

<company>CBS Records</company>

<price>9.90</price>

<year>1988</year>

</cd>

<cd>

<title>Greatest Hits</title>

<artist>Dolly Parton</artist>

<country>USA</country>

<company>RCA</company>

<price>9.90</price>

<year>1982</year>

</cd>

<cd>

<title>Still got the blues</title>

<artist>Gary Moore</artist>

<country>UK</country>

<company>Virgin records</company>

<price>10.20</price>

<year>1990</year>

</cd>

<cd>

<title>Eros</title>

<artist>Eros Ramazzotti</artist>

<country>EU</country>

<company>BMG</company>

<price>9.90</price>

<year>1997</year>

</cd>

</catalog>

Take a look at the XML file: cdcatalog.xml

First, import the "System.Data" namespace. We need this namespace to work with DataSet objects. Include the following directive at the top of an .aspx page:

<%@ Import Namespace="System.Data" %>

Next, create a DataSet for the XML file and load the XML file into the DataSet when the page is first loaded:

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycdcatalog=New DataSet

mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))

end if

end sub

Then we create a DataList in an .aspx page. The contents of the <HeaderTemplate> element are rendered first and only once within the output, then the contents of the <ItemTemplate> element are repeated for each "record" in the DataSet, and last, the contents of the <FooterTemplate> element are rendered once within the output:

<html>

<body>

<form runat="server">

<asp:DataList id="cdcatalog" runat="server">

<HeaderTemplate>

...

</HeaderTemplate>

<ItemTemplate>

...

</ItemTemplate>

<FooterTemplate>

...

</FooterTemplate>

</asp:DataList>

</form>

</body>

</html>

Then we add the script that creates the DataSet and binds the mycdcatalog DataSet to the DataList control. We also fill the DataList control with a <HeaderTemplate> that contains the header of the table, an <ItemTemplate> that contains the data items to display, and a <FooterTemplate> that contains a text. Note that the gridlines attribute of the DataList is set to "both" to display table borders:

<%@ Import Namespace="System.Data" %>

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycdcatalog=New DataSet

mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))

cdcatalog.DataSource=mycdcatalog

cdcatalog.DataBind()

end if

end sub

</script>

<html>

<body>

<form runat="server">

<asp:DataList id="cdcatalog"

gridlines="both" runat="server">

<HeaderTemplate>

My CD Catalog

</HeaderTemplate>

<ItemTemplate>

"<%#Container.DataItem("title")%>" of

<%#Container.DataItem("artist")%> -

$<%#Container.DataItem("price")%>

</ItemTemplate>

<FooterTemplate>

Copyright Hege Refsnes

</FooterTemplate>

</asp:DataList>

</form>

</body>

</html>

Using Styles

You can also add styles to the DataList control to make the output more fancy:

<%@ Import Namespace="System.Data" %>

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycdcatalog=New DataSet

mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))

cdcatalog.DataSource=mycdcatalog

cdcatalog.DataBind()

end if

end sub

</script>

<html>

<body>

<form runat="server">

<asp:DataList id="cdcatalog"

runat="server"

cellpadding="2"

cellspacing="2"

borderstyle="inset"

backcolor="#e8e8e8"

width="100%"

headerstyle-font-name="Verdana"

headerstyle-font-size="12pt"

headerstyle-horizontalalign="center"

headerstyle-font-bold="true"

itemstyle-backcolor="#778899"

itemstyle-forecolor="#ffffff"

footerstyle-font-size="9pt"

footerstyle-font-italic="true">

<HeaderTemplate>

My CD Catalog

</HeaderTemplate>

<ItemTemplate>

"<%#Container.DataItem("title")%>" of

<%#Container.DataItem("artist")%> -

$<%#Container.DataItem("price")%>

</ItemTemplate>

<FooterTemplate>

Copyright Hege Refsnes

</FooterTemplate>

</asp:DataList>

</form>

</body>

</html>

Using the <AlternatingItemTemplate>

You can add an <AlternatingItemTemplate> element after the <ItemTemplate> element to describe the appearance of alternating rows of output. You may style the data in the <AlternatingItemTemplate> section within the DataList control:

<%@ Import Namespace="System.Data" %>

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycdcatalog=New DataSet

mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))

cdcatalog.DataSource=mycdcatalog

cdcatalog.DataBind()

end if

end sub

</script>

<html>

<body>

<form runat="server">

<asp:DataList id="cdcatalog"

runat="server"

cellpadding="2"

cellspacing="2"

borderstyle="inset"

backcolor="#e8e8e8"

width="100%"

headerstyle-font-name="Verdana"

headerstyle-font-size="12pt"

headerstyle-horizontalalign="center"

headerstyle-font-bold="True"

itemstyle-backcolor="#778899"

itemstyle-forecolor="#ffffff"

alternatingitemstyle-backcolor="#e8e8e8"

alternatingitemstyle-forecolor="#000000"

footerstyle-font-size="9pt"

footerstyle-font-italic="True">

<HeaderTemplate>

My CD Catalog

</HeaderTemplate>

<ItemTemplate>

"<%#Container.DataItem("title")%>" of

<%#Container.DataItem("artist")%> -

$<%#Container.DataItem("price")%>

</ItemTemplate>

<AlternatingItemTemplate>

"<%#Container.DataItem("title")%>" of

<%#Container.DataItem("artist")%> -

$<%#Container.DataItem("price")%>

</AlternatingItemTemplate>

<FooterTemplate>

&copy; Hege Refsnes

</FooterTemplate>

</asp:DataList>

</form>

</body>

</html>


ASP.NET - The Repeater Control

The Repeater control is used to display a repeated list of items that are bound to the control.

Examples

Repeater control

Repeater control with < SeparatorTemplate>

Bind a DataSet to a Repeater Control

The Repeater control is used to display a repeated list of items that are bound to the control. The Repeater control may be bound to a database table, an XML file, or another list of items. Here we will show how to bind an XML file to a Repeater control.

We will use the following XML file in our examples ("cdcatalog.xml"):

<?xml version="1.0" encoding="ISO-8859-1"?>

<catalog>

<cd>

<title>Empire Burlesque</title>

<artist>Bob Dylan</artist>

<country>USA</country>

<company>Columbia</company>

<price>10.90</price>

<year>1985</year>

</cd>

<cd>

<title>Hide your heart</title>

<artist>Bonnie Tyler</artist>

<country>UK</country>

<company>CBS Records</company>

<price>9.90</price>

<year>1988</year>

</cd>

<cd>

<title>Greatest Hits</title>

<artist>Dolly Parton</artist>

<country>USA</country>

<company>RCA</company>

<price>9.90</price>

<year>1982</year>

</cd>

<cd>

<title>Still got the blues</title>

<artist>Gary Moore</artist>

<country>UK</country>

<company>Virgin records</company>

<price>10.20</price>

<year>1990</year>

</cd>

<cd>

<title>Eros</title>

<artist>Eros Ramazzotti</artist>

<country>EU</country>

<company>BMG</company>

<price>9.90</price>

<year>1997</year>

</cd>

</catalog>

Take a look at the XML file:

First, import the "System.Data" namespace. We need this namespace to work with DataSet objects. Include the following directive at the top of an .aspx page:

<%@ Import Namespace="System.Data" %>

Next, create a DataSet for the XML file and load the XML file into the DataSet when the page is first loaded:

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycdcatalog=New DataSet

mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))

end if

end sub

Then we create a Repeater control in an .aspx page. The contents of the <HeaderTemplate> element are rendered first and only once within the output, then the contents of the <ItemTemplate> element are repeated for each "record" in the DataSet, and last, the contents of the <FooterTemplate> element are rendered once within the output:

<html>

<body>

<form runat="server">

<asp:Repeater id="cdcatalog" runat="server">

<HeaderTemplate>

...

</HeaderTemplate>

<ItemTemplate>

...

</ItemTemplate>

<FooterTemplate>

...

</FooterTemplate>

</asp:Repeater>

</form>

</body>

</html>

Then we add the script that creates the DataSet and binds the mycdcatalog DataSet to the Repeater control. We also fill the Repeater control with HTML tags and bind the data items to the cells in the<ItemTemplate> section with the <%#Container.DataItem("fieldname")%> method:

<%@ Import Namespace="System.Data" %>

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycdcatalog=New DataSet

mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))

cdcatalog.DataSource=mycdcatalog

cdcatalog.DataBind()

end if

end sub

</script>

<html>

<body>

<form runat="server">

<asp:Repeater id="cdcatalog" runat="server">

<HeaderTemplate>

<table border="1" width="100%">

<tr>

<th>Title</th>

<th>Artist</th>

<th>Country</th>

<th>Company</th>

<th>Price</th>

<th>Year</th>

</tr>

</HeaderTemplate>

<ItemTemplate>

<tr>

<td><%#Container.DataItem("title")%></td>

<td><%#Container.DataItem("artist")%></td>

<td><%#Container.DataItem("country")%></td>

<td><%#Container.DataItem("company")%></td>

<td><%#Container.DataItem("price")%></td>

<td><%#Container.DataItem("year")%></td>

</tr>

</ItemTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

</form>

</body>

</html>

Using the <AlternatingItemTemplate>

You can add an <AlternatingItemTemplate> element after the <ItemTemplate> element to describe the appearance of alternating rows of output. In the following example each other row in the table will be displayed in a light grey color:

<%@ Import Namespace="System.Data" %>

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycdcatalog=New DataSet

mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))

cdcatalog.DataSource=mycdcatalog

cdcatalog.DataBind()

end if

end sub

</script>

<html>

<body>

<form runat="server">

<asp:Repeater id="cdcatalog" runat="server">

<HeaderTemplate>

<table border="1" width="100%">

<tr>

<th>Title</th>

<th>Artist</th>

<th>Country</th>

<th>Company</th>

<th>Price</th>

<th>Year</th>

</tr>

</HeaderTemplate>

<ItemTemplate>

<tr>

<td><%#Container.DataItem("title")%></td>

<td><%#Container.DataItem("artist")%></td>

<td><%#Container.DataItem("country")%></td>

<td><%#Container.DataItem("company")%></td>

<td><%#Container.DataItem("price")%></td>

<td><%#Container.DataItem("year")%></td>

</tr>

</ItemTemplate>

<AlternatingItemTemplate>

<tr bgcolor="#e8e8e8">

<td><%#Container.DataItem("title")%></td>

<td><%#Container.DataItem("artist")%></td>

<td><%#Container.DataItem("country")%></td>

<td><%#Container.DataItem("company")%></td>

<td><%#Container.DataItem("price")%></td>

<td><%#Container.DataItem("year")%></td>

</tr>

</AlternatingItemTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

</form>

</body>

</html>

Using the <SeparatorTemplate>

The <SeparatorTemplate> element can be used to describe a separator between each record. The following example inserts a horizontal line between each table row:

<%@ Import Namespace="System.Data" %>

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycdcatalog=New DataSet

mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))

cdcatalog.DataSource=mycdcatalog

cdcatalog.DataBind()

end if

end sub

</script>

<html>

<body>

<form runat="server">

<asp:Repeater id="cdcatalog" runat="server">

<HeaderTemplate>

<table border="0" width="100%">

<tr>

<th>Title</th>

<th>Artist</th>

<th>Country</th>

<th>Company</th>

<th>Price</th>

<th>Year</th>

</tr>

</HeaderTemplate>

<ItemTemplate>

<tr>

<td><%#Container.DataItem("title")%></td>

<td><%#Container.DataItem("artist")%></td>

<td><%#Container.DataItem("country")%></td>

<td><%#Container.DataItem("company")%></td>

<td><%#Container.DataItem("price")%></td>

<td><%#Container.DataItem("year")%></td>

</tr>

</ItemTemplate>

<SeparatorTemplate>

<tr>

<td colspan="6"><hr /></td>

</tr>

</SeparatorTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

</form>

</body>

</html>


ASP .NET - The TextBox Control

The TextBox control is used to create a text box where the user can input text.

The TextBox Control

The TextBox control is used to create a text box where the user can input text.

The TextBox control's attributes and properties are listed in our web controls reference page.

The example below demonstrates some of the attributes you may use with the TextBox control:

Example

<html>

<body>

<form runat="server">

A basic TextBox:

<asp:TextBox id="tb1" runat="server" />

<br /><br />

A password TextBox:

<asp:TextBox id="tb2" TextMode="password" runat="server" />

<br /><br />

A TextBox with text:

<asp:TextBox id="tb4" Text="Hello World!" runat="server" />

<br /><br />

A multiline TextBox:

<asp:TextBox id="tb3" TextMode="multiline" runat="server" />

<br /><br />

A TextBox with height:

<asp:TextBox id="tb6" rows="5" TextMode="multiline"

runat="server" />

<br /><br />

A TextBox with width:

<asp:TextBox id="tb5" columns="30" runat="server" />

</form>

</body>

</html>

Add a Script

The contents and settings of a TextBox control may be changed by server scripts when a form is submitted. A form can be submitted by clicking on a button or when a user changes the value in the TextBox control.

In the following example we declare one TextBox control, one Button control, and one Label control in an .aspx file. When the submit button is triggered, the submit subroutine is executed. The submit subroutine writes a text to the Label control:

<script runat="server">

Sub submit(sender As Object, e As EventArgs)

lbl1.Text="Your name is " & txt1.Text

End Sub

</script>

<html>

<body>

<form runat="server">

Enter your name:

<asp:TextBox id="txt1" runat="server" />

<asp:Button OnClick="submit" Text="Submit" runat="server" />

<p><asp:Label id="lbl1" runat="server" /></p>

</form>

</body>

</html>

Example

In the following example we declare one TextBox control and one Label control in an .aspx file. When you change the value in the TextBox and either click outside the TextBox or press the Tab key, the change subroutine is executed. The submit subroutine writes a text to the Label control:

<script runat="server">

Sub change(sender As Object, e As EventArgs)

lbl1.Text="You changed text to " & txt1.Text

End Sub

</script>

<html>

<body>

<form runat="server">

Enter your name:

<asp:TextBox id="txt1" runat="server"

text="Hello World!"

ontextchanged="change" autopostback="true"/>

<p><asp:Label id="lbl1" runat="server" /></p>

</form>

</body>

</html>

Example


ASP.NET The ViewState

ASP .NET Maintaining the ViewState

You may save a lot of coding by maintaining the ViewState of the objects in your Web Form.

Maintaining the ViewState

When a form is submitted in classic ASP, all form values are cleared. Suppose you have submitted a form with a lot of information and the server comes back with an error. You will have to go back to the form and correct the information. You click the back button, and what happens.......ALL form values are CLEARED, and you will have to start all over again! The site did not maintain your ViewState.

When a form is submitted in ASP .NET, the form reappears in the browser window together with all form values. How come? This is because ASP .NET maintains your ViewState. The ViewState indicates the status of the page when submitted to the server. The status is defined through a hidden field placed on each page with a <form runat="server"> control. The source could look something like this:

<form name="_ctl0" method="post" action="page.aspx" id="_ctl0">

<input type="hidden" name="__VIEWSTATE"

value="dDwtNTI0ODU5MDE1Ozs+ZBCF2ryjMpeVgUrY2eTj79HNl4Q=" />

.....some code

</form>

Maintaining the ViewState is the default setting for ASP.NET Web Forms. If you want to NOT maintain the ViewState, include the directive <%@ Page EnableViewState="false" %> at the top of an .aspx page or add the attribute EnableViewState="false" to any control.

Look at the following .aspx file. It demonstrates the "old" way to do it. When you click on the submit button, the form value will disappear:

<html>

<body>

<form action="demo_classicasp.aspx" method="post">

Your name: <input type="text" name="fname" size="20">

<input type="submit" value="Submit">

</form>

<%

dim fname

fname=Request.Form("fname")

If fname<>"" Then

Response.Write("Hello " & fname & "!")

End If

%>

</body>

</html>

Example

Here is the new ASP .NET way. When you click on the submit button, the form value will NOT disappear:

<script runat="server">

Sub submit(sender As Object, e As EventArgs)

lbl1.Text="Hello " & txt1.Text & "!"

End Sub

</script>

<html>

<body>

<form runat="server">

Your name: <asp:TextBox id="txt1" runat="server" />

<asp:Button OnClick="submit" Text="Submit" runat="server" />

<p><asp:Label id="lbl1" runat="server" /></p>

</form>

</body>

</html>

Example (Click view source in the right frame of the example to see that ASP .NET has added a hidden field in the form to maintain the ViewState)


ASP.NET Tutorial

ASP.NET Tutorial

aspnet

ASP.NET is the latest version of Microsoft's Active Server Pages technology (ASP).

ASP.NET is a part of the Microsoft .NET framework, and a powerful tool for creating dynamic and interactive web pages.

Start learning ASP.NET!

ASP.NET References

At W3Schools you will find complete ASP.NET references about built-in objects and components, and their properties and methods:

· HTML server controls reference
· Web server controls reference
· Validation server controls reference

ASP.NET Examples

ASP.NET examples

A collection of ASP.NET examples.

Table of Contents

ASP.NET Introduction

This chapter explains what ASP.NET is.

ASP.NET vs ASP

This chapter explains the differences between ASP.NET and ASP.

ASP.NET Installing

This chapter explains how to install ASP.NET.

ASP.NET Pages

This chapter explains how to create your first simple ASP.NET page.

This chapter explains the ASP.NET server controls.

ASP.NET Events

This chapter explains some of the ASP.NET event handlers.

ASP.NET Forms

ASP.NET Web forms

This chapter explains ASP.NET Web forms.

ASP.NET Maintaining the ViewState

This chapter explains how to maintain the ViewState.

ASP.NET The TextBox control

This chapter explains the basics of the asp:TextBox control.

This chapter explains the basics of the asp:Button control.

ASP.NET Binding

This chapter explains ASP.NET data binding.

ASP.NET The ArrayList object

This chapter explains the ASP.NET ArrayList object.

ASP.NET The Hashtable object

This chapter explains the ASP.NET Hashtable object.

ASP.NET The SortedList object

This chapter explains the ASP.NET SortedList object.

ASP.NET XML files

This chapter explains data binding to an XML file.

ASP.NET The asp:Repeater control

This chapter explains data binding to an XML file with the Repeater control.

This chapter explains data binding to an XML file with the DataList control.

ASP.NET Database

ASP.NET DB Connection

This chapter introduces ADO.NET and connecting to a database.

ASP.NET References

ASP.NET HTML Server Controls Reference

A complete HTML Server Controls reference with properties, methods, and events.

ASP.NET Web Server Controls Reference

A complete Web Server Controls reference with properties, methods, and events.

ASP.NET Validation Server Controls Reference

A complete Validation Server Controls reference with properties, methods, and events.

ASP.NET Examples

ASP.NET Examples

A collection of ASP.NET examples.


ASP.NET Validation Server Controls

Validation Server Controls

Validation server controls are used to validate user-input.

Validation Server Controls

A Validation server control is used to validate the data of an input control. If the data does not pass validation, it will display an error message to the user.

The syntax for creating a Validation server control is:

<asp:control_name id="some_id" runat="server" />

Validation Server Control | Description
 | Compares the value of one input control to the value of another input control or to a fixed value
 | Allows you to write a method to handle the validation of the value entered
RangeValidator | Checks that the user enters a value that falls between two values
RegularExpressionValidator | Ensures that the value of an input control matches a specified pattern
RequiredFieldValidator | Makes an input control a required field
ValidationSummary | Displays a report of all validation errors occurred in a Web page


ASP.NET ValidationSummary Control

Definition and Usage

The ValidationSummary control is used to display a summary of all validation errors occurred in a Web page.

The error message displayed in this control is specified by the ErrorMessage property of each validation control. If the ErrorMessage property of the validation control is not set, no error message is displayed for that validation control.

Properties

Property

Description

DisplayMode

How to display the summary. Legal values are:

· BulletList
· List
· SingleParagraph

EnableClientScript

A Boolean value that specifies whether client-side validation is enabled or not

Enabled

A Boolean value that specifies whether the validation control is enabled or not

ForeColor

The fore color of the control

HeaderText

A header in the ValidationSummary control

id

A unique id for the control

runat

Specifies that the control is a server control. Must be set to "server"

ShowMessageBox

A Boolean value that specifies whether the summary should be displayed in a message box or not

ShowSummary

A Boolean value that specifies whether the ValidationSummary control should be displayed or hidden

Examples

Validationsummary

In this example we use the ValidationSummary control to write a bulleted list of fields that are required but left empty by the user.

Validationsummary 2

In this example we use the ValidationSummary control to display a message box of the fields that are required but left empty by the user.


ASP.NET vs ASP

Differences between ASP and ASP .NET

ASP .NET has better language support, a large set of new controls and XML based components, and better user authentication.

ASP .NET provides increased performance by running compiled code.

ASP .NET code is not fully backward compatible with ASP.

New in ASP .NET

· Better language support
· Programmable controls
· Event-driven programming
· XML-based components
· User authentication, with accounts and roles
· Higher scalability
· Increased performance - Compiled code
· Easier configuration and deployment
· Not fully ASP compatible

Language Support

ASP .NET uses the new ADO .NET.

ASP .NET supports full Visual Basic, not VBScript.

ASP .NET supports C# (C sharp) and C++.

ASP .NET supports JScript as before.

ASP .NET Controls

ASP .NET contains a large set of HTML controls. Almost all HTML elements on a page can be defined as ASP .NET control objects that can be controlled by scripts.

ASP .NET also contains a new set of object oriented input controls, like programmable list boxes and validation controls.

A new data grid control supports sorting, data paging, and everything you expect from a dataset control.

Event Aware Controls

All ASP .NET objects on a Web page can expose events that can be processed by ASP .NET code.

Load, Click and Change events handled by code makes coding much simpler and much better organized.

ASP .NET Components

ASP .NET components are heavily based on XML. Like the new AD Rotator, that uses XML to store advertisement information and configuration.

User Authentication

ASP .NET supports forms-based user authentication, including cookie management and automatic redirecting of unauthorized logins.

(You can still do your custom login page and custom user checking).

User Accounts and Roles

ASP .NET allows for user accounts and roles, to give each user (with a given role) access to different server code and executables.

High Scalability

Much has been done with ASP .NET to provide greater scalability.

Server to server communication has been greatly enhanced, making it possible to scale an application over several servers. One example of this is the ability to run XML parsers, XSL transformations and even resource hungry session objects on other servers.

Compiled Code

The first request for an ASP .NET page on the server will compile the ASP .NET code and keep a cached copy in memory. The result of this is greatly increased performance.

Easy Configuration

Configuration of ASP .NET is done with plain text files.

Configuration files can be uploaded or changed while the application is running. No need to restart the server. No more metabase or registry puzzle.

Easy Deployment

No more server restart to deploy or replace compiled code. ASP .NET simply redirects all new requests to the new code.

Compatibility

ASP .NET is not fully compatible with earlier versions of ASP, so most of the old ASP code will need some changes to run under ASP .NET.

To overcome this problem, ASP .NET uses a new file extension ".aspx". This will make ASP .NET applications able to run side by side with standard ASP applications on the same server.


ASP.NET Web Forms

All server controls must appear within a <form> tag, and the <form> tag must contain the runat="server" attribute.

ASP.NET Web Forms

All server controls must appear within a <form> tag, and the <form> tag must contain the runat="server" attribute. The runat="server" attribute indicates that the form should be processed on the server. It also indicates that the enclosed controls can be accessed by server scripts:

<form runat="server">

...HTML + server controls

</form>

Note: The form is always submitted to the page itself. If you specify an action attribute, it is ignored. If you omit the method attribute, it will be set to method="post" by default. Also, if you do not specify the name and id attributes, they are automatically assigned by ASP.NET.

Note: An .aspx page can only contain ONE <form runat="server"> control!

If you select view source in an .aspx page containing a form with no name, method, action, or id attribute specified, you will see that ASP.NET has added these attributes to the form. It looks something like this:

<form name="_ctl0" method="post" action="page.aspx" id="_ctl0">

...some code

</form>

Submitting a Form

A form is most often submitted by clicking on a button. The Button server control in ASP.NET has the following format:

<asp:Button id="id" text="label" OnClick="sub" runat="server" />

The id attribute defines a unique name for the button and the text attribute assigns a label to the button. The onClick event handler specifies a named subroutine to execute.

In the following example we declare a Button control in an .aspx file. A button click runs a subroutine which changes the text on the button:


ASP.NET - Web Pages

A simple ASP.NET page looks just like an ordinary HTML page.

Hello W3Schools

To start learning ASP.NET, we will construct a very simple HTML page that will display "Hello W3Schools" in an Internet browser like this:

Hello W3Schools!

Hello W3Schools in HTML

This code displays the example as an HTML page:

<html>

<body bgcolor="yellow">

<center>

<h2>Hello W3Schools!</h2>

</center>

</body>

</html>

If you want to try it yourself, save the code in a file called "firstpage.htm", and create a link to the file like this:

Hello W3Schools in ASP.NET

The simplest way to convert an HTML page into an ASP.NET page is to copy the HTML file to a new file with an .aspx extension.

This code displays our example as an ASP.NET page:

<html>

<body bgcolor="yellow">

<center>

<h2>Hello W3Schools!</h2>

</center>

</body>

</html>

If you want to try it yourself, save the code in a file called "firstpage.aspx", and create a link to the file like this: firstpage.aspx

How Does it Work?

Fundamentally an ASP.NET page is just the same as an HTML page.

An HTML page has the extension .htm. If a browser requests an HTML page from the server, the server sends the page to the browser without any modifications.

An ASP.NET page has the extension .aspx. If a browser requests an ASP.NET page, the server processes any executable code in the page, before the result is sent back to the browser.

The ASP.NET page above does not contain any executable code, so nothing is executed. In the next examples we will add some executable code to the page to demonstrate the difference between static HTML pages and dynamic ASP pages.

Classic ASP

Active Server Pages (ASP) has been around for several years. With ASP, executable code can be placed inside HTML pages.

Previous versions of ASP (before ASP .NET) are often called Classic ASP.

ASP .NET is not fully compatible with Classic ASP, but most Classic ASP pages will work fine as ASP .NET pages, with only minor changes.

If you want to learn more about Classic ASP, please visit our ASP Tutorial.

Dynamic Page in Classic ASP

To demonstrate how ASP can display pages with dynamic content, we have added some executable code (in red) to the previous example:

<html>

<body bgcolor="yellow">

<center>

<h2>Hello W3Schools!</h2>

<p><%Response.Write(now())%></p>

</center>

</body>

</html>

The code inside the <% --%> tags is executed on the server.

Response.Write is ASP code for writing something to the HTML output stream.

Now() is a function returning the servers current date and time.

If you want to try it yourself, save the code in a file called "dynpage.asp", and create a link to the file like this:

Dynamic Page in ASP .NET

This following code displays our example as an ASP .NET page:

<html>

<body bgcolor="yellow">

<center>

<h2>Hello W3Schools!</h2>

<p><%Response.Write(now())%></p>

</center>

</body>

</html>

If you want to try it yourself, save the code in a file called "dynpage.aspx", and create a link to the file like this:

ASP .NET vs Classic ASP

The previous examples didn't demonstrate any differences between ASP .NET and Classic ASP.

As you can see from the two latest examples there are no differences between the two ASP and ASP .NET pages.

In the next chapters you will see how server controls make ASP. NET more powerful than Classic ASP.


ASP.NET Web Server Controls

Web Server Controls

Web server controls are special ASP.NET tags understood by the server.

Web Server Controls

Like HTML server controls, Web server controls are also created on the server and they require a runat="server" attribute to work. However, Web server controls do not necessarily map to any existing HTML elements and they may represent more complex elements.

The syntax for creating a Web server control is:

<asp:control_name id="some_id" runat="server" />

Web Server Control | Description
AdRotator | Displays a sequence of images
Button | Displays a push button
Calendar | Displays a calendar
 | Displays a check box
CheckBoxList | Creates a multi-selection check box group
DataGrid | Displays fields of a data source in a grid
DataList | Displays items from a data source by using templates
DropDownList | Creates a drop-down list
HyperLink | Creates a hyperlink
 | Displays an image
ImageButton | Displays a clickable image
 | Displays static content which is programmable (lets you apply styles to its content)
LinkButton | Creates a hyperlink button
 | Creates a single- or multi-selection drop-down list
Literal | Displays static content which is programmable (does not let you apply styles to its content)
Panel | Provides a container for other controls
 | Reserves space for controls added by code
RadioButton | Creates a radio button
RadioButtonList | Creates a group of radio buttons
Repeater | Displays a repeated list of items bound to the control
Table | Creates a table
TableCell | Creates a table cell
 | Creates a table row
TextBox | Creates a text box
Xml | Displays an XML file or the results of an XSL transform


ASP.NET XML Control

Definition and Usage

The XML control is used to display an XML document or the results of an XSL Transform.

Note: At least one of the XML Document properties must be set or no XML document is displayed.

You can also specify an XSLT document that will format the XML document before it is written to the output. You can format the XML document with the Transform property or the TransformSource property.

Properties

Property | Description
Document | Specifies an XML document using a System.Xml.XmlDocument object
DocumentContent | Specifies an XML string
DocumentSource | Specifies a path to an XML file to display
id | A unique id for the control
runat | Specifies that the control is a server control. Must be set to "server"
Transform | Formats the XML document using a System.Xml.Xsl.XslTransform object
TransformSource | Specifies a path to an XSL Transform file

Examples

This example shows how to use the Xml control to display the result of an XSL Transform.


demo_adrotator.html

View XML file


demo_arraylist_drop1.html

[TComboFormControlObj]


demo_arraylist_radio1.html

[TRadioButtonFormControlObj]France

[TRadioButtonFormControlObj]Italy

[TRadioButtonFormControlObj]Norway

[TRadioButtonFormControlObj]Sweden


demo_aspnetviewstate.html

Your name: [TEditFormControlObj]


demo_button.html


demo_button2.html


demo_calendar.html

<

February 2007

>

Sun

Mon

Tue

Wed

Thu

Fri

Sat

28

29

30

31

1

2

3

4

7

8

9

10

11

12

13

14

15

16

17

18

19

21

22

23

24

25

26

27

28

2

3

4

5

7

8

9

10


demo_calendar2.html

<

February 2007

>

Sunday

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

28

29

31

1

2

3

4

5

6

7

8

9

11

12

13

14

15

16

17

18

20

21

23

25

26

27

28

1

2

3

4

6

7

9

10


demo_calendar3.html

<

February 2007

>

<*>

Sunday

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

<->

28

29

30

31

1

3

<->

5

6

7

9

10

<->

12

13

14

16

17

<->

18

19

20

21

22

<->

25

26

27

28

2

3

4

5

6

7

8

10


demo_checkbox.html

Home Phone: [TEditFormControlObj]

Work Phone: [TEditFormControlObj] [TCheckBoxFormControlObj]Same as home phone


demo_checkboxlist.html

[TCheckBoxFormControlObj]Item 1

[TCheckBoxFormControlObj]Item 2

[TCheckBoxFormControlObj]Item 3

[TCheckBoxFormControlObj]Item 4

[TCheckBoxFormControlObj]Item 5

[TCheckBoxFormControlObj]Item 6


demo_comparevalidator.html

Compare two values

[TEditFormControlObj]

=

[TEditFormControlObj]


demo_comparevalidator2.html

Compare two values

[TEditFormControlObj]

[TListBoxFormControlObj]

[TEditFormControlObj]


demo_customvalidator.html

Enter a username: [TEditFormControlObj]


demo_datalist1.html

My CD Catalog

"Empire Burlesque" of Bob Dylan - $10.90

"Hide your heart" of Bonnie Tyler - $9.90

"Greatest Hits" of Dolly Parton - $9.90

"Still got the blues" of Gary Moore - $10.20

"Eros" of Eros Ramazzotti - $9.90

© Hege Refsnes


demo_datalist2.html

My CD Catalog

"Empire Burlesque" of Bob Dylan - $10.90

"Hide your heart" of Bonnie Tyler - $9.90

"Greatest Hits" of Dolly Parton - $9.90

"Still got the blues" of Gary Moore - $10.20

"Eros" of Eros Ramazzotti - $9.90

© Hege Refsnes


demo_datalist3.html

My CD Catalog

"Empire Burlesque" of Bob Dylan - $10.90

"Hide your heart" of Bonnie Tyler - $9.90

"Greatest Hits" of Dolly Parton - $9.90

"Still got the blues" of Gary Moore - $10.20

"Eros" of Eros Ramazzotti - $9.90

© Hege Refsnes


demo_dbconn_datalist.html

Customers Table

Alfreds Futterkiste in Obere Str. 57, Berlin

Berglunds snabbkÃ¶p in BerguvsvÃ¤gen 8, LuleÃ¥

Centro comercial Moctezuma in Sierras de Granada 9993, MÃ©xico D.F.

Ernst Handel in Kirchgasse 6, Graz

FISSA Fabrica Inter. Salchichas S.A. in C/ Moralzarzal, 86, Madrid

GalerÃa del gastrÃ³nomo in Rambla de CataluÃ±a, 23, Barcelona

Island Trading in Garden House Crowther Way, Cowes

KÃ¶niglich Essen in Maubelstr. 90, Brandenburg

Laughing Bacchus Wine Cellars in 1900 Oak St., Vancouver

Magazzini Alimentari Riuniti in Via Ludovico il Moro 22, Bergamo

North/South in South House 300 Queensbridge, London

Paris spÃ©cialitÃ©s in 265, boulevard Charonne, Paris

Rattlesnake Canyon Grocery in 2817 Milton Dr., Albuquerque

Simons bistro in VinbÃ¦ltet 34, KÃ¸benhavn

The Big Cheese in 89 Jefferson Way Suite 2, Portland

Vaffeljernet in SmagslÃ¸get 45, Ã…rhus

Wolski Zajazd in ul. Filtrowa 68, Warszawa

Source: Northwind Database


demo_dbconn_repeater.html

Companyname | Contactname | Address | City
Alfreds Futterkiste | Maria Anders | Obere Str. 57 | Berlin
Berglunds snabbkÃ¶p | Christina Berglund | BerguvsvÃ¤gen 8 | LuleÃ¥
Centro comercial Moctezuma | Francisco Chang | Sierras de Granada 9993 | MÃ©xico D.F.
Ernst Handel | Roland Mendel | Kirchgasse 6 | Graz
FISSA Fabrica Inter. Salchichas S.A. | Diego Roel | C/ Moralzarzal, 86 | Madrid
GalerÃa del gastrÃ³nomo | Eduardo Saavedra | Rambla de CataluÃ±a, 23 | Barcelona
Island Trading | Helen Bennett | Garden House Crowther Way | Cowes
KÃ¶niglich Essen | Philip Cramer | Maubelstr. 90 | Brandenburg
Laughing Bacchus Wine Cellars | Yoshi Tannamuri | 1900 Oak St. | Vancouver
Magazzini Alimentari Riuniti | Giovanni Rovelli | Via Ludovico il Moro 22 | Bergamo
North/South | Simon Crowther | South House 300 Queensbridge | London
Paris spÃ©cialitÃ©s | Marie Bertrand | 265, boulevard Charonne | Paris
Rattlesnake Canyon Grocery | Paula Wilson | 2817 Milton Dr. | Albuquerque
Simons bistro | Jytte Petersen | VinbÃ¦ltet 34 | KÃ¸benhavn
The Big Cheese | Liz Nixon | 89 Jefferson Way Suite 2 | Portland
Vaffeljernet | Palle Ibsen | SmagslÃ¸get 45 | Ã…rhus
Wolski Zajazd | Zbyszek Piestrzeniewicz | ul. Filtrowa 68 | Warszawa


demo_dropdownlist.html

[TComboFormControlObj]


demo_hashtable_drop1.html

[TComboFormControlObj]


demo_hashtable_radio1.html

[TRadioButtonFormControlObj]Norway

[TRadioButtonFormControlObj]Italy

[TRadioButtonFormControlObj]Sweden

[TRadioButtonFormControlObj]France


demo_hashtable_radio2.html

[TRadioButtonFormControlObj]DropDownList

[TRadioButtonFormControlObj]RadioButtonList

[TRadioButtonFormControlObj]CheckBoxList

[TRadioButtonFormControlObj]ListBox


demo_htmlanchor.html

Visit W3Schools!

Visit Microsoft!


demo_htmlbutton.html

Blue button!

Pink button!


demo_htmlimage.html

smiley


demo_htmlimage2.html

[TComboFormControlObj]


demo_htmlinputbutton.html

Enter your name: [TEditFormControlObj]


demo_htmlinputcheckbox.html

What color do you prefer?

[TCheckBoxFormControlObj] Red

[TCheckBoxFormControlObj] Blue


demo_htmlinputhidden.html

Enter some text: [TEditFormControlObj]


demo_htmlinputimage.html

Click on one of the images:


demo_htmlinputradiobutton.html

Select your favorite color:

[TRadioButtonFormControlObj]Red

[TRadioButtonFormControlObj]Green

[TRadioButtonFormControlObj]Blue


demo_htmltable.html

Table rows: [TComboFormControlObj]

Table cells: [TComboFormControlObj]


demo_htmltable2.html

Cell 1 | Cell 2
Cell 3 | Cell 4


demo_htmltextarea.html

Enter some text:

[TTextAreaFormControlObj]


demo_hyperlink.html


demo_image.html


demo_imagebutton.html

Click on the image:


demo_label.html

Write some text: [TEditFormControlObj]


demo_linkbutton.html

Click me!


demo_listbox.html

[TListBoxFormControlObj]


demo_literal.html

I love ASP. NET!


demo_literal2.html

I love ASP!


demo_pageispostback.html

The date and time is 2/27/2007 3:54:46 AM


demo_pageload.html

The date and time is 2/27/2007 3:54:45 AM


demo_panel.html

Hello World!

[TCheckBoxFormControlObj]Hide Panel control


demo_radiobutton.html

Select your favorite color:

[TRadioButtonFormControlObj]Red

[TRadioButtonFormControlObj]Green

[TRadioButtonFormControlObj]Blue


demo_radiobuttonlist.html

[TRadioButtonFormControlObj]Item 1

[TRadioButtonFormControlObj]Item 2

[TRadioButtonFormControlObj]Item 3

[TRadioButtonFormControlObj]Item 4


demo_rangevalidator.html

Enter a date between 2005-01-01 and 2005-12-31:

[TEditFormControlObj]


demo_rangevalidator2.html

Enter a number from 1 to 100: [TEditFormControlObj]


demo_regularexpvalidator.html

Enter a US zip code: [TEditFormControlObj]


demo_repeater1.html

Title | Artist | Company | Price
Empire Burlesque | Bob Dylan | Columbia | 10.90
Hide your heart | Bonnie Tyler | CBS Records | 9.90
Greatest Hits | Dolly Parton | RCA | 9.90
Still got the blues | Gary Moore | Virgin records | 10.20
Eros | Eros Ramazzotti | BMG | 9.90


demo_repeater2.html

Title | Artist | Company | Price
Empire Burlesque | Bob Dylan | Columbia | 10.90
Hide your heart | Bonnie Tyler | CBS Records | 9.90
Greatest Hits | Dolly Parton | RCA | 9.90
Still got the blues | Gary Moore | Virgin records | 10.20
Eros | Eros Ramazzotti | BMG | 9.90


demo_repeater3.html

Title | Artist | Company | Price
Empire Burlesque | Bob Dylan | Columbia | 10.90
Hide your heart | Bonnie Tyler | CBS Records | 9.90
Greatest Hits | Dolly Parton | RCA | 9.90
Still got the blues | Gary Moore | Virgin records | 10.20
Eros | Eros Ramazzotti | BMG | 9.90


demo_reqfieldvalidator.html

Name: [TEditFormControlObj]

Age: [TEditFormControlObj]


demo_sortedlist_drop1.html

[TComboFormControlObj]


demo_sortedlist_radio1.html

[TRadioButtonFormControlObj]France

[TRadioButtonFormControlObj]Italy

[TRadioButtonFormControlObj]Norway

[TRadioButtonFormControlObj]Sweden


demo_sortedlist_radio2.html

[TRadioButtonFormControlObj]CheckBoxList

[TRadioButtonFormControlObj]DropDownList

[TRadioButtonFormControlObj]ListBox

[TRadioButtonFormControlObj]RadioButtonList


demo_table.html

1 | 2
3 | 4

1 | 2
3 | 4


demo_table2.html

row 0, cell 0 | row 0, cell 1
row 1, cell 0 | row 1, cell 1
row 2, cell 0 | row 2, cell 1


demo_textbox.html

Enter your name: [TEditFormControlObj]


demo_textbox_ex1.html

A basic TextBox: [TEditFormControlObj]

A password TextBox: [TEditFormControlObj]

A TextBox with text: [TEditFormControlObj]

A multiline TextBox: [TTextAreaFormControlObj]

A TextBox with height: [TTextAreaFormControlObj]

A TextBox with width: [TEditFormControlObj]


demo_textbox2.html

[TTextAreaFormControlObj]


demo_textbox3.html

Change text [TEditFormControlObj]


demo_validationsum.html

Name: | [TEditFormControlObj]
Card Type: | [TRadioButtonFormControlObj]Diners [TRadioButtonFormControlObj]MasterCard [TRadioButtonFormControlObj]Visa


demo_validationsum2.html

Name: | [TEditFormControlObj]
Card Type: | [TRadioButtonFormControlObj]Diners [TRadioButtonFormControlObj]MasterCard [TRadioButtonFormControlObj]Visa


demo_xml.html

My CD Collection

Title | Artist
Empire Burlesque | Bob Dylan
Hide your heart | Bonnie Tyler
Greatest Hits | Dolly Parton
Still got the blues | Gary Moore
Eros | Eros Ramazzotti

View XML file

View XSL file


demo_xml_radio1.html

[TRadioButtonFormControlObj]Norway

[TRadioButtonFormControlObj]Sweden

[TRadioButtonFormControlObj]France

[TRadioButtonFormControlObj]Italy


dynpage.html

Hello W3Schools!

27/02/2007 03:42:05


dynpage-2.html

Hello W3Schools!

2/27/2007 3:42:06 AM


firstpage.html

Hello W3Schools!


firstpage-2.html

Hello W3Schools!


showcode037d.html

<html>

<body>

<form runat="server">

A basic TextBox:

<asp:TextBox id="tb1" runat="server" />

<br /><br />

A password TextBox:

<asp:TextBox id="tb2" TextMode="password" runat="server" />

<br /><br />

A TextBox with text:

<asp:TextBox id="tb3" Text="Hello World!" runat="server" />

<br /><br />

A multiline TextBox:

<asp:TextBox id="tb4" TextMode="multiline" runat="server" />

<br /><br />

A TextBox with height:

<asp:TextBox id="tb5" rows="5" TextMode="multiline" runat="server" />

<br /><br />

A TextBox with width:

<asp:TextBox id="tb6" columns="30" runat="server" />

</form>

</body>

</html>


showcode0912.html

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycountries=New Hashtable

mycountries.Add("N","Norway")

mycountries.Add("S","Sweden")

mycountries.Add("F","France")

mycountries.Add("I","Italy")

dd.DataSource=mycountries

dd.DataValueField="Key"

dd.DataTextField="Value"

dd.DataBind()

end if

end sub

sub displayMessage(s as Object,e As EventArgs)

lbl1.text="Your favorite country is: " & dd.SelectedItem.Text

end sub

</script>

<html>

<body>

<form runat="server">

<asp:DropDownList id="dd" runat="server"

AutoPostBack="True" onSelectedIndexChanged="displayMessage" />

<p><asp:label id="lbl1" runat="server" /></p>

</form>

</body>

</html>


showcode0e06.html

<script runat="server">

Sub user(source As object,args As ServerValidateEventArgs)

if len(args.Value)<8 or len(args.Value)>16 then

args.IsValid=false

else

args.IsValid=true

end if

End Sub

</script>

<html>

<body>

<form runat="server">

<asp:Label runat="server" Text="Enter a username: " />

<asp:TextBox id="txt1" runat="server" />

<asp:Button Text="Submit" runat="server"/>

<br />

<asp:Label id="mess" runat="server"/>

<br />

<asp:CustomValidator

ControlToValidate="txt1"

OnServerValidate="user"

Text="A username must be between 8 and 16 characters!"

runat="server"/>

</form>

</body>

</html>


showcode0ec1.html

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycountries=New SortedList

mycountries.Add("N","Norway")

mycountries.Add("S","Sweden")

mycountries.Add("F","France")

mycountries.Add("I","Italy")

rb.DataSource=mycountries

rb.DataValueField="Key"

rb.DataTextField="Value"

rb.DataBind()

end if

end sub

sub displayMessage(s as Object,e As EventArgs)

lbl1.text="Your favorite country is: " & rb.SelectedItem.Text

end sub

</script>

<html>

<body>

<form runat="server">

<asp:RadioButtonList id="rb" runat="server"

AutoPostBack="True" onSelectedIndexChanged="displayMessage" />

<p><asp:label id="lbl1" runat="server" /></p>

</form>

</body>

</html>


showcode0ec9.html

<script runat="server">

Sub change(sender As Object, e As EventArgs)

lbl1.Text="You changed text to " & txt1.Text

End Sub

</script>

<html>

<body>

<form runat="server">

Change text

<asp:TextBox id="txt1" runat="server"

text="Hello World!" ontextchanged="change" autopostback="true"/>

<p><asp:Label id="lbl1" runat="server" /></p>

</form>

</body>

</html>


showcode1397.html

<script runat="server">

Sub submit(sender As Object, e As EventArgs)

label1.Text="You selected " & radiolist1.SelectedItem.Text

End Sub

</script>

<html>

<body>

<form runat="server">

<asp:RadioButtonList id="radiolist1" runat="server">

<asp:ListItem selected="true">Item 1</asp:ListItem>

<asp:ListItem>Item 2</asp:ListItem>

<asp:ListItem>Item 3</asp:ListItem>

<asp:ListItem>Item 4</asp:ListItem>

</asp:RadioButtonList>

<br />

<asp:Button text="Submit" OnClick="submit" runat="server"/>

<p><asp:Label id="Label1" runat="server"/></p>

</form>

</body>

</html>


showcode20ef.html

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim navigate=New Hashtable

navigate.Add("RadioButtonList","control_radiobuttonlist.asp")

navigate.Add("CheckBoxList","control_checkboxlist.asp")

navigate.Add("DropDownList","control_dropdownlist.asp")

navigate.Add("ListBox","control_listbox.asp")

rb.DataSource=navigate

rb.DataValueField="Value"

rb.DataTextField="Key"

rb.DataBind()

end if

end sub

sub navigate(s as Object, e As EventArgs)

response.redirect(rb.SelectedItem.Value)

end sub

</script>

<html>

<body>

<form runat="server">

<asp:RadioButtonList id="rb" runat="server"

AutoPostBack="True" onSelectedIndexChanged="navigate" />

</form>

</body>

</html>


showcode28dd.html

<script runat="server">

sub submit(sender As Object, e As EventArgs)

lbl1.Text=txt1.Text

end sub

</script>

<html>

<body>

<form runat="server">

<asp:TextBox id="txt1" Text="Hello World!"

Font_Face="verdana" BackColor="#0000ff"

ForeColor="white" TextMode="MultiLine"

Height="50" runat="server" />

<asp:Button OnClick="submit"

Text="Copy Text to Label" runat="server" />

<p><asp:Label id="lbl1" runat="server" /></p>

</form>

</body>

</html>


showcode2977.html

<script runat="server">

Sub submit(sender As Object, e as EventArgs)

if name.value<>"" then

p1.InnerHtml="Welcome " & name.value & "!"

end if

End Sub

</script>

<html>

<body>

<form runat="server">

Enter your name: <input id="name" type="text" size="30" runat="server" />

<br /><br />

<input type="submit" value="Submit" OnServerClick="submit" runat="server" />

<p id="p1" runat="server" />

</form>

</body>

</html>


showcode2e47.html

<script runat="server">

Sub submit(sender As Object, e As EventArgs)

lbl1.Text="Hello " & txt1.Text & "!"

End Sub

</script>

<html>

<body>

<form runat="server">

Your name: <asp:TextBox id="txt1" runat="server" />

<asp:Button OnClick="submit" Text="Submit" runat="server" />

<p><asp:Label id="lbl1" runat="server" /></p>

</form>

</body>

</html>


showcode3110.html

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycountries=New SortedList

mycountries.Add("N","Norway")

mycountries.Add("S","Sweden")

mycountries.Add("F","France")

mycountries.Add("I","Italy")

dd.DataSource=mycountries

dd.DataValueField="Key"

dd.DataTextField="Value"

dd.DataBind()

end if

end sub

sub displayMessage(s as Object,e As EventArgs)

lbl1.text="Your favorite country is: " & dd.SelectedItem.Text

end sub

</script>

<html>

<body>

<form runat="server">

<asp:DropDownList id="dd" runat="server"

AutoPostBack="True" onSelectedIndexChanged="displayMessage" />

<p><asp:label id="lbl1" runat="server" /></p>

</form>

</body>

</html>


showcode3408.html

<html>

<body>

<form runat="server">

<table border="0" bgcolor="#b0c4de">

<tr valign="top">

<td colspan="4"><h4>Compare two values</h4></td>

</tr>

<tr valign="top">

<td><asp:TextBox id="txt1" runat="server" /></td>

<td> = </td>

<td><asp:TextBox id="txt2" runat="server" /></td>

<td><asp:Button Text="Validate" runat="server" /></td>

</tr>

</table>

<br />

<asp:CompareValidator

id="compval"

Display="dynamic"

ControlToValidate="txt1"

ControlToCompare="txt2"

ForeColor="red"

BackColor="yellow"

Type="String"

EnableClientScript="false"

Text="Validation Failed!"

runat="server" />

</form>

</body>

</html>


showcode38be.html

<script runat="server">

Sub submit(Source As Object, e As EventArgs)

button1.Style("background-color")="#0000ff"

button1.Style("color")="#ffffff"

button1.Style("width")="200px"

button1.Style("cursor")="hand"

button1.Style("font-family")="verdana"

button1.Style("font-weight")="bold"

button1.Style("font-size")="14pt"

button1.Text="You clicked me!"

End Sub

</script>

<html>

<body>

<form runat="server">

<asp:Button id="button1" Text="Click me!" runat="server" OnClick="submit" />

</form>

</body>

</html>


showcode3a7a.html

<script runat="server">

Sub submit(Sender As Object,e As EventArgs)

mess.Text="You selected " & drop1.SelectedItem.Text

End Sub

</script>

<html>

<body>

<form runat="server">

<asp:ListBox id="drop1" rows="3" runat="server">

<asp:ListItem selected="true">Item 1</asp:ListItem>

<asp:ListItem>Item 2</asp:ListItem>

<asp:ListItem>Item 3</asp:ListItem>

<asp:ListItem>Item 4</asp:ListItem>

<asp:ListItem>Item 5</asp:ListItem>

<asp:ListItem>Item 6</asp:ListItem>

</asp:ListBox>

<asp:Button Text="Submit" OnClick="submit" runat="server" />

<p><asp:label id="mess" runat="server" /></p>

</form>

</body>

</html>


showcode3eb3.html

<script runat="server">

Sub submit(sender As Object, e As EventArgs)

lbl1.Text="Your name is " & txt1.Text

End Sub

</script>

<html>

<body>

<form runat="server">

Enter your name:

<asp:TextBox id="txt1" runat="server" />

<asp:Button OnClick="submit" Text="Submit" runat="server" />

<p><asp:Label id="lbl1" runat="server" /></p>

</form>

</body>

</html>


showcode4626.html

<script runat="server">

sub check_operator(sender As Object, e As EventArgs)

compval.Operator=CType(list.SelectedIndex,ValidationCompareOperator)

compval.Validate()

end sub

</script>

<html>

<body>

<form runat="server">

<table border="0" bgcolor="#b0c4de">

<tr valign="top">

<td colspan="4"><h4>Compare two values</h4></td>

</tr>

<tr valign="top">

<td><asp:TextBox id="txt1" runat="server" /></td>

<td>

<asp:ListBox id="list" rows="2" OnSelectedIndexChanged="check_operator" runat="server">

<asp:ListItem value="Equal" selected>=</asp:ListItem>

<asp:ListItem value="NotEqual"><></asp:ListItem>

</asp:ListBox>

</td>

<td><asp:TextBox id="txt2" runat="server" /></td>

<td><asp:Button Text="Validate" runat="server" /></td>

</tr>

</table>

<br />

<asp:CompareValidator

id="compval"

Display="dynamic"

ControlToValidate="txt1"

ControlToCompare="txt2"

ForeColor="red"

BackColor="yellow"

Type="String"

EnableClientScript="false"

Text="Validation Failed!"

runat="server" />

</form>

</body>

</html>


showcode4799.html

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycountries=New ArrayList

mycountries.Add("Norway")

mycountries.Add("Sweden")

mycountries.Add("France")

mycountries.Add("Italy")

mycountries.TrimToSize()

mycountries.Sort()

dd.DataSource=mycountries

dd.DataBind()

end if

end sub

sub displayMessage(s as Object,e As EventArgs)

lbl1.text="Your favorite country is: " & dd.SelectedItem.Text

end sub

</script>

<html>

<body>

<form runat="server">

<asp:DropDownList id="dd" runat="server"

AutoPostBack="True" onSelectedIndexChanged="displayMessage" />

<p><asp:label id="lbl1" runat="server" /></p>

</form>

</body>

</html>


showcode4b03.html

<script runat="server">

Sub submit(sender As Object, e As EventArgs)

Dim row,numrows,numcells,j,i

row=0

numrows=rows1.Value

numcells=cells1.Value

for j=1 to numrows

Dim r As New HtmlTableRow()

row=row+1

for i=1 to numcells

Dim c As New HtmlTableCell()

c.Controls.Add(New LiteralControl("row " & j & ", cell " & i))

r.Cells.Add(c)

next

t1.Rows.Add(r)

t1.Visible=true

next

End Sub

</script>

<html>

<body>

<form runat="server">

<p>Table rows:

<select id="rows1" runat="server">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

</select>

<br />Table cells:

<select id="cells1" runat="server">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

</select>

<br /><br />

<input type="submit" value="Display Table" runat="server" OnServerClick="submit">

</p>

<table id="t1" border="1" runat="server" visible="false"/>

</form>

</body>

</html>


showcode4c91.html

<script runat="server">

Sub choose_image(Sender As Object, e As EventArgs)

image1.Src = select1.Value

End Sub

</script>

<html>

<body>

<form runat="server">

<select id="select1" runat="server">

<option value="smiley.gif">Smiley</option>

<option value="angry.gif">Angry</option>

<option value="stickman.gif">Stickman</option>

</select>

<input type="submit" runat="server" value="Display image"

OnServerClick="choose_image">

<br /><br />

<img id="image1" src="smiley.gif" runat="server" width="32" height="32" />

</form>

</body>

</html>


showcode4f5e.html

<html>

<body>

<form runat=server>

<asp:Table runat="server" CellPadding="5"

GridLines="horizontal" HorizontalAlign="Center">

<asp:TableRow>

<asp:TableCell>1</asp:TableCell>

<asp:TableCell>2</asp:TableCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell>3</asp:TableCell>

<asp:TableCell>4</asp:TableCell>

</asp:TableRow>

</asp:Table>

<br />

<asp:Table runat="server" CellPadding="5"

GridLines="vertical" HorizontalAlign="Center">

<asp:TableRow>

<asp:TableCell>1</asp:TableCell>

<asp:TableCell>2</asp:TableCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell>3</asp:TableCell>

<asp:TableCell>4</asp:TableCell>

</asp:TableRow>

</asp:Table>

</form>

</body>

</html>


showcode54c9.html

<%@ Import Namespace="System.Data" %>

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycdcatalog=New DataSet

mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))

cdcatalog.DataSource=mycdcatalog

cdcatalog.DataBind()

end if

end sub

</script>

<html>

<body>

<form runat="server">

<asp:DataList id="cdcatalog"

runat="server"

cellpadding="2"

cellspacing="2"

borderstyle="inset"

backcolor="#e8e8e8"

width="100%"

headerstyle-font-name="Verdana"

headerstyle-font-size="12pt"

headerstyle-horizontalalign="center"

headerstyle-font-bold="True"

itemstyle-backcolor="#778899"

itemstyle-forecolor="#ffffff"

footerstyle-font-size="9pt"

footerstyle-font-italic="True">

<HeaderTemplate>

My CD Catalog

</HeaderTemplate>

<ItemTemplate>

"<%#Container.DataItem("title")%>" of <%#Container.DataItem("artist")%> - $<%#Container.DataItem("price")%>

</ItemTemplate>

<FooterTemplate>

© Hege Refsnes

</FooterTemplate>

</asp:DataList>

</form>

</body>

</html>


showcode55a8.html

<script runat="server">

Sub submit(Source As Object, e As EventArgs)

hidden1.Value=string1.Value

p1.InnerHtml="Hidden value= " + hidden1.Value

End Sub

</script>

<html>

<body>

<form runat="server">

Enter some text: <input id="string1" type="text" size="25" runat="server" />

<input type="submit" value="Submit" OnServerClick="submit" runat="server" />

<input id="hidden1" type="hidden" runat="server" />

<p id="p1" runat="server" />

</form>

</body>

</html>


showcode569f.html

<script runat="server">

Sub Page_Load

if Not Page.IsPostBack then

lbl1.Text="The date and time is " & now()

end if

End Sub

Sub Submit(s As Object, e As EventArgs)

lbl2.Text="Hello World!"

End Sub

</script>

<html>

<body>

<form runat="server">

<h3><asp:label id="lbl1" runat="server" /></h3>

<h3><asp:label id="lbl2" runat="server" /></h3>

<asp:button text="Submit" onclick="submit" runat="server" />

</form>

</body>

</html>


showcode5d72.html

<script runat="server">

Sub submit(Sender As Object, e As EventArgs)

if red.Checked then

Label1.Text="You selected " & red.Text

elseIf green.Checked then

Label1.Text="You selected " & green.Text

elseIf blue.Checked then

Label1.Text="You selected " & blue.Text

end if

End Sub

</script>

<html>

<body>

<form runat="server">

Select your favorite color:

<br />

<asp:RadioButton id="red" Text="Red" Checked="True"

GroupName="colors" runat="server"/>

<br />

<asp:RadioButton id="green" Text="Green"

GroupName="colors" runat="server"/>

<br />

<asp:RadioButton id="blue" Text="Blue"

GroupName="colors" runat="server"/>

<br />

<asp:Button text="Submit" OnClick="submit" runat="server"/>

<p><asp:Label id="Label1" runat="server"/></p>

</form>

</body>

</html>


showcode6100.html

<script runat="server">

Sub Page_Load(sender As Object, e As EventArgs)

dim rows,cells,j,i

rows=3

cells=2

For j=0 To rows-1

dim r As New TableRow()

For i=0 To cells-1

dim c As New TableCell()

c.Controls.Add(New LiteralControl("row " & j & ", cell " & i))

r.Cells.Add(c)

Next

Table1.Rows.Add(r)

Next

End Sub

</script>

<html>

<body>

<form runat="server">

<asp:Table id="Table1" BorderWidth="1" GridLines="Both" runat="server" />

</form>

</body>

</html>


showcode61a3.html

<script runat="server">

Sub Page_Load

lbl1.Text="The date and time is " & now()

End Sub

</script>

<html>

<body>

<form runat="server">

<h3><asp:label id="lbl1" runat="server" /></h3>

</form>

</body>

</html>


showcode6bf2.html

<script runat="server">

Sub submit(Source As Object, e As EventArgs)

if r1.Checked=True then

p1.InnerHtml="Your favorite color is red"

else

if r2.Checked=True then

p1.InnerHtml="Your favorite color is green"

else

if r3.Checked=True then

p1.InnerHtml="Your favorite color is blue"

end if

end if

end if

End Sub

</script>

<html>

<body>

<form runat="server">

<p>Select your favorite color:

<br />

<input id="r1" name="col" type="radio" runat="server">Red</input>

<br />

<input id="r2" name="col" type="radio" runat="server">Green</input>

<br />

<input id="r3" name="col" type="radio" runat="server">Blue</input>

<br />

<input type="button" value="Submit" OnServerClick="submit" runat="server"/>

<p id="p1" runat="server" />

</form>

</body>

</html>


showcode6d7e.html

<script runat="server">

Sub submit(Sender As Object, e As EventArgs)

label1.Text=txt1.Text

End Sub

</script>

<html>

<body>

<form runat="server">

Write some text:

<asp:TextBox id="txt1" Width="200" runat="server" />

<asp:Button id="b1" Text="Copy to Label" OnClick="submit" runat="server" />

<p><asp:Label id="label1" runat="server" /></p>

</form>

</body>

</html>


showcode6e1c.html

<html>

<body>

<form runat="server">

<asp:HyperLink

ImageUrl="/banners/w6.gif"

NavigateUrl="http://www.w3schools.com"

Text="Visit W3Schools!"

Target="_blank"

runat="server" />

</form>

</body>

</html>


showcode70d3.html

<%@ Import Namespace="System.Data" %>

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycdcatalog=New DataSet

mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))

cdcatalog.DataSource=mycdcatalog

cdcatalog.DataBind()

end if

end sub

</script>

<html>

<body>

<form runat="server">

<asp:DataList id="cdcatalog"

runat="server"

cellpadding="2"

cellspacing="2"

borderstyle="inset"

backcolor="#e8e8e8"

width="100%"

headerstyle-font-name="Verdana"

headerstyle-font-size="12pt"

headerstyle-horizontalalign="center"

headerstyle-font-bold="True"

itemstyle-backcolor="#778899"

itemstyle-forecolor="#ffffff"

alternatingitemstyle-backcolor="#e8e8e8"

alternatingitemstyle-forecolor="#000000"

footerstyle-font-size="9pt"

footerstyle-font-italic="True">

<HeaderTemplate>

My CD Catalog

</HeaderTemplate>

<ItemTemplate>

"<%#Container.DataItem("title")%>" of <%#Container.DataItem("artist")%> - $<%#Container.DataItem("price")%>

</ItemTemplate>

<AlternatingItemTemplate>

"<%#Container.DataItem("title")%>" of <%#Container.DataItem("artist")%> - $<%#Container.DataItem("price")%>

</AlternatingItemTemplate>

<FooterTemplate>

© Hege Refsnes

</FooterTemplate>

</asp:DataList>

</form>

</body>

</html>


showcode7ee8.html

<script runat="server">

sub submit(sender As Object, e As EventArgs)

if Page.IsValid then

lbl.Text="The page is valid!"

else

lbl.Text="The page is not valid!"

end if

end sub

</script>

<html>

<body>

<form runat="server">

Enter a US zip code:

<asp:TextBox id="txtbox1" runat="server" />

<br /><br />

<asp:Button text="Submit" OnClick="submit" runat="server" />

<br /><br />

<asp:Label id="lbl" runat="server" />

<br />

<asp:RegularExpressionValidator

ControlToValidate="txtbox1"

ValidationExpression="\d{5}"

EnableClientScript="false"

ErrorMessage="The zip code must be 5 numeric digits!"

runat="server" />

</form>

</body>

</html>


showcode8427.html

<%@ Import Namespace="System.Data" %>

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycountries=New DataSet

mycountries.ReadXml(MapPath("countries.xml"))

rb.DataSource=mycountries

rb.DataValueField="value"

rb.DataTextField="text"

rb.DataBind()

end if

end sub

sub displayMessage(s as Object,e As EventArgs)

lbl1.text="Your favorite country is: " & rb.SelectedItem.Text

end sub

</script>

<html>

<body>

<form runat="server">

<asp:RadioButtonList id="rb" runat="server"

AutoPostBack="True" onSelectedIndexChanged="displayMessage" />

<p><asp:label id="lbl1" runat="server" /></p>

</form>

</body>

</html>


showcode89e8.html

<script runat="server">

Sub Page_Load(Sender As Object,E As EventArgs)

image1.Src="smiley.gif"

image1.Alt="Smiley"

image1.Border="3"

End Sub

</script>

<html>

<body>

<form runat="server">

<img id="image1" runat="server" />

</form>

</body>

</html>


showcode8e35.html

<html>

<body>

<form runat="server">

Enter a date between 2005-01-01 and 2005-12-31:

<br />

<asp:TextBox id="tbox1" runat="server" />

<br /><br />

<asp:Button Text="Submit" runat="server" />

<br /><br />

<asp:RangeValidator

ControlToValidate="tbox1"

MinimumValue="2005-01-01"

MaximumValue="2005-12-31"

Type="Date"

EnableClientScript="false"

Text="The date must be between 2005-01-01 and 2005-12-31!"

runat="server" />

</form>

</body>

</html>


showcode92d2.html

<script runat="server">

Sub getCoordinates(sender As Object, e As ImageClickEventArgs)

mess.Text="Coordinates: " & e.x & ", " & e.y

End Sub

</script>

<html>

<body>

<form runat="server">

<p>Click on the image:</p>

<asp:ImageButton

runat="server"

ImageUrl="smiley.gif"

OnClick="getCoordinates"/>

<p><asp:label id="mess" runat="server"/></p>

</form>

</body>

</html>


showcode96dd.html

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim navigate=New SortedList

navigate.Add("RadioButtonList","control_radiobuttonlist.asp")

navigate.Add("CheckBoxList","control_checkboxlist.asp")

navigate.Add("DropDownList","control_dropdownlist.asp")

navigate.Add("ListBox","control_listbox.asp")

rb.DataSource=navigate

rb.DataValueField="Value"

rb.DataTextField="Key"

rb.DataBind()

end if

end sub

sub navigate(s as Object, e As EventArgs)

response.redirect(rb.SelectedItem.Value)

end sub

</script>

<html>

<body>

<form runat="server">

<asp:RadioButtonList id="rb" runat="server"

AutoPostBack="True" onSelectedIndexChanged="navigate" />

</form>

</body>

</html>


showcode9853.html

<script runat="server">

Sub submit(Source As Object, e As EventArgs)

button1.Text="You clicked me!"

End Sub

</script>

<html>

<body>

<form runat="server">

<asp:Button id="button1" Text="Click me!" runat="server" OnClick="submit" />

</form>

</body>

</html>


showcode9b05.html

<script runat="server">

Sub change_url(sender As Object, e As AdCreatedEventArgs)

e.NavigateUrl="http://www.w3schools.com"

End Sub

</script>

<html>

<body>

<form runat="server">

<asp:AdRotator AdvertisementFile="Ad1.xml"

runat="server" OnAdCreated="change_url"

target="_blank" />

</form>

<p><a href="ad1.xml" target="_blank">View XML file</a></p>

</body>

</html>


showcodea3df.html

<html>

<body>

<form runat="server">

<asp:Literal Text="I love ASP. NET!" runat="server" />

</form>

</body>

</html>


showcodeb34d.html

<script runat="server">

Sub Check(sender As Object, e As EventArgs)

if check1.Checked then

work.Text=home.Text

else

work.Text=""

end if

End Sub

</script>

<html>

<body>

<form runat="server">

<p>Home Phone:

<asp:TextBox id="home" runat="server" />

<br />

Work Phone:

<asp:TextBox id="work" runat="server" />

<asp:CheckBox id="check1"

Text="Same as home phone" TextAlign="Right"

AutoPostBack="True" OnCheckedChanged="Check"

runat="server" />

</p>

</form>

</body>

</html>


showcodebbb9.html

<html>

<body>

<form runat="server">

<asp:Calendar runat="server" />

</form>

</body>

</html>


showcodebf42.html

<script runat="server">

Sub submit(sender As Object, e As EventArgs)

p1.InnerHtml = "<b>You wrote:</b> " & textarea1.Value

End Sub

</script>

<html>

<body>

<form runat="server">

Enter some text:<br />

<textarea id="textarea1" cols="35" rows="6" runat="server" />

<input type="submit" value="Submit" OnServerClick="submit" runat="server" />

<p id="p1" runat="server" />

</form>

</body>

</html>


showcodebfaa.html

<script runat="server">

Sub button1(Source As Object, e As ImageClickEventArgs)

p1.InnerHtml="You clicked the smiley button!"

End Sub

Sub button2(Source As Object, e As ImageClickEventArgs)

p1.InnerHtml="You clicked the angry button!"

End Sub

</script>

<html>

<body>

<form runat="server">

<p>Click on one of the images:</p>

<p>

<input type="image" src="smiley.gif"

OnServerClick="button1" runat="server" width="32" height="32" />

</p>

<p>

<input type="image" src="angry.gif"

OnServerClick="button2" runat="server" width="32" height="32" />

</p>

<p id="p1" runat="server" />

</form>

</body>

</html>


showcodec176.html

<script runat="server">

Sub lblClick(sender As Object, e As EventArgs)

Label1.Text="You clicked the LinkButton control"

End Sub

</script>

<html>

<body>

<form runat="server">

<asp:LinkButton Text="Click me!" OnClick="lblClick" runat="server" />

<p><asp:Label id="Label1" runat="server" /></p>

</form>

</body>

</html>


showcodec273.html

<script runat="server">

Sub submit(sender As Object, e As EventArgs)

dim i,j

table1.BGColor="yellow"

table1.BorderColor="red"

for i=0 To table1.Rows.Count-1

for j=0 To table1.Rows(i).Cells.Count-1

table1.Rows(i).Cells(j).InnerHtml="Row " & i

next

next

End Sub

</script>

<html>

<body>

<form runat="server">

<table id="table1" border="1" runat="server">

<tr>

<td>Cell 1</td>

<td>Cell 2</td>

</tr>

<tr>

<td>Cell 3</td>

<td>Cell 4</td>

</tr>

</table>

<br />

<input type="button" value="Change Contents" OnServerClick="submit" runat="server"/>

</form>

</body>

</html>


showcodec3c6.html

<script runat="server">

Sub Check(sender As Object, e As EventArgs)

dim i

mess.Text="<p>Selected Item(s):</p>"

for i=0 to check1.Items.Count-1

if check1.Items(i).Selected then

mess.Text+=check1.Items(i).Text + "<br />"

end if

next

End Sub

</script>

<html>

<body>

<form runat="server">

<asp:CheckBoxList id="check1" AutoPostBack="True"

TextAlign="Right" OnSelectedIndexChanged="Check"

runat="server">

<asp:ListItem>Item 1</asp:ListItem>

<asp:ListItem>Item 2</asp:ListItem>

<asp:ListItem>Item 3</asp:ListItem>

<asp:ListItem>Item 4</asp:ListItem>

<asp:ListItem>Item 5</asp:ListItem>

<asp:ListItem>Item 6</asp:ListItem>

</asp:CheckBoxList>

<br />

<asp:label id="mess" runat="server"/>

</form>

</body>

</html>


showcodec7cc.html

<%@ Import Namespace="System.Data.OleDb" %>

<script runat="server">

sub Page_Load

dim dbconn,sql,dbcomm,dbread

dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=" & server.mappath("/db/northwind.mdb"))

dbconn.Open()

sql="SELECT * FROM customers"

dbcomm=New OleDbCommand(sql,dbconn)

dbread=dbcomm.ExecuteReader()

customers.DataSource=dbread

customers.DataBind()

dbread.Close()

dbconn.Close()

end sub

</script>

<html>

<body>

<form runat="server">

<asp:DataList

id="customers"

runat="server"

cellpadding="2"

cellspacing="2"

borderstyle="inset"

backcolor="#e8e8e8"

width="100%"

headerstyle-font-name="Verdana"

headerstyle-font-size="12pt"

headerstyle-horizontalalign="center"

headerstyle-font-bold="True"

itemstyle-backcolor="#778899"

itemstyle-forecolor="#ffffff"

footerstyle-font-size="9pt"

footerstyle-font-italic="True">

<HeaderTemplate>

Customers Table

</HeaderTemplate>

<ItemTemplate>

<%#Container.DataItem("companyname")%> in

<%#Container.DataItem("address")%>, <%#Container.DataItem("city")%>

</ItemTemplate>

<FooterTemplate>

Source: Northwind Database

</FooterTemplate>

</asp:DataList>

</form>

</body>

</html>


showcodecb02.html

<script runat="server">

Sub submit(sender As Object, e As EventArgs)

Literal1.Text="I love ASP.NET!"

End Sub

</script>

<html>

<body>

<form runat="server">

<asp:Literal id="Literal1" Text="I love ASP!" runat="server" />

<br><br>

<asp:Button Text="Change Text" OnClick="submit" runat="server" />

</form>

</body>

</html>


showcodecc19.html

<script runat="server">

Sub button1(Source As Object, e As EventArgs)

p1.InnerHtml="You clicked the blue button!"

End Sub

Sub button2(Source As Object, e As EventArgs)

p1.InnerHtml="You clicked the pink button!"

End Sub

</script>

<html>

<body>

<form runat="server">

<button id="b1" OnServerClick="button1"

style="background-color:#e6e6fa;

height=25;width:100" runat="server">

Blue button!

</button>

<button id="b2"

OnServerClick="button2"

style="background-color:#fff0f5;

height=25;width:100" runat="server">

Pink button!

</button>

<p id="p1" runat="server" />

</form>

</body>

</html>


showcodecd81.html

<%@ Import Namespace="System.Data.OleDb" %>

<script runat="server">

sub Page_Load

dim dbconn,sql,dbcomm,dbread

dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=" & server.mappath("/db/northwind.mdb"))

dbconn.Open()

sql="SELECT * FROM customers"

dbcomm=New OleDbCommand(sql,dbconn)

dbread=dbcomm.ExecuteReader()

customers.DataSource=dbread

customers.DataBind()

dbread.Close()

dbconn.Close()

end sub

</script>

<html>

<body>

<form runat="server">

<asp:Repeater id="customers" runat="server">

<HeaderTemplate>

<table border="1" width="100%">

<tr bgcolor="#b0c4de">

<th>Companyname</th>

<th>Contactname</th>

<th>Address</th>

<th>City</th>

</tr>

</HeaderTemplate>

<ItemTemplate>

<tr bgcolor="#f0f0f0">

<td><%#Container.DataItem("companyname")%> </td>

<td><%#Container.DataItem("contactname")%> </td>

<td><%#Container.DataItem("address")%> </td>

<td><%#Container.DataItem("city")%> </td>

</tr>

</ItemTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

</form>

</body>

</html>


showcodecdec.html

<html>

<body>

<form runat="server">

<asp:Calendar DayNameFormat="Full" runat="server">

<WeekendDayStyle BackColor="#fafad2" ForeColor="#ff0000" />

<DayHeaderStyle ForeColor="#0000ff" />

<TodayDayStyle BackColor="#00ff00" />

</asp:Calendar>

</form>

</body>

</html>


showcodecea5.html

<script runat="server">

Sub submit(Source As Object, e As EventArgs)

if red.Checked=True then

p1.InnerHtml="You prefer red!"

else

p1.InnerHtml="You prefer blue!"

end if

red.checked=false

blue.checked=false

End Sub

</script>

<html>

<body>

<form runat="server">

What color do you prefer?

<br />

<input id="red" type="checkbox" runat="server" /> Red

<br />

<input id="blue" type="checkbox" runat="server" /> Blue

<br />

<input type="button" value="Submit" OnServerClick="submit" runat="server"/>

<p id="p1" runat="server" />

</form>

</body>

</html>


showcoded442.html

<%@ Import Namespace="System.Data" %>

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycdcatalog=New DataSet

mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))

cdcatalog.DataSource=mycdcatalog

cdcatalog.DataBind()

end if

end sub

</script>

<html>

<body>

<form runat="server">

<asp:Repeater id="cdcatalog" runat="server">

<HeaderTemplate>

<table border="0" width="100%">

<tr>

<th align="left">Title</th>

<th align="left">Artist</th>

<th align="left">Company</th>

<th align="left">Price</th>

</tr>

</HeaderTemplate>

<ItemTemplate>

<tr>

<td><%#Container.DataItem("title")%> </td>

<td><%#Container.DataItem("artist")%> </td>

<td><%#Container.DataItem("company")%> </td>

<td><%#Container.DataItem("price")%> </td>

</tr>

</ItemTemplate>

<SeparatorTemplate>

<tr>

<td colspan="6"><hr /></td>

</tr>

</SeparatorTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

</form>

</html>

</body>


showcoded567.html

<html>

<body>

<form runat="server">

<asp:Calendar DayNameFormat="Full" runat="server"

SelectionMode="DayWeekMonth"

SelectMonthText="<*>"

SelectWeekText="<->"/>

<SelectorStyle BackColor="#f5f5f5" />

</asp:Calendar>

</form>

</body>

</html>


showcodee395.html

<html>

<body>

<form runat="server">

Name: <asp:TextBox id="name" runat="server" />

<br />

Age: <asp:TextBox id="age" runat="server" />

<br /><br />

<asp:Button runat="server" Text="Submit" />

<br /><br />

<asp:RequiredFieldValidator

ControlToValidate="name"

Text="The name field is required!"

runat="server" />

</form>

</body>

</html>


showcodee77f.html

<script runat="server">

Sub Page_Load(sender As Object, e As EventArgs)

if check1.Checked then

panel1.Visible=false

else

panel1.Visible=true

end if

End Sub

</script>

<html>

<body>

<form runat="server">

<asp:Panel id="panel1"

runat="server" BackColor="#ff0000"

Height="100px" Width="100px">

Hello World!

</asp:Panel>

<asp:CheckBox id="check1"

Text="Hide Panel control"

runat="server"/>

<br /><br />

<asp:Button Text="Reload" runat="server" />

</form>

</body>

</html>


showcodeeb47.html

<%@ Import Namespace="System.Data" %>

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycdcatalog=New DataSet

mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))

cdcatalog.DataSource=mycdcatalog

cdcatalog.DataBind()

end if

end sub

</script>

<html>

<body>

<form runat="server">

<asp:DataList

id="cdcatalog"

gridlines="Both"

runat="server">

<HeaderTemplate>

My CD Catalog

</HeaderTemplate>

<ItemTemplate>

"<%#Container.DataItem("title")%>" of <%#Container.DataItem("artist")%> - $<%#Container.DataItem("price")%>

</ItemTemplate>

<FooterTemplate>

© Hege Refsnes

</FooterTemplate>

</asp:DataList>

</form>

</body>

</html>


showcodeecc5.html

<script runat="server">

Sub submit(sender As Object, e As EventArgs)

mess.Text="You selected " & drop1.SelectedItem.Text

End Sub

</script>

<html>

<body>

<form runat="server">

<asp:DropDownList id="drop1" runat="server">

<asp:ListItem>Item 1</asp:ListItem>

<asp:ListItem>Item 2</asp:ListItem>

<asp:ListItem>Item 3</asp:ListItem>

<asp:ListItem>Item 4</asp:ListItem>

<asp:ListItem>Item 5</asp:ListItem>

<asp:ListItem>Item 6</asp:ListItem>

</asp:DropDownList>

<asp:Button Text="Submit" OnClick="submit" runat="server"/>

<p><asp:label id="mess" runat="server"/></p>

</form>

</body>

</html>


showcodef27f.html

<script runat="server">

Sub Page_Load

link1.HRef="http://www.w3schools.com"

link1.Target="_blank"

link1.Title="W3Schools"

link2.HRef="http://www.microsoft.com"

link2.Target="_blank"

link2.Title="Microsoft"

End Sub

</script>

<html>

<body>

<form runat="server">

<a id="link1" runat="server">Visit W3Schools!</a>

<br />

<a id="link2" runat="server">Visit Microsoft!</a>

</form>

</body>

</html>


showcodef346.html

<html>

<body>

<form runat="server">

<table>

<tr>

<td>

<table bgcolor="#b0c4de" cellspacing="10">

<tr>

<td align="right">Name:</td>

<td><asp:TextBox id="txt_name" runat="server"/></td>

<td>

<asp:RequiredFieldValidator

ControlToValidate="txt_name"

ErrorMessage="Name"

Text="*"

runat="server"/>

</td>

</tr>

<tr>

<td align="right">Card Type:</td>

<td>

<asp:RadioButtonList id="rlist_type"

RepeatLayout="Flow"

runat="server">

<asp:ListItem>Diners</asp:ListItem>

<asp:ListItem>MasterCard</asp:ListItem>

<asp:ListItem>Visa</asp:ListItem>

</asp:RadioButtonList>

</td>

<td>

<asp:RequiredFieldValidator

ControlToValidate="rlist_type"

ErrorMessage="Card Type"

InitialValue=""

Text="*"

runat="server"/>

</td>

</tr>

<tr>

<td></td>

<td><asp:Button id="b1" Text="Submit" runat="server"/></td>

<td></td>

</tr>

</table>

</td>

</tr>

</table>

<asp:ValidationSummary

ShowMessageBox="true"

ShowSummary="false"

HeaderText="You must enter a value in the following fields:"

EnableClientScript="true"

runat="server"/>

</form>

</body>

</html>


showcodef357.html

<html>

<body>

<form runat="server">

<table>

<tr>

<td>

<table bgcolor="#b0c4de" cellspacing="10">

<tr>

<td align="right">Name:</td>

<td><asp:TextBox id="txt_name" runat="server"/></td>

<td>

<asp:RequiredFieldValidator

ControlToValidate="txt_name"

ErrorMessage="Name"

Text="*"

runat="server"/>

</td>

</tr>

<tr>

<td align="right">Card Type:</td>

<td>

<asp:RadioButtonList id="rlist_type"

RepeatLayout="Flow"

runat="server">

<asp:ListItem>Diners</asp:ListItem>

<asp:ListItem>MasterCard</asp:ListItem>

<asp:ListItem>Visa</asp:ListItem>

</asp:RadioButtonList>

</td>

<td>

<asp:RequiredFieldValidator

ControlToValidate="rlist_type"

ErrorMessage="Card Type"

InitialValue=""

Text="*"

runat="server"/>

</td>

</tr>

<tr>

<td></td>

<td><asp:Button id="b1" Text="Submit" runat="server"/></td>

<td></td>

</tr>

</table>

</td>

</tr>

</table>

<br />

<asp:ValidationSummary

HeaderText="You must enter a value in the following fields:"

DisplayMode="BulletList"

EnableClientScript="true"

runat="server"/>

</form>

</body>

</html>


showcodef378.html

<html>

<body>

<form runat="server">

<asp:Image

runat="server"

AlternateText="W3Schools"

ImageUrl="/banners/w6.gif"/>

</form>

</body>

</html>


showcodef841.html

<html>

<body>

<form runat="server">

<asp:Xml DocumentSource="cdcatalog.xml" TransformSource="cdcatalog.xsl" runat="server" />

</form>

<p><a href="cdcatalog.xml" target="_blank">View XML file</a></p>

<p><a href="cdcatalog.xsl" target="_blank">View XSL file</a></p>

</body>

</html>


showcodef842.html

<%@ Import Namespace="System.Data" %>

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycdcatalog=New DataSet

mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))

cdcatalog.DataSource=mycdcatalog

cdcatalog.DataBind()

end if

end sub

</script>

<html>

<body>

<form runat="server">

<asp:Repeater id="cdcatalog" runat="server">

<HeaderTemplate>

<table border="1" width="100%">

<tr>

<th>Title</th>

<th>Artist</th>

<th>Company</th>

<th>Price</th>

</tr>

</HeaderTemplate>

<ItemTemplate>

<tr>

<td><%#Container.DataItem("title")%> </td>

<td><%#Container.DataItem("artist")%> </td>

<td><%#Container.DataItem("company")%> </td>

<td><%#Container.DataItem("price")%> </td>

</tr>

</ItemTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

</form>

</html>

</body>


showcodef8b0.html

<script runat="server">

Sub submit(sender As Object, e As EventArgs)

If Page.IsValid Then

lbl1.Text="Page is valid."

Else

lbl1.Text="Page is not valid!!"

End If

End Sub

</script>

<html>

<body>

<form runat="server">

Enter a number from 1 to 100:

<asp:TextBox id="tbox1" runat="server" />

<br /><br />

<asp:Button Text="Submit" OnClick="submit" runat="server" />

<br /><br />

<asp:Label id="lbl1" runat="server" />

<br />

<asp:RangeValidator

ControlToValidate="tbox1"

MinimumValue="1"

MaximumValue="100"

Type="Integer"

EnableClientScript="false"

Text="The value must be from 1 to 100!"

runat="server" />

</form>

</body>

</html>


showcodefeca.html

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycountries=New Hashtable

mycountries.Add("N","Norway")

mycountries.Add("S","Sweden")

mycountries.Add("F","France")

mycountries.Add("I","Italy")

rb.DataSource=mycountries

rb.DataValueField="Key"

rb.DataTextField="Value"

rb.DataBind()

end if

end sub

sub displayMessage(s as Object,e As EventArgs)

lbl1.text="Your favorite country is: " & rb.SelectedItem.Text

end sub

</script>

<html>

<body>

<form runat="server">

<asp:RadioButtonList id="rb" runat="server"

AutoPostBack="True" onSelectedIndexChanged="displayMessage" />

<p><asp:label id="lbl1" runat="server" /></p>

</form>

</body>

</html>


showcodeff50.html

<script runat="server">

Sub Page_Load

if Not Page.IsPostBack then

dim mycountries=New ArrayList

mycountries.Add("Norway")

mycountries.Add("Sweden")

mycountries.Add("France")

mycountries.Add("Italy")

mycountries.TrimToSize()

mycountries.Sort()

rb.DataSource=mycountries

rb.DataBind()

end if

end sub

sub displayMessage(s as Object,e As EventArgs)

lbl1.text="Your favorite country is: " & rb.SelectedItem.Text

end sub

</script>

<html>

<body>

<form runat="server">

<asp:RadioButtonList id="rb" runat="server"

AutoPostBack="True" onSelectedIndexChanged="displayMessage" />

<p><asp:label id="lbl1" runat="server" /></p>

</form>

</body>

</html>


showcodeff7a.html

<%@ Import Namespace="System.Data" %>

<script runat="server">

sub Page_Load

if Not Page.IsPostBack then

dim mycdcatalog=New DataSet

mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))

cdcatalog.DataSource=mycdcatalog

cdcatalog.DataBind()

end if

end sub

</script>

<html>

<body>

<form runat="server">

<asp:Repeater id="cdcatalog" runat="server">

<HeaderTemplate>

<table border="1" width="100%">

<tr>

<th>Title</th>

<th>Artist</th>

<th>Company</th>

<th>Price</th>

</tr>

</HeaderTemplate>

<ItemTemplate>

<tr>

<td><%#Container.DataItem("title")%> </td>

<td><%#Container.DataItem("artist")%> </td>

<td><%#Container.DataItem("company")%> </td>

<td><%#Container.DataItem("price")%> </td>

</tr>

</ItemTemplate>

<AlternatingItemTemplate>

<tr bgcolor="#e8e8e8">

<td><%#Container.DataItem("title")%> </td>

<td><%#Container.DataItem("artist")%> </td>

<td><%#Container.DataItem("company")%> </td>

<td><%#Container.DataItem("price")%> </td>

</tr>

</AlternatingItemTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

</form>

</html>

</body>


Tryit v1.4 - Show ASPX

ASPX Source: | Output Result:


Tryit v1.4 - Show ASPX

Your browser does not support inline frames or is currently configured not to display inline frames.

ASPX Source: | Output Result:


Installing ASP.NET

ASP.NET is easy to install. Just follow the instructions below.

What You Need

A Windows Computer

ASP.NET is a Microsoft technology. To run ASP.NET you need a computer capable of running Windows.

Windows 2000 or XP

If you are serious about developing ASP.NET applications you should install Windows 2000 Professional or Windows XP Professional.

In both cases, make sure you install the Internet Information Services (IIS) from the Add/Remove Windows components dialog.

Service Packs and Updates

Before ASP.NET can be installed on your computer, it is necessary to have all relevant service packs and security updates installed.

The easiest way to do this is to activate your Windows Internet Update. When you access the Windows Update page, you will be instructed to install the latest service packs and all critical security updates. For Windows 2000, make sure you install Service Pack 2. I will also recommend that you install Internet Explorer 6.

Read the note about connection speed and download time at the bottom of this page.

Remove Your Beta Version

If you have a Beta version of ASP.NET installed, we recommend that you completely uninstall it. Or even better: start with a fresh Windows 2000 or XP installation.

Install .NET

From your Windows Update you can now select to install the Microsoft .NET Framework.

After download, the .NET framework will install itself on your computer - there are no options to select for installation.

You should now be ready to develop your first ASP.NET application!

The .NET Software Development Kit

If you have the necessary bandwidth to download over 130 MB, you might consider downloading the full Microsoft .NET Software Development Kit (SDK).

We fully recommend getting the SDK for learning more about .NET and for the documentation, samples, and tools included.

Connection Speed and Download Time

If you have a slow Internet connection, you might have problems downloading large files like the service packs, the SDK and the latest version of Internet Explorer.

If download speed is a problem, our best suggestion is to get the latest files from someone else, from a colleague, from a friend, or from one of the CDs that comes with many popular computer magazines. Look for Windows 2000 Service Pack 2, Internet Explorer 6, and the Microsoft .NET Framework.


Browser Information

Browser information and statistics is important for website developers.

Table of Contents

What is the most common browser? What is the most common OS?

W3Schools' famous month-by-month statistics and trends.

Internet Explorer

Internet Explorer (IE) by Microsoft is the most common Internet browser today. IE was introduced in 1995 and passed Netscape in popularity in 1998.

Netscape

Netscape was the first commercial Internet browser. It was introduced in 1994. Netscape gradually lost its popularity to Internet Explorer.

The Mozilla Project has grown from the ashes of Netscape. Browsers based on Mozilla code is the second largest browser family on the Internet today, representing about 20% of the Internet community.

Firefox

Firefox is a new browser from Mozilla. It was released in 2004 and has grown to be the second most popular browser on the Internet.

Opera

Opera is a Norwegian Internet browser. It is known to be fast and small, standards-compliant, and available for many operating systems. Opera is the preferred browser for a number of small devices like mobile phones and hand-held computers.


Internet Explorer

Internet Explorer is the most commonly used Internet browser today.

Internet Explorer 7

Internet Explorer 7.0 was released in November 2006.

Internet Explorer 7 provides improved navigation through tabbed browsing, web search from the toolbar, advanced printing, easy discovery, reading and subscription to RSS feeds.

New features:

· Advanced printing (automatically scales a webpage for printing)
· Instant Search box
· Favorites Center
· RSS feeds (automatically detects RSS feeds)
· Tabbed browsing (view multiple sites in a single browser window)
· Quick Tabs
· Tab Groups
· Page zoom

See W3Schools' month by month statistics.

Internet Explorer 6

Internet Explorer 6.0 is the standard browser in Windows XP. It was released in August 2001.

Windows XP is built on Windows 2000 and is the successor to Windows 98, Millennium, and Windows 2000.

Internet Explorer 5

Internet Explorer 5 was the first major browser with XML support.

Version 5.5 (July 2000) for Windows 95, 98, NT 4.0, and Windows 2000. Support for XML/XSL, CSS, printing (print preview) and HTC behaviors.

Version 5.01 (November 1999) Primarily a bug fix for 5.0.

Version 5.0 (March 1999) The first major browser with XML support.

Older Internet Explorer Versions

The oldest versions of Internet Explorer are no longer in use by any majority of users. Web developers will ignore them. Their functionality is outdated.

Version 4.0 (released in 1997) is used by less than 1%. It has respectable CSS and DOM support, but no XML support.

Version 3.0 (released in 1996) is now used by less than 0.1%.

Version 2.0 (released in 1995). It is too old. Nobody uses it.

Version 1.0 (released in 1995). Does anyone remember it?

Internet Explorer for Macintosh

Version 5.1.7 is the latest version of Internet Explorer for Mac OS 8 and 9. It was released in July 2003.

Version 5.2.3 is the latest version of Internet Explorer for Mac OS X. It was released in June 2003.

Note: version 5.2.3 requires special features in Mac OS X. Mac OS 8 and 9 users must download and install version 5.1.7.

Microsoft Internet Explorer Downloads

Download Internet Explorer for free at: http://www.microsoft.com/windows/products/winfamily/ie/default.mspx.

Download the latest security updates and bug fixes at: http://www.microsoft.com/windows/downloads/ie/getitnow.mspx

Internet Explorer for Mac is no longer available for download!

In June 2003, the Microsoft Macintosh Business Unit announced that Internet Explorer for Mac would undergo no further development, and support would cease in 2005. Microsoft ended support for Internet Explorer for Mac on December 31st, 2005. Accordingly, as of January 31st, 2006, Internet Explorer for the Mac is no longer available for download from Microsoft. It is recommended that Macintosh users migrate to more recent web browsing technologies such as Apple's Safari.

Microsoft Internet Explorer Resources

Microsoft's Internet Explorer Web Site

Microsoft's Internet Explorer Support Site

Microsoft's searchable knowledgebase. Download Center. FAQ by product. Assisted support directory.


Firefox Browser

Firefox is a free open-source web browser developed by Mozilla.

What is Firefox?

Firefox is a free, open-source web browser for Windows, Linux and Mac. It is small and fast and offers many new features like popup blocking and tabbed browsing.

Firefox is based on the Mozilla code, and is one of the most standards-compliant browsers available.

Firefox is available for Windows 98, Windows 2000, Windows XP, Mac OS X, and Linux.

What is Mozilla?

Mozilla is an open-source web development project.

The Mozilla Application Suite (also known as SeaMonkey) is a complete set of web applications; a browser, a mail client, a news client, a chat client and more.

Firefox is just a browser. With Firefox you cannot chat or read emails or news. This makes it smaller, faster and easier to use (but makes chat, email and news harder to use?).

You can read about Mozilla in the previous chapter.

Firefox And Mozilla

Firefox was previously called Mozilla Firebird (which was previously called Phoenix, which was previously called Mozilla).

The confusing name changes have something to do with legal issues (I think). You can read more about the Mozilla name changes in the previous chapter.

It is expected that Firefox will be used as the default browser in a future version of the Mozilla Suite.

Firefox Features

Firefox has automatic Popup Blocking. This if fine for stopping annoying popup ads, but not so good for sites using popup windows in a good way.

Tabbed Browsing is a modern and time saving feature. It makes it possible to view many web pages in one browser window.

Google Search with auto complete is built into Firefox's tool bar.

Keywords for bookmarks with quick searches (e.g., type "goo xml tutorial" into the location bar and get a Google search page on "xml tutorial" in one step).

Dictionary Tooltip - double-click any word to see its definition.

Firefox has Improved Security. It is not integrated with the operating system and does not support ActiveX controls and VBScripts (features known to have security holes).

A built-in modern Download Manager downloads files in the background to the desktop.

Firefox has Customizable Toolbars, allowing users to add and remove items as well as create new toolbars.

With the Theme Manager, the users can change the look and feel of Firefox.

Firefox keeps itself up-to-date. Smart Update searches for updates in the background and informs the user about available updates.

Firefox Product Page


Mozilla Browser

The Mozilla Project

Mozilla is a framework for building web applications.

What is Mozilla?

Mozilla is not a web browser.

Mozilla is a framework for building web applications using web standards like CSS, XML, RDF.

Mozilla code is used in Netscape 6 and 7, and in other web browsers such as Firefox and Camino, chat clients, news clients, email clients, games, and other types of web applications for Windows, Linux, and Mac.

Mozilla is an open-source web development project developing the program code used in the Mozilla Application Suite (also known as SeaMonkey).

The Mozilla Application Suite is a complete set of web applications (browser, email client, news client, chat client and more).

Browsers based on Mozilla code (Mozilla, Firefox, & Camino) is the second largest browser family on the Internet today, representing about 30% of the Internet community. Mozilla browsers are known to have very good web standards support.

The Mozilla Project

The Mozilla Project was created to continue developing Netscape as an open source project.

In November 1998 AOL (America Online) purchased Netscape.

The development of the core engine for Netscape was moved to an open source project called "The Mozilla Project".

The project was renamed SeaMonkey after April 2006 with the Mozilla Foundations main intention of phasing out the Mozilla suite and shifting it's main focus to the Firefox/Thunderbird/SeaMonkey projects

The Mozilla Foundation

The Mozilla Foundation was created in July 2003 when AOL laid off the employees involved in the Mozilla open-source browser team.

Mozilla Foundation's Roadmap

The Mozilla project decided to make a new roadmap for the development. Some of the points in the new roadmap is listed below:

· Focus on standalone applications (the FireFox browser, the Thunderbird mail/news application, and standalone composer)
· Make Firefox and Thunderbird the premier products of Mozilla
· Maintain the SeaMonkey (current Mozilla browser) application suite for enterprises and organizations with large Mozilla deployments
· Maintain the Mozilla 1.4 branch as the "distributor/vendor" branch used by organizations with year-long lead times
· Fix crucial Gecko layout architecture bugs. All Mozilla applications benefit from such Gecko improvements
· Prefer quality over quantity. Do less, but better!

Products of Mozilla

· Mozilla - the application suite
· Firefox - a standalone browser
· Thunderbird - an email and newsgroup client
· Camino - a web browser for Mac
· Composer - a web page editor

Versions for Windows, Linux, and Mac can be downloaded from:

http://www.mozilla.org

Confusing Mozilla Names

The very first Netscape browser had a code engine called Mozilla. Netscape 1.0 was powered with a code engine called Mozilla 1.0. Netscape 2.0 used Mozilla 2.0, Netscape 3.0 used Mozilla 3.0, and Netscape 4.0 used Mozilla 4.0.

In 1998 the source code of Netscape 4 was made public - and the development of Netscape 5 was made an open source project.

The open source project for creating Netscape 5 was called "The Mozilla Project". Strangely enough, the code engine for the Mozilla Project was called Gecko.

Unfortunately it took Netscape more than three and a half years after the release of 4.0, to produce its next generation browser. This delay destroyed Netscape's possibilities to remain a credible alternative to Microsoft's Internet Explorer. Microsoft released IE 5.0 just after the Mozilla project had started, and was ready with IE 6.0 before Netscape managed to release a workable browser.

Netscape 6.0 based on Gecko M18 (Milestone 18) was released in November 2000.

After the release of Netscape 6.0, the Mozilla Project started to work on Netscape 7 based on an engine called Mozilla 1.0 !!.

Netscape 6 and 7 are built on Mozilla and Netscape and Mozilla are nearly an identical suite of applications.

The current version of Netscape 7 claims to have a code engine called Gecko 1.0 !!

At the moment the Mozilla Project is developing a new web browser called Firefox. Firefox was previously called Mozilla Firebird (which was previously called Phoenix, which claimed to be a new version of Mozilla).

Confused? I am.

The confusing name changes must have something to do with legal issues (I think).

Mozilla Releases

The Mozilla Foundation has released the following versions of Mozilla:

Mozilla 1.8 Alpha 5 November 22, 2004

Mozilla 1.8 Alpha 4 September 28, 2004

Mozilla 1.8 Alpha 3 August 18, 2004

Mozilla 1.8 Alpha 2 July 14, 2004

Mozilla 1.8 Alpha 1 May 20, 2004

Mozilla 1.7.3 September 13, 2004

Mozilla 1.7.2 August 4, 2004

Mozilla 1.7.1 July 8, 2004

Mozilla 1.7 June 17, 2004

Mozilla 1.7 RC3 June 8, 2004

Mozilla 1.7 RC2 May 17, 2004

Mozilla 1.7 RC1 April 21, 2004

Mozilla 1.7 Beta March 18, 2004

Mozilla 1.7 Alpha February 23, 2004

Mozilla 1.6 January 15, 2004

Mozilla 1.6 Beta December 9, 2003

Mozilla 1.6 Alpha October 31, 2003

Mozilla 1.5.1 November 26, 2003

Mozilla 1.5 October 15, 2003

Mozilla 1.5 RC2 September 26, 2003

Mozilla 1.5 RC1 September 17, 2003

Mozilla 1.5 Beta August 27, 2003

Mozilla 1.5 Alpha July 22, 2003

Mozilla 1.4.1 October 10, 2003

Mozilla 1.4 June 30, 2003

Source: http://www.mozilla.org/releases/


Netscape Browser

Netscape 8

Netscape 8.1.2 was released in September 2006.

Netscape 8 allows you to adjust the security level (Java, JavaScript, cookies settings), and also allows you to switch to use Internet Explorer's engine to render pages when necessary.

New features in Netscape 8:

· Site Controls (dual rendering engine)
· Multi-Bar (dynamic toolbar)
· Form fill/passcard
· Live Content
· Improved tabbed browsing
· Adware & Spyware protection
· Dynamic Security Center

Note: Netscape 8 does not contain an e-mail client. For users who want an e-mail client, try Mozilla Thunderbird, Mozilla Suite 1.7.x or SeaMonkey, or keep your Netscape 7.2 for email purpose.

Netscape 7

Netscape 7 is based on open source engine (Gecko) and fine-tune of Netscape 6.

Netscape 7 has been reported very stable and fast.

Netscape 6

Netscape 6 was released in November 2000. This version was the first Netscape browser with powerful support for CSS and XML.

Netscape 6 is based on open source engine (Gecko), while Netscape Communicator 4.8 uses the engine that originally released in late 1994.

The Netscape Problem

Netscape's 4.x series of browsers have a poor support for CSS and no support for XML.

It took Netscape nearly three and a half years after the release of 4.0, to produce its next generation browser. This delay has clearly hurt Netscape's possibilities to dominate the browser market. .

Our browser statistics are showing that Netscape is losing the browser war.

Older Netscape Versions

Netscape 8.0 - Released in May 2005.

Netscape 7.0 - Released in September 2002.

Netscape 6.0 - Released in November 2000 (based on Mozillas Gecko engine). You can read about Mozilla at www.mozilla.org. The status for the Mozilla project is found at http://www.mozilla.org/status.

Netscape 5.0 - Netscape skipped the version number 5.

Netscape Communicator 4.0 (released in 1997) The first Netscape browser with some support for CSS.

Netscape Navigator 3.0 (released in 1996). Too old. Don't use it.

Netscape Navigator 2.0 (released in 1996). Too old. Don't use it.

Netscape 1.0 (released in 1994). Too old. Don't use it.

Netscape Downloads

Download the latest Netscape browser for free at: http://browser.netscape.com

Netscape Online Resources

Netscape Devedge

Netscape's own developer site. It has Developers Membership, Documentation, Tutorials, Tools and Plug-Ins and Web development references.

Netscape's Devedge Tech central

This area contains information and resources related to Netscape protocols and development technologies as well as related developer tools, products, and software development kits (SDKs) with the following sub centrals: Strategy, CSS, DOM, Gecko, HTML, JavaScript, Plugins, Security, and XML.


Opera Browser

The Norwegian Opera

Latest Opera Releases

Opera 9 (for Windows, Mac, Linux, FreeBSD, and Solaris) - Released in June 2006.

Opera 8.5 (for Windows, Mac, and Linux) - Released in September 2005.

Opera 8 (for Windows) - Released in April 2005.

About Opera

Opera started out as a research project in Norway's telecom company, Telenor, in 1994, and branched out into an independent development company named Opera Software ASA in 1995.

Opera Software ASA develops the Opera Web browser and is an industry leader in the development of Web browsers for the desktop and device markets.

The Opera browser (known as "the third browser", after Internet Explorer and Netscape) has received international acclaim from end-users and the industry press for being faster, smaller and more standards-compliant than other browsers.

Is It Free?

Yes, the Opera browser is free! The earlier banner ads and the licensing fee are removed!!

Web Standard Compliant

When you make your Web site work in Opera, you can be certain that it is open and accessible. Simply write your pages in standards-compliant code, and your site will work in all major browsers and for all major platforms and operating systems.

Opera supports all major Web standards currently in use, including CSS 2.1, HTML 4.01, XHTML1.1, HTTP1.1, DOM 2, ECMAScript (JavaScript), PNG, WML 2.0, SVG 1.1 tiny, Unicode, and the Unicode Bidirectional Algorithm.

Opera Features

Opera has automatic Popup Blocking. This if fine for stopping annoying popup ads, but not so good for sites using popup windows in a good way.

Tabbed Browsing is a modern and time saving feature. It makes it possible to view many web pages in one browser window.

Transfers Panel is is Opera's download manager, with quick access to ongoing and recently finished downloads.

Opera's user interface is translated into multiple languages, and the language can be changed on the fly.

Opera has Customizable Toolbars, allowing the users to add and remove items as well as create new toolbars.

By choosing between different Skins, the users can change the look and feel of Opera.

Opera has direct access to Google's "related pages" feature, available from the "Navigation" menu.

Double clicking on a word on a page will pop up a menu that provides options related to the selected text, such as a Web, dictionary or encyclopedia search.

Opera provides Web authors with immediate access to Page Validation, thus encouraging good practices on the Web.

More about Opera

Opera Software ASA has been a privately held company - headquartered in Oslo, Norway - until they went public in March 2004.

More information and Opera downloads is available at: www.opera.com.


Browser Statistics

What is the trend in browser usage, operating systems and screen resolution?

Web Statistics and Trends

Statistics are important information. What you can read from the statistics below is that Internet Explorer 6 is the most common browser, XP is the most dominating operating system, and most users are using a display with 1024x768 pixels or more, with a color depth of at least 65K colors.

Browser Statistics Month by Month

2007 | IE7 | IE6 | IE5 | Fx | Moz | S | O
January | 13.3% | 42.3% | 3.0% | 31.0% | 1.5% | 1.7% | 1.5%
2006 | IE7 | IE6 | IE5 | Fx | Moz | N7/8 | O
December | 10.7% | 45.3% | 3.4% | 30.3% | 2.6% | 0.2% | 1.5%
November | 7.1% | 49.9% | 3.6% | 29.9% | 2.5% | 0.2% | 1.5%
October | 3.1% | 54.5% | 3.8% | 28.8% | 2.4% | 0.3% | 1.4%
September | 2.5% | 55.6% | 4.0% | 27.3% | 2.3% | 0.4% | 1.6%
August | 2.0% | 56.2% | 4.1% | 27.1% | 2.3% | 0.3% | 1.6%
July | 1.9% | 56.3% | 4.2% | 25.5% | 2.3% | 0.4% | 1.4%
June | 1.6% | 58.2% | 4.3% | 24.9% | 2.2% | 0.3% | 1.4%
May | 1.1% | 57.4% | 4.5% | 25.7% | 2.3% | 0.3% | 1.5%
April | 0.7% | 58.0% | 5.0% | 25.2% | 2.5% | 0.4% | 1.5%
March | 0.6% | 58.8% | 5.3% | 24.5% | 2.4% | 0.5% | 1.5%
February | 0.5% | 59.5% | 5.7% | 25.1% | 2.9% | 0.4% | 1.5%
January | 0.2% | 60.3% | 5.5% | 25.0% | 3.1% | 0.5% | 1.6%
2005 | IE6 | IE5 | Fx | Moz | N7 | O8 | O7
December | 61.5% | 6.5% | 24.0% | 2.7% | 0.4% | 1.3% | 0.2%
November | 62.7% | 6.2% | 23.6% | 2.8% | 0.4% | 1.3% | 0.2%
October | 67.5% | 6.0% | 19.6% | 2.6% | 0.4% | 1.2% | 0.2%
September | 69.8% | 5.7% | 18.0% | 2.5% | 0.4% | 1.0% | 0.2%
August | 68.4% | 6.3% | 18.9% | 2.4% | 0.4% | 0.8% | 0.3%
July | 67.9% | 5.9% | 19.8% | 2.6% | 0.5% | 0.8% | 0.4%
June | 65.0% | 6.8% | 20.7% | 2.9% | 0.6% | 0.7% | 0.5%
May | 64.8% | 6.8% | 21.0% | 3.1% | 0.7% | 0.7% | 0.6%
April | 63.5% | 7.9% | 20.9% | 3.1% | 0.9% | 0.4% | 1.0%
March | 63.6% | 8.9% | 18.9% | 3.3% | 1.0% | 0.3% | 1.6%
February | 63.9% | 9.5% | 17.9% | 3.3% | 1.0% |  | 1.7%
January | 64.8% | 9.7% | 16.6% | 3.4% | 1.1% |  | 1.9%
2004 | IE6 | IE5 | Moz | N3 | N7 | N4 | O7
December | 65.5% | 9.9% | 17.0% | 0.2% | 1.2% | 0.2% | 1.8%
November | 66.0% | 10.2% | 16.5% | 0.2% | 1.2% | 0.3% | 1.6%
October | 67.3% | 10.8% | 14.7% | 0.3% | 1.3% | 0.3% | 1.6%
September | 67.8% | 11.2% | 13.7% | 0.3% | 1.4% | 0.3% | 1.7%
August | 67.0% | 13.0% | 12.7% | 0.4% | 1.4% | 0.4% | 1.6%
July | 67.2% | 13.2% | 12.6% | 0.4% | 1.4% | 0.4% | 1.6%
June | 67.6% | 13.2% | 12.2% | 0.5% | 1.4% | 0.4% | 1.6%
May | 68.1% | 13.8% | 9.5% | 0.6% | 1.4% | 0.4% | 1.6%
April | 68.2% | 14.0% | 8.5% | 0.8% | 1.4% | 0.6% | 1.4%
March | 68.2% | 14.6% | 7.9% | 0.8% | 1.4% | 0.6% | 1.4%
February | 68.3% | 15.2% | 7.3% | 0.6% | 1.5% | 0.4% | 1.5%
January | 68.9% | 15.8% | 5.5% | 0.4% | 1.5% | 0.5% | 1.5%
2003 | IE6 | IE5 | Moz | N3 | N7 | N4 | O7
November | 71.2% | 13.7% | 7.2% | 0.5% | 1.6% | 0.5% | 1.9%
September | 69.7% | 16.9% | 6.2% | 0.6% | 1.5% | 0.6% | 1.8%
July | 66.9% | 20.3% | 5.7% | 0.6% | 1.5% | 0.6% | 1.7%
May | 65.0% | 22.7% | 4.6% | 1.0% | 1.4% | 0.9% | 1.4%
March | 63.4% | 24.6% | 4.2% | 0.9% | 1.4% | 1.1% | 1.2%
January | 55.3% | 29.3% | 4.0% | 1.2% | 1.1% | 1.7% |
2002 | IE6 | IE5 | AOL | N3 | N5 | N4 | IE4
November | 53.5% | 29.9% | 5.2% | 1.1% | 4.9% | 2.0% |
September | 49.1% | 34.4% | 4.5% | 1.3% | 4.5% | 2.2% |
July | 44.4% | 40.1% | 3.5% | 1.2% | 3.5% | 2.6% | 0.5%
May | 40.7% | 46.0% | 2.8% | 1.2% | 2.7% | 3.4% | 0.7%
March | 36.7% | 49.4% | 3.0% | 1.2% | 2.4% | 4.1% | 0.7%
January | 30.1% | 55.7% | 2.8% | 1.3% | 2.2% | 4.4% | 1.0%

IE | Internet Explorer
Fx | Firefox (identified as Mozilla before 2005)
Moz | The Mozilla Suite (Safari, Konqueror, Gecko, Netscape)
S | Safari (identified as Mozilla before 2007)
O | Opera
N | Netscape (identified as Mozilla after 2006)
AOL | America Online (based on both Internet Explorer and Mozilla)

Browsers that count for less than 0.5% are not listed.

W3Schools is a website for people with an interest for web technologies. These people are more interested in using alternative browsers than the average user. The average user tends to use Internet Explorer, since it comes preinstalled with Windows. Most do not seek out other browsers.

These facts indicate that the browser figures above are not 100% realistic. Other web sites have statistics showing that Internet Explorer is used by at least 80% of the users.

Anyway, our data, collected over a five year period, clearly shows the long and medium-term trends.

OS Platform Statistics

Windows XP is the most popular operating system. The windows family counts for nearly 90%:

2006 | WinXP | W2000 | Win98 | WinNT | W2003 | Linux | Mac
November | 74.9% | 8.0% | 1.0% | 0.4% | 1.8% | 3.3% | 3.5%
October | 74.6% | 8.9% | 1.2% | 0.3% | 2.0% | 3.5% | 3.6%
September | 74.6% | 9.2% | 1.4% | 0.3% | 2.0% | 3.5% | 3.8%
August | 74.4% | 10.1% | 1.4% | 0.3% | 2.1% | 3.5% | 3.6%
July | 74.3% | 10.1% | 1.5% | 0.3% | 2.0% | 3.4% | 3.6%
June | 74.1% | 10.6% | 1.6% | 0.3% | 2.0% | 3.4% | 3.6%
May | 74.2% | 10.7% | 1.6% | 0.2% | 2.0% | 3.4% | 3.6%
April | 74.0% | 11.2% | 1.8% | 0.3% | 1.9% | 3.3% | 3.6%
March | 72.9% | 11.9% | 2.0% | 0.3% | 1.8% | 3.4% | 3.5%
February | 73.3% | 12.3% | 2.1% | 0.3% | 1.8% | 3.4% | 3.6%
January | 72.3% | 13.1% | 2.4% | 0.3% | 1.7% | 3.3% | 3.5%
2005 | WinXP | W2000 | Win98 | WinNT | W2003 | Linux | Mac
December | 71.6% | 13.6% | 2.6% | 0.3% | 1.7% | 3.2% | 3.3%
November | 71.0% | 14.6% | 2.7% | 0.4% | 1.7% | 3.3% | 3.3%
October | 70.2% | 15.0% | 2.8% | 0.4% | 1.6% | 3.3% | 3.2%
September | 69.2% | 15.8% | 3.2% | 0.5% | 1.7% | 3.3% | 3.1%
August | 66.3% | 17.5% | 3.2% | 0.6% | 1.7% | 3.3% | 2.9%
July | 65.3% | 17.7% | 3.9% | 0.6% | 1.6% | 3.5% | 3.0%
June | 64.9% | 19.1% | 3.6% | 0.7% | 1.5% | 3.5% | 3.0%
May | 64.5% | 19.4% | 3.9% | 0.8% | 1.4% | 3.3% | 2.9%
April | 64.0% | 19.7% | 4.1% | 0.8% | 1.4% | 3.3% | 2.9%
March | 63.1% | 20.2% | 4.7% | 0.9% | 1.4% | 3.2% | 3.0%
February | 62.0% | 21.1% | 5.1% | 0.9% | 1.3% | 3.2% | 2.9%
January | 61.3% | 21.6% | 5.3% | 1.0% | 1.2% | 3.2% | 2.8%
2004 | WinXP | W2000 | Win98 | WinNT | Win95 | Linux | Mac
December | 59.8% | 23.5% | 5.4% | 1.1% | 0.1% | 3.1% | 2.7%
November | 59.1% | 23.7% | 5.6% | 1.2% | 0.1% | 3.1% | 2.7%
October | 57.8% | 25.0% | 6.0% | 1.3% | 0.2% | 3.1% | 2.6%
September | 55.9% | 26.2% | 6.4% | 1.5% | 0.2% | 3.1% | 2.6%
August | 53.2% | 28.1% | 7.0% | 1.8% | 0.2% | 3.0% | 2.5%
July | 52.5% | 28.4% | 7.5% | 1.9% | 0.2% | 3.1% | 2.4%
June | 51.2% | 29.6% | 8.0% | 2.0% | 0.3% | 2.9% | 2.5%
May | 51.0% | 29.6% | 8.2% | 2.0% | 0.3% | 2.9% | 2.5%
April | 49.7% | 30.2% | 8.7% | 2.2% | 0.3% | 2.7% | 2.5%
March | 48.0% | 31.1% | 9.4% | 2.4% | 0.4% | 2.6% | 2.4%
February | 46.0% | 32.8% | 9.5% | 2.9% | 0.4% | 2.6% | 2.5%
January | 44.1% | 33.6% | 10.4% | 3.0% | 0.4% | 2.7% | 2.4%
2003 | WinXP | W2000 | Win98 | WinNT | Win95 | Linux | Mac
December | 43.6% | 35.2% | 10.5% | 3.4% | 0.4% | 2.7% | 2.3%
November | 42.6% | 36.3% | 10.9% | 3.5% | 0.4% | 2.6% | 2.2%
October | 39.4% | 37.8% | 11.5% | 4.0% | 0.5% | 2.5% | 2.1%
September | 38.0% | 37.9% | 12.1% | 4.1% | 0.5% | 2.4% | 2.0%
August | 36.3% | 39.9% | 12.6% | 4.6% | 0.5% | 2.4% | 2.0%
July | 33.9% | 40.6% | 12.6% | 5.3% | 0.6% | 2.3% | 1.9%
June | 32.8% | 40.4% | 13.4% | 5.4% | 0.6% | 2.3% | 1.8%
May | 31.4% | 41.0% | 13.9% | 5.8% | 0.7% | 2.2% | 1.8%
April | 30.8% | 40.9% | 14.7% | 6.0% | 0.7% | 2.1% | 1.8%
March | 29.1% | 41.9% | 14.8% | 6.6% | 0.8% | 2.2% | 1.8%

Platforms that count for less than 0.5% are not listed.

Display Resolution

The current trend is that more and more computers are using a screen size of 1024x768 pixels or more:

2007 | Higher | 1024x768 | 800x600 | 640x480 | Unknown
January | 26% | 54% | 14% | 0% | 6%
2006 |  |  |  |  |
July | 19% | 58% | 17% | 0% | 6%
January | 17% | 57% | 20% | 0% | 6%
2005 |  |  |  |  |
July | 14% | 55% | 25% | 0% | 6%
January | 12% | 53% | 30% | 0% | 5%
2004 |  |  |  |  |
July | 10% | 50% | 35% | 1% | 4%
January | 10% | 47% | 37% | 1% | 5%
2003 |  |  |  |  |
July | 8% | 43% | 44% | 2% | 5%
January | 6% | 40% | 47% | 2% | 5%
2002 |  |  |  |  |
October | 6% | 38% | 49% | 2% | 5%

Web developers be aware: Many users still have only 800x600 display screens.

Color Depth

The current trend is that most computers use 24 or 32 bits hardware to display 16,777,216 different colors.

Older computers and laptops often use 16 bits display hardware. This gives a maximum of 65,536 different colors.

Handheld computers (and very old computers) often use 8 bits color hardware. This gives a maximum of 256 colors.

2007 | 16,777,216 | 65,536 | 256
January | 86% | 11% | 2%
2006 |  |  |
July | 85% | 13% | 2%
January | 81% | 16% | 3%
2005 |  |  |
July | 77% | 20% | 3%
January | 72% | 25% | 3%
2004 |  |  |
July | 69% | 28% | 3%
January | 65% | 31% | 4%
2003 |  |  |
July | 55% | 40% | 5%
January | 51% | 44% | 5%
2002 |  |  |
October | 49% | 46% | 5%

Read more about the display of colors

JavaScript Statistics

There are no absolute trends about the use of JavaScript. Some users have scripting turned off. Some browsers don't support scripting:

2007 | JavaScript On | JavaScript Off
January | 94% | 6%
2006 |  |
July | 92% | 8%
January | 90% | 10%
2005 |  |
July | 90% | 10%
January | 89% | 11%
2004 |  |
July | 90% | 10%
January | 92% | 8%
2003 |  |
July | 89% | 11%
January | 89% | 11%
2002 |  |
October | 88% | 12%

Statistics Are Often Misleading

You cannot - as a web developer - rely only on statistics. Statistics can often be misleading.

Global averages may not always be relevant to your web site. Different sites attract different audiences. Some web sites attract professional developers using professional hardware, while other sites attract hobbyists using old low spec computers.

Also be aware that many statistics may have an incomplete or faulty browser detection. It is quite common by many web-stats report programs, not to detect the newest browsers.

(The statistics above are extracted from W3Schools' log-files, but we are also monitoring other sources around the Internet to assure the quality of these figures).

Quotes

"The pure and simple truth is rarely pure and never simple."

Oscar Wilde

"First get your facts; then you can distort them at your leisure."

Mark Twain

"There are three kinds of lies: lies, damn lies, and statistics."

Benjamin Disraeli

"Then there was the man who drowned crossing a stream with an average depth of six inches."

W. I. E. Gates


Career CV

Your CV is your "advert" to sell yourself to an employer.

What is a CV?

· CV stands for "Curriculum Vitae"
· Curriculum vitae is Latin for "Life Story"
· A CV is also often called a "Resume"

What to Include in a CV

A CV should at least include the following:

· Your personal information
· Your work experience
· Your skills
· Your education
· Your personal profile and interests
· Your references

Your Personal Information

Personal information should include name, address, telephone, and email. I will suggest you put this information at the top of your CV and make it look like a letterhead:

John Webber

123 Internet Lane, 4311 North cap, Norway

Tel: 020 7650 555, Mobile: 055 778 8 991, email: jwebb@mywebcomp.no

Save other personal details for a later paragraph.

Your Work Experience

List what you have done - most recent work experience first.

Include a short job description and your responsibilities:

Work Experience

2001-

Programmer. Northcap IT.

Description

1998-2001

Accountant. Northcap Auto.

Description

Make sure your work experience is on the first page of your CV. This outlines your skills and selling points. Additional information should be added later.

Your Skills

Skills are best described with a list.

List your skills - most important and relevant first.

Skills

Responsibilities

PC Skills

Don't forget to include responsibilities. Responsibility is a very important skill.

Your Education

Education is best described with a list.

List what you have studied - most recent education first.

Education

1995-1998

Bachelor degree. Accounting. University of Northcap.

1992-1995

High school degree. Computing. College of Northcap.

Courses & Diplomas

2003

XML Diploma. W3Schools.

2001

Internet Programming Course.

Don't forget subject options, special project, courses, or diplomas.

Your References

List only a few names - like a teacher from your place of study, and a superior from a work situation - and make sure they can easily be reached and are willing to give you a good reference.

Your Personal Profile

Your personal profile should include additional information about your age, status, interests and other relevant information that can produce a positive picture of your character. I will suggest you put this in the last paragraph of your CV.

Personal Profile

My personal interests include fishing, sailing, and cycling. I am currently the secretary of the Northcap cycling club.

· age 32
· married, 2 children
· good health
· clean driver license for car and lorry

Employers will be interested in this paragraph because it reveals your character, but be careful. Don't overdo the description of your interest and don't describe interests that might distract your job. If you are coaching a football team, don't count the number of wins. Let them ask you about details in a later interview if they are interested.


Careers Resources

Career Resources

careerbuilder.com

- Information on education, career paths, and breaking into the IT world.

For Jobseekers

CareerBuilder features jobs from 75+ career sites, personalized job hunting tools, skills certification, and great articles.

For Employers

Post your jobs to CareerBuilder IT Careers to streamline your company's recruiting process and connect with skilled candidates quickly and easily.

computerjobs.com

www.computerjobs.com - Founded in 1995 by and for information technology professionals. The company provides its visitors with high quality computer-related job opportunities and career-related content organized into 18 vertical skill sets and 19 major metropolitan markets.

For Jobseekers

With a ComputerJobs.com account you can see the jobs that match your skills. If you think a job looks interesting - you can save it and store notes about it and make comparisons with other jobs. You can save your search criteria so you can come back and find the jobs you want with one click. You can also look at available jobs in different regions, or in different skills.

For Employers

At ComputerJobs.com, you'll find the qualified technical professionals you need, when you need them. ComputerJobs.com provides faster, more detailed and more affordable access to select technology professionals in your local market.

docinc.com

www.docinc.com - Dedicated Onsite Consulting (DOC) is committed to establishing long-term business relationships, recruiting highly qualified technical professionals and providing an invaluable business service to our clients.

For Jobseekers

Search for an IT job at DOC Inc. You can also post a resume.

For Employers

The Account Executives at DOC work closely with clients to establish what qualifications are needed to accomplish each company's business goals. This process helps the recruiting staff identify the most qualified candidates for the job.

itjobs.com

www.itjobs.com - ITJOBS is an important alternative to the many poorly organized "job match" websites that are out there on the Web.

For Jobseekers

ITJOBS was created to help you, quickly and efficiently, locate and access the many opportunities that now exist. ITJOBS is a user friendly tool to help you identify those jobs that you qualify for -- and, more importantly, that meet your own specifications/requirements.

For Employers

ITJOBS.com serves the needs of companies that demand the best selection of quality IT talent.


Career Planning Tips

Your 9 most important career planning tips

1. Never Stop Learning

Life-long learning is your keyword.

The world is constantly changing, and everybody is looking for new ways of doing business.

If you have decided that your current skills are good enough, you have also decided that your current job is good enough.

But if you want a career in the future, you should add regular updates to your skills and knowledge.

2. Ask, Listen And Learn

A good listener can learn a lot.

Listen to your co-workers, your boss, and your superiors. You can learn a lot from their experience.

Ask about issues that interest you, and listen to what they say. Let them tell you about how things work, and what you could have done better.

Most people will love to be your free tutor.

3. Fulfill Your Current Job

Your current job might be best place to start your career.

It is often very little that separates successful people from the average. But nothing comes free.

If you do your job well and fulfill your responsibilities, this is often the best way to start a new career.

Talk to your supervisor about things you can do. Suggest improvements. Offer your help when help is needed. In return ask for help to build a better career. It is often possible - right inside your own organization - especially if you have proved to be a valued employee.

4. Build Your Network

Your next career step might arise from your contact network.

Did you know that more than 50% of all jobs are obtained from contact networks?

If you have a good contact network, it is also a good place to discover future careers, to explore new trends, and to learn about new opportunities.

Spend some time building new contacts, and don't forget to maintain the ones you already have.

One of the best ways to get serious information from your network is to regularly ask your contacts how they are, what they do, and what is new about their careers.

5. Identify Your Current Job

Your current job should be identified, not assumed.

Make sure you don't work with tasks you assume are important. This is waste of time and talent.

When you start in a new job, talk to your superior about your priorities. If you're not sure about what is most important, then ask him. And ask him again. Often you will be surprised about the differences between what you assume, and what is really important.

6. Identify Your Next Job

Your dream job must be identified.

Before you start planning your future career, be sure you have identified your dream job.

In your dream job, you will be doing all the things you enjoy, and none of the things you don't enjoy. What kind of job would that be?

Do you like or dislike having responsibility for other employees. Do you like to work with technology or with people? Do you want to run your own business? Do you want to be an artist, a designer or a skilled engineer? A manager?

Before building your future career your goal must be identified.

7. Prepare Yourself

Your dream might show up tomorrow. Be prepared.

Don't wait a second. Update your CV now, and continue to update it regularly.

Tomorrow your dream job may show up right before your nose. Prepare for it with a professional CV and be ready to describe yourself as a valuable object to anyone that will try to recruit you.

If you don't know how to write a CV, or how to describe yourself, start learning it now.

8. Pick The Right Tools

Pick the tools you can handle.

You can build your future career using a lot of different tools. Studying at W3Schools is easy. Taking a full master degree is more complicated.

You can add a lot to your career by studying books and tutorials (like the one you find at W3Schools). Doing short time courses with certification tests might add valuable weight to your CV. And don't forget: Your current job is often the most valuable source of building new skills.

Don't pick a tool that is too heavy for you to handle!

9. Realize Your Dreams

Put your dreams into action.

Don't let a busy job kill your dreams. If you have higher goals, put them into action now.

If you have plans about taking more education, getting a better job, starting your own company or something else, you should not use your daily job as a "waiting station". Your daily job will get more and more busy, you will be caught up in the rat race, and you will burn up your energy.

If you have this energy, you should use it now, to realize your dreams.


Web Careers

Building a Web Career

Today, and more than ever, most people are responsible for building their own careers.

Whether you are just starting, or you have several years of experience, these paragraphs might help you advance your career.

Table of Contents

Career Planning Tips

This chapter provides you with 9 valuable career planning tips.

This chapter describes what a CV is, and how to write your own resume.

Career Resources

This chapter lists some important career resources.


ASP Certification

The ASP Certification requires skills in ASP, SQL and ADO.

The ASP Developer Certificate

ASP (Active Server Pages) is a Microsoft scripting technology that allows insertion of server executable scripts in web pages. ASP is a powerful tool for making dynamic and interactive Web pages.

SQL (Structured Query Language) is an ANSI (American National Standards Institute) standard for accessing 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.

ADO (ActiveX Data Objects) is a Microsoft technology that provides data access to any kind of data store.

By mastering these subjects you will be able to develop and maintain dynamic and interactive web pages and also retrieve and update data from a database over the internet.

The ASP Developer Certificate proves fundamental knowledge of web development using ASP, SQL, and ADO.

Prerequisites

Before you apply for your exam, you must have a fundamental knowledge of:

· Active Server Pages - ASP
· The Structured Query Language - SQL
· ActiveX Data Objects - ADO

Recommended Studies And Training

All questions in the exam are based on the content of W3Schools' ASP, SQL, and ADO tutorials. We strongly recommend the following tutorials and quizzes:

Tutorials | Quizzes
ASP Tutorial | ASP Quiz
SQL Tutorial | SQL Quiz
ADO Tutorial |

The ASP Exam

The ASP exam will be taken over the Internet, at any time and from any location, but the exam should be supervised by a person selected by the exam candidate.

The exam consists of 70 multiple choice or true/false questions. The exam is time-limited to 70 minutes.

Candidates must have 75% correct answers to pass the exam and become certified.

Candidates who have more than 95% correct answers will get an Excellency Degree notation added to their certificate.

Immediately after completing the exam, you will be informed of your score and of your pass/fail status. If you achieve certification status, W3Schools will ship you an ASP Developer Certificate. The document will contain your personal data acknowledging your status as a Certified ASP Developer.

If you have any questions regarding the exam, do not hesitate to send an email to:

The Supervisor

To add full creditability to your Certificate, you should have a supervisor to watch over you when taking the exam.

You must pick your own supervisor.

The supervisor should be used to see that you do not cheat. There are no other special criteria for the supervisor.

The supervisor's name and title will be printed on the certificate, so it could be wise to pick a supervisor that will add most creditability to your certificate (e.g. your boss or teacher).

When you receive the hardcopy of the Certificate, you should ask for a signature from your supervisor.

Registration And Payment

To register for an ASP exam, you must register with your email address.

When you register, an account will be activated within two working days, and you will receive an email with instructions about how to log in to your account.

You can log in to your account at any time, but you must take your exam within two months after you registered.

The price for the exam is $59 (U.S.) - payable with PayPal or a valid credit card at the time you register.

Your Email Address:

[TEditFormControlObj]

Pay By Check

If you don't want to register with PayPal, you can send a check to:

Refsnes Data AS

Ragnhildsvei 2

4311 Hommersak

NORWAY

The following additional information MUST be supplied with the check:

Email Address: (Your valid email address)

Exam Type: (ASP)

When we cash your check, an account will be activated, and you will receive an email with instructions about how to log in to your account.


HTML Certification

The HTML Certification

The HTML Certification requires skills in HTML, XHTML and CSS.

The HTML Developer Certificate

HTML is the foundation of web development.

HTML is used to format text, create hyperlinks, tables, lists, forms, display images and more. XHTML is the next generation of HTML. CSS is used to control the layout of web pages.

By mastering these subjects you will be able to develop and maintain web pages unlimited to a particular software program's features.

The HTML Developer Certificate proves fundamental knowledge of web development using HTML, XHTML, and CSS.

Prerequisites

Before you apply for your exam, you must have a fundamental knowledge of:

· The Hypertext Markup Language - HTML 4.01
· The Extensible Hypertext Markup Language - XHTML 1.0
· Cascading Style Sheets - CSS1 and CSS2

Recommended Studies And Training

All questions in the exam are based on the content of W3Schools' HTML, XHTML, and CSS tutorials. We strongly recommend the following tutorials and quizzes:

Tutorials | Quizzes
HTML Tutorial | HTML Quiz
XHTML Tutorial | XHTML Quiz
CSS Tutorial | CSS Quiz

The HTML Exam

The HTML exam will be taken over the Internet, at any time and from any location, but the exam should be supervised by a person selected by the exam candidate.

The exam consists of 70 multiple choice or true/false questions. The exam is time-limited to 70 minutes.

Candidates must have 75% correct answers to pass the exam and become certified.

Candidates who have more than 95% correct answers will get an Excellency Degree notation added to their certificate.

Immediately after completing the exam, you will be informed of your score and of your pass/fail status. If you achieve certification status, W3Schools will ship you an HTML Developer Certificate. The document will contain your personal data acknowledging your status as a Certified HTML Developer.

If you have any questions regarding the exam, do not hesitate to send an email to:

Your Supervisor

To add full creditability to your Certificate, you should have a supervisor to watch over you when taking the exam.

You must pick your own supervisor.

The supervisor should be used to see that you do not cheat. There are no other special criteria for the supervisor.

The supervisor's name and title will be printed on the certificate, so it could be wise to pick a supervisor that will add most creditability to your certificate (e.g. your boss or teacher).

When you receive the hardcopy of the Certificate, you should ask for a signature from your supervisor.

Registration And Payment

To register for an HTML exam, you must register with your email address.

When you register, an account will be activated within two working days, and you will receive an email with instructions about how to log in to your account.

You can log in to your account at any time, but you must take your exam within two months after you registered.

The price for the exam is $59 (U.S.) - payable with PayPal or a valid credit card at the time you register.

Your Email Address:

[TEditFormControlObj]

Pay By Check

If you don't want to register with PayPal, you can send a check to:

Refsnes Data AS

Ragnhildsvei 2

4311 Hommersak

NORWAY

The following additional information MUST be supplied with the check:

Email Address: (Your valid email address)

Exam Type: (HTML)

When we cash your check, an account will be activated, and you will receive an email with instructions about how to log in to your account.


W3Schools' Certifications

W3Schools' Online Certification Program

W3Schools' Online Certification Program.

The perfect solution for busy professionals who need to balance work, family, and career building.

More than 1000 certificates already issued!

Don't Let A Busy Schedule Ruin Your Career

· Study and train for your certificates at no cost
· Study and train for your certificates when it is convenient
· Study and train for your certificates from your own computer
· Complete your studies in a few weeks
· Take your exams over the Internet

Why Should You Become Certified?

Life-long learning are the keywords to your future success.

Do you want a career with a future? You should add regular updates to your skills and knowledge. Unless, you have already decided that your current skills and job are good enough for your future.

Knowledge is power, especially in the current job market. Documentation of your skills enables you to move upwards in your organization.

Getting a certificate proves your commitment to upgrade your skills, gives you the credibility needed for more responsibilities, larger projects, and a higher salary.

In addition, documented knowledge is often the key factor when hiring new personnel. Your certificate might advance your career or help you to start a new one.

Also have in mind that employees with certifications increase their company's chances of retaining old and getting new customers. You will do your company a favor getting certified. Expect your company to support you in this.

The HTML Developer Certificate

The HTML Developer Certificate is for developers who want to document their knowledge of HTML 4.01, XHTML, and CSS.

The was released in January 2003, and updated in February 2007.

The ASP Developer Certificate

The ASP Developer Certificate is for developers who want to document their knowledge of Active Server Pages, SQL, and ADO.

The ASP Developer Certificate was released in March 2003, and updated in February 2003.

How Does It Work?

You prepare for your exams by studying - free of charge - online at W3Schools.

You study at your own speed, at any time, from your own computer or any other location.

You test your skills - free of charge - with W3Schools online quizzes.

You apply for your exam online by paying a small exam fee.

You take your exam online, at any time, and from any location that is convenient for you.

Highly Recommended

W3Schools' tutorials are recommended reading at over one hundred universities and high schools all over the world.

Here are some examples:

Indiana University | Victoria University | Illinois State University
 | Lancaster University | Truman State University
University of Mary | University of Utah | Indiana
Denison University | Liberty University | Pennsylvania State University
University of Dundee | University of Leeds | University of North Carolina
Seattle University |  |
University | Tufts University | University of Memphis
Murdoch University | Hamline University | University of Pittsburgh
Idaho State University | University of Alabama |


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. Browser default
2. External style sheet
3. Internal style sheet (inside the <head> tag)
4. 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 Background Properties

CSS Background

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

Examples

This example demonstrates how to set the background color for an element.

This example demonstrates how to set an image as the background.

How to

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

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 | Description | Values | IE | F | N | W3C
background | A shorthand property for setting all background properties in one declaration | background-color background-image background-repeat background-attachment background-position | 4 | 1 | 6 | 1
background-attachment | Sets whether a background image is fixed or scrolls with the rest of the page | scroll fixed | 4 | 1 | 6 | 1
background-color | Sets the background color of an element | color-rgb color-hex color-name transparent | 4 | 1 | 4 | 1
background-image | Sets an image as the background | url(URL) none | 4 | 1 | 4 | 1
background-position | 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 | 4 | 1 | 6 | 1
background-repeat | Sets if/how a background image will be repeated | repeat repeat-x repeat-y no-repeat | 4 | 1 | 4 | 1


CSS background Property

The background property is a shorthand property for setting all background properties in one declaration.

Inherited: No

Example

body

{

background: #FF0000

}

body

{

background: url(stars.gif) no-repeat top

}

body

{

background: #00FF00 url(stars.gif) no-repeat fixed top

}

Possible Values

Value | Description
background-color background-image background-repeat background-attachment background-position | You can declare from one to five background properties in this declaration Default value: Not defined


CSS background-attachment Property

The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.

Inherited: No

Example

body

{

background-image: url(stars.gif);

background-attachment: fixed

}

Possible Values

Value | Description
scroll | Default. The background image moves when the rest of the page scrolls
fixed | The background image does not move when the rest of the page scrolls.


CSS background-color Property

The background-color property sets the background color of an element.

Inherited: No

Example

p

{

background-color: #00ff00

}

Possible Values

Value | Description
color | The color value can be a color name (red), a rgb value (rgb(255,0,0)), or a hex number (#ff0000)
transparent | Default. The background color is transparent


CSS background-image Property

The background-image property sets an image as the background.

Tip: Always set a background-color to be used if the image is unavailable.

Inherited: No

Example

body

{

background-image: url(stars.gif);

background-color: #000000

}

Possible Values

Value | Description
url(URL) | The path to an image
none | Default. No background image


CSS background-position Property

The background-position property sets the starting position of a background image.

Inherited: No

Example

body

{

background-image: url(stars.gif);

background-repeat: no-repeat;

background-position: top left

}

body

{

background-image: url(stars.gif);

background-repeat: no-repeat;

background-position: 0% 0%

}

Possible Values

Value | Description
top left top center top right center left center center center right bottom left bottom center bottom right | If you only specify one keyword, the second value will be "center". Default value: 0% 0%
x% y% | The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.
xpos ypos | The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions.


CSS background-repeat Property

The background-repeat property sets if/how a background image will be repeated.

Inherited: No

Example

body

{

background-image: url(stars.gif);

background-repeat: repeat-x

}

Possible Values

Value | Description
repeat | Default. The background image will be repeated vertically and horizontally
repeat-x | The background image will be repeated horizontally
repeat-y | The background image will be repeated vertically
no-repeat | The background-image will be displayed only once


CSS Border Properties

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.

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.

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.

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

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 | Description | Values | IE | F | N | W3C
border | A shorthand property for setting all of the properties for the four borders in one declaration | border-width border-style border-color | 4 | 1 | 4 | 1
border-bottom | A shorthand property for setting all of the properties for the bottom border in one declaration | border-bottom-width border-style border-color | 4 | 1 | 6 | 1
border-bottom-color | Sets the color of the bottom border | border-color | 4 | 1 | 6 | 2
border-bottom-style | Sets the style of the bottom border | border-style | 4 | 1 | 6 | 2
border-bottom-width | Sets the width of the bottom border | thin medium thick length | 4 | 1 | 4 | 1
border-color | Sets the color of the four borders, can have from one to four colors | color | 4 | 1 | 6 | 1
border-left | A shorthand property for setting all of the properties for the left border in one declaration | border-left-width border-style border-color | 4 | 1 | 6 | 1
border-left-color | Sets the color of the left border | border-color | 4 | 1 | 6 | 2
border-left-style | Sets the style of the left border | border-style | 4 | 1 | 6 | 2
border-left-width | Sets the width of the left border | thin medium thick length | 4 | 1 | 4 | 1
border-right | A shorthand property for setting all of the properties for the right border in one declaration | border-right-width border-style border-color | 4 | 1 | 6 | 1
border-right-color | Sets the color of the right border | border-color | 4 | 1 | 6 | 2
border-right-style | Sets the style of the right border | border-style | 4 | 1 | 6 | 2
border-right-width | Sets the width of the right border | thin medium thick length | 4 | 1 | 4 | 1
 | Sets the style of the four borders, can have from one to four styles | none hidden dotted dashed solid double groove ridge inset outset | 4 | 1 | 6 | 1
 | A shorthand property for setting all of the properties for the top border in one declaration | border-top-width border-style border-color | 4 | 1 | 6 | 1
border-top-color | Sets the color of the top border | border-color | 4 | 1 | 6 | 2
 | Sets the style of the top border | border-style | 4 | 1 | 6 | 2
border-top-width | Sets the width of the top border | thin medium thick length | 4 | 1 | 4 | 1
border-width | A shorthand property for setting the width of the four borders in one declaration, can have from one to four values | thin medium thick length | 4 | 1 | 4 | 1


CSS border Property

The border property is a shorthand property for setting all of the properties for the four borders in one declaration.

Note: This property can not set a different value for each side of the border, like "margin" and "padding".

Inherited: No

Example

p

{

border: thin dotted #00FF00

}

span

{

border: solid #0000FF

}

Possible Values

Value | Description
border-width border-style border-color | Sets the properties for the four borders


CSS border-bottom Property

The border-bottom property is a shorthand property for setting all the properties for the bottom border in one declaration.

Inherited: No

Example

table

{

border-bottom: thin dotted #00FF00

}

span

{

border-bottom: solid #0000FF

}

Possible Values

Value | Description
border-bottom-width border-style border-color | Sets the properties for the bottom border


CSS border-bottom-color Property

The border-bottom-color sets the color of an element's bottom border.

Inherited: No

Example

table

{

border-bottom-color: #ff3366

}

table

{

border-bottom-color: rgb(255,0,0)

}

Possible Values

Value | Description
color | The color value can be a color name (red), a rgb value (rgb(255,0,0)), or a hex number (#FF0000)


CSS border-bottom-style Property

The border-bottom-style sets the style of an element's bottom border.

Inherited: No

Example

table

{

border-bottom-style: solid

}

Possible Values

Value | Description
none | Defines no border
hidden | The same as "none", except in border conflict resolution for table elements
dotted | Defines a dotted border. Renders as solid in most browsers
dashed | Defines a dashed border. Renders as solid in most browsers
solid | Defines a solid border
double | Defines two borders. The width of the two borders are the same as the border-width value
groove | Defines a 3D grooved border. The effect depends on the border-color value
ridge | Defines a 3D ridged border. The effect depends on the border-color value
inset | Defines a 3D inset border. The effect depends on the border-color value
outset | Defines a 3D outset border. The effect depends on the border-color value


CSS border-bottom-width Property

The border-bottom-width sets the width of an element's bottom border.

Inherited: No

Example

table

{

border-bottom-width: thin

}

table

{

border-bottom-width: 0.5px

}

Possible Values

Value | Description
thin | Defines a thin bottom border
medium | Default. Defines a medium bottom border
thick | Defines a thick bottom border
length | Allows you to define the thickness of the bottom border


CSS border-collapse Property

The border-collapse property sets the border model of a table.

Inherited: Yes

Example

table

{

border-collapse: separate

}

Possible Values

Value | Description
separate | Selects the separated borders model
collapse | Default. Selects the collapsing borders model


CSS border-color Property

The border-color property sets the color of the four borders. This property can take one to four colors.

Note: Always declare the border-style property before the border-color property. An element must have borders before you change the color of them.

Inherited: No

Example

table {border-color: red}

all four borders will be red

table {border-color: red green}

top and bottom border will be red, left and right border will be green

table {border-color: red green blue}

top border will be red, left and right border will be green, bottom border will be blue

table {border-color: red green blue yellow}

top border will be red, right border will be green, bottom border will be blue, left border will be yellow

Possible Values

Value | Description
color | The color value can be a color name (red), a rgb value (rgb(255,0,0)), or a hex number (#FF0000).
transparent | The border is transparent


CSS border-left Property

The border-left property is a shorthand property for setting all of the properties for the left border in one declaration.

Inherited: No

Example

table

{

border-left: thin dotted #00FF00

}

table

{

border-left: thick #0000FF

}

Possible Values

Value | Description
border-left-width border-style border-color | Sets the properties for the left border


CSS border-left-color Property

The border-left-color property sets the color of an element's left border.

Inherited: No

Example

table

{

border-left-color: #ff3366

}

table

{

border-left-color: rgb(255,0,0)

}

Possible Values

Value | Description
color | The color value can be a color name (red), a rgb value (rgb(255,0,0)), or a hex number (#FF0000)


CSS border-left-style Property

The border-left-style property sets the style of an element's left border.

Inherited: No

Example

table

{

border-left-style: solid

}

Possible Values

Value | Description
none | Defines no border
hidden | The same as "none", except in border conflict resolution for table elements
dotted | Defines a dotted border. Renders as solid in most browsers
dashed | Defines a dashed border. Renders as solid in most browsers
solid | Defines a solid border
double | Defines two borders. The width of the two borders are the same as the border-width value
groove | Defines a 3D grooved border. The effect depends on the border-color value
ridge | Defines a 3D ridged border. The effect depends on the border-color value
inset | Defines a 3D inset border. The effect depends on the border-color value
outset | Defines a 3D outset border. The effect depends on the border-color value


CSS border-left-width Property

The border-left-width property sets the width of an element's left border.

Inherited: No

Example

table

{

border-left-width: thin

}

table

{

border-left-width: 0.5cm

}

Possible Values

Value | Description
thin | Defines a thin left border.
medium | Default. Defines a medium left border.
thick | Defines a thick left border.
length | Allows you to define the thickness of the left border.


CSS border-right Property

The border-right property is a shorthand property for setting the border-right-width and/or the border-style and/or the border-color in one declaration.

Inherited: No

Example

table

{

border-right: thin dotted #00FF00

}

table

{

border-right: thick #0000FF

}

Possible Values

Value | Description
border-right-width border-style border-color | Sets the properties for the right border


CSS border-right-color Property

The border-right-color property sets the color of an element's right border.

Inherited: No

Example

table

{

border-right-color: #ff3366

}

table

{

border-right-color: rgb(255,0,0)

}

Possible Values

Value | Description
color | The color value can be a color name (red), a rgb value (rgb(255,0,0)), or a hex number (#FF0000)


CSS border-right-style Property

The border-right-style property sets the style of an element's right border.

Inherited: No

Example

table

{

border-right-style: solid

}

Possible Values

Value | Description
none | Defines no border
hidden | The same as "none", except in border conflict resolution for table elements
dotted | Defines a dotted border. Renders as solid in most browsers
dashed | Defines a dashed border. Renders as solid in most browsers
solid | Defines a solid border
double | Defines two borders. The width of the two borders are the same as the border-width value
groove | Defines a 3D grooved border. The effect depends on the border-color value
ridge | Defines a 3D ridged border. The effect depends on the border-color value
inset | Defines a 3D inset border. The effect depends on the border-color value
outset | Defines a 3D outset border. The effect depends on the border-color value


CSS border-right-width Property

The border-right-width property sets the width of an element's right border.

Inherited: No

Example

table

{

border-right-width: thin

}

table

{

border-right-width: 0.5cm

}

Possible Values

Values | Description
thin | Defines a thin right border.
medium | Default. Defines a medium right border.
thick | Defines a thick right border.
length | Allows you to define the thickness of the right border.


CSS border-style Property

The border-style property sets the style of the four borders, can have from one to four styles.

Inherited: No

Example

table {border-style: dotted}

all four borders will be dotted

table {border-style: dotted dashed}

top and bottom border will be dotted, left an right border will be dashed

table {border-style: dotted dashed solid}

top border will be dotted, left and right border will be dashed, bottom border will be solid

table {border-style: dotted dashed solid double}

top border will be dotted, right border will be dashed, bottom border will be solid, left border will be double

Possible Values

Value | Description
none | Defines no border
hidden | The same as "none", except in border conflict resolution for table elements
dotted | Defines a dotted border
dashed | Defines a dashed border
solid | Defines a solid border
double | Defines two borders. The width of the two borders are the same as the border-width value
groove | Defines a 3D grooved border. The effect depends on the border-color value
ridge | Defines a 3D ridged border. The effect depends on the border-color value
inset | Defines a 3D inset border. The effect depends on the border-color value
outset | Defines a 3D outset border. The effect depends on the border-color value


CSS border-top Property

The border-top property is a shorthand property for setting all of the properties for the top border in one declaration.

Inherited: No

Example

table

{

border-top: thin dotted #00FF00

}

table

{

border-top: solid #0000FF

}

Possible Values

Value | Description
border-top-width border-style border-color | Sets the properties for the top border


CSS border-top-color Property

The border-top-color property sets the color of an element's top border.

Inherited: No

Example

table

{

border-top-color: #ff3366

}

table

{

border-top-color: rgb(255,0,0)

}

Possible Values

Values | Description
color | The color value can be a color name (red), a rgb value (rgb(255,0,0)), or a hex number (#FF0000)


CSS border-top-style Property

The border-top-style property sets the style of an element's top border.

Inherited: No

Example

table

{

border-top-style: solid

}

Possible Values

Value | Description
none | Defines no border
hidden | The same as "none", except in border conflict resolution for table elements
dotted | Defines a dotted border. Renders as solid in most browsers
dashed | Defines a dashed border. Renders as solid in most browsers
solid | Defines a solid border
double | Defines two borders. The width of the two borders are the same as the border-width value
groove | Defines a 3D grooved border. The effect depends on the border-color value
ridge | Defines a 3D ridged border. The effect depends on the border-color value
inset | Defines a 3D inset border. The effect depends on the border-color value
outset | Defines a 3D outset border. The effect depends on the border-color value


CSS border-top-width Property

The border-top-width property sets the width of an element's top border.

Inherited: No

Example

table

{

border-top-width: thin

}

table

{

border-top-width: 0.5cm

}

Possible Values

Value | Description
thin | Defines a thin top border.
medium | Default. Defines a medium top border.
thick | Defines a thick top border.
length | Allows you to define the thickness of the top border.


CSS border-width Property

The border-width property is a shorthand property for setting the width of the four borders in one declaration, can have from one to four values.

Inherited: No

Example

table {border-width: thin}

all four borders will be thin

table {border-width: thin medium}

top and bottom border will be thin, left and right border will be medium

table {border-width: thin medium thick}

top border will be thin, left and right border will be medium, bottom border will be thick

table {border-width: thin medium thick none}

top border will be thin, right border will be medium, bottom border will be thick, left side will have no border

Possible Values

Value | Description
thin | Defines a thin border.
medium | Default. Defines a medium border.
thick | Defines a thick border.
length | Allows you to define the thickness of the borders.


CSS bottom Property

The bottom property specifies the bottom edge of an element.

Note: If the "position" property has a value of "static", the "bottom" property has no effect.

Inherited: No

Example

This example sets the bottom edge of the paragraph to 20 px above the bottom edge of the window:

p

{

position: absolute;

bottom: 20px

}

This example sets the bottom edge of the paragraph to 20 px below the bottom edge of the window:

p

{

position: absolute;

bottom: -20px

}

Possible Values

Value | Description
auto | Default. Lets the browser calculate the bottom position
% | Sets the bottom position in % from the bottom edge of the window
length | Sets the bottom position in px, cm, etc. from the bottom edge of the window. Negative values are allowed


CSS Classification Properties

CSS Classification

The CSS classification properties allow you to specify how and where to display an element.

Examples

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 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 | Description | Values | IE | F | N | W3C
clear | Sets the sides of an element where other floating elements are not allowed | left right both none | 4 | 1 | 4 | 1
cursor | Specifies the type of cursor to be displayed | 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 | 4 | 1 | 6 | 2
display | Sets how/if an element is displayed | 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 | 4 | 1 | 4 | 1
float | Sets where an image or a text will appear in another element | left right none | 4 | 1 | 4 | 1
position | Places an element in a static, relative, absolute or fixed position | static relative absolute fixed | 4 | 1 | 4 | 2
visibility | Sets if an element should be visible or invisible | visible hidden collapse | 4 | 1 | 6 | 2


CSS clear Property

Image and text elements that appear in another element are called floating elements. The clear property sets the sides of an element where other floating elements are not allowed.

Note: This property does not always work as expected if it is used along with the "float" property.

Inherited: No

Example

h2

{

clear: right

}

address

{

clear: both

}

Possible Values

Value | Description
left | No floating elements allowed on the left side
right | No floating elements allowed on the right side
both | No floating elements allowed on either the left or the right side
none | Default. Allows floating elements on both sides


CSS clip Property

The clip property sets the shape of an element.

What happens if an image is larger than the element it goes inside? - The "clip" property lets you specify the dimensions of an element that should be visible, and the element is clipped into this shape, and displayed.

Note: This property can not be used for elements with an "overflow" property set to "visible".

Inherited: No

Example

img

{

clip: rect(10px, 5px, 10px, 5px)

}

Possible Values

Value | Description
shape | Sets the shape of the element. The valid shape value is: rect (top, right, bottom, left)
auto | Default. The browser sets the shape of the element


CSS Code

This is the style sheet file (ex1.css):

body {background-color: yellow} h1 {font-size: 36pt} h2 {color: blue} p {margin-left: 50px}

The result is in the frame below:


CSS Code

This is the style sheet file (ex2.css):

body {background-color: tan} h1 {color:maroon; font-size:20pt} hr {color:navy} p {font-size:11pt; margin-left: 15px} a:link {color:green} a:visited {color:yellow} a:hover {color:black} a:active {color:blue}

The result is in the frame below:


CSS Color Names

CSS Color Names

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 | Color HEX | Color
AliceBlue | #F0F8FF |
AntiqueWhite |  |
Aqua | #00FFFF |
Aquamarine | #7FFFD4 |
Azure | #F0FFFF |
Beige | #F5F5DC |
 | #FFE4C4 |
Black | #000000 |
BlanchedAlmond | #FFEBCD |
Blue | #0000FF |
BlueViolet | #8A2BE2 |
Brown | #A52A2A |
BurlyWood | #DEB887 |
 | #5F9EA0 |
Chartreuse | #7FFF00 |
Chocolate | #D2691E |
Coral | #FF7F50 |
CornflowerBlue |  |
Crimson | #DC143C |
Cyan | #00FFFF |
DarkBlue | #00008B |
DarkCyan |  |
DarkGoldenRod | #B8860B |
 | #A9A9A9 |
DarkGrey | #A9A9A9 |
DarkGreen | #006400 |
DarkKhaki | #BDB76B |
DarkMagenta |  |
DarkOliveGreen | #556B2F |
 | #FF8C00 |
DarkOrchid | #9932CC |
DarkRed | #8B0000 |
DarkSalmon |  |
DarkSeaGreen | #8FBC8F |
 | #483D8B |
DarkSlateGray | #2F4F4F |
DarkSlateGrey | #2F4F4F |
DarkTurquoise |  |
DarkViolet | #9400D3 |
DeepPink | #FF1493 |
DeepSkyBlue |  |
 | #696969 |
DimGrey | #696969 |
DodgerBlue | #1E90FF |
 | #B22222 |
FloralWhite | #FFFAF0 |
 | #FF00FF |
GhostWhite | #F8F8FF |
Gold | #FFD700 |
 | #DAA520 |
 | #808080 |
 | #808080 |
Green | #008000 |
GreenYellow |  |
HoneyDew | #F0FFF0 |
HotPink | #FF69B4 |
IndianRed | #CD5C5C |
Indigo | #4B0082 |
Ivory | #FFFFF0 |
Khaki | #F0E68C |
LavenderBlush |  |
LawnGreen | #7CFC00 |
LemonChiffon | #FFFACD |
LightBlue |  |
LightCoral | #F08080 |
LightCyan | #E0FFFF |
LightGoldenRodYellow |  |
 | #D3D3D3 |
LightGrey |  |
LightGreen |  |
LightPink | #FFB6C1 |
LightSalmon |  |
LightSeaGreen | #20B2AA |
LightSkyBlue |  |
LightSlateGray | #778899 |
LightSlateGrey | #778899 |
LightSteelBlue |  |
LightYellow | #FFFFE0 |
Lime |  |
LimeGreen |  |
Linen | #FAF0E6 |
Magenta | #FF00FF |
Maroon | #800000 |
MediumAquaMarine |  |
MediumBlue | #0000CD |
MediumPurple |  |
MediumSeaGreen | #3CB371 |
 | #7B68EE |
MediumSpringGreen | #00FA9A |
MidnightBlue |  |
MintCream | #F5FFFA |
MistyRose | #FFE4E1 |
Moccasin | #FFE4B5 |
 | #FFDEAD |
Navy | #000080 |
OldLace |  |
Olive | #808000 |
OliveDrab |  |
Orange |  |
OrangeRed |  |
Orchid |  |
PaleGoldenRod | #EEE8AA |
 | #98FB98 |
PaleTurquoise | #AFEEEE |
PaleVioletRed |  |
PapayaWhip | #FFEFD5 |
PeachPuff | #FFDAB9 |
Peru |  |
Pink | #FFC0CB |
Plum | #DDA0DD |
Purple | #800080 |
RosyBrown |  |
RoyalBlue |  |
SaddleBrown | #8B4513 |
Salmon | #FA8072 |
SandyBrown | #F4A460 |
SeaGreen | #2E8B57 |
SeaShell |  |
Sienna | #A0522D |
 | #C0C0C0 |
SkyBlue | #87CEEB |
 | #6A5ACD |
 | #708090 |
SlateGrey | #708090 |
Snow | #FFFAFA |
 | #00FF7F |
SteelBlue | #4682B4 |
Tan | #D2B48C |
Teal | #008080 |
Thistle | #D8BFD8 |
 | #FF6347 |
Turquoise | #40E0D0 |
Violet | #EE82EE |
Wheat | #F5DEB3 |
White | #FFFFFF |
Yellow | #FFFF00 |
YellowGreen | #9ACD32 |


CSS color Property

The color property sets the color of a text.

Inherited: Yes

Examples

body

{

color: rgb(255,255,0)

}

Possible Values

Value | Description
color | The color value can be a color name (red), a rgb value (rgb(255,0,0)), or a hex number (#ff0000). Default value: Browser dependent


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 | rgb(0,0,0)
#080000 | rgb(8,0,0)
#100000 | rgb(16,0,0)
#180000 |
#200000 | rgb(32,0,0)
#280000 | rgb(40,0,0)
#300000 | rgb(48,0,0)
#380000 | rgb(56,0,0)
 | rgb(64,0,0)
#480000 |
#500000 | rgb(80,0,0)
#580000 | rgb(88,0,0)
#600000 | rgb(96,0,0)
#680000 | rgb(104,0,0)
#700000 |
#780000 | rgb(120,0,0)
#800000 | rgb(128,0,0)
 | rgb(136,0,0)
#900000 | rgb(144,0,0)
#980000 |
#A00000 |
#A80000 | rgb(168,0,0)
#B80000 | rgb(184,0,0)
#C00000 |
#C80000 | rgb(200,0,0)
#D00000 | rgb(208,0,0)
#D80000 | rgb(216,0,0)
#E00000 | rgb(224,0,0)
#E80000 | rgb(232,0,0)
#F00000 | rgb(240,0,0)
#F80000 | 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) | #000000
RGB(8,8,8) | #080808
RGB(16,16,16) | #101010
RGB(24,24,24) | #181818
RGB(32,32,32) | #202020
RGB(40,40,40) | #282828
RGB(48,48,48) | #303030
RGB(56,56,56) | #383838
RGB(64,64,64) | #404040
RGB(72,72,72) | #484848
RGB(80,80,80) | #505050
RGB(88,88,88) | #585858
RGB(96,96,96) | #606060
RGB(104,104,104) | #686868
RGB(112,112,112) | #707070
RGB(120,120,120) | #787878
RGB(128,128,128) | #808080
RGB(136,136,136) | #888888
RGB(144,144,144) | #909090
RGB(152,152,152) | #989898
RGB(160,160,160) | #A0A0A0
RGB(168,168,168) | #A8A8A8
RGB(176,176,176) | #B0B0B0
RGB(184,184,184) | #B8B8B8
RGB(192,192,192) | #C0C0C0
RGB(200,200,200) | #C8C8C8
RGB(208,208,208) | #D0D0D0
RGB(216,216,216) | #D8D8D8
RGB(224,224,224) | #E0E0E0
RGB(232,232,232) | #E8E8E8
RGB(240,240,240) | #F0F0F0
RGB(248,248,248) | #F8F8F8
RGB(255,255,255) | #FFFFFF


CSS Colors

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

Color Values

CSS colors can be defined as 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) and the highest value is 255 (hex #FF).

The table below shows the result of combining Red, Green, and Blue light sources:.

Color | Color HEX | Color RGB
 | #000000 | rgb(0,0,0)
 | #FF0000 | rgb(255,0,0)
 | #00FF00 | rgb(0,255,0)
 | #0000FF | rgb(0,0,255)
 | #FFFF00 | rgb(255,255,0)
 | #00FFFF | rgb(0,255,255)
 | #FF00FF | rgb(255,0,255)
 | #C0C0C0 | rgb(192,192,192)
 | #FFFFFF | rgb(255,255,255)

W3C Standard Color Names

W3C has listed 16 color names that will validate with a CSS validator.

The color names are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Cross-browser Color Names

A collection of nearly 150 color names are supported by all major browsers.

View the cross-browser color names

Cross-browser Color Values

Some years ago, when most computers only supported 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.

The 216 cross-browser 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 | 003333 | 003366 | 003399 | 0033CC | 0033FF
006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF
009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF
00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF
00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF
330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF
333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF
336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF
339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF
33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF
33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF
660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF
663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF
666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF
669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF
66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF
66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF
990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF
993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF
996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF
999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF
99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF
99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF
CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF
CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF
CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF
CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF
CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF
CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF
FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF
FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF
FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF
FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF
FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF
FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF


CSS content Property

The content property is used with the :before and :after pseudo-elements to generate content to attach before or after a CSS selector.

Inherited: No

Example

p:before

{

content: url("beep.wav")

}

img:before

{

content: attr(alt)

}

Possible Values

Value | Description
string | Defines text content. Default value is ""
url | Defines a url
counter(name) counter(name, list-style-type) counters(name, string) counters(name, string, list-style-type) |
attr(X) | Defines an attribute of a selector to be displayed before/after the selector
open-quote |
close-quote |
no-open-quote |
no-close-quote |


CSS counter-increment Property

The counter-increment property sets how much the counter increments on each occurrence of a selector. Default increment is 1.

Note: If "display: none" is used you should not be able to increment the counter. If "visibility: hidden" is used you should be able to increment the counter.

Inherited: No

Example

A way to number sections with "Section 1", "Section 2", "Section 3"etc.:

h1:before

{

content: "Section " counter(section) " ";

/* Add 1 to section */

counter-increment: section;

}

A way to number sections with "Section 1", "Section 3", "Section 5" etc.:

h1:before

{

content: "Section " counter(section) " ";

/* Add 2 to section */

counter-increment: section 2;

}

Possible Values

Value | Description
none | Default. No increment of the counter in the selector
identifier number | The identifier defines a selector, id, or class that should increment. The number defines how much to increment. number can be a positive number,zero, or a negative number


CSS counter-reset Property

The counter-reset property sets the value the counter is set to on each occurrence of a selector. Default is 0.

Note: If "display: none" is used you should not be able to reset the counter. If "visibility: hidden" is used you should be able to reset the counter.

Inherited: No

Example

A way to number sections and sub-sections with "Section 1", "1.1", "1.2", etc.

h1:before

{

content: "Section " counter(section) ". ";

/* Add 1 to section */

counter-increment: section;

/* Set sub-section to 0 */

counter-reset: sub-section;

}

h2:before

{

content: counter(section) "." counter(sub-section) " ";

counter-increment: sub-section;

}

Possible Values

Value | Description
none | Default. No reset of the counter in the selector
identifier number | The identifier defines a selector, id, or class that should reset the counter. The number sets the value the counter is set to on each occurrence of the selector. number can be a positive number,zero, or a negative number


CSS cursor Property

The cursor property specifies the type of cursor to be displayed when pointing on an element.

Inherited: Yes

Example

h2

{

cursor: crosshair

}

p

{

cursor : url("first.cur"), url("second.cur"), pointer

}

Possible Values

Value | Description
url | The url of a custom cursor to be used. Note: Always define a generic cursor at the end of the list in case none of the url-defined cursors can be used
default | The default cursor (often an arrow)
auto | Default. The browser sets a cursor
crosshair | The cursor render as a crosshair
pointer | The cursor render as a pointer (a hand) that indicates a link
move | The cursor indicates something that should be moved
e-resize | The cursor indicates that an edge of a box is to be moved right (east)
ne-resize | The cursor indicates that an edge of a box is to be moved up and right (north/east)
nw-resize | The cursor indicates that an edge of a box is to be moved up and left (north/west)
n-resize | The cursor indicates that an edge of a box is to be moved up (north)
se-resize | The cursor indicates that an edge of a box is to be moved down and right (south/east)
sw-resize | The cursor indicates that an edge of a box is to be moved down and left (south/west)
s-resize | The cursor indicates that an edge of a box is to be moved down (south)
w-resize | The cursor indicates that an edge of a box is to be moved left (west)
text | The cursor indicates text
wait | The cursor indicates that the program is busy (often a watch or an hourglass)
help | The cursor indicates that help is available (often a question mark or a balloon)


CSS Dimension Properties

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 | Description | Values | IE | F | N | W3C
height | Sets the height of an element | auto length % | 4 | 1 | 6 | 1
line-height | Sets the distance between lines | normal number length % | 4 | 1 | 4 | 1
max-height | Sets the maximum height of an element | none length % | - | 1 | 6 | 2
 | Sets the maximum width of an element | none length % | - | 1 | 6 | 2
min-height | Sets the minimum height of an element | length % | - | 1 | 6 | 2
min-width | Sets the minimum width of an element | length % | - | 1 | 6 | 2
width | Sets the width of an element | auto % length | 4 | 1 | 4 | 1


CSS direction Property

The direction property sets the text direction.

Inherited: Yes

Examples

div

{

direction: rtl

}

Possible Values

Value | Description
ltr | Default. Text direction is left-to-right
rtl | Text direction is right-to-left


CSS display Property

The display property sets how/if an element is displayed.

Inherited: No

Example

p

{

display: block

}

li

{

display: list-item

}

table

{

display: table

}

td, th

{

display: table-cell

}

Possible Values

Value | Description
none | The element will not be displayed
block | The element will be displayed as a block-level element, with a line break before and after the element
inline | Default. The element will be displayed as an inline element, with no line break before or after the element
list-item | The element will be displayed as a list
run-in | The element will be displayed as block-level or inline element depending on context
compact | The element will be displayed as block-level or inline element depending on context
marker |
table | The element will be displayed as a block table (like <table>), with a line break before and after the table
inline-table | The element will be displayed as an inline table (like <table>), with no line break before or after the table
table-row-group | The element will be displayed as a group of one or more rows (like <tbody>)
table-header-group | The element will be displayed as a group of one or more rows (like <thead>)
table-footer-group | The element will be displayed as a group of one or more rows (like <tfoot>)
table-row | The element will be displayed as a table row (like <tr>)
table-column-group | The element will be displayed as a group of one or more columns (like <colgroup>)
table-column | The element will be displayed as a column of cells (like <col>)
table-cell | The element will be displayed as a table cell (like <td> and <th>)
table-caption | The element will be displayed as a table caption (like <caption>)


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

Control the letters in a text

Font

Set the font of a text

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 top border

All the bottom 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 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

Place the list-item marker

Dimension

Increase the space between lines

Classification

A simple use of the float property

An image with a caption that floats to the right

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

Place an element " behind"

Place an element " behind"

Pseudo-classes

Add different colors to a hyperlink

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


CSS float Property

The float property sets where an image or a text will appear in another element.

Note: If there is too little space on a line for the floating element, it will jump down on the next line, and continue until a line has enough space.

Note: Content, background, and borders of inline elements should go in front of the float. Background and borders of a block element should go behind the float, but the content of the block element should go in front of the float.

Inherited: No

Example

img

{

float: left

}

Possible Values

Value | Description
left | The image or text moves to the left in the parent element
right | The image or text moves to the right in the parent element
none | Default. The image or the text will be displayed just where it occurs in the text


CSS Font Properties

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.

This example demonstrates how to set the boldness of a font.

All the font properties in one

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 | Description | Values | IE | F | N | W3C
font | A shorthand property for setting all of the properties for a font in one declaration | font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar | 4 | 1 | 4 | 1
font-family | A prioritized list of font family names and/or generic family names for an element | family-name generic-family | 3 | 1 | 4 | 1
 | Sets the size of a font | xx-small x-small small medium large x-large xx-large smaller larger length % | 3 | 1 | 4 | 1
 | Specifies an aspect value for an element that will preserve the x-height of the first-choice font | none number | - | - | - | 2
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 | - | - | - | 2
font-style | Sets the style of the font | normal italic oblique | 4 | 1 | 4 | 1
font-variant | Displays text in a small-caps font or a normal font | normal small-caps | 4 | 1 | 6 | 1
font-weight | Sets the weight of a font | normal bold bolder lighter 100 200 300 400 500 600 700 800 900 | 4 | 1 | 4 | 1


CSS font Property

The font property is, with exception of some system fonts, a shorthand property for setting all of the properties for a font in one declaration.

Note: This property also has a sixth value: "line-height", which sets the space between lines.

Inherited: Yes

Example

p

{

font: 12px arial

}

p

{

font: italic small-caps bold 12px arial

}

p

{

font: oblique small-caps 900 12px/14px arial

}

p

{

font: menu

}

Possible Values

Value | Description
font-style font-variant font-weight font-size/line-height font-family | Sets the properties for a font. The line-height value sets the space between lines. The value can be a number, a %, or a font size. Default value: Browser dependent
caption | Defines the font that are used by captioned controls (like buttons, drop-downs, etc.)
icon | Defines the fonts that are used by icon labels
menu | Defines the fonts that are used by dropdown menus
message-box | Defines the fonts that are used by dialog boxes
small-caption |
status-bar | Defines the fonts that are used by window status bars


CSS font-family Property

The font-family property is a prioritized list of font family names and/or generic family names for an element. The browser will use the first value it recognizes.

There are two types of font-family values:

· family-name: The name of a font-family, like "times", "courier", "arial", etc.
· generic-family: The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".

Note: Separate each value with a comma, and always offer a generic-family name as the last alternative.

Note: If a family-name contains white-space, it should be quoted. Single quotes must be used when using the "style" attribute in HTML.

Inherited: Yes

Example

body

{

font-family: courier, serif

}

p

{

font-family: arial, "lucida console", sans-serif

}

<p style="font-family: arial, 'lucida console', sans-serif">

Possible Values

Value | Description
family-name generic-family | A prioritized list of font family names and/or generic family names for an element. Default value: Browser dependent


CSS font-size Property

The font-size property sets the size of a font.

Inherited: Yes

Example

body

{

font-size: x-large

}

p

{

font-size: 10px

}

Possible Values

Value | Description
xx-small x-small small medium large x-large xx-large | Sets the size of the font to different sizes, from xx-small to xx-large. Default value: medium
smaller | Sets the font-size to a smaller size than the parent element
larger | Sets the font-size to a larger size than the parent element
length | Sets the font-size to a fixed size
% | Sets the font-size to a % of the parent element


CSS font-size-adjust Property

The ratio between the height of the font's lowercase letter "x" and the height of the "font-size" is called a font's aspect value. If the aspect value is high, the font will be legible when it is set to a smaller size. For example: Verdana has an aspect value of 0.58 (means that when font size is 100 px, its x-height is 58 px). Times New Roman has an aspect value of 0.46. This means that Verdana is more legible at smaller sizes than Times New Roman.

The font-size-adjust property specifies an aspect value for an element that will preserve the x-height of the first-choice font.

Inherited: Yes

Example

h2

{

font-size-adjust: 0.58

}

Possible Values

Value

Description

none

Default. Do not preserve the font's x-height if the font is unavailable

number

Defines the aspect value ratio for the font

The formula to use:

font-size of first-choice font*(font-size-adjust/aspect value of available font) = font-size to apply to available font

Example:

If 14px Verdana (aspect value of 0.58) was unavailable, but an available font had an aspect value of 0.46, the font-size of the substitute would be 14 * (0.58/0.46) = 17.65px


CSS font-stretch Property

The font-stretch property condenses or expands the current font-family.

Note: The font-family are condensed or expanded horizontally only.

Inherited: Yes

Example

h2

{

font-stretch: ultra-condensed

}

Possible Values

Value | Description
normal | Default. Sets the scale of condensation or expansion to normal
wider | Sets the scale of expansion to the next expanded value
narrower | Sets the scale of condensation to the next condensed value
ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded | Sets the scale of condensation or expansion of the font-family. "ultra-condensed" is the most condensed (narrowest) value, and "ultra-expanded" is the most expanded (widest) value


CSS font-style Property

The font-style property sets the style of a font.

Inherited: Yes

Example

body

{

font-style: italic

}

Possible Values

Value | Description
normal | Default. The browser displays a normal font
italic | The browser displays an italic font
oblique | The browser displays an oblique font


CSS font-variant property

The font-variant property is used to display text in a small-caps font, which means that all the lower case letters are converted to uppercase letters, but all the letters in the small-caps font have a smaller font-size compared to the rest of the text.

Inherited: Yes

Example

p

{

font-variant: small-caps

}

Possible Values

Value | Description
normal | Default. The browser displays a normal font
small-caps | The browser displays a small-caps font


CSS font-weight Property

The font-weight property sets how thick or thin characters in text should be displayed.

Inherited: Yes

Example

p

{

font-weight: bold

}

Possible Values

Value | Description
normal | Default. Defines normal characters
bold | Defines thick characters
bolder | Defines thicker characters
lighter | Defines lighter characters
100 200 300 400 500 600 700 800 900 | Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold


CSS height Property

The height property sets the height of an element.

Inherited: No

Example

img

{

height: 230px

}

Possible Values

Value | Description
auto | Default. The browser calculates the actual height
length | Defines the height in px, cm, etc.
% | Defines the height in % of the containing block


CSS How To...

Examples

· Look at Example 1
· Look at

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 in Action

This page is using frames. Your browser does not support it.


CSS left Property

The left property specifies the left edge of an element.

Note: If the "position" property has a value of "static", the "left" property has no effect.

Inherited: No

Example

This example sets the left edge of the paragraph 20 px to the right of the left edge of the window:

p

{

position: absolute;

left: 20px

}

This example sets the left edge of the paragraph 20 px to the left of the left edge of the window:

p

{

position: absolute;

left: -20px

}

Possible Values

Value | Description
auto | Default. Lets the browser calculate the left position
% | Sets the left position in % from the left edge of the window
length | Sets the left position in px, cm, etc. from the left edge of the window. Negative values are allowed


CSS letter-spacing Property

The letter-spacing property increases or decreases the white space between characters.

Inherited: Yes

Note: Negative values are allowed.

Examples

p

{

letter-spacing: 12px

}

p

{

letter-spacing: -0.5px

}

Possible Values

Value | Description
normal | Default. Defines normal space between characters
length | Defines a fixed space between characters


CSS line-height Property

The line-height property sets the distance between lines.

Note: Negative values are not allowed.

Inherited: Yes

Example

p

{

line-height: 1.4

}

p

{

line-height: 14pt

}

p

{

line-height: 140%

}

Possible Values

Value | Description
normal | Default. Sets a reasonable distance between lines
number | Sets a number that will be multiplied with the current font-size to set the distance between the lines
length | Sets a fixed distance between the lines
% | Sets a distance between the lines in % of the current font size


CSS List Properties

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.

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 | Description | Values | IE | F | N | W3C
list-style | A shorthand property for setting all of the properties for a list in one declaration | list-style-type list-style-position list-style-image | 4 | 1 | 6 | 1
list-style-image | Sets an image as the list-item marker | none url | 4 | 1 | 6 | 1
list-style-position | Sets where the list-item marker is placed in the list | inside outside | 4 | 1 | 6 | 1
 | Sets the type of the list-item marker | 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 | 4 | 1 | 4 | 1
marker-offset |  | auto length |  | 1 | 7 | 2


CSS list-style Property

The list-style property is a shorthand property for setting all the properties for a list in one declaration.

Inherited: Yes

Example

ul

{

list-style: disc outside

}

ol

{

list-style: decimal inside

}

Possible Values

Value | Description
list-style-type list-style-position list-style-image | Sets the properties for a list. Default value: Not defined


CSS list-style-image Property

The list-style-image property replaces the list-item marker with an image.

Note: Always specify a "list-style-type" property in case the image is unavailable.

Inherited: Yes

Example

ol

{

list-style-image: url(blueball.gif);

list-style-type: circle

}

Possible Values

Value | Description
url | The path to the image
none | Default. No image will be displayed


CSS list-style-position Property

The list-style-position property places the list-item marker in the list.

Inherited: Yes

Example

ol

{

list-style-position: inside

}

Possible Values

Value | Description
inside | Indents the marker and the text.
outside | Default. Keeps the marker to the left of the text


CSS list-style-type Property

The list-style-type sets the type of the list-item marker.

Note: Some browsers only support the "disc" value.

Inherited: Yes

Example

ul

{

list-style-type: disc

}

Possible Values

Value | Description
none | No marker
disc | Default. The marker is a filled circle
circle | The marker is a circle
square | The marker is a square
decimal | The marker is a number
decimal-leading-zero | The marker is a number padded by initial zeros (01, 02, 03, etc.)
lower-roman | The marker is lower-roman (i, ii, iii, iv, v, etc.)
upper-roman | The marker is upper-roman (I, II, III, IV, V, etc.)
lower-alpha | The marker is lower-alpha (a, b, c, d, e, etc.)
upper-alpha | The marker is upper-alpha (A, B, C, D, E, etc.)
lower-greek | The marker is lower-greek (alpha, beta, gamma, etc.)
lower-latin | The marker is lower-latin (a, b, c, d, e, etc.)
upper-latin | The marker is upper-latin (A, B, C, D, E, etc.)
hebrew | The marker is traditional Hebrew numbering
armenian | The marker is traditional Armenian numbering
georgian | The marker is traditional Georgian numbering (an, ban, gan, etc.)
cjk-ideographic | The marker is plain ideographic numbers
hiragana | The marker is: a, i, u, e, o, ka, ki, etc.
katakana | The marker is: A, I, U, E, O, KA, KI, etc.
hiragana-iroha | The marker is: i, ro, ha, ni, ho, he, to, etc.
katakana-iroha | The marker is: I, RO, HA, NI, HO, HE, TO, etc.


CSS Margin Properties

CSS Margin

The CSS margin properties define the space around elements.

Examples

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.

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 | Description | Values | IE | F | N | W3C
margin | A shorthand property for setting the margin properties in one declaration | margin-top margin-right margin-bottom margin-left | 4 | 1 | 4 | 1
margin-bottom | Sets the bottom margin of an element | auto length % | 4 | 1 | 4 | 1
margin-left | Sets the left margin of an element | auto length % | 3 | 1 | 4 | 1
 | Sets the right margin of an element | auto length % | 3 | 1 | 4 | 1
 | Sets the top margin of an element | auto length % | 3 | 1 | 4 | 1


CSS margin Property

The margin property is a shorthand property for setting all of the properties for the four margins in one declaration.

Note: Negative values are allowed.

Inherited: No

Example

h1 {margin: 10px}

all four margins will be 10px

h1 {margin: 10px 2%}

top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.

h1 {margin: 10px 2% -10px}

top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px

h1 {margin: 10px 2% -10px auto}

top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser

Possible Values

Value | Description
margin-top margin-right margin-bottom margin-left | Sets the properties for the margins. The values comes in % (defines a margin in % of the total height/width of the document), length (defines a fixed margin), and auto (the browser sets a margin). Default value: Not defined


CSS margin-bottom Property

The margin-bottom property sets the bottom margin of an element.

Note: Negative values are allowed.

Inherited: No

Example

h1

{

margin-bottom: 10px

}

h2

{

margin-bottom: -20px

}

Possible Values

Value | Description
auto | The browser sets a bottom margin
length | Defines a fixed bottom margin. Default value is 0
% | Defines a bottom margin in % of the total height of the document


CSS margin-left Property

The margin-left property sets the left margin of an element.

Note: Negative values are allowed.

Inherited: No

Example

h1

{

margin-left: 10px

}

h2

{

margin-left: -20px

}

Possible Values

Value | Description
auto | The browser sets a left margin
length | Defines a fixed left margin. Default value is 0
% | Defines a left margin in % of the total width of the document


CSS margin-right Property

The margin-right property sets the right margin of an element.

Note: Negative values are allowed.

Inherited: No

Example

h1

{

margin-right: 10px

}

h2

{

margin-right: -20px

}

Possible Values

Value | Description
auto | The browser sets a right margin
length | Defines a fixed right margin. Default value is 0
% | Defines a right margin in % of the total width of the document


CSS margin-top Property

The margin-top property sets the top margin of an element.

Note: Negative values are allowed.

Inherited: No

Example

h1

{

margin-top: 10px

}

h2

{

margin-top: -20px

}

Possible Values

Value | Description
auto | The browser sets a top margin
length | Defines a fixed top margin. Default value is 0
% | Defines a top margin in % of the total height of the document


CSS max-height Property

The max-height property sets the maximum height of an element.

Inherited: No

Example

p

{

max-height: 100px

}

Possible Values

Value | Description
none | Default. Defines no limit on the maximum height allowed for the element
length | Defines a maximum height for the element
% | Defines the maximum height for the element in % of the containing block


CSS max-width Property

The max-width property sets the maximum width of an element.

Inherited: No

Example

h2

{

max-width: 500px

}

Possible Values

Value | Description
none | Default. Defines no limit on the maximum width allowed for the element
length | Defines a maximum width for the element
% | Defines the maximum width for the element in % of the containing block


CSS min-height Property

The min-height property sets the minimum height of an element.

Inherited: No

Example

p

{

min-height: 10px

}

Possible Values

Value | Description
length | Defines a minimum height for the element. Default value: 0
% | Defines the minimum height for the element in % of the containing block


CSS min-width Property

The min-width property sets the minimum width of an element.

Inherited: No

Example

h2

{

min-width: 50px

}

Possible Values

Value | Description
length | Defines a minimum width for the element. Default value: browser dependent
% | Defines the minimum width for the element in % of the containing block


CSS outline Property

An outline is a line that is drawn around elements, outside the border edge, to make the element "stand out". The outline property sets the outlines around elements.

Note: Outlines do not take up space, and they do not have to be rectangular.

Inherited: No

Example

button

{

outline: red solid thin

}

Possible Values

Value | Description
outline-color outline-style outline-width | A shorthand property for setting all the outline properties in one declaration. Default value: invert none medium


CSS outline-color Property

An outline is a line that is drawn around elements, outside the border edge, to make the element "stand out". The outline-color property sets the color of the outlines.

Note: Outlines do not take up space, and they do not have to be rectangular.

Inherited: No

Example

button

{

outline-color: red

}

Possible Values

Value | Description
invert | Default. Performs a color inversion. This is a trick to ensure the border is visible, regardless of color background
color | The color value can be a color name (red), a rgb value (rgb(255,0,0)), or a hex number (#ff0000)


CSS outline-style Property

An outline is a line that is drawn around elements, outside the border edge, to make the element "stand out". The outline-style property sets the style of the outlines.

Note: Outlines do not take up space, and they do not have to be rectangular.

Inherited: No

Example

button

{

outline-style: solid

}

Possible Values

Value | Description
none | Default. Defines no outlines
dotted | Defines a dotted outline
dashed | Defines a dashed outline
solid | Defines a solid outline
double | Defines two lines around the element. The width of the two lines are the same as the outline-width value
groove | Defines a 3D grooved outline. The effect depends on the outline-color value
ridge | Defines a 3D ridged outline. The effect depends on the outline-color value
inset | Defines a 3D inset outline. The effect depends on the outline-color value
outset | Defines a 3D outset outline. The effect depends on the outline-color value


CSS outline-width Property

An outline is a line that is drawn around elements, outside the border edge, to make the element "stand out". The outline-width property sets the width of the outlines.

Note: Outlines do not take up space, and they do not have to be rectangular.

Inherited: No

Example

button

{

outline-width: medium

}

Possible Values

Value | Description
thin | Defines thin outlines
medium | Default. Defines medium outlines
thick | Defines thick outlines
length | Allows you to define the thickness of the outlines


CSS overflow Property

The overflow property sets what happens if the content of an element overflow its area.

Inherited: No

Example

p

{

overflow: scroll

}

Possible Values

Value | Description
visible | Default. The content is not clipped. It renders outside the element
hidden | The content is clipped, but the browser does not display a scroll-bar to see the rest of the content
scroll | The content is clipped, but the browser displays a scroll-bar to see the rest of the content
auto | If the content is clipped, the browser should display a scroll-bar to see the rest of the content


CSS Padding Properties

CSS Padding

The CSS padding properties define the space between the element border and the element content.

Examples

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 | Description | Values | IE | F | N | W3C
padding | A shorthand property for setting all of the padding properties in one declaration | padding-top padding-right padding-bottom padding-left | 4 | 1 | 4 | 1
padding-bottom | Sets the bottom padding of an element | length % | 4 | 1 | 4 | 1
padding-left | Sets the left padding of an element | length % | 4 | 1 | 4 | 1
padding-right | Sets the right padding of an element | length % | 4 | 1 | 4 | 1
padding-top | Sets the top padding of an element | length % | 4 | 1 | 4 | 1


CSS padding Property

The padding property is a shorthand property for setting all of the padding properties in one declaration.

Note: Negative values are not allowed.

Inherited: No

Example

h1 {padding: 10px}

the padding will be 10px on all four sides

h1 {padding: 10px 2%}

top and bottom padding will be 10px, left and right padding will be 2% of the width of the closest element.

h1 {padding: 10px 2% 15px}

top padding will be 10px, left and right padding will be 2% of the width of the closest element, bottom padding will be 15px

h1 {padding: 10px 2% 15px 20px}

top padding will be 10px, right padding will be 2% of the width of the closest element, bottom padding will be 15px, left padding will be 20px

Possible Values

Value | Description
padding-top padding-right padding-bottom padding-left | Sets the padding. The values comes in % (defines padding in % of the width of the closest element) and length (defines a fixed padding). Default value: Not defined


CSS padding-bottom Property

The padding-bottom property sets the bottom padding (space) of an element.

Note: Negative values are not allowed.

Inherited: No

Example

h1

{

padding-bottom: 10px

}

Possible Values

Value | Description
length | Defines a fixed bottom padding. Default value is 0
% | Defines a bottom padding in % of the height of the closest element


CSS padding-left Property

The padding-left property sets the left padding (space) of an element.

Note: Negative values are not allowed.

Inherited: No

Example

h1

{

padding-left: 10px

}

Possible Values

Value | Description
length | Defines a fixed left padding. Default value is 0
% | Defines a left padding in % of the width of the closest element


CSS padding-right Property

The padding-right property sets the right padding (space) of an element.

Note: Negative values are not allowed.

Inherited: No

Example

h1

{

padding-right: 10px

}

Possible Values

Value | Description
length | Defines a fixed right padding. Default value is 0
% | Defines a right padding in % of the width of the closest element


CSS padding-top Property

The padding-top property sets the top padding (space) of an element.

Note: Negative values are not allowed.

Inherited: No

Example

h1

{

padding-top: 10px

}

Possible Values

Value | Description
length | Defines a fixed top padding. Default value is 0
% | Defines a top padding in % of the height of the closest element


CSS page-break-after Property

The page-break-after property sets the page-breaking behavior after an element.

Note: You can not use this property on absolutely positioned elements.

Note: Use the page-breaking properties as few times as possible and avoid page-breaking properties inside tables, floating elements, and block elements with borders.

Inherited: No

Example

table

{

page-break-after: always

}

Possible Values

Value | Description
auto | Default. Insert a page break after the element if necessary
always | Insert a page break after the element
avoid | Avoid inserting a page break after the element
left | Insert page breaks after the element until it reaches a blank left page
right | Insert page breaks after the element until it reaches a blank right page


CSS page-break-before Property

The page-break-before property sets the page-breaking behavior before an element.

Note: You can not use this property on absolutely positioned elements.

Note: Use the page-breaking properties as few times as possible and avoid page-breaking properties inside tables, floating elements, and block elements with borders.

Inherited: No

Example

table

{

page-break-before: always

}

Possible Values

Value | Description
auto | Default. Insert a page break before the element if necessary
always | Insert a page break before the element
avoid | Avoid inserting a page break before the element
left | Insert page breaks before the element until it reaches a blank left page
right | Insert page breaks before the element until it reaches a blank right page


CSS page-break-inside Property

The page-break-inside property sets the page-breaking behavior inside an element.

Note: You can not use this property on absolutely positioned elements.

Note: Use the page-breaking properties as few times as possible and avoid page-breaking properties inside tables, floating elements, and block elements with borders.

Inherited: No

Example

p

{

page-break-inside: avoid

}

Possible Values

Value | Description
auto | Default. Insert a page break inside the element if necessary
avoid | Avoid inserting a page break inside the element


CSS position Property

The position property places an element in a static, relative, absolute or fixed position.

Inherited: No

Example

h1

{

position:absolute;

left:100px;

top:150px;

}

Possible Values

Value | Description
static | Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations)
relative | An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position
absolute | An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties
fixed | An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)


CSS Positioning Properties

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.

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.

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 | Description | Values | IE | F | N | W3C
bottom | Sets how far the bottom edge of an element is above/below the bottom edge of the parent element | auto % length | 5 | 1 | 6 | 2
 | Sets the shape of an element. The element is clipped into this shape, and displayed | shape auto | 4 | 1 | 6 | 2
left | Sets how far the left edge of an element is to the right/left of the left edge of the parent element | auto % length | 4 | 1 | 4 | 2
 | Sets what happens if the content of an element overflow its area | visible hidden scroll auto | 4 | 1 | 6 | 2
position | Places an element in a static, relative, absolute or fixed position | static relative absolute fixed | 4 | 1 | 4 | 2
right | Sets how far the right edge of an element is to the left/right of the right edge of the parent element | auto % length | 5 | 1 | 6 | 2
top | Sets how far the top edge of an element is above/below the top edge of the parent element | auto % length | 4 | 1 | 4 | 2
vertical-align | Sets the vertical alignment of an element | baseline sub super top text-top middle bottom text-bottom length % | 4 | 1 | 4 | 1
z-index | Sets the stack order of an element | auto number | 4 | 1 | 6 | 2


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 | Purpose | IE | F | N | W3C
:active | Adds special style to an activated element | 4 | 1 | 8 | 1
:focus | Adds special style to an element while the element has focus | - | - | - | 2
:hover | Adds special style to an element when you mouse over it | 4 | 1 | 7 | 1
:link | Adds special style to an unvisited link | 3 | 1 | 4 | 1
:visited | Adds special style to a visited link | 3 | 1 | 4 | 1
:first-child | Adds special style to an element that is the first child of some other element |  | 1 | 7 | 2
:lang | Allows the author to specify a language to use in a specified element |  | 1 | 8 | 2


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 | Purpose | IE | F | N | W3C
:first-letter | Adds special style to the first letter of a text | 5 | 1 | 8 | 1
:first-line | Adds special style to the first line of a text | 5 | 1 | 8 | 1
:before | Inserts some content before an element |  | 1.5 | 8 | 2
:after | Inserts some content after an element |  | 1.5 | 8 | 2


CSS Quiz

You can test your CSS skills with W3Schools' Quiz.

The Test

The test contains 20 questions and there is no time limit.

The test is not official, it's just a nice way to see how much you know, or don't know, about CSS.

Your Score Will be Counted

You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 20 points.

Good luck! Start the CSS Quiz


CSS quotes Property

The quotes property sets the type of quotation marks for embedded quotations.

Inherited: Yes

Example

Example 1

q:lang(en)

{

quotes: '"' '"' "'" "'"

}

the style above and the following HTML file:

<html lang="en">

<head>

</head>

<body>

<p><q>This is a <q>big</q> quote</q></p>

</body>

</html>

would produce this output:

"This is a 'big' quote"

Example 2

q:lang(no)

{

quotes: "«" "»" "'" "'"

}

the style above and the following HTML file:

<html lang="no">

<head>

</head>

<body>

<p><q>Vi synger <q>Mellom bakkar og berg</q> på 17.mai.</q>

</body>

</html>

would produce this output:

«Vi synger 'Mellom bakkar og berg' på 17.mai.»

Possible Values

Value | Description
none | Specifies that the "open-quote" and "close-quote" values of the "content" property will not produce any quotation marks
string string string string | Defines the quotation marks to use. The first two values specifies the first level of quotation embedding, the next two values specifies the next level of quote embedding, etc

Quotation Mark Characters

Result | Description | Entity Number
" | double quote | &#34;
' | single quote | &#39;
‹ | single, left angle quote | &#8249;
› | single, right angle quote | &#8250;
« | double, left angle quote | &#171;
» | double, right angle quote | &#187;
 | left quote (single high-6) | &#8216;
 | right quote (single high-9) | &#8217;
 | left quote (double high-6) | &#8220;
 | right quote (double high-9) | &#8221;
 | double quote (double low-9) | &#8222;


CSS right Property

The right property specifies the right edge of an element.

Note: If the "position" property has a value of "static", the "right" property has no effect.

Inherited: No

Example

This example sets the right edge of the paragraph 20 px to the left of the right edge of the window:

p

{

position: absolute;

right: 20px

}

This example sets the right edge of the paragraph 20 px to the right of the right edge of the window:

p

{

position: absolute;

right: -20px

}

Possible Values

Value | Description
auto | Default. Lets the browser calculate the right position
% | Sets the right position in % from the right edge of the window
length | Sets the right position in px, cm, etc. from the right edge of the window. Negative values are allowed


CSS Summary

You Have Learned CSS, Now What?

 Top Previous Next

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 .


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 Text Properties

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.

This example demonstrates how to indent the first line of a paragraph.

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 | Description | Values | IE | F | N | W3C
color | Sets the color of a text | color | 3 | 1 | 4 | 1
direction | Sets the text direction | ltr rtl | 6 | 1 | 6 | 2
line-height | Sets the distance between lines | normal number length % | 4 | 1 | 4 | 1
 | Increase or decrease the space between characters | normal length | 4 | 1 | 6 | 1
 | Aligns the text in an element | left right center justify | 4 | 1 | 4 | 1
text-decoration | Adds decoration to text | none underline overline line-through blink | 4 | 1 | 4 | 1
 | Indents the first line of text in an element | length % | 4 | 1 | 4 | 1
text-shadow |  | none color length |  |  |  |
text-transform | Controls the letters in an element | none capitalize uppercase lowercase | 4 | 1 | 4 | 1
unicode-bidi |  | normal embed bidi-override | 5 |  |  | 2
white-space | Sets how white space inside an element is handled | normal pre nowrap | 5 | 1 | 4 | 1
word-spacing | Increase or decrease the space between words | normal length | 6 | 1 | 6 | 1


CSS text-align Property

The text-align property aligns the text in an element.

Inherited: Yes

Examples

p

{

text-align: center

}

Possible Values

Value | Description
left | Aligns the text to the left. Default value: Browser dependent
right | Aligns the text to the right
center | Centers the text
justify |


CSS text-decoration Property

The text-decoration property decorates the text.

Inherited: No

Note: The color of the decoration should be set by the "color" property.

Examples

p

{

text-decoration: underline

}

Possible Values

Value | Description
none | Default. Defines a normal text
underline | Defines a line under the text
overline | Defines a line over the text
line-through | Defines a line through the text
blink | Defines a blinking text


CSS text-indent Property

The text-indent indents the first line of text in an element.

Inherited: Yes

Note: Negative values are allowed. The first line will be indented to the left if the value is negative.

Examples

p

{

text-indent: 20px

}

p

{

text-indent: -12px

}

Possible Values

Value | Description
length | Defines a fixed indentation. Default value: 0
% | Defines an indentation in % of the width of the parent element


CSS text-transform Property

The text-transform property controls the letters in an element.

Inherited: Yes

Examples

p

{

text-transform: uppercase

}

Possible Values

Value | Description
none | Default. Defines normal text, with lower case letters and capital letters
capitalize | Each word in a text starts with a capital letter
uppercase | Defines only capital letters
lowercase | Defines no capital letters, only lower case letters


CSS top Property

The top property specifies the top edge of an element.

Note: If the "position" property has a value of "static", the "top" property has no effect.

Inherited: No

Example

This example sets the top edge of the paragraph 20 px below the top edge of the window:

p

{

position: absolute;

top: 20px

}

This example sets the top edge of the paragraph 20 px above the top edge of the window:

p

{

position: absolute;

top: -20px

}

Possible Values

Value | Description
auto | Default. Lets the browser calculate the top position
% | Sets the top position in % from the top edge of the window
length | Sets the top position in px, cm, etc. from the top edge of the window. Negative values are allowed


CSS Tutorial

CSS Tutorial

logocss

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 Units

Measurements

Unit | Description
% | percentage
in | inch
cm | centimeter
mm | 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
ex | one ex is the x-height of a font (x-height is usually about half the font-size)
pt | point (1 pt is the same as 1/72 inch)
pc | pica (1 pc is the same as 12 points)
px | pixels (a dot on the computer screen)

Colors

Unit | Description
color_name | A color name (e.g. red)
rgb(x,x,x) | An RGB value (e.g. rgb(255,0,0))
rgb(x%, x%, x%) | An RGB percentage value (e.g. rgb(100%,0%,0%))
#rrggbb | A HEX number (e.g. #ff0000)


CSS vertical-align Property

The vertical-align property sets the vertical alignment of an element.

Inherited: No

Example

img

{

vertical-align: bottom

}

Possible Values

Value | Description
baseline | Default. The element is placed on the baseline of the parent element
sub | Aligns the element as it was subscript
super | Aligns the element as it was superscript
top | The top of the element is aligned with the top of the tallest element on the line
text-top | The top of the element is aligned with the top of the parent element's font
middle | The element is placed in the middle of the parent element
bottom | The bottom of the element is aligned with the lowest element on the line
text-bottom | The bottom of the element is aligned with the bottom of the parent element's font
length |
% | Aligns the element in a % value of the "line-height" property. Negative values are allowed


CSS visibility Property

The visibility property sets if an element should be visible or invisible.

Tip: Even invisible elements takes up space on the page. Use the "display" property to create invisible elements that do not take up space.

Inherited: No

Example

p

{

visibility: hidden

}

Possible Values

Value | Description
visible | The element is visible
hidden | The element is invisible
collapse | When used in table elements, this value removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If this value is used on other elements, it renders as "hidden"


CSS white-space Property

The white-space property sets how white-space inside an element is handled.

Inherited: Yes

Examples

p

{

white-space: normal

}

Possible Values

Value | Description
normal | Default. White-space is ignored by the browser
pre | White-space is preserved by the browser. Acts like the <pre> tag in HTML
nowrap | The text will never wrap, it continues on the same line until a <br> tag is encountered


CSS width Property

The width property sets the width of an element.

Inherited: No

Example

img

{

width: 100%

}

Possible Values

Value | Description
auto | Default. The browser calculates the actual width
% | Defines the width in % of the parent element's width
length | Defines the width in px, cm, etc.


CSS word-spacing Property

The word-spacing property increases or decreases the white space between words.

Inherited: Yes

Note: Negative values are allowed.

Examples

p

{

word-spacing: 30px

}

p

{

word-spacing: -0.5px

}

Possible Values

Value | Description
normal | Default. Defines normal space between words
length | Defines a fixed space between words


CSS z-index Property

The z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.

Note: Elements can have negative stack orders.

Note: Z-index only works on elements that have been positioned (eg position:absolute;)!

Inherited: No

Example

img

{

z-index: -1

}

Possible Values

Value | Description
auto | Default. The stack order is equal to its parents
number | Sets the stack order of the element


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 | Description | Values | W3C
azimuth | Sets where the sound/voices should come from (horizontally) | angle left-side far-left left center-left center center-right right far-right right-side behind leftwards rightwards | 2
cue | A shorthand property for setting the cue-before and cue-after properties in one declaration | cue-before cue-after | 2
cue-after | Specifies a sound to be played after speaking an element's content to delimit it from other | none url | 2
cue-before | Specifies a sound to be played before speaking an element's content to delimit it from other | none url | 2
elevation | Sets where the sound/voices should come from (vertically) | angle below level above higher lower | 2
pause | A shorthand property for setting the pause-before and pause-after properties in one declaration | pause-before pause-after | 2
pause-after | Specifies a pause after speaking an element's content | time % | 2
pause-before | Specifies a pause before speaking an element's content | time % | 2
pitch | Specifies the speaking voice | frequency x-low low medium high x-high | 2
pitch-range | Specifies the variation in the speaking voice. (Monotone voice or animated voice?) | number | 2
play-during | Specifies a sound to be played while speaking an element's content | auto none url mix repeat | 2
richness | Specifies the richness in the speaking voice. (Rich voice or thin voice?) | number | 2
speak | Specifies whether content will render aurally | normal none spell-out | 2
speak-header | Specifies how to handle table headers. Should the headers be spoken before every cell, or only before a cell with a different header than the previous cell | always once | 2
speak-numeral | Specifies how to speak numbers | digits continuous | 2
speak-punctuation | Specifies how to speak punctuation characters | none code | 2
speech-rate | Specifies the speed of the speaking | number x-slow slow medium fast x-fast faster slower | 2
stress | Specifies the "stress" in the speaking voice | number | 2
voice-family | A prioritized list of voice family names that contain specific voices | specific-voice generic-voice | 2
volume | Specifies the volume of the speaking | number % silent x-soft soft medium loud x-loud | 2


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 sans-serif 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 | Description
all | Used for all media type devices
aural | Used for speech and sound synthesizers
braille | Used for braille tactile feedback devices
embossed | Used for paged braille printers
handheld | Used for small or handheld devices
print | Used for printers
projection | Used for projected presentations, like slides
screen | Used for computer screens
tty | Used for media using a fixed-pitch character grid, like teletypes and terminals
tv | Used for television-type devices


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 | Description | Values | W3C
orphans | Sets the minimum number of lines for a paragraph that must be left at the bottom of a page | number | 2
marks | Sets what sort of marks should be rendered outside the page box | none crop cross |
page | Sets a page type to use when displaying an element | auto identifier | 2
page-break-after | Sets the page-breaking behavior after an element | auto always avoid left right | 2
page-break-before | Sets the page-breaking behavior before an element | auto always avoid left right | 2
page-break-inside | Sets the page-breaking behavior inside an element | auto avoid | 2
size | Sets the orientation and size of a page | auto portrait landscape |
widows | Sets the minimum number of lines for a paragraph that must be left at the top of a page | number | 2


CSS2 Reference

The links in the "Property" column point to more useful information about the specific property.

·
· Border
· Classification
· Dimension
· Font
· Generated Content
· List and Marker
·
· Outlines
· Padding
· Positioning
· Table
·
· 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 | Description | Values | IE | F | N | W3C
background | A shorthand property for setting all background properties in one declaration | background-color background-image background-repeat background-attachment background-position | 4 | 1 | 6 | 1
background-attachment | Sets whether a background image is fixed or scrolls with the rest of the page | scroll fixed | 4 | 1 | 6 | 1
background-color | Sets the background color of an element | color-rgb color-hex color-name transparent | 4 | 1 | 4 | 1
 | Sets an image as the background | url(URL) none | 4 | 1 | 4 | 1
 | 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 | 4 | 1 | 6 | 1
background-repeat | Sets if/how a background image will be repeated | repeat repeat-x repeat-y no-repeat | 4 | 1 | 4 | 1

Border

On-line examples

Property | Description | Values | IE | F | N | W3C
border | A shorthand property for setting all of the properties for the four borders in one declaration | border-width border-style border-color | 4 | 1 | 4 | 1
border-bottom | A shorthand property for setting all of the properties for the bottom border in one declaration | border-bottom-width border-style border-color | 4 | 1 | 6 | 1
 | Sets the color of the bottom border | border-color | 4 | 1 | 6 | 2
border-bottom-style | Sets the style of the bottom border | border-style | 4 | 1 | 6 | 2
border-bottom-width | Sets the width of the bottom border | thin medium thick length | 4 | 1 | 4 | 1
border-color | Sets the color of the four borders, can have from one to four colors | color | 4 | 1 | 6 | 1
border-left | A shorthand property for setting all of the properties for the left border in one declaration | border-left-width border-style border-color | 4 | 1 | 6 | 1
border-left-color | Sets the color of the left border | border-color | 4 | 1 | 6 | 2
 | Sets the style of the left border | border-style | 4 | 1 | 6 | 2
border-left-width | Sets the width of the left border | thin medium thick length | 4 | 1 | 4 | 1
border-right | A shorthand property for setting all of the properties for the right border in one declaration | border-right-width border-style border-color | 4 | 1 | 6 | 1
border-right-color | Sets the color of the right border | border-color | 4 | 1 | 6 | 2
border-right-style | Sets the style of the right border | border-style | 4 | 1 | 6 | 2
border-right-width | Sets the width of the right border | thin medium thick length | 4 | 1 | 4 | 1
 | Sets the style of the four borders, can have from one to four styles | none hidden dotted dashed solid double groove ridge inset outset | 4 | 1 | 6 | 1
border-top | A shorthand property for setting all of the properties for the top border in one declaration | border-top-width border-style border-color | 4 | 1 | 6 | 1
border-top-color | Sets the color of the top border | border-color | 4 | 1 | 6 | 2
border-top-style | Sets the style of the top border | border-style | 4 | 1 | 6 | 2
border-top-width | Sets the width of the top border | thin medium thick length | 4 | 1 | 4 | 1
border-width | A shorthand property for setting the width of the four borders in one declaration, can have from one to four values | thin medium thick length | 4 | 1 | 4 | 1

Classification

On-line examples

Property | Description | Values | IE | F | N | W3C
 | Sets the sides of an element where other floating elements are not allowed | left right both none | 4 | 1 | 4 | 1
cursor | Specifies the type of cursor to be displayed | 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 | 4 | 1 | 6 | 2
display | Sets how/if an element is displayed | 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 | 4 | 1 | 4 | 1
float | Sets where an image or a text will appear in another element | left right none | 4 | 1 | 4 | 1
 | Places an element in a static, relative, absolute or fixed position | static relative absolute fixed | 4 | 1 | 4 | 2
visibility | Sets if an element should be visible or invisible | visible hidden collapse | 4 | 1 | 6 | 2

Dimension

On-line examples

Property | Description | Values | IE | F | N | W3C
 | Sets the height of an element | auto length % | 4 | 1 | 6 | 1
 | Sets the distance between lines | normal number length % | 4 | 1 | 4 | 1
 | Sets the maximum height of an element | none length % | - | 1 | 6 | 2
 | Sets the maximum width of an element | none length % | - | 1 | 6 | 2
min-height | Sets the minimum height of an element | length % | - | 1 | 6 | 2
min-width | Sets the minimum width of an element | length % | - | 1 | 6 | 2
width | Sets the width of an element | auto % length | 4 | 1 | 4 | 1

Font

Property | Description | Values | IE | F | N | W3C
font | A shorthand property for setting all of the properties for a font in one declaration | font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar | 4 | 1 | 4 | 1
 | A prioritized list of font family names and/or generic family names for an element | family-name generic-family | 3 | 1 | 4 | 1
font-size | Sets the size of a font | xx-small x-small small medium large x-large xx-large smaller larger length % | 3 | 1 | 4 | 1
 | Specifies an aspect value for an element that will preserve the x-height of the first-choice font | none number | - | - | - | 2
 | Condenses or expands the current font-family | normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded | - | - | - | 2
font-style | Sets the style of the font | normal italic oblique | 4 | 1 | 4 | 1
font-variant | Displays text in a small-caps font or a normal font | normal small-caps | 4 | 1 | 6 | 1
 | Sets the weight of a font | normal bold bolder lighter 100 200 300 400 500 600 700 800 900 | 4 | 1 | 4 | 1

Generated Content

Property | Description | Values | IE | F | N | W3C
content | Generates content in a document. Used with the :before and :after pseudo-elements | string url counter(name) counter(name, list-style-type) counters(name, string) counters(name, string, list-style-type) attr(X) open-quote close-quote no-open-quote no-close-quote |  | 1 | 6 | 2
counter-increment | Sets how much the counter increments on each occurrence of a selector | none identifier number |  |  |  | 2
counter-reset | Sets the value the counter is set to on each occurrence of a selector | none identifier number |  |  |  | 2
quotes | Sets the type of quotation marks | none string string | - | 1 | 6 | 2

List and Marker

On-line examples

Property | Description | Values | IE | F | N | W3C
 | A shorthand property for setting all of the properties for a list in one declaration | list-style-type list-style-position list-style-image | 4 | 1 | 6 | 1
list-style-image | Sets an image as the list-item marker | none url | 4 | 1 | 6 | 1
list-style-position | Sets where the list-item marker is placed in the list | inside outside | 4 | 1 | 6 | 1
list-style-type | Sets the type of the list-item marker | 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 | 4 | 1 | 4 | 1
marker-offset |  | auto length |  | 1 | 7 | 2

Margin

On-line examples

Property | Description | Values | IE | F | N | W3C
margin | A shorthand property for setting the margin properties in one declaration | margin-top margin-right margin-bottom margin-left | 4 | 1 | 4 | 1
margin-bottom | Sets the bottom margin of an element | auto length % | 4 | 1 | 4 | 1
margin-left | Sets the left margin of an element | auto length % | 3 | 1 | 4 | 1
margin-right | Sets the right margin of an element | auto length % | 3 | 1 | 4 | 1
margin-top | Sets the top margin of an element | auto length % | 3 | 1 | 4 | 1

Outlines

Property | Description | Values | IE | F | N | W3C
outline | A shorthand property for setting all the outline properties in one declaration | outline-color outline-style outline-width | - | 1.5 | - | 2
outline-color | Sets the color of the outline around an element | color invert | - | 1.5 | - | 2
 | Sets the style of the outline around an element | none dotted dashed solid double groove ridge inset outset | - | 1.5 | - | 2
outline-width | Sets the width of the outline around an element | thin medium thick length | - | 1.5 | - | 2

Padding

On-line examples

Property | Description | Values | IE | F | N | W3C
padding | A shorthand property for setting all of the padding properties in one declaration | padding-top padding-right padding-bottom padding-left | 4 | 1 | 4 | 1
padding-bottom | Sets the bottom padding of an element | length % | 4 | 1 | 4 | 1
padding-left | Sets the left padding of an element | length % | 4 | 1 | 4 | 1
padding-right | Sets the right padding of an element | length % | 4 | 1 | 4 | 1
padding-top | Sets the top padding of an element | length % | 4 | 1 | 4 | 1

Positioning

On-line examples

Property | Description | Values | IE | F | N | W3C
bottom | Sets how far the bottom edge of an element is above/below the bottom edge of the parent element | auto % length | 5 | 1 | 6 | 2
clip | Sets the shape of an element. The element is clipped into this shape, and displayed | shape auto | 4 | 1 | 6 | 2
left | Sets how far the left edge of an element is to the right/left of the left edge of the parent element | auto % length | 4 | 1 | 4 | 2
overflow | Sets what happens if the content of an element overflow its area | visible hidden scroll auto | 4 | 1 | 6 | 2
position | Places an element in a static, relative, absolute or fixed position | static relative absolute fixed | 4 | 1 | 4 | 2
right | Sets how far the right edge of an element is to the left/right of the right edge of the parent element | auto % length | 5 | 1 | 6 | 2
 | Sets how far the top edge of an element is above/below the top edge of the parent element | auto % length | 4 | 1 | 4 | 2
 | Sets the vertical alignment of an element | baseline sub super top text-top middle bottom text-bottom length % | 4 | 1 | 4 | 1
z-index | Sets the stack order of an element | auto number | 4 | 1 | 6 | 2

Table

Property | Description | Values | IE | F | N | W3C
border-collapse | Sets the border model of a table | collapse separate | 5 | 1 | 7 | 2
border-spacing | Sets the distance between the borders of adjacent cells (only for the "separated borders" model) | length length | - | 1 | 6 | 2
caption-side | Sets the position of the caption according to the table | top bottom left right | - | 1 | 6 | 2
empty-cells | Sets whether cells with no visible content should have borders or not (only for the "separated borders" model) | show hide | - | 1 | 6 | 2
table-layout | Sets the algorithm used to lay out the table | auto fixed | 5 | 1 | 6 | 2

Text

On-line examples

Property | Description | Values | IE | F | N | W3C
color | Sets the color of a text | color | 3 | 1 | 4 | 1
 | Sets the text direction | ltr rtl | 6 | 1 | 6 | 2
line-height | Sets the distance between lines | normal number length % | 4 | 1 | 4 | 1
letter-spacing | Increase or decrease the space between characters | normal length | 4 | 1 | 6 | 1
 | Aligns the text in an element | left right center justify | 4 | 1 | 4 | 1
text-decoration | Adds decoration to text | none underline overline line-through blink | 4 | 1 | 4 | 1
 | Indents the first line of text in an element | length % | 4 | 1 | 4 | 1
text-shadow |  | none color length |  |  |  |
text-transform | Controls the letters in an element | none capitalize uppercase lowercase | 4 | 1 | 4 | 1
unicode-bidi |  | normal embed bidi-override | 5 |  |  | 2
white-space | Sets how white space inside an element is handled | normal pre nowrap | 5 | 1 | 4 | 1
word-spacing | Increase or decrease the space between words | normal length | 6 | 1 | 6 | 1

Pseudo-classes

On-line examples

Pseudo-class | Purpose | IE | F | N | W3C
:active | Adds special style to an activated element | 4 | 1 | 8 | 1
:focus | Adds special style to an element while the element has focus | - | - | - | 2
:hover | Adds special style to an element when you mouse over it | 4 | 1 | 7 | 1
:link | Adds special style to an unvisited link | 3 | 1 | 4 | 1
:visited | Adds special style to a visited link | 3 | 1 | 4 | 1
:first-child | Adds special style to an element that is the first child of some other element |  | 1 | 7 | 2
:lang | Allows the author to specify a language to use in a specified element |  | 1 | 8 | 2

Pseudo-elements

Pseudo-element | Purpose | IE | F | N | W3C
:first-letter | Adds special style to the first letter of a text | 5 | 1 | 8 | 1
:first-line | Adds special style to the first line of a text | 5 | 1 | 8 | 1
:before | Inserts some content before an element |  | 1.5 | 8 | 2
:after | Inserts some content after an element |  | 1.5 | 8 | 2


demo_style_content.html

Click on the styles:

With Style1

With Style2

With Style3

With Style4

With Style5

Without styles

View the stylesheets:

Style1

Style3

Style4

Style5


demo_style_main.html

This is header 1

This is a paragraph

This is another paragraph

This is header 2, followed by a table

First Name | Name | Telephone | Fax
Hege | Svendson | 555-777-0001 | 555-777-0000
Kai Jim | Svendson | 555-777-0002 |

This is header 3, followed by a numeric list and a bullet list:

1. Home Page
2. CSS Tutorial
· Tea
· Mild
· Coffee
· Milk


demo_style_main8376.html

This is header 1

This is a paragraph

This is another paragraph

This is header 2, followed by a table

First Name | Name | Telephone | Fax
Hege | Svendson | 555-777-0001 | 555-777-0000
Kai Jim | Svendson | 555-777-0002 |

This is header 3, followed by a numeric list and a bullet list:

1.
2.
· Tea
· Mild
· Coffee
· Milk


demo_style_mainaadc.html

This is header 1

This is a paragraph

This is another paragraph

This is header 2, followed by a table

First Name | Name | Telephone | Fax
Hege | Svendson | 555-777-0001 | 555-777-0000
Kai Jim | Svendson | 555-777-0002 |

This is header 3, followed by a numeric list and a bullet list:

1. Home Page
2. CSS Tutorial
· Tea
· Mild
· Coffee
· Milk


demo_style_mainc060.html

This is header 1

This is a paragraph

This is another paragraph

This is header 2, followed by a table

First Name | Name | Telephone | Fax
Hege | Svendson | 555-777-0001 | 555-777-0000
Kai Jim | Svendson | 555-777-0002 |

This is header 3, followed by a numeric list and a bullet list:

▪ Home Page
▪ CSS Tutorial
▪ Tea
▪ Mild
▪ Coffee
▪ Milk


demo_style_mainc790.html

This is header 1

This is a paragraph

This is another paragraph

This is header 2, followed by a table

First Name | Name | Telephone | Fax
Hege | Svendson | 555-777-0001 | 555-777-0000
Kai Jim | Svendson | 555-777-0002 |

This is header 3, followed by a numeric list and a bullet list:

1. Home Page
2. CSS Tutorial
· Tea
· Mild
· Coffee
· Milk


demo_style_maineed5.html

This is header 1

This is a paragraph

This is another paragraph

This is header 2, followed by a table

First Name | Name | Telephone | Fax
Hege | Svendson | 555-777-0001 | 555-777-0000
Kai Jim | Svendson | 555-777-0002 |

This is header 3, followed by a numeric list and a bullet list:

1. Home Page
2. CSS Tutorial
· Tea
· Mild
· Coffee
· Milk


demo_stylesheet_main8376.html

p,table,li,h1,h2,h3

{

font-family: verdana, arial, 'sans serif';

}

p, h1, h2, h3, table, li, hr

{

margin-left: 10pt;

}

p,li,th,td

{

font-size: 75%;

}

body

{

#ffffff;

}

h1,h2,h3,hr

{

color: firebrick;

}

a:link {COLOR: firebrick;}

a:visited {COLOR: firebrick;}

a:active {COLOR: navy;}

a:hover {COLOR: navy;}

a.content:link {COLOR: seashell;}

a.content:visited {COLOR: seashell;}

a.content:active {COLOR: seashell;}

a.content:hover {COLOR: papayawhip;}


demo_stylesheet_mainaadc.html

h1,h2,h3

{

font-family: arial, 'sans serif';

}

p,table,li,address

{

font-family: arial, 'sans serif';

margin-left: 15pt;

}

p,li,th,td

{

font-size: 80%;

}

th {background-color:#FAEBD7}

body

{

background-color: #ffffff;

}

h1,h2,h3,hr

{

color:saddlebrown;

}

a:link    {color:darkred}

a:visited {color:darkred}

a:active  {color:red}

a:hover   {color:red}


demo_stylesheet_mainc060.html

h1,h2,h3

{

font-family: "lucida calligraphy", arial, 'sans serif';

}

p,table,li,

{

font-family: "lucida calligraphy", arial, 'sans serif';

margin-left: 10pt;

}

body

{

background-color:#fffaf0;

}

p,li,th,td

{

font-size: 75%;

}

h1,h2,h3,hr {color:#483d8b;}

table {border-style:outset}

li {list-style: square;)


demo_stylesheet_mainc790.html

h1,h2,h3

{

font-family: verdana, arial, 'sans serif';

}

p,table,li

{

font-family: verdana, arial, 'sans serif';

margin-left: 10pt;

}

ul

{

list-style: disc;

}

ol

{

list-style: decimal;

}

p,li,th,td

{

font-size: 75%;

}

body

{

background-color: #ffffff;

}

h1,h2,h3,hr

{

color:black;

}

a:link    {color:black}

a:visited {color:black}

a:active  {color:mediumblue}

a:hover   {color:mediumblue}


demo_stylesheet_maineed5.html

h1,h2,h3

{

font-family: "comic sans ms", arial, 'sans serif';

}

p,table,li,address

{

font-family: "comic sans ms", arial, 'sans serif';

margin-left: 10pt;

}

p,li,th,td

{

font-size: 75%;

}

h1,h2,h3,hr

{

color:saddlebrown;

}

a:link     { color:saddlebrown }

a:visited  { color:saddlebrown }

a:active   { color:red }

a:hover    { color:red }

body

{

background-color: #EFE7D6;

}


ex1.html

This header is 36 pt

This header is blue

This paragraph has a left margin of 50 pixels


ex2.html

This is a header 1

You can see that the style sheet formats the text

This is a link


HTML code

The HTML file below links to an external style sheet with the <link> tag:

This header is 36 pt

This header is blue

This paragraph has a left margin of 50 pixels


HTML code

The HTML file below links to an external style sheet with the <link> tag:

This is a header 1

You can see that the style sheet formats the text

This is a link


DHTML Tutorial

DHTML Tutorial

dhtml

DHTML is the art of making HTML pages dynamic!

DHTML is a combination of technologies used to create dynamic and interactive Web sites.

To most people DHTML means a combination of HTML, Style Sheets and JavaScript.

Start learning DHTML now!

DHTML DOM Reference

At W3Schools you will find a complete DHTML DOM reference of all the DOM objects, along with their properties and methods.

DHTML DOM

DHTML Examples

Learn by 100 examples! With our editor, you can edit the source code, and click on a test button to view the result.

·
· DHTML DOM Examples


DHTML Cascading Style Sheet

DHTML CSS Positioning (CSS-P)

 Top Previous Next

CSS is used to style HTML elements.

Examples

Note: Most of the DHTML examples require IE 4.0+, Netscape 7+, or Opera 7+!

How to position an element relative to its normal position.

position:relative

How to position all headings relative to their normal position.

position:absolute

How to position an element using an absolute value.

(You can find more examples at the bottom of this page)

Which Attributes can be Used with CSS-P?

First, the element must specify the position attribute (relative or absolute).

Then we can set the following CSS-P attributes:

· left - the element's left position
· top - the element's top position
· visibility - specifies whether an element should be visible or hidden
· z-index - the element's stack order
· clip - element clipping
· overflow - how overflow contents are handled

Position

The CSS position property allows you to control the positioning of an element in a document.

position:relative

The position:relative property positions an element relative to its current position.

The following example positions the div element 10 pixels to the right from where it's normally positioned:

div

{

position:relative;

left:10;

}

position:absolute

The position:absolute property positions an element from the margins of the window.

The following example positions the div element 10 pixels to the right from the left-margin of the the window:

div

{

position:absolute;

left:10;

}

Visibility

The visibility property determines if an element is visible or not.

visibility:visible

The visibility:visible property makes the element visible.

h1

{

visibility:visible;

}

visibility:hidden

The visibility:hidden property makes the element invisible.

h1

{

visibility:hidden;

}

Z-index

The z-index property is used to place an element "behind" another element. Default z-index is 0. The higher number the higher priority. z-index: -1 has lower priority.

h1

{

z-index:1;

}

h2

{

z-index:2;

}

In the example above, if the h1 and h2 elements are positioned on top of each other, the h2 element will be positioned on top of the h1 element.

Filters

The filter property allows you to add more style effects to your text and images.

h1

{

width:100%;

filter:glow;

}

Note: Always specify the width of the element if you want to use the filter property.

The example above produces this output:

Header

Different Filters

Note: Some of the Filter properties will not work unless the background-color property is set to transparent!

Property | Argument | Description | Example
alpha | opacity finishopacity style startx starty finishx finishy | Allows you to set the opacity of the element | filter:alpha(opacity=20, finishopacity=100, style=1, startx=0, starty=0, finishx=140, finishy=270)
blur | add direction strength | Makes the element blur | filter:blur(add=true, direction=90, strength=6);
chroma | color | Makes the specified color transparent | filter:chroma(color=#ff0000)
fliph | none | Flips the element horizontally | filter:fliph;
flipv | none | Flips the element vertically | filter:flipv;
glow | color strength | Makes the element glow | filter:glow(color=#ff0000, strength=5);
gray | none | Renders the element in black and white | filter:gray;
invert | none | Renders the element in its reverse color and brightness values | filter:invert;
mask | color | Renders the element with the specified background color, and transparent foreground color | filter:mask(color=#ff0000);
shadow | color direction | Renders the element with a shadow | filter:shadow(color=#ff0000, direction=90);
dropshadow | color offx offy positive | Renders the element with a dropshadow | filter:dropshadow(color=#ff0000, offx=5, offy=5, positive=true);
wave | add freq lightstrength phase strength | Renders the element like a wave | filter:wave(add=true, freq=1, lightstrength=3, phase=0, strength=5)
xray | none | Renders the element in black and white with reverse color and brightness values | filter:xray;

Background

The background property allows you to select your own background.

background-attachment:scroll

The background scrolls along with the rest of the page.

background-attachment:fixed

The background does not move when the rest of the page scrolls.

More Examples

Visibility

How to make an element invisible. Do you want the element to show or not?

Z-index can be used to place an element "behind" another element, using Z-index priority.

Check that the elements now have changed their Z-index priority.

Cursors

Change the style of the mouse cursor with CSS.

Filters

Change the style of your headings using the filter property.

Filters on Images

The filter property can also be used on images, here are some filter examples which look good on images.

Watermark

A background picture that does not move when the rest of the page is scrolling.


DHTML Document Object Model

The Document Object Model gives us access to every element in a document.

Examples

Note: Most of the DHTML examples require IE 4.0+, Netscape 7+, or Opera 7+!

Element access

How to access an element and change the style.

How to access an image element and change the "src" attribute.

innerHTML

How to access and change the innerHTML of an element.

How to access an element?

The element must have an id attribute defined and a scripting language is needed. JavaScript is the most browser compatible scripting language, so we use JavaScript.

<html>

<body>

<h1 id="header">My header</h1>

<script type="text/javascript">

document.getElementById('header').style.color="red"

</script>

</body>

</html>

The script changes the color of the header element, and produces this output.

My header


DHTML DOM Reference

DHTML DOM Objects

With JavaScript you can access and manipulate all of the HTML DOM objects.

HTML DOM Objects

The HTML DOM is a W3C standard and it is an abbreviation for the Document Object Model for HTML.

The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate HTML documents.

All HTML elements, along with their containing text and attributes, can be accessed through the DOM. The contents can be modified or deleted, and new elements can be created.

The HTML DOM is platform and language independent. It can be used by any programming language like Java, JavaScript, and VBScript.

Follow the links below to learn more about how to access and manipulate each DOM object with JavaScript:

Object | Description
Anchor | Represents an HTML a element (a hyperlink)
 | Represents an HTML applet element. The applet element is used to place executable content on a page
Area | Represents an area of an image-map. An image-map is an image with clickable regions
Base | Represents an HTML base element
Basefont | Represents an HTML basefont element
Body | Represents the body of the document (the HTML body)
 | Represents a push button on an HTML form. For each instance of an HTML <input type="button"> tag on an HTML form, a Button object is created
Checkbox | Represents a checkbox on an HTML form. For each instance of an HTML <input type="checkbox"> tag on an HTML form, a Checkbox object is created
Document | Used to access all elements in a page
Event | Represents the state of an event, such as the element in which the event occurred, the state of the keyboard keys, the location of the mouse, and the state of the mouse buttons
FileUpload | For each instance of an HTML <input type="file"> tag on a form, a FileUpload object is created
Form | Forms are used to prompt users for input. Represents an HTML form element
Frame | Represents an HTML frame
Frameset | Represents an HTML frameset
Hidden | Represents a hidden field on an HTML form. For each instance of an HTML <input type="hidden"> tag on a form, a Hidden object is created
History | A predefined object which can be accessed through the history property of the Window object. This object consists of an array of URLs. These URLs are all the URLs the user has visited within a browser window
 | Represents an HTML inline-frame
Image | Represents an HTML img element
Link | Represents an HTML link element. The link element can only be used within the <head> tag
 | Contains information about the current URL
Meta | Represents an HTML meta element
Navigator | Contains information about the client browser
Option | Represents an option in a selection list on an HTML form. For each instance of an HTML <option> tag in a selection list on a form, an Option object is created
Password | Represents a password field on an HTML form. For each instance of an HTML <input type="password"> tag on a form, a Password object is created
Radio | Represents radio buttons on an HTML form. For each instance of an HTML <input type="radio"> tag on a form, a Radio object is created
Reset | Represents a reset button on an HTML form. For each instance of an HTML <input type="reset"> tag on a form, a Reset object is created
Screen | Automatically created by the JavaScript runtime engine and it contains information about the client's display screen
 | Represents a selection list on an HTML form. For each instance of an HTML <select> tag on a form, a Select object is created
Style | Represents an individual style statement. This object can be accessed from the document or from the elements to which that style is applied
Submit | Represents a submit button on an HTML form. For each instance of an HTML <input type="submit"> tag on a form, a Submit object is created
Table | Represents an HTML table element
 | Represents an HTML td element
TableHeader | Represents an HTML th element
TableRow | Represents an HTML tr element
Text | Represents a text field on an HTML form. For each instance of an HTML <input type="text"> tag on a form, a Text object is created
Textarea | Represents an HTML textarea element
Window | Corresponds to the browser window. A Window object is created automatically with every instance of a <body> or <frameset> tag


DHTML DOM Examples

Anchor Object

Change text, URL, and target attribute of a link

Using focus() and blur()

Document Object

Write text to the output

Write text with formatting to the output

Return the title of a document

Return the URL of a document

Return the referrer of a document

Return the domain name of the document's server

Use getElementById()

Use getElementsByName()

Return the number of anchors in a document

Count the number of forms in a document

Access an item in a collection

Count the number of images in a document

Event Object

Which mouse button was clicked?

What are the coordinates of the cursor?

What are the coordinates of the cursor?

Was the shift key pressed?

Which eventype occured?

Form and Form Input Objects

View and change the action URL of a form

View the method that is to be used when sending form data

Checkboxes in a form

Checkbox - If the user clicks in a checkbox, the content of the text fields are converted to uppercase.

Radio buttons

Submit a form

Form validation

Set focus to an input field when the page loads

Select the content of an input field

Another dropdown list

A dropdown menu

Jump to the next field when the current field's maxlength has been reached

Add accessKeys to form fields

Frame, Frameset, and IFrame Objects

Resizable and not resizable frames

Frames with and without scrollbars

Break out of a frame

Update two iframes

Image Object

Change the height and width of an image

Change the src of an image

Location Object

Send the client to a new location / URL

Break out of a frame

Anchors array - This example opens two windows. The first window contains four buttons and the second window defines four anchors from 0 to 3. When a button is clicked in the first window, the onclick event handler goes to the specified anchor in the second window.

Navigator Object

Detect the visitor's browser and browser version

More details about the visitor's browser

All details about the visitor's browser

Alert user, depending on browser

Option and Select Objects

Disable and enable a dropdown list

Get the id of the form that contains the dropdown list

Get the number of options in the dropdown list

Turn the dropdown list into a multiline list

Select multiple options in a dropdown list

Alert the selected option in a dropdown list

Alert the index of the selected option in a dropdown list

Change the text of the selected option

Screen Object

Detect details about the client's screen

Table, TableHeader, TableRow, TableData Objects

Change the width of a table border

Specify rules for a table

InnerHTML of a row

Delete rows in a table

Add rows to a table

Add cells to a table row

Align the cell content in a table row

Align the cell content in a single cell

Vertical align the cell content in a single cell

Change the content of a table cell

Change the colspan of a table row

Window Object

Display an alert box

Alert box with line-breaks

Display a confirm box

Open a new window when clicking on a button

Open a new window and control its appearance

Open multiple windows with one click

Send the client to a new location / URL

Break out of a frame

Scroll the window

Scroll the window to a specified position

Another simple timing

Timing event in an infinite loop

A clock created with a timing event

Create a pop-up


DHTML Events

DHTML Event Handlers

With an event handler you can do something with an element when an event occurs.

Examples

Note: Most of the DHTML examples require IE 4.0+, Netscape 7+, or Opera 7+!

onmouseover & onmouseout

How to change the color of an element when the cursor moves over and out of an element.

onclick

Turn on the light! How you can change an image when you click on it, and back to the original image when you click on it again.

onmousedown & onmouseup

This time the light is on only when you hold the mouse button down.

onload

Displays an alert box when the page has finished loading.

Event handlers

With an event handler you can do something with an element when an event occurs: when the user clicks an element, when the page loads, when a form is submitted, etc.

<h1 onclick="style.color='red'">Click on this text</h1>

The example above defines a header that turns red when a user clicks on it.

You can also add a script in the head section of the page and then call the function from the event handler:

<html>

<head>

<script type="text/javascript">

function changecolor()

{

document.getElementById('header').style.color="red"

}

</script>

</head>

<body>

<h1 id="header" onclick="changecolor()">

Click on this text</h1>

</body>

</html>

HTML 4.0 Event Handlers

Event | Occurs when...
onabort | a user aborts page loading
onblur | a user leaves an object
onchange | a user changes the value of an object
onclick | a user clicks on an object
ondblclick | a user double-clicks on an object
onfocus | a user makes an object active
onkeydown | a keyboard key is on its way down
onkeypress | a keyboard key is pressed
onkeyup | a keyboard key is released
onload | a page is finished loading. Note: In Netscape this event occurs during the loading of a page!
onmousedown | a user presses a mouse-button
onmousemove | a cursor moves on an object
onmouseover | a cursor moves over an object
onmouseout | a cursor moves off an object
onmouseup | a user releases a mouse-button
onreset | a user resets a form
onselect | a user selects content on a page
onsubmit | a user submits a form
onunload | a user closes a page


DHTML Examples

Note: Most of the examples require IE 4.0+, Netscape 7+, Mozilla, Firefox 1.0, or Opera 7+!

CSS

Position:relative

Position:absolute

Visibility

Z-index

Z-index Vice Versa

Cursors

Watermark

Change background color

CSS Filter Property (IE only)

Filters on Images

Filter:mask text

Filter light effect

Filter moving light effect

Glowing header

Drop shadow header

From black and white to color

Gradually show image

Negative image

XRay image

The mask filter

Glowing link

Drop shadow link

Wave link

Shadow link

Alpha image link

Gray image link

Events

onload

onunload

onchange

onreset

onselect

onblur

onfocus

onkeydown

onkeyup

onkeydown vs onkeyup

onmouseover & onmouseout

onclick

ondblclick

onmouseup

onmousemove

Disable right-click IE only

Text

Element access

Attribute change

innerHTML access

Change innerHTML

Change position

onmousemove

onload &

Tooltip

Typewrite message

Bigger text

Blinking header

Input Forms

Identical forms 2

Change background color of an input field

Change text color of an input field

Insert background image to an input field

Change background color of a radio button IE and Opera only

Insert background image to a radio button IE and Opera only

Select all check-boxes

Opera only

Insert background image to a checkbox IE and Opera only

Change text color of a button

Change background color of a drop-down list

Change background color of a textarea

Change text color of a textarea

Insert background image to a textarea

Images

Preload image

Change the size of an image

Change the source of an image

Change the size &

Change the background image

Moving image

Drag and drop the image IE and Opera only

Image viewer

A button with a background image IE and Opera only

Shaking image

Digital clock

Window

Shake the window

Links

Blinking link

Shaking link

Random Banner

Menus

Top navigation IE only

Left navigation IE and Opera only

Top drop down

Always-on-top

Inset borders IE and Opera only

Description image

Cursor image

IE only

Sliding Vertically IE and Opera only

Click sliding Vertically IE and Opera only

Sliding horizontal

Click sliding horizontal

Cursor

Cursor text

Cursor image

Cursor trail IE only

Page-enter Effects (IE only)

Square in

Square out

Circle out

Curtain up

Curtain down

Curtain right

Curtain left

Vertical blinds

Horizontal blinds

Boxy vertical blinds

Boxy horizontal blinds

Pulverized

Elevator close

Elevator open

Elevator horizontal close

Elevator horizontal open

Diagonal bottom right

Diagonal top left

Diagonal bottom left

Horizontal lines

Vertical lines

Random


Introduction to DHTML

What you should already know

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

· HTML
· CSS
· JavaScript

If you want to study these subjects first, find the tutorials on our Home Page.

DHTML is NOT a W3C Standard

DHTML stands for Dynamic HTML.

DHTML is not a standard defined by the World Wide Web Consortium (W3C). DHTML is a "marketing term" - used by Netscape and Microsoft to describe the new technologies the 4.x generation browsers would support.

DHTML is a combination of technologies used to create dynamic Web sites.

To most people DHTML means a combination of HTML 4.0, Style Sheets and JavaScript.

W3C once said: "Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated."

DHTML Technologies

With DHTML a Web developer can control how to display and position HTML elements in a browser window.

HTML 4.0

With HTML 4.0 all formatting can be moved out of the HTML document and into a separate style sheet. Because HTML 4.0 separates the presentation of the document from its structure, we have total control of presentation layout without messing up the document content.

Cascading Style Sheets (CSS)

With CSS we have a style and layout model for HTML documents.

CSS was a breakthrough in Web design because it allowed 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.

The Document Object Model (DOM)

DOM stands for the Document Object Model.

The HTML DOM is the Document Object Model for HTML.

The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate HTML objects.

"The W3C Document Object Model (DOM) is a platform and language neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document".

JavaScript

Allows you to write code to control all HTML elements.

DHTML Technologies in Netscape 4.x and Internet Explorer 4.x

Netscape 4.x

Cross-Browser DHTML

Internet Explorer 4.x
· JSS (JavaScript Style Sheets) (allows you to control how different HTML elements will be displayed)
· Layers (allows you to control element positioning and visibility)
· CSS1
· CSS2 (allows you to control how different HTML elements will be displayed)
· CSS Positioning (allows you to control element positioning and visibility)
· JavaScript
· Visual Filters (allow you to apply visual effects to text and graphics)
· Dynamic CSS (allows you to control element positioning and visibility)

Note: Problems with coding DHTML technologies WILL occur as long as each browser creates its own proprietary features and technology that is not supported by other browsers. A Web page may look great in one browser and horrible in another.


DHTML Summary

You Have Learned DHTML, Now What?

 Top Previous Next

DHTML Summary

This tutorial has taught you how to use DHTML to create more dynamic and interactive Web sites.

You have learned how to use the combination of HTML, CSS and JavaScript to animate HTML documents.

For more information on DHTML, please look at our DHTML examples and our .

Now You Know DHTML, What's Next?

The next step is to learn about the HTML DOM and ASP.

HTML DOM

The HTML DOM defines a standard way for accessing and manipulating HTML documents.

The HTML DOM is platform and language independent and can be used by any programming language like Java, JavaScript, and VBScript.

If you want to learn more about the DOM, please visit our HTML DOM tutorial.

ASP

While scripts in an HTML file are executed on the client (in the browser), scripts in an ASP file are executed on the server.

With ASP you can dynamically edit, change or add any content of a Web page, respond to 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.

Since ASP files are returned as plain HTML, they can be viewed in any browser.

If you want to learn more about ASP, please visit our .


demo_pageenter4.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="blendtrans(duration=3.0)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed


demo_pageenter400.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=0)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter401.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=1)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter402.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=2)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter403.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=3)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter404.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=4)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter405.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=5)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter406.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=6)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter407.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=7)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter408.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=8)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter409.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=9)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter410.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=10)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter411.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=11)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter412.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=12)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter413.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=13)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter414.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=14)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter415.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=15)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter416.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=16)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter417.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=17)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter418.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=18)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter419.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=19)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter420.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=20)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter421.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=21)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter422.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=22)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


demo_pageenter423.html

This page contains a "Page-Enter" meta tag

Insert the following code line into the <head> section, and your web page will achieve the same effect:

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=23)">
· The content attribute describes the effect
· The duration property describes how many seconds before the effect is completed
· The transition property describes which actual effect your document will have, from 0-23


Showit v1.4

This example demonstrates how to insert a background image to a textarea

Mouse over these images and the textarea will get a background image.

[TTextAreaFormControlObj]


Showit v1.4

This example demonstrates how to change the text color of a textarea.

Mouse over the three colored table cells, and the textarea will change color:

[TTextAreaFormControlObj]


Showit v1.4

This example demonstrates how to change the background color of a textarea.

Mouse over the three colored table cells, and the textarea will change color:

[TTextAreaFormControlObj]


Tryit Editor v1.4

[TTextAreaFormControlObj]

Edit the text above, and click on the button to see the result.


Tryit Editor v1.4

Your browser does not support inline frames or is currently configured not to display inline frames.

[TTextAreaFormControlObj]

Edit the text above, and click on the button to see the result.


tryit_view0261.html

This example demonstrates how to change the background color of an input field.

Mouse over the three colored table cells, and the input field will change background-color:

[TEditFormControlObj]


tryit_view02bc.html

Move the cursor over this page

w3schools


tryit_view0452.html

Mouse over these images, and the background will change


tryit_view04af.html

An alert box will display a message when you close this document!


tryit_view05db.html


tryit_view07f3.html

Explorer

Navigator

Yahoo!


tryit_view0dfd.html


tryit_view108d.html

This example demonstrates how to insert a background image to a textarea

Mouse over these images and the textarea will get a background image.

[TTextAreaFormControlObj]


tryit_view12d5.html

Move the cursor over this page

W

3

S


tryit_view15c3.html

W3Schools!


tryit_view1600.html

HOME

JavaScript

W3Schools

Explorer

Navigator

Browser

Alta Vista

Yahoo!

Search


tryit_view16cf.html

This example demonstrates how to change the text color of a textarea.

Mouse over the three colored table cells, and the textarea will change color:

[TTextAreaFormControlObj]


tryit_view1945.html

Enter your name: [TEditFormControlObj]


tryit_view1953.html

Move the circle


tryit_view198d.html

Mouse over this link


tryit_view1b8a.html


tryit_view1ccb.html

This example demonstrates how to change the text color of an option list.

Mouse over the three colored table cells, and the option list will change color:

[TComboFormControlObj]


tryit_view1e53.html

This is a Heading

Default z-index is 0. Z-index -1 has lower priority.


tryit_view216a.html


tryit_view218b.html

Click to turn on/off the light


tryit_view226a.html

First name: [TEditFormControlObj]

Last name: [TEditFormControlObj]

Address: [TEditFormControlObj]

E-mail: [TEditFormControlObj]

First name: [TEditFormControlObj]

Last name: [TEditFormControlObj]

Address: [TEditFormControlObj]

E-mail: [TEditFormControlObj]


tryit_view2378.html

Mouse over the image:


tryit_view2463.html

When you mouse over the image, a new image will appear.

The new image appears instantly, because your browser has already loaded the image.


tryit_view24fe.html

Choose which browser you prefer: [TComboFormControlObj]


tryit_view2538.html

Move the mouse over this page


tryit_view2874.html

Mouse over the image


tryit_view289f.html

Mouse over this text


tryit_view2c6d.html

bulbon


tryit_view2d4f.html


tryit_view2d87.html

Mouse over this link


tryit_view2dc9.html

Click to turn on the light


tryit_view303f.html


tryit_view3267.html

w3schools


tryit_view33ae.html

Heading A

This is a paragraph.

Heading B

This is a paragraph.

Heading C

This is a paragraph.

Heading D

This is a paragraph.


tryit_view37c6.html

Mouse over this header


tryit_view40b0.html

Menu

W3Schools

Microsoft

Scroll this page to see the "always-on-top" menu

Scroll this page to see the "always-on-top" menu

Scroll this page to see the "always-on-top" menu

Scroll this page to see the "always-on-top" menu

Scroll this page to see the "always-on-top" menu

Scroll this page to see the "always-on-top" menu

Scroll this page to see the "always-on-top" menu

Scroll this page to see the "always-on-top" menu

Scroll this page to see the "always-on-top" menu

Scroll this page to see the "always-on-top" menu

Scroll this page to see the "always-on-top" menu

Scroll this page to see the "always-on-top" menu


tryit_view4314.html

Mouse over these image-links:


tryit_view43e1.html


tryit_view45a4.html

Mouse over this header


tryit_view47fc.html

The image: "landscape.jpg" without the light effect:

The same image, with the light effect:


tryit_view48ee.html

Mouse over these links

W3Schools.com

AltaVista

Yahoo!

Hello


tryit_view4c73.html

The onkeyup event occurs when the a keyboard key is on it's way UP.

Write a message:

[TEditFormControlObj] [TEditFormControlObj]


tryit_view4f1c.html

Header one

Header two


tryit_view5044.html

Mouse over this link


tryit_view5072.html


tryit_view50bb.html

Move the mouse over the words to see the cursor change

Auto

Crosshair

Default

Pointer

Hand

Move

e-resize

ne-resize

nw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize

text

wait

help


tryit_view5329.html

Heading one

Heading two

Where is heading two?


tryit_view5544.html

Note: The original image was a smiley, but the script changes the source to a landscape image!


tryit_view55d4.html

Mouse over these links

AltaVista

Yahoo!

Hello


tryit_view5791.html

[TEditFormControlObj]


tryit_view5968.html

Hello Developers, this script makes a scrolling text.

Visit W3Schools.com


tryit_view5c00.html

My header

Note: It is the script that changes the style of the element!


tryit_view5cd3.html

A

JavaScript

Explorer

B

Navigator

AltaVista

C

Yahoo!


tryit_view5e90.html

First name: [TEditFormControlObj]

Last name: [TEditFormControlObj]

Address: [TEditFormControlObj]

E-mail: [TEditFormControlObj]

First name: [TEditFormControlObj]

Last name: [TEditFormControlObj]

Address: [TEditFormControlObj]

E-mail: [TEditFormControlObj]


tryit_view5eb0.html

Mouse over the image-link:


tryit_view5ec1.html

This example demonstrates how to dynamically insert the invert filter.

Mouse over the image


tryit_view5fff.html

Mouse over the image to see it shake


tryit_view64ff.html

Mouse over the squares and the background color will change!


tryit_view6582.html

landscape Mouse over the image


tryit_view69c6.html

Alpha:

Gray:

Invert:

Xray:

Mask:

The mask value makes the text transparent


tryit_view6b97.html

Mouse over the links to see their logos

Internet Explorer

Netscape Navigator


tryit_view6c04.html

M

E

N

U

ASP

JavaScript

DHTML

VBScript

Mouse over the MENU to show/hide the menu

Try changing the "speed" variable in the script, to change the menus's sliding speed


tryit_view6db7.html

Mouse over this text!


tryit_view6dc5.html

MENU

XHTML

CSS

XML

XSL

Click on the MENU to see the menu options.


tryit_view72b7.html


tryit_view745c.html

Blinking link


tryit_view7847.html

Enter your name: [TEditFormControlObj]


tryit_view7c61.html

This example demonstrates how to change the background color of a button.

Mouse over the three colored table cells, and the background color will change:


tryit_view7c90.html

Old header

Note that the original text was "Old header"!


tryit_view7d21.html

Mouse over this link


tryit_view7d52.html

This is a heading

With absolute positioning, an element can be placed anywhere on a page.

The LEFT position of the heading is 100 pixels from the left of the page. The TOP position is 150 pixels from the top of the page.


tryit_view7d77.html


tryit_view7e83.html

Mouse over the image


tryit_view7efb.html

This example demonstrates the xray filter

Mouse over the image below


tryit_view8361.html

Enter your name: [TEditFormControlObj]


tryit_view845d.html

Mouse over this link


tryit_view873b.html

Write a message:

[TEditFormControlObj]


tryit_view8a2c.html

This example demonstrates how to insert a background image to a button

Mouse over these images and the button will get a background image.


tryit_view8bac.html

Move the cursor over this page

Cursor Text


tryit_view8d56.html

Right-click on this page to trigger the event.

Note that this does not guarantee that someone won't view the page source or steal the images.


tryit_view8e39.html


tryit_view99e8.html

HOME

M

E

N

U

ASP

JavaScript

DHTML

VBScript

Click on the MENU to show/hide the menu

Try changing the "speed" variable in the script, to change the menus's sliding speed


tryit_view9a62.html


tryit_view9dd6.html


tryit_view9e1c.html


tryit_viewa031.html

This example demonstrates how to insert a background image to an input field

Mouse over these images and the input field will get a background image.

[TEditFormControlObj]


tryit_viewa3e7.html

Scroll the page and see what happens

Scroll the page and see what happens

Scroll the page and see what happens

Scroll the page and see what happens

Scroll the page and see what happens

Scroll the page and see what happens

Scroll the page and see what happens

Scroll the page and see what happens

Scroll the page and see what happens


tryit_viewa929.html

This example demonstrates how to change the background color of an option list.

Mouse over the three colored table cells, and the option list will change color:

[TComboFormControlObj]


tryit_viewa92b.html


tryit_viewaa5b.html

Mouse over this image landscape

This example demonstrates how to dynamically insert the mask filter.

Mouse over the image below


tryit_viewaabb.html


tryit_viewaada.html


tryit_viewac3d.html


tryit_viewae26.html

www.W3Schools.com

Move the circle

Can you read this text?

Pretty cool effect!

W3schools DHTML Section

Can you read this text?

Pretty cool effect!

W3schools DHTML Section


tryit_viewaef9.html


tryit_viewb08f.html

This example demonstrates how to change the text color of a button.

Mouse over the three colored table cells, and the text color will change:


tryit_viewb4ee.html

Glow

Blur

Flip H

Flip V

Shadow

Drop Shadow

Wave

NOTE: Filters don't work if the width property of the element is not set.


tryit_viewb631.html

[TComboFormControlObj]


tryit_viewb7f5.html

Mouse over this link


tryit_viewb897.html

[TCheckBoxFormControlObj]Apples

[TCheckBoxFormControlObj]Oranges

[TCheckBoxFormControlObj]Bananas

[TCheckBoxFormControlObj]Melons


tryit_viewbb8a.html

HTML

CSS

XML

XSL

Mouse over MENU to see the menu options


tryit_viewc39a.html

Mouse over these drinks:

Coffee

Milk


tryit_viewc56c.html

The onkeydown event occurs when the a keyboard key is on it's way DOWN.

Enter your name: [TEditFormControlObj] [TEditFormControlObj]


tryit_viewca03.html


tryit_viewce26.html

smiley


tryit_viewd248.html

Mouse over these buttons


tryit_viewd336.html

Blinking header


tryit_viewd52b.html

Mouse over the image-link:


tryit_viewd6e7.html

This example demonstrates how to change the background color of a radio button.

Mouse over the three colored table cells, and the background color will change:

Mouse over the colors [TRadioButtonFormControlObj]


tryit_viewdab3.html

Double click the "W3Schools.com"

W3Schools.com


tryit_viewdadd.html

This example demonstrates how to change the background color of a textarea.

Mouse over the three colored table cells, and the textarea will change color:

[TTextAreaFormControlObj]


tryit_viewdb39.html

This example demonstrates how to insert a background image to a checkbox

Mouse over these images and the checkbox will get a background image.

Mouse over the images [TCheckBoxFormControlObj]


tryit_viewdd1d.html


tryit_viewdf06.html

Mouse over the links to see their descriptions

W3Schools.com

Internet Explorer

Netscape Navigator


tryit_viewe076.html

The onkeypress event is triggered when the user presses a button on the keyboard.

To trigger the onkeypress event, make sure that this window has focus.


tryit_viewe0a2.html

The onblur event occurs when an element loses focus. Try to click or write in the input field below, then click elsewhere in the document so the input field loses focus.

Enter your name: [TEditFormControlObj]


tryit_viewe0f7.html

This example demonstrates how to insert a background image to a radio button

Mouse over these images and the radio button will get a background image.

Mouse over the images [TRadioButtonFormControlObj]


tryit_viewe379.html

Normal Heading

Heading +20

Heading -20

Relative positioning moves an element relative to its original position.

"left:20" adds 20 pixels to the element's LEFT position.

"left:-20" subtracts 20 pixels from the element's LEFT position.


tryit_viewe472.html

Drop down menu

Tutorials

HTML

XHTML

CSS

XML

XSL

JavaScript

DHTML

ASP

ADO

Validation

Validate CSS

Validate XML

Validate WML

Mouse over these options to see the drop down menus


tryit_viewe57a.html

This example demonstrates how to change the text color of an input field.

Mouse over the three colored table cells, and the text will change color:

[TEditFormControlObj]


tryit_viewe62b.html

Refresh this page to see the banner change


tryit_viewe67b.html


tryit_viewe78b.html

Drag and drop the image


tryit_viewe895.html

Mouse over this text


tryit_viewe9e8.html

This is a Heading

Default z-index is 0. Z-index 1 has higher priority.


tryit_vieweac3.html

Click in the document. An alert box will alert the x and y coordinates of the cursor.


tryit_vieweecd.html


tryit_viewf167.html

landscape


tryit_viewf237.html


tryit_viewf642.html


tryit_viewf7b3.html

This example demonstrates how to change the background color of a checkbox.

Mouse over the three colored table cells, and the background color will change:

Mouse over the colors [TCheckBoxFormControlObj]


tryit_viewfb2e.html

Mouse over the image:


tryit_viewff98.html

Select the content in the input field

[TEditFormControlObj]


XML DOM Introduction

The XML Document Object Model defines a standard way for accessing and manipulating XML documents.

What You Should Already Know

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

· HTML / XHTML
· JavaScript
· XML

If you want to study these subjects first, find the tutorials on our Home page.

What is the DOM?

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

The W3C DOM provides a standard set of objects for HTML and XML documents, and a standard interface for accessing and manipulating them.

The W3C DOM is separated into different parts (Core, XML, and HTML) and different levels (DOM Level 1/2/3):

· Core DOM - defines a standard set of objects for any structured document
· XML DOM - defines a standard set of objects for XML documents
· HTML DOM - defines a standard set of objects for HTML documents

You can read more about the W3C DOM specifications / levels in our W3C tutorial.

What is the XML DOM?

· The XML DOM is the Document Object Model for XML
· The XML DOM is platform- and language-independent
· The XML DOM defines a standard set of objects for XML
· The XML DOM defines a standard way to access XML documents
· The XML DOM defines a standard way to manipulate XML documents
· The XML DOM is a W3C standard

The DOM views XML documents as a tree-structure. All elements; their containing text and their attributes, can be accessed through the DOM tree. Their contents can be modified or deleted, and new elements can be created. The elements, their text, and their attributes are all known as nodes.


XML DOM - Add Nodes

Examples

In the examples below, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Add a node to the end of a node list

This example uses createElement() to create a new element, and appendChild() to add it to a node list.

Add a node before a specific node

This example uses createElement() to create a new element, and insertBefore() to insert it before a specific node.

Set a new attribute and attribute value

This example uses the setAttribute() method to set a new attribute/attribute value.

Insert data into a text node

This example uses insertData() to insert data into a text node.

Add a Node to The End of a Node List

The appendChild() method is used to add a node after the last child of a specific node.

This method is useful when the position of the added node is not important.

The following code fragment creates an element (<edition>), and adds it after the last child of each <book> element:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

var newel,newtext

for (i=0;i<x.length;i++)

{

newel=xmlDoc.createElement('edition');

newtext=xmlDoc.createTextNode('First');

newel.appendChild(newtext);

x[i].appendChild(newel);

}

Insert a Node Before a Specific Node

The insertBefore() method is used to insert a node before a specific node.

This method is useful when the position of the added node is important.

The following code fragment creates a new <book> element and inserts it before the last <book> element:

//check if last child node is an element node

function get_lastchild(n)

{

var x=n.lastChild;

while (x.nodeType!=1)

{

x=x.previousSibling;

}

return x;

}

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.documentElement;

var newNode=xmlDoc.createElement("book");

var newTitle=xmlDoc.createElement("title");

var newText=xmlDoc.createTextNode("A Notebook");

newTitle.appendChild(newText);

newNode.appendChild(newTitle);

x.insertBefore(newNode,get_lastchild(x));

Note: Internet Explorer will skip white-space text nodes that are generated between nodes (e.g. new-line characters), while Mozilla will not. So, in the example above, the get_lastchild() function checks the node type of the last child node of the parameter.

Element nodes has a nodeType of 1, so if not the last child of the node in the parameter is an element node, it moves to the previous node, and checks if this node is an element node. This continues until the last child node (which must be an element node) is found. This way, the result will be correct in both Internet Explorer and Mozilla.

Set a New Attribute and Attribute Value

The setAttribute() method can be used to change the value of an existing attribute, or to create a new attribute/attribute value for an element.

The following code fragment adds a new attribute/attribute value to each <book> element:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book");

for(i=0;i<x.length;i++)

{

x.item(i).setAttribute("edition","FIRST");

}

Note: If the "edition" attribute already exists, the setAttribute() method will overwrite the attribute's value.

Insert Data Into a Text Node

The insertData() method is used to insert data into a text node.

The insertData() method has two parameters:

· offset - Where to begin inserting characters. Offset value starts at zero
· string - The string to insert

The following code fragment will add "Easy" to the text node of the first <title> element of the loaded XML:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];

x.insertData(0,"Easy ");


XML DOM - Attr object

XML DOM - The Attr Object

The Attr object represents an attribute of an Element object.

The Attr object

The Attr object represents an attribute of an Element object. The allowable values for attributes are usually defined in a DTD.

Because the Attr object is also a Node, it inherits the Node object's properties and methods. However, an attribute does not have a parent node and is not considered to be a child node of an element, and will return null for many of the Node properties.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard)

Attr Object Properties

Property | Description | IE | F | O | W3C
baseURI | Returns the absolute base URI of the attribute | No | 1 | No | Yes
isId | Returns true if the attribute is known to be of type ID, otherwise it returns false | No | No | No | Yes
 | Returns the local part of the name of the attribute | No | 1 | 9 | Yes
name | Returns the name of the attribute | 5 | 1 | 9 | Yes
namespaceURI | Returns the namespace URI of the attribute | No | 1 | 9 | Yes
nodeName | Returns the name of the node, depending on its type | 5 | 1 | 9 | Yes
nodeType | Returns the type of the node | 5 | 1 | 9 | Yes
nodeValue | Sets or returns the value of the node, depending on its type | 5 | 1 | 9 | Yes
ownerDocument | Returns the root element (document object) for an attribute | 5 | 1 | 9 | Yes
ownerElement | Returns the element node the attribute is attached to | No | 1 | 9 | Yes
prefix | Sets or returns the namespace prefix of the attribute | No | 1 | 9 | Yes
schemaTypeInfo | Returns the type information associated with this attribute | No | No | No | Yes
specified | Returns true if the attribute value is set in the document, and false if it's a default value in a DTD/Schema. | 5 | 1 | 9 | Yes
textContent | Sets or returns the textual content of an attribute | No | 1 | 9 | Yes
text | Returns the text of the attribute. IE-only property | 5 | No | No | No
value | Sets or returns the value of the attribute | 5 | 1 | 9 | Yes
xml | Returns the XML of the attribute. IE-only property | 5 | No | No | No


XML DOM - CDATASection object

XML DOM - The CDATASection Object

The CDATASection object represents a CDATA section in a document.

Examples

In the examples below, we will use the XML file books.xml, and the JavaScript function .

createCDATASection() - Create a CDATA section node

The CDATASection object

The CDATASection object represents a CDATA section in a document.

A CDATA section contains text that will NOT be parsed by a parser. Tags inside a CDATA section will NOT be treated as markup and entities will not be expanded. The primary purpose is for including material such as XML fragments, without needing to escape all the delimiters.

The only delimiter that is recognized in a CDATA section is "]]>" - which indicates the end of the CDATA section. CDATA sections cannot be nested.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard)

CDATASection Object Properties

Property | Description | IE | F | O | W3C
data | Sets or returns the text of this node | 6 | 1 | No | Yes
length | Returns the length of the CDATA section | 6 | 1 | No | Yes

CDATASection Object Methods

Method | Description | IE | F | O | W3C
appendData() | Appends data to the node | 6 | 1 | No | Yes
deleteData() | Deletes data from the node | 6 | 1 | No | Yes
insertData() | Inserts data into the node | 6 | 1 | No | Yes
replaceData() | Replaces data in the node | 6 | 1 | No | Yes
splitText() | Splits the CDATA node into two nodes | 6 | 1 | No |
substringData() | Extracts data from the node | 6 | 1 | No | Yes


XML DOM - Clone Nodes

Examples

In the examples below, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Copy a node

This example uses cloneNode() to copy a node and append it to a node list.

Copy a Node

The cloneNode() method creates a copy of a specified node.

The cloneNode() method has a parameter (true or false). This parameter indicates if the cloned node should include all attributes and child nodes of the original node.

The following code fragment copies the first <book> node and then adds the copy to the end of the node list:

xmlDoc=loadXMLDoc("books.xml");

var oldNode=xmlDoc.getElementsByTagName('book')[0];

var newNode=oldNode.cloneNode(true);

xmlDoc.documentElement.appendChild(newNode);

//Output all titles

var y=xmlDoc.getElementsByTagName("title");

for (i=0;i<y.length;i++)

{

document.write(y[i].childNodes[0].nodeValue);

document.write("<br />");

}

Output:

Everyday Italian

Harry Potter

XQuery Kick Start

Learning XML

Everyday Italian


XML DOM - Comment object

XML DOM - The Comment Object

The Comment object represents the content of comment nodes in a document.

Examples

In the examples below, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

createComment() - Create a comment node

The Comment object

The Comment object represents the content of comment nodes in a document.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard)

Comment Object Properties

Property | Description | IE | F | O | W3C
 | Sets or returns the text of this node | 6 | 1 | 9 | Yes
length | Returns the length of the text of this node | 6 | 1 | 9 | Yes

Comment Object Methods

Method | Description | IE | F | O | W3C
appendData() | Appends data to the node | 6 | 1 | 9 | Yes
deleteData() | Deletes data from the node | 6 | 1 | 9 | Yes
insertData() | Inserts data into the node | 6 | 1 | 9 | Yes
replaceData() | Replaces data in the node | 6 | 1 | 9 | Yes
substringData() | Extracts data from the node | 6 | 1 | 9 | Yes


XML DOM - Create Nodes

Examples

In the examples below, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Create an element node

This example uses createElement() to create a new element node, and appendChild() to add it to a node list.

Create an attribute node

This example uses createAttribute() to create a new attribute node, and setAttributeNode() to insert it to an element.

This example uses createTextNode() to create a new text node, and appendChild() to add it to a node list.

Create a CDATA section node

This example uses createCDATAsection() to create a CDATA section node, and appendChild() to add it to a node list.

Create a comment node

This example uses createComment() to create a comment node, and appendChild() to add it to a node list.

Create an Element

The createElement() method creates a new element node.

The following code fragment creates an element (<edition>), and adds it after the last child of each <book> element:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

var newel

for (i=0;i<x.length;i++)

{

newel=xmlDoc.createElement('edition');

x[i].appendChild(newel);

}

Create an Attribute

The createAttribute() creates a new attribute node.

The following code fragment creates an "edition" attribute and adds it to all <book> elements:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

var newatt;

for (i=0;i<x.length;i++)

{

newatt=xmlDoc.createAttribute("edition");

newatt.value="first";

x[i].setAttributeNode(newatt);

}

Create a Text Node

The createTextNode() method creates a new text node.

The following code fragment creates an element (<edition>), with a text node ('First') in it, and adds it after the last child of each <book> element:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

var newel,newtext

for (i=0;i<x.length;i++)

{

newel=xmlDoc.createElement('edition');

newtext=xmlDoc.createTextNode('First');

newel.appendChild(newtext);

x[i].appendChild(newel);

}

Create a CDATA Section Node

The createCDATASection() method creates a new CDATA section node.

The following code fragment creates a CDATA section, and adds it after the last child of each <book> element:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

var newCDATA,newtext;

newtext="Special Offer & Book Sale";

for (i=0;i<x.length;i++)

{

newCDATA=xmlDoc.createCDATASection(newtext);

x[i].appendChild(newCDATA);

}

Create a Comment Node

The createComment() method creates a new comment node.

The following code fragment creates a comment node, and adds it after the last child of each <book> element:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

var newComment,newtext;

newtext="Revised September 2006";

for (i=0;i<x.length;i++)

{

newComment=xmlDoc.createComment(newtext);

x[i].appendChild(newComment);

}


XML DOM - Document object

XML DOM - The Document Object

The Document object represents the entire XML document.

The Document object

The Document object is the root of a document tree, and gives us the primary access to the document's data.

Since element nodes, text nodes, comments, processing instructions, etc. cannot exist outside the document, the Document object also contains methods to create these objects. The Node objects have a ownerDocument property which associates them with the Document where they were created.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard)

Document Object Properties

Property | Description | IE | F | O | W3C
 | Specifies whether downloading of an XML file should be handled asynchronously or not | 5 | 1.5 | 9 | No
childNodes | Returns a NodeList of child nodes for the document | 5 | 1 | 9 | Yes
doctype | Returns the Document Type Declaration associated with the document | 6 | 1 | 9 | Yes
documentElement | Returns the root node of the document | 5 | 1 | 9 | Yes
documentURI | Sets or returns the location of the document | No | 1 | 9 | Yes
domConfig | Returns the configuration used when normalizeDocument() is invoked |  |  | No | Yes
firstChild | Returns the first child node of the document | 5 | 1 | 9 | Yes
implementation | Returns the DOMImplementation object that handles this document | No | 1 | 9 | Yes
inputEncoding | Returns the encoding used for the document (when parsing) | No | 1 | No | Yes
lastChild | Returns the last child node of the document | 5 | 1 | 9 | Yes
nodeName | Returns the name of a node (depending on its type) | 5 | 1 | 9 | Yes
nodeType | Returns the node type of a node | 5 | 1 | 9 | Yes
 | Sets or returns the value of a node (depending on its type) | 5 | 1 | 9 | Yes
strictErrorChecking | Sets or returns whether error-checking is enforced or not | No | 1 | No | Yes
text | Returns the text of a node and its descendants. IE-only property | 5 | No | No | No
xml | Returns the XML of a node and its descendants. IE-only property | 5 | No | No | No
xmlEncoding | Returns the XML encoding of the document | No | 1 | No | Yes
xmlStandalone | Sets or returns whether the document is standalone | No | 1 | No | Yes
xmlVersion | Sets or returns the XML version of the document | No | 1 | No | Yes

Document Object Methods

Method | Description | IE | F | O | W3C
adoptNode(sourcenode) | Adopts a node from another document to this document, and returns the adopted node |  |  | No | Yes
createAttribute(name) | Creates an attribute node with the specified name, and returns the new Attr object | 6 | 1 | 9 | Yes
createAttributeNS(uri,name) | Creates an attribute node with the specified name and namespace, and returns the new Attr object |  |  | 9 | Yes
createCDATASection() | Creates a CDATA section node | 5 | 1 | 9 | Yes
createComment() | Creates a comment node | 6 | 1 | 9 | Yes
createDocumentFragment() | Creates an empty DocumentFragment object, and returns it | 5 | 1 | 9 | Yes
createElement() | Creates an element node | 5 | 1 | 9 | Yes
createElementNS() | Creates an element node with a specified namespace | No | 1 | 9 | Yes
createEntityReference(name) | Creates an EntityReference object, and returns it | 5 |  | No | Yes
createProcessingInstruction(target,data) | Creates a ProcessingInstruction object, and returns it | 5 |  | 9 | Yes
createTextNode() | Creates a text node | 5 | 1 | 9 | Yes
getElementById(id) | Returns the element that has an ID attribute with the given value. If no such element exists, it returns null | 5 | 1 | 9 | Yes
 | Returns a NodeList of all elements with a specified name | 5 | 1 | 9 | Yes
getElementsByTagNameNS() | Returns a NodeList of all elements with a specified name and namespace | No | 1 | 9 | Yes
importNode(nodetoimport,deep) | Imports a node from another document to this document. This method creates a new copy of the source node. If the deep parameter is set to true, it imports all children of the specified node. If set to false, it imports only the node itself. This method returns the imported node |  |  | 9 | Yes
normalizeDocument() |  |  |  | No | Yes
renameNode() | Renames an element or attribute node |  |  | No | Yes


XML DOM - DocumentImplementation object

XML DOM - The DocumentImplementation Object

The DOMImplementation object performs operations that are independent of any particular instance of the document object model.

The DocumentImplementation object

The DOMImplementation object performs operations that are independent of any particular instance of the document object model.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard)

DocumentImplementation Object Methods

Method | Description | IE | F | O | W3C
createDocument(nsURI, name, doctype) | Creates a new DOM Document object of the specified doctype |  |  |  | Yes
createDocumentType(name, pubId, systemId) | Creates an empty DocumentType node |  |  |  | Yes
getFeature(feature, version) | Returns an object which implements the APIs of the specified feature and version, if the is any |  |  |  | Yes
hasFeature(feature, version) | Checks whether the DOM implementation implements a specific feature and version |  |  |  | Yes


XML DOM - DocumentType object

XML DOM - The DocumentType Object

The DocumentType object provides an interface to the entities defined for an XML document.

The DocumentType object

Each document has a DOCTYPE attribute that whose value is either null or a DocumentType object.

The DocumentType object provides an interface to the entities defined for an XML document.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard)

DocumentType Object Properties

Property | Description | IE | F | O | W3C
 | Returns a NamedNodeMap containing the entities declared in the DTD | 6 | No | 9 | Yes
internalSubset | Returns the internal DTD as a string | No | No | No | Yes
name | Returns the name of the DTD | 6 | 1 | 9 | Yes
notations | Returns a NamedNodeMap containing the notations declared in the DTD | 6 | No | 9 | Yes
systemId | Returns the system identifier of the external DTD | No | 1 | 9 | Yes


XML DOM - Element object

XML DOM - The Element Object

The Element object represents an element in an XML document.

The Element object

The Element object represents an element in an XML document. Elements may contain attributes, other elements, or text. If an element contains text, the text is represented in a text-node.

IMPORTANT! Text is always stored in text nodes. A common error in DOM processing is to navigate to an element node and expect it to contain the text. However, even the simplest element node has a text node under it. For example, in <year>2005</year>, there is an element node (year), and a text node under it, which contains the text (2005).

Because the Element object is also a Node, it inherits the Node object's properties and methods.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard)

Element Object Properties

Property | Description | IE | F | O | W3C
attributes | Returns a NamedNodeMap of attributes for the element | 5 | 1 | 9 | Yes
baseURI | Returns the absolute base URI of the element | No | 1 | No | Yes
 | Returns a NodeList of child nodes for the element | 5 | 1 | 9 | Yes
firstChild | Returns the first child of the element | 5 | 1 | 9 | Yes
lastChild | Returns the last child of the element | 5 | 1 | 9 | Yes
localName | Returns the local part of the name of the element | No | 1 | 9 | Yes
namespaceURI | Returns the namespace URI of the element | No | 1 | 9 | Yes
nextSibling | Returns the node immediately following the element | 5 | 1 | 9 | Yes
nodeName | Returns the name of the node, depending on its type | 5 | 1 | 9 | Yes
nodeType | Returns the type of the node | 5 | 1 | 9 | Yes
ownerDocument | Returns the root element (document object) for an element | 5 | 1 | 9 | Yes
parentNode | Returns the parent node of the element | 5 | 1 | 9 | Yes
prefix | Sets or returns the namespace prefix of the element | No | 1 | 9 | Yes
previousSibling | Returns the node immediately before the element | 5 | 1 | 9 | Yes
schemaTypeInfo | Returns the type information associated with the element |  |  | No | Yes
tagName | Returns the name of the element | 5 | 1 | 9 | Yes
textContent | Sets or returns the text content of the element and its descendants | No | 1 | No | Yes
text | Returns the text of the node and its descendants. IE-only property | 5 | No | No | No
xml | Returns the XML of the node and its descendants. IE-only property | 5 | No | No | No

Element Object Methods

Method | Description | IE | F | O | W3C
 | Adds a new child node to the end of the list of children of the node | 5 | 1 | 9 | Yes
 | Clones a node | 5 | 1 | 9 | Yes
compareDocumentPosition() | Compares the document position of two nodes | No | 1 | No | Yes
getAttribute() | Returns the value of an attribute | 5 | 1 | 9 | Yes
getAttributeNS() | Returns the value of an attribute (with a namespace) | No | 1 | 9 | Yes
getAttributeNode() | Returns an attribute node as an Attribute object | 5 | 1 | 9 | Yes
 | Returns an attribute node (with a namespace) as an Attribute object | No |  | 9 | Yes
getElementsByTagName() | Returns a NodeList of matching element nodes, and their children | 5 | 1 | 9 | Yes
getElementsByTagNameNS() | Returns a NodeList of matching element nodes (with a namespace), and their children | No | 1 | 9 | Yes
getFeature(feature,version) | Returns a DOM object which implements the specialized APIs of the specified feature and version |  |  | No | Yes
getUserData(key) | Returns the object associated to a key on a this node. The object must first have been set to this node by calling setUserData with the same key |  |  | No | Yes
 | Returns whether an element has any attributes matching a specified name | 5 | 1 | 9 | Yes
hasAttributeNS() | Returns whether an element has any attributes matching a specified name and namespace | No | 1 | 9 | Yes
hasAttributes() | Returns whether the element has any attributes | 5 | 1 | 9 | Yes
hasChildNodes() | Returns whether the element has any child nodes | 5 | 1 | 9 | Yes
insertBefore() | Inserts a new child node before an existing child node | 5 | 1 | 9 | Yes
isDefaultNamespace(URI) | Returns whether the specified namespaceURI is the default |  |  | No | Yes
isEqualNode() | Checks if two nodes are equal | No | No | No | Yes
isSameNode() | Checks if two nodes are the same node | No | 1 | No | Yes
isSupported(feature,version) | Returns whether a specified feature is supported on the element |  |  | 9 | Yes
lookupNamespaceURI() | Returns the namespace URI matching a specified prefix | No | 1 | No | Yes
lookupPrefix() | Returns the prefix matching a specified namespace URI | No | 1 | No | Yes
normalize() | Puts all text nodes underneath this element (including attributes) into a "normal" form where only structure (e.g., elements, comments, processing instructions, CDATA sections, and entity references) separates Text nodes, i.e., there are neither adjacent Text nodes nor empty Text nodes | 5 | 1 | 9 | Yes
 | Removes a specified attribute | 5 | 1 | 9 | Yes
removeAttributeNS() | Removes a specified attribute (with a namespace) | No | 1 | 9 | Yes
removeAttributeNode() | Removes a specified attribute node | 5 | 1 | 9 | Yes
 | Removes a child node | 5 | 1 | 9 | Yes
replaceChild() | Replaces a child node | 5 | 1 | 9 | Yes
setUserData(key,data,handler) | Associates an object to a key on the element |  |  | No | Yes
setAttribute() | Adds a new attribute | 5 | 1 | 9 | Yes
setAttributeNS() | Adds a new attribute (with a namespace) |  | 1 | 9 | Yes
setAttributeNode() | Adds a new attribute node | 5 | 1 | 9 | Yes
setAttributeNodeNS(attrnode) | Adds a new attribute node (with a namespace) |  |  | 9 | Yes
setIdAttribute(name,isId) | If the isId property of the Attribute object is true, this method declares the specified attribute to be a user-determined ID attribute |  |  | No | Yes
setIdAttributeNS(uri,name,isId) | If the isId property of the Attribute object is true, this method declares the specified attribute (with a namespace) to be a user-determined ID attribute |  |  | No | Yes
setIdAttributeNode(idAttr,isId) | If the isId property of the Attribute object is true, this method declares the specified attribute to be a user-determined ID attribute |  |  | No | Yes


XML DOM - Get Nodes

Examples

In the examples below, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Get an element's value

This example uses the getElementsByTagname() method to get the values of all "title" elements in "books.xml"

Get an attribute's value

This example uses the getAttribute() method to get the values of all "category" attributes in "books.xml".

Get an item's value

This example uses the getNamedItem() method to get the values of all "category" attributes in "books.xml".

Get an Element's Value

The getElementsByTagname() method returns a nodelist that contains all elements with the specified tag name in the same order as they appear in the source document.

The following code fragment prints the values of all "title" elements in "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('title');

for (i=0;i<x.length;i++)

{

document.write(x[i].childNodes[0].nodeValue)

document.write("<br />")

}

Output:

Everyday Italian

Harry Potter

XQuery Kick Start

Learning XML

Get an Attribute's Value

The getAttribute() method can be used to display the value of an attribute.

The following code fragment prints the values of all "category" attributes in "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

for (i=0;i<x.length;i++)

{

document.write(x[i].getAttribute('category'));

document.write("<br />");

}

Output:

COOKING

CHILDREN

WEB

WEB

Get an Item's Value

The getNamedItem() method can be used to retrieve a specified node.

The following code fragment shows how to print the value of the "category" attribute in each <book> element":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book");

for(i=0;i<x.length;i++)

{

var attlist=x.item(i).attributes;

var att=attlist.getNamedItem("category");

document.write(att.value + "<br />")

}

Output:

COOKING

CHILDREN

WEB

WEB


XML DOM - HttpRequest object

The HttpRequest Object

The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 9, and Netscape 7.

What is an HTTP Request?

With an HTTP request, a web page can make a request to, and get a response from a web server - without reloading the page. The user will stay on the same page, and he or she will not notice that scripts might request pages, or send data to a server in the background.

By using the XMLHttpRequest object, a web developer can change a page with data from the server after the page has loaded.

Google Suggest is using the XMLHttpRequest object to create a very dynamic web interface: When you start typing in Google's search box, a JavaScript sends the letters off to a server and the server returns a list of suggestions.

Is the XMLHttpRequest Object a W3C Standard?

The XMLHttpRequest object is a JavaScript object, and is not specified in any W3C recommendation.

However, the W3C DOM Level 3 "Load and Save" specification contains some similar functionality, but these are not implemented in any browsers yet. So, at the moment, if you need to send an HTTP request from a browser, you will have to use the XMLHttpRequest object.

Creating an XMLHttpRequest Object

For Mozilla, Firefox, Safari, Opera, and Netscape:

var xmlhttp=new XMLHttpRequest()

For Internet Explorer:

var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

Example

<script type="text/javascript">

var xmlhttp

function loadXMLDoc(url)

{

xmlhttp=null

// code for Mozilla, etc.

if (window.XMLHttpRequest)

{

xmlhttp=new XMLHttpRequest()

}

// code for IE

else if (window.ActiveXObject)

{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

}

if (xmlhttp!=null)

{

xmlhttp.onreadystatechange=state_Change

xmlhttp.open("GET",url,true)

xmlhttp.send(null)

}

else

{

alert("Your browser does not support XMLHTTP.")

}

}

function state_Change()

{

// if xmlhttp shows "loaded"

if (xmlhttp.readyState==4)

{

// if "OK"

if (xmlhttp.status==200)

  {

  // ...some code here...

  }

else

  {

  alert("Problem retrieving XML data")

  }

}

}

</script>

Try it yourself using JavaScript

Note: An important property in the example above is the onreadystatechange property. This property is an event handler which is triggered each time the state of the request changes. The states run from 0 (uninitialized) to 4 (complete). By having the function xmlhttpChange() check for the state changing, we can tell when the process is complete and continue only if it has been successful.

Why are we Using async in our Examples?

Most of the examples here use the async mode (the third parameter of open() set to true).

The async parameter specifies whether the request should be handled asynchronously or not. True means that script continues to run after the send() method, without waiting for a response from the server. false means that the script waits for a response before continuing script processing. By setting this parameter to false, you run the risk of having your script hang if there is a network or server problem, or if the request is long (the UI locks while the request is being made) a user may even see the "Not Responding" message. It is safer to send asynchronously and design your code around the onreadystatechange event!

More Examples

textfile into a div element with XML HTTP (JavaScript)

Make a HEAD request with XML HTTP (JavaScript)

Make a specified HEAD request with XML HTTP (JavaScript)

XML / ASP

You can also open and send an XML document to an ASP page on the server, analyze the request, and send back the result.

<html>

<body>

<script type="text/javascript">

var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")

xmlHttp.open("GET", "note.xml", false)

xmlHttp.send()

xmlDoc=xmlHttp.responseText

xmlHttp.open("POST", "demo_dom_http.asp", false)

xmlHttp.send(xmlDoc)

document.write(xmlHttp.responseText)

</script>

</body>

</html>

The ASP page, written in VBScript:

<%

set xmldoc = Server.CreateObject("Microsoft.XMLDOM")

xmldoc.async=false

xmldoc.load(request)

for each x in xmldoc.documentElement.childNodes

 if x.NodeName = "to" then name=x.text

next

response.write(name)

%>

You send the result back to the client using the response.write property.

For Internet Explorer 5.0+: Try it yourself

The XMLHttpRequest Object Reference

Methods

Method

Description

abort()

Cancels the current request

getAllResponseHeaders()

Returns the complete set of http headers as a string

getResponseHeader("headername")

Returns the value of the specified http header

open("method","URL",async,"uname","pswd")

Specifies the method, URL, and other optional attributes of a request

The method parameter can have a value of "GET", "POST", or "PUT" (use "GET" when requesting data and use "POST" when sending data (especially if the length of the data is greater than 512 bytes.

The URL parameter may be either a relative or complete URL.

The async parameter specifies whether the request should be handled asynchronously or not. true means that script processing carries on after the send() method, without waiting for a response. false means that the script waits for a response before continuing script processing

send(content)

Sends the request

setRequestHeader("label","value")

Adds a label/value pair to the http header to be sent

Properties

Property | Description
onreadystatechange | An event handler for an event that fires at every state change
readyState | Returns the state of the object: 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete
responseText | Returns the response as a string
responseXML | Returns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties
status | Returns the status as a number (e.g. 404 for "Not Found" or 200 for "OK")
statusText | Returns the status as a string (e.g. "Not Found" or "OK")


XML DOM - Javascript

JavaScript Code

The loadXMLDoc() function below is a cross-browser script stored in a file called "loadxmldoc.js".

The function is loaded with the <script type="text/javascript" src="loadxmldoc.js"> tag in the <head> section in our examples:

function loadXMLDoc(dname)

{

var xmlDoc;

// code for IE

if (window.ActiveXObject)

{

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

}

// code for Mozilla, Firefox, Opera, etc.

else if (document.implementation && document.implementation.createDocument)

{

xmlDoc=document.implementation.createDocument("","",null);

}

else

{

alert('Your browser cannot handle this script');

}

xmlDoc.async=false;

xmlDoc.load(dname);

return(xmlDoc);

}


XML DOM - Mozilla vs. Internet Explorer

Browser-differences in DOM Parsing

Both Mozilla and Internet Explorer supports W3C's DOM specification.

However, there are still differences between Internet Explorer's DOM and Mozilla's DOM. The most important difference is how they handle white-space text nodes. When XML generates, it often contains white-spaces between the nodes. Internet Explorer, when using node.childNodes[], will NOT contain these white-space nodes. In Mozilla, those nodes will be in the array.

Look at the following XML file: books.xml

The following code fragment alerts how many child nodes the root element have:

xmlDoc.load("books.xml");

var x=xmlDoc.documentElement.childNodes;

alert(x.length)

for (i=0;i<x.length;i++)

{

document.write(x[i].nodeType);

document.write("<br />");

}

Try it yourself

Internet Explorer will skip the white-space text nodes that are generated between nodes (e.g. new line characters), while Mozilla will not. So, in the example above, Mozilla browsers will alert 9 child nodes, while Internet Explorer will alert 4.

To iterate through the child nodes and disregard those text nodes, you can check the node type. An element node has type 1, a text node has type 3, and a comment node has type 8. To skip text nodes, you can process only nodes that are not of node type 3 (text nodes) and node type 8 (comment nodes):

xmlDoc.load("books.xml");

var x=xmlDoc.documentElement.childNodes;

for (var i=0;i<x.length;i++)

{

if ((x[i].nodeType!=3)&&(x[i].nodeType!=8))

  {

  //Do not process text nodes or comment nodes

  document.write(x[i].nodeName);

  document.write("<br />");

  }

}

Try it yourself

The best way to only process element nodes is to iterate through the child nodes and only process those with a node type of 1:

xmlDoc.load("books.xml");

var x=xmlDoc.documentElement.childNodes;

for (var i=0;i<x.length;i++)

{

if (x[i].nodeType==1)

  {

  //Process only element nodes

  document.write(x[i].nodeName);

  document.write("<br />");

  }

}

For a complete reference of all the node types and which children they may have, go to our Node types reference.


XML DOM - NamedNodeMap object

XML DOM - The NamedNodeMap Object

The NamedNodeMap object represents an unordered list of nodes.

The NamedNodeMap object

The nodes in the NamedNodeMap can be accessed through their name.

The NamedNodeMap keeps itself up-to-date. If an element is deleted or added, in the node list or the XML document, the list is automatically updated.

Note: In a named node map, the nodes are not returned in any particular order.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard)

NamedNodeMap Object Properties

Property | Description | IE | F | O | W3C
length | Returns the number of nodes in the list | 5 | 1 | 9 | Yes

NamedNodeMap Object Methods

Method | Description | IE | F | O | W3C
getNamedItem() | Returns the specified node (by name) | 5 | 1 | 9 | Yes
getNamedItemNS() | Returns the specified node (by name and namespace) |  |  | 9 | Yes
item() | Returns the node at the specified index | 5 | 1 | 9 | Yes
removeNamedItem() | Removes the specified node (by name) | 6 | 1 | 9 | Yes
removeNamedItemNS() | Removes the specified node (by name and namespace) |  |  | 9 | Yes
setNamedItem() | Sets the specified node (by name) |  |  | 9 | Yes
setNamedItemNS() | Sets the specified node (by name and namespace) |  |  | 9 | Yes


XML DOM - Navigate Nodes

Navigating DOM Nodes

We can navigate between nodes by using their relationship to each other:

· parentNode
· childNodes
· firstChild
· lastChild
· nextSibling
· previousSibling

Look at the following XML file: books.xml.

The following image illustrates a part of the node tree and the relationship between the nodes in the XML file above:

Note: Internet Explorer will skip white-space text nodes that are generated between nodes (e.g. new-line characters), while Mozilla will not. So, in the examples below, we have a function that checks the node type of a node when using the firstChild, lastChild, nextSibling and previousSibling properties.

Get the First Child of a Node

The following code fragment gets the first child node of <bookstore>:

//check if the first node is an element node

function get_firstchild(n)

{

var x=n.firstChild;

while (x.nodeType!=1)

  {

  x=x.nextSibling;

  }

return x;

}

xmlDoc=load("books.xml");

var y=get_firstchild(xmlDoc.documentElement);

document.write(y.nodeName);

The output of the code above will be:

book

The function in the example above checks the node type of the first child node.

Element nodes has a nodeType of 1, so if the first child node is not an element node, it moves to the next node, and checks if this node is an element node. This continues until the first child node (which must be an element node) is found. This way, the result will be correct in both Internet Explorer and Mozilla.

Get the Previous Sibling of a Node

The following code fragment gets the previous sibling node of the first <author> element:

//check if the previous sibling node is an element node

function get_previoussibling(n)

{

var x=n.previousSibling;

while (x.nodeType!=1)

  {

  x=x.previousSibling;

  }

return x;

}

xmlDoc=load("books.xml");

var x=xmlDoc.getElementsByTagName("author")[0];

var y=get_previoussibling(x);

document.write(y.nodeName);

The output of the code above will be:

title

The function in the example above checks the node type of the previous sibling node.

If the previous sibling node is not an element node, it moves to the "next" previous sibling, and checks if that node is an element node. This continues until the previous sibling node (which must be an element node) is found. This way, the result will be correct in both Internet Explorer and Mozilla


XML DOM - Node List and NamedNodeMap

DOM Node List and NamedNodeMap

This chapter explains what a NodeList is, and what a NamedNodeMap is. It also explains the differences between them.

DOM Node List

When using properties or methods like childNodes or getElementsByTagName(), we receive a NodeList object.

A NodeList object represents an ordered list of nodes.

The nodes in the NodeList can be accessed through their index number (starting from 0).

Note: In a NodeList, the nodes are returned in the order in which they are specified in the XML.

Look at the following XML file: books.xml

We will now create a node list of all the <title> elements in "books.xml", by using the getElementsByTagName("title") method. The following image represents the node list returned:

The following code fragment gets the text from the first <title> element:

getElementsByTagName("title")[0].childNodes[0].nodeValue

Output:

Everyday Italian

Get the Length of a Node List

The node list keeps itself up-to-date. If an element is deleted or added, in the node list or the XML document, the list is automatically updated.

The node list has a useful property: length. The length property returns the number of nodes in a node list.

The following code fragment gets the number of <title> elements in "books.xml":

getElementsByTagName('title').length

Output:

4

When you know the length of a node list, you can easily loop through it and extract the values you want.

The following code fragment loops through all <title> elements and prints their values:

//the x variable will hold a NodeList

var x=getElementsByTagName('title')

for (i=0;i<x.length;i++)

{

document.write(x[i].childNodes[0].nodeValue)

document.write("<br />")

}

Output:

Everyday Italian

Harry Potter

XQuery Kick Start

Learning XML

DOM NamedNodeMap

When using the attributes property on an element, we receive a NamedNodeMap object.

A NamedNodeMap object represents an unordered list of attribute nodes.

The nodes in the NamedNodeMap can be accessed through their name.

Note: In a NamedNodeMap, the nodes are not returned in any particular order.

Get the Length of a NamedNodeMap

The NamedNodeMap keeps itself up-to-date. If an element is deleted or added, in the node list or the XML document, the list is automatically updated.

The NamedNodeMap also has a length property. The length property returns the number of nodes in the list.

Look at the following XML file: books.xml

The following code fragment gets the number of attributes in the first <title> element in "books.xml":

getElementsByTagName('title')[0].attributes.length

Output:

1

Get an Item's Value in a NamedNodeMap

The getNamedItem() method of the NamedNodeMap object can be used to retrieve a specified node.

The following code fragment shows how to print the value of the "category" attribute in each <book> element":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book");

for(i=0;i<x.length;i++)

{

//the attlist variable will hold a NamedNodeMap

var attlist=x.item(i).attributes;

var att=attlist.getNamedItem("category");

document.write(att.value + "<br />")

}

Output:

COOKING

CHILDREN

WEB

WEB


XML DOM - Node object

XML DOM - The Node Object

The Node object represents a node in the document tree.

The Node Object

The Node object is the primary data type for the entire DOM.

The Node object represents a single node in the document tree.

A node can be an element node, an attribute node, a text node, or any other of the node types explained in the "Node types" chapter.

Notice that while all objects inherits the Node properties / methods for dealing with parents and children, not all objects can have parents or children. For example, Text nodes may not have children, and adding children to such nodes results in a DOM error.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard)

Node Object Properties

Property | Description | IE | F | O | W3C
baseURI | Returns the absolute base URI of a node | No | 1 | No | Yes
 | Returns a NodeList of child nodes for a node | 5 | 1 | 9 | Yes
firstChild | Returns the first child of a node | 5 | 1 | 9 | Yes
lastChild | Returns the last child of a node | 5 | 1 | 9 | Yes
localName | Returns the local part of the name of a node | No | 1 | 9 | Yes
namespaceURI | Returns the namespace URI of a node | No | 1 | 9 | Yes
 | Returns the node immediately following a node | 5 | 1 | 9 | Yes
nodeName | Returns the name of a node, depending on its type | 5 | 1 | 9 | Yes
nodeType | Returns the type of a node | 5 | 1 | 9 | Yes
nodeValue | Sets or returns the value of a node, depending on its type | 5 | 1 | 9 | Yes
ownerDocument | Returns the root element (document object) for a node | 5 | 1 | 9 | Yes
parentNode | Returns the parent node of a node | 5 | 1 | 9 | Yes
prefix | Sets or returns the namespace prefix of a node | No | 1 | 9 | Yes
previousSibling | Returns the node immediately before a node | 5 | 1 | 9 | Yes
textContent | Sets or returns the textual content of a node and its descendants | No | 1 | No | Yes
 | Returns the text of a node and its descendants. IE-only property | 5 | No | No | No
xml | Returns the XML of a node and its descendants. IE-only property | 5 | No | No | No

Node Object Methods

Method | Description | IE | F | O | W3C
appendChild() | Adds a new child node to the end of the list of children of a node | 5 | 1 | 9 | Yes
cloneNode() | Clones a node | 5 | 1 | 9 | Yes
compareDocumentPosition() | Compares the document position of two nodes | No | 1 | No | Yes
getFeature(feature,version) | Returns a DOM object which implements the specialized APIs of the specified feature and version |  |  | No | Yes
getUserData(key) | Returns the object associated to a key on a this node. The object must first have been set to this node by calling setUserData with the same key |  |  | No | Yes
hasAttributes() | Returns true if a node has any attributes, otherwise it returns false | 5 | 1 | 9 | Yes
hasChildNodes() | Returns true if a node has any child nodes, otherwise it returns false | 5 | 1 | 9 | Yes
insertBefore() | Inserts a new child node before an existing child node | 5 | 1 | 9 | Yes
isDefaultNamespace(URI) | Returns whether the specified namespaceURI is the default |  |  | No | Yes
 | Checks if two nodes are equal | No | No | No | Yes
isSameNode() | Checks if two nodes are the same node | No | 1 | No | Yes
isSupported(feature,version) | Returns whether a specified feature is supported on a node |  |  | 9 | Yes
lookupNamespaceURI() | Returns the namespace URI matching a specified prefix | No | 1 | No | Yes
lookupPrefix() | Returns the prefix matching a specified namespace URI | No | 1 | No | Yes
normalize() | Puts all text nodes underneath a node (including attributes) into a "normal" form where only structure (e.g., elements, comments, processing instructions, CDATA sections, and entity references) separates Text nodes, i.e., there are neither adjacent Text nodes nor empty Text nodes | 5 | 1 | 9 | Yes
removeChild() | Removes a child node | 5 | 1 | 9 | Yes
replaceChild() | Replaces a child node | 5 | 1 | 9 | Yes
setUserData(key,data,handler) | Associates an object to a key on a node |  |  | No | Yes


XML DOM - Node Tree

All the nodes in a node tree have relationships to each other.

What is a Node Tree?

A node tree shows an XML document as a set of nodes and the connections between them.

· In a node tree, the top node is called the root
· Every node, except the root, has exactly one parent node
· A node can have any number of children
· A leaf is a node with no children
· Siblings are nodes with the same parent

Look at the following XML file: books.xml.

The following image illustrates a part of the node tree and the relationship between the nodes in the XML file above:


XML DOM - Node Types

The DOM presents a document as a hierarchy of node objects.

Examples

In the examples below, we will use the XML file , and the JavaScript function loadXMLDoc().

Display nodeName and nodeType of all elements

Node Types

The following table lists the different W3C node types, and which node types they may have as children:

Node type | Description | Children
Document | Represents the entire document (the root-node of the DOM tree) | Element (max. one), ProcessingInstruction, Comment, DocumentType
DocumentFragment | Represents a "lightweight" Document object, which can hold a portion of a document | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
DocumentType | Provides an interface to the entities defined for the document | None
ProcessingInstruction | Represents a processing instruction | None
EntityReference | Represents an entity reference | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
Element | Represents an element | Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
Attr | Represents an attribute | Text, EntityReference
Text | Represents textual content in an element or attribute | None
CDATASection | Represents a CDATA section in a document (text that will NOT be parsed by a parser) | None
Comment | Represents a comment | None
Entity | Represents an entity | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
Notation | Represents a notation declared in the DTD | None

Node Types - Return Values

The following table lists what the nodeName and the nodeValue properties will return for each node type:

Node type | nodeName returns | nodeValue returns
Document | #document | null
DocumentFragment | #document fragment | null
DocumentType | doctype name | null
EntityReference | entity reference name | null
Element | element name | null
Attr | attribute name | attribute value
ProcessingInstruction | target | content of node
Comment | #comment | comment text
Text | #text | content of node
CDATASection | #cdata-section | content of node
Entity | entity name | null
Notation | notation name | null

NodeTypes - Named Constants

NodeType | Named Constant
1 | ELEMENT_NODE
2 | ATTRIBUTE_NODE
3 | TEXT_NODE
4 | CDATA_SECTION_NODE
5 | ENTITY_REFERENCE_NODE
6 | ENTITY_NODE
7 | PROCESSING_INSTRUCTION_NODE
8 | COMMENT_NODE
9 | DOCUMENT_NODE
10 | DOCUMENT_TYPE_NODE
11 | DOCUMENT_FRAGMENT_NODE
12 | NOTATION_NODE


XML DOM - NodeList object

XML DOM - The NodeList Object

The NodeList object represents an ordered list of nodes.

The NodeList object

The nodes in the NodeList can be accessed through their index number (starting from 0).

The NodeList keeps itself up-to-date. If an element is deleted or added, in the node list or the XML document, the list is automatically updated.

Note: In a node list, the nodes are returned in the order in which they are specified in the XML.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard)

NodeList Object Properties

Property | Description | IE | F | O | W3C
length | Returns the number of nodes in a node list | 5 | 1 | 9 | Yes

NodeList Object Methods

Method | Description | IE | F | O | W3C
 | Returns the node at the specified index in a node list | 5 | 1 | 9 | Yes


XML DOM - Nodes

Everything in an XML document is a node.

Nodes

According to the DOM, everything in an XML document is a node.

The DOM says that:

· The entire document is a document node
· Every XML tag is an element node
· The texts contained in the XML elements are text nodes
· Every XML attribute is an attribute node
· Comments are comment nodes

Node Hierarchy

Nodes have a hierarchical relationship to each other.

All nodes in an XML document form a document tree (or node tree). Each element, attribute, text, etc. in the XML document represents a node in the tree. The tree starts at the document node and continues to branch out until it has reached all text nodes at the lowest level of the tree.

The terms "parent" and "child" are used to describe the relationships between nodes. Some nodes may have child nodes, while other nodes do not have children (leaf nodes).

Because the XML data is structured in a tree form, it can be traversed without knowing the exact structure of the tree and without knowing the type of data contained within.

DOM Node Hierarchy Example

Look at the following XML file: books.xml

<?xml version="1.0" encoding="ISO-8859-1"?>

<bookstore>

<book category="COOKING">

<title lang="en">Everyday Italian</title>

<author>Giada De Laurentiis</author>

<year>2005</year>

<price>30.00</price>

</book>

<book category="CHILDREN">

<title lang="en">Harry Potter</title>

<author>J K. Rowling</author>

<year>2005</year>

<price>29.99</price>

</book>

<book category="WEB">

<title lang="en">XQuery Kick Start</title>

<author>James McGovern</author>

<author>Per Bothner</author>

<author>Kurt Cagle</author>

<author>James Linn</author>

<author>Vaidyanathan Nagarajan</author>

<year>2003</year>

<price>49.99</price>

</book>

<book category="WEB">

<title lang="en">Learning XML</title>

<author>Erik T. Ray</author>

<year>2003</year>

<price>39.95</price>

</book>

</bookstore>

Notice that the root element in the XML document above is named <bookstore>. All other elements in the document are contained within <bookstore>.

The <bookstore> element represents the root node of the DOM tree.

The root node <bookstore> holds four <book> child nodes.

The first <book> child node also holds four children: <title>, <author>, <year>, and <price>, which contains one text node each, "Everyday Italian", "Giada De Laurentiis", "2005", and "30.00".

IMPORTANT! Text is always stored in text nodes. A common error in DOM processing is to navigate to an element node and expect it to contain the text. However, even the simplest element node has a text node under it. For example, in <year>2005</year>, there is an element node (year), and a text node under it, which contains the text (2005).

The following image illustrates a fragment of the DOM node tree from the XML document above:

For a complete reference of all the node types and which children they may have, go to our Node types reference.


XML DOM - ProcessingInstruction object

XML DOM - The ProcessingInstruction Object

The ProcessingInstruction object represents a processing instruction.

The ProcessingInstruction object

The ProcessingInstruction object represents a processing instruction.

A processing instruction is used as a way to keep processor-specific information in the text of the XML document.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard)

ProcessingInstruction Object Properties

Property | Description | IE | F | O | W3C
data | Sets or returns the content of this processing instruction |  |  | No | Yes
target | Returns the target of this processing instruction |  |  | No | Yes


XML DOM - Remove Nodes

Examples

In the examples below, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Remove an

This example uses removeChild() to remove the last <book> element from the loaded XML.

Remove text

This example uses deleteData() to remove text from a text node in the loaded XML.

Remove an attribute

This example uses removeAttribute() to remove all "category" attributes from the loaded XML.

Use removeAttributeNode()

This example uses removeAttributeNode() to remove all "category" attributes from the loaded XML.

Remove an Element

The removeChild() method can be used to remove a specified node.

The following code fragment will remove the last <book> element from the loaded xml:

//check if last child node is an element node

function get_lastchild(n)

{

var x=n.lastChild;

while (x.nodeType!=1)

{

x=x.previousSibling;

}

return x;

}

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.documentElement;

x.removeChild(get_lastchild(x));

Note: Internet Explorer will skip white-space text nodes that are generated between nodes (e.g. new-line characters), while Mozilla will not. So, in the example above, the get_lastchild() function checks the node type of the last child node of the parameter.

Element nodes has a nodeType of 1, so if not the last child of the node in the parameter is an element node, it moves to the previous node, and checks if this node is an element node. This continues until the last child node (which must be an element node) is found. This way, the result will be correct in both Internet Explorer and Mozilla.

Remove Text From an Element

The deleteData() method is used to remove data from a text node.

The deleteData() method has two parameters:

· offset - Where to begin removing characters. Offset value starts at zero
· count - How many characters to delete

The following code fragment will remove the first nine characters from the first <title> element in the loaded XML:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];

x.deleteData(0,9);

Remove an Attribute

The removeAttribute() method is used to remove an attribute node.

The following code fragment will remove all "category" attributes in each <book> element:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

for(i=0;i<x.length;i++)

{

x.item(i).removeAttribute('category');

}

removeAttributeNode()

The removeAttributeNode() method is used to remove an attribute node.

The following code fragment will remove all "category" attributes in each <book> element:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

for(i=0;i<x.length;i++)

{

attnode=x.item(i).getAttributeNode("category")

old_att=x.item(i).removeAttributeNode(attnode);

document.write("Removed attribute: " + old_att.name + "<br />");

}

Output:

Removed attribute: category

Removed attribute: category

Removed attribute: category

Removed attribute: category


XML DOM - Replace Nodes

Examples

In the examples below, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Replace a node in a nodelist

This example uses replaceChild() to replace the last child in a node list.

Replace data in a text node

This example uses replaceData() to replace data in a text node.

Replace a Node in a Node List

The replaceChild() method is used to replace a node in a node list.

The following code fragment creates a new <book> element that will replace the last <book> element:

//check if last child node is an element node

function get_lastchild(n)

{

var x=n.lastChild;

while (x.nodeType!=1)

{

x=x.previousSibling;

}

return x;

}

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.documentElement;

//create a book element, title element and a text node

var newNode=xmlDoc.createElement("book");

var newTitle=xmlDoc.createElement("title");

var newText=xmlDoc.createTextNode("A Notebook");

//add the text node to the title node,

//and add the title node to the book node

newTitle.appendChild(newText);

newNode.appendChild(newTitle);

//replace the last node with the new node

x.replaceChild(newNode,get_lastchild(x));

Note: Internet Explorer will skip white-space text nodes that are generated between nodes (e.g. new-line characters), while Mozilla will not. So, in the example above, the get_lastchild() function checks the node type of the last child node of the parameter.

Element nodes has a nodeType of 1, so if not the last child of the node in the parameter is an element node, it moves to the previous node, and checks if this node is an element node. This continues until the last child node (which must be an element node) is found. This way, the result will be correct in both Internet Explorer and Mozilla.

Replace Data In a Text Node

The replaceData() method is used to replace data in a text node.

The replaceData() method has three parameters:

· offset - Where to begin replacing characters. Offset value starts at zero
· length - How many characters to replace
· string - The string to insert

The following code fragment will replace the eight first characters from the text node in the first <title> element with "Easy":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];

x.replaceData(0,8,"Easy");


XML DOM - Set Nodes

Examples

In the examples below, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Set a new attribute and attribute value

This example uses setAttribute() to set a new attribute/attribute value.

Create a new attribute node

This example uses createAttribute() to create a new attribute node, and setAttributeNode() to insert it to an element.

attribute's value

This example uses the setAttribute() method to change the value of an existing attribute.

Change an item's value

This example uses the getNamedItem() method to change the value of an existing attribute.

Set a New Attribute and Attribute Value

The setAttribute() method can be used to change the value of an existing attribute, or to create a new attribute/attribute value for an element.

The following code fragment adds a new attribute/attribute value to each <book> element:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book");

for(i=0;i<x.length;i++)

{

x.item(i).setAttribute("edition","first");

}

Another Way to Create a New Attribute

The createAttribute() is used to create a new attribute node.

The following code fragment uses createAttribute() to create a new attribute node, and setAttributeNode() to insert it to an element.:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

var newatt;

for (i=0;i<x.length;i++)

{

newatt=xmlDoc.createAttribute("edition");

newatt.value="first";

x[i].setAttributeNode(newatt);

}

Change an Attribute Value

The setAttribute() method can be used to change the value of an existing attribute, or to create a new attribute/attribute value for an element.

The following code fragment changes the value of the existing "category" attribute (in each <book> element):

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book");

for(i=0;i<x.length;i++)

{

x.item(i).setAttribute("category","bestseller");

}

Change an Item's Value

The getNamedItem() method can be used to change the value of an existing item.

The following code fragment also changes the value of the existing "category" attribute (in each <book> element):

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book");

for(i=0;i<x.length;i++)

{

var att=x.item(i).attributes.getNamedItem("category");

att.value="bestseller";

}


XML DOM - Text object

XML DOM - The Text Object

The Text object represents the textual content of an element or attribute.

The Text object

The Text object represents the textual content of an element or attribute.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard)

Text Object Properties

Property | Description | IE | F | O | W3C
data | Sets or returns the text of the element or attribute | 6 | 1 | 9 | Yes
isElementContentWhitespace | Returns true if the text node contains content whitespace, otherwise it returns false | No | No | No | Yes
 | Returns the length of the text of the element or attribute | 6 | 1 | 9 | Yes
wholeText | Returns all text of text nodes adjacent to this node, concatenated in document order | No | No | No | Yes

Text Object Methods

Method | Description | IE | F | O | W3C
appendData() | Appends data to the node | 6 | 1 | 9 | Yes
deleteData() | Deletes data from the node | 6 | 1 | 9 | Yes
insertData() | Inserts data into the node | 6 | 1 | 9 | Yes
 | Replaces data in the node | 6 | 1 | 9 | Yes
replaceWholeText(text) | Replaces the text of this node and all adjacent text nodes with the specified text | No | No | No | Yes
splitText() | Splits this node into two nodes at the specified offset, and returns the new node that contains the text after the offset | 6 | 1 | 9 | Yes
substringData() | Extracts data from the node | 6 | 1 | 9 | Yes


XML DOM - Traverse Node Tree

Examples

Traverse node tree

This example shows how to loop through all child nodes of <note>, and print the node name and the node value.

Traversing the Node-tree

Often you will need to loop through elements in an XML document or string.

The example below loops through all child nodes of <note>, and prints the node name and the node value of each node:

<html>

<body>

<script type="text/javascript">

var text="<note>";

text=text+"<to>Tove</to>";

text=text+"<from>Jani</from>";

text=text+"<heading>Reminder</heading>";

text=text+"<body>Don't forget me this weekend!</body>";

text=text+"</note>";

// code for IE

if (window.ActiveXObject)

{

var doc=new ActiveXObject("Microsoft.XMLDOM");

doc.async="false";

doc.loadXML(text);

}

// code for Mozilla, Firefox, Opera, etc.

else

{

var parser=new DOMParser();

var doc=parser.parseFromString(text,"text/xml");

}

// documentElement always represents the root node

var x=doc.documentElement;

for (i=0;i<x.childNodes.length;i++)

{

document.write(x.childNodes[i].nodeName);

document.write("=");

document.write(x.childNodes[i].childNodes[0].nodeValue);

document.write("<br />");

}

</script>

</body>

</html>

Output:

to=Tove

from=Jani

heading=Reminder

body=Don't forget me this weekend!


XML DOM - Validate XML

XML DOM Validation

XML Errors will Stop you

Errors in XML documents will stop your XML program.

The W3C XML specification states that a program should not continue to process an XML document if it finds an error. The reason is that XML software should be easy to write, and that all XML documents should be compatible.

With HTML it was possible to create documents with lots of errors (like when you forget an end tag). One of the main reasons that HTML browsers are so big and incompatible, is that they have their own ways to figure out what a document should look like when they encounter an HTML error.

With XML this should not be possible.

Syntax-check your XML - IE Only

To help you syntax-check your xml, we have used Microsoft's XML parser to create an XML validator.

Paste your XML in the text area below, and syntax-check it by pressing the "Validate" button.

[TTextAreaFormControlObj]

Syntax-check your XML File - IE Only

You can also syntax-check your XML file by typing the URL of your file into the input field below, and then press the "Validate" button

Filename:

[TEditFormControlObj]

If you want to validate an error-free XML file, you can paste the following address into the filename field: http://www.w3schools.com/dom/cd_catalog.xml

Note: If you get the error "Access denied" when accessing this file, it is because your Internet Explorer security settings do not allow access across domains!


XML DOM Access Nodes

With the DOM, you can access every node in an XML document.

Find and Access Nodes

You can find the element you want to manipulate in several ways:

· By using the getElementsByTagName() method
· By using the parentNode, firstChild, and lastChild properties of an element node

getElementsByTagName()

The getElementsByTagName() method can find any XML element in the entire document.

This method ignore the document structure. If you want to find all <book> elements in the document, the getElementsByTagName() method will find them all, regardless of on which level the <book> elements are.

This method gives you the XML elements you need regardless of where they are in the document!

The getElementsByTagName() method returns all elements (as a nodeList) with the specified tag name that are descendants of the element you are on when using this method.

The getElementsByTagName() can be used on any XML element:

getElementsByTagName() Syntax

getElementsByTagName("tagname");

Example

The following example returns a nodeList of all <book> elements in the document:

xmlDoc.getElementsByTagName("book");

nodeList

When working with a nodeList, we usually store the list in a variable, like this:

var x=xmlDoc.getElementsByTagName("book");

Now the variable x contains a list of all <book> elements in the page, and we can access the <book> elements by their index numbers.

Note: The index starts at 0.

You can loop through the nodeList by using the length property:

var x=xmlDoc.getElementsByTagName("book");

for (var i=0;i<x.length;i++)

{

// do something with each <book> element

}

You can also access a specific element by using the index number.

To access the third <p> you can write:

var y=x[2];

parentNode, firstChild, and lastChild

The five properties parentNode, firstChild, and lastChild follow the document structure and allow short-distance travel in the document.

Look at the following XML fragment:

<bookstore>

<book category="COOKING">

  <title lang="en">Everyday Italian</title>

  <author>Giada De Laurentiis</author>

  <year>2005</year>

  <price>30.00</price>

</book>

</bookstore>

In the HTML code above, the <title> element is the firstChild of the <book> element, and the <price> element is the lastChild of the <book> element.

Furthermore, the <book> element is the parentNode of the <title>, <author>, <year>, and <price> elements.

Root Nodes

There is one special document property that allow access to the tags:

· document.documentElement

This property returns the root node of the document and exists in all XML and HTML documents.


XML DOM appendData() Method

Definition and Usage

The appendData() method adds data at the end of a CDATA node.

Syntax

CDATANode.appedData(string)

Parameter | Description
string | Required. The string to add to the CDATA node

In all examples, we will use the XML file books_cdata.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment appends text to the first <html> element "books_cdata.xml":

xmlDoc=loadXMLDoc("books_cdata.xml");

var x=xmlDoc.getElementsByTagName("html")[0].childNodes[0]

x.appendData(" Wonderful!");

document.write(x.data);

Output:

Stunning! Wonderful!

Try-It-Yourself Demos

appendData() - Append a string to a CDATA node


XML DOM appendData() Method

Definition and Usage

The appendData() method adds data at the end of a comment node.

Syntax

commentNode.appedData(string)

Parameter | Description
string | Required. The string to add to the comment node

In all examples, we will use the XML file books_comment.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment appends text to the first comment element in "books_comment.xml":

xmlDoc=loadXMLDoc("books_comment.xml");

var x=xmlDoc.getElementsByTagName("book")[0].childNodes;

for (var i=0;i<x.length;i++)

{

if (x[i].nodeType==8)

  {

  //Process only comment nodes

  x[i].appendData(" Special Offer");

  document.write(x[i].data);

  document.write("<br />");

  }

}

Output:

125 Simple and Delicious Recipes (Hardcover) Special Offer

In the example above we use a loop and an if-test to make sure we only process comment nodes. A comment node has a node type of 8.

Try-It-Yourself Demos

appendData() - Append a string to a comment node


XML DOM appendData() Method

Definition and Usage

The appendData() method adds a string at the end of a text node.

Syntax

textNode.appendData(string)

Parameter | Description
string | Required. The string to add to the text node

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment appends text to the first <title> element "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]

x.appendData(" Cooking");

document.write(x.data);

Output:

Everyday Italian Cooking

Try-It-Yourself Demos


XML DOM async Property

Definition and Usage

The async property specifies whether downloading of an XML file should be handled asynchronously or not.

True means that the load() method returns the control to the caller before the download is complete.

False means that the download must be completed before the caller gets the control back.

Syntax

documentObject.async

Example

In nearly all our examples, we have used the books.xml file and the JavaScript function loadXMLDoc(). The loadXMLDoc() function uses the async property:

function loadXMLDoc(dname)

{

var xmlDoc;

// code for IE

if (window.ActiveXObject)

{

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

}

// code for Mozilla, Firefox, Opera, etc.

else if (document.implementation && document.implementation.createDocument)

{

xmlDoc=document.implementation.createDocument("","",null);

}

else

{

alert('Your browser cannot handle this script');

}

xmlDoc.async=false;

xmlDoc.load(dname);

return(xmlDoc);

}


XML DOM attributes Property

Definition and Usage

The attributes property returns a NamedNodeMap containing the attributes of the selected node

If the selected node is not an element, this property returns NULL.

Syntax

elementNode.attributes

Tips and Notes

Tip: This property only works on element nodes.

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example 1

The following code fragment gets the number of attributes in the first <title> element in "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book")[0].attributes;

document.write(x.length);

The output of the code above will be:

1

Example 2

The following code fragment prints the value of the "category" attribute in the first <book> element":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book")[0].attributes;

var att=x.getNamedItem("category");

document.write(att.value);

The output of the code above will be:

COOKING

Try-It-Yourself Demos

getNamedItem() and attributes - Get an item's value

attributes and length - Get the number of attributes from an element


XML DOM baseURI Property

Definition and Usage

The baseURI property returns the absolute base URI of an attribute.

Syntax

attrObject.baseURI

In all examples, we will use the XML file books_ns.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment returns the base URI of the "lang" attributes:

xmlDoc=loadXMLDoc("books_ns.xml");

var x=xmlDoc.getElementsByTagName('title');

for(i=0;i<x.length;i++)

{

document.write(x.item(i).attributes[0].baseURI);

document.write("<br />");

}

The output of the code above will be:

http://www.w3schools.com/dom/books_ns.xml

http://www.w3schools.com/dom/books_ns.xml

Try-It-Yourself Demos


XML DOM baseURI Property

Definition and Usage

The baseURI property returns the location of the xml document.

Syntax

elementNode.baseURI

In all examples, we will use the XML file , and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the location of the XML document:

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("book")[0];

document.write("Document location: " + x.baseURI);

Output:

Document location: http://www.w3schools.com/dom/books.xml

Try-It-Yourself Demos


XML DOM baseURI Property

Definition and Usage

The baseURI property returns the absolute base URI of a node.

Syntax

nodeObject.baseURI

In all examples, we will use the XML file , and the JavaScript function loadXMLDoc().

Example

The following code fragment returns the base URI of the <title> elements:

xmlDoc=loadXMLDoc("books_ns.xml");

var x=xmlDoc.getElementsByTagName('title');

for(i=0;i<x.length;i++)

{

document.write(x.item(i).baseURI);

document.write("<br />");

}

The output of the code above will be:

http://www.w3schools.com/dom/books_ns.xml

http://www.w3schools.com/dom/books_ns.xml

Try-It-Yourself Demos


XML DOM childNodes Property

Definition and Usage

The childNodes property returns a NodeList of child nodes for the document.

Syntax

documentObject.childNodes

Tips and Notes

Tip: Use the NodeLists's length property to determine the number of nodes in a node list. When you know the length of a node list, you can easily loop through it and extract the values you want!

In all examples, we will use the XML file books.xml, and the JavaScript function .

Example

The following code fragment displays the child nodes of the XML document:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.childNodes;

for (i=0;i<x.length;i++)

{

document.write("Nodename: " + x[i].nodeName)

document.write(" (nodetype: " + x[i].nodeType + ")<br />")

}

Output IE:

Nodename: xml (nodetype: 7)

Nodename: #comment (nodetype: 8)

Nodename: bookstore (nodetype: 1)

Output Mozilla (Firefox):

Nodename: #comment (nodetype: 8)

Nodename: bookstore (nodetype: 1)

Try-It-Yourself Demos

Display the child nodes of the XML document


XML DOM childNodes Property

Definition and Usage

The childNodes property returns a NodeList containing the child nodes of the selected node

If the selected node has no children, this property returns a NodeList containing no nodes.

Syntax

elementNode.childNodes

Tips and Notes

Tip: To loop over a childNodes list, it is more efficient to use the nextSibling property than to explicitly use the childNodes list of the parent object.

In all examples, we will use the XML file , and the JavaScript function loadXMLDoc().

Example 1

The following code fragment prints the text node from the first <title> element in "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]

document.write(x.nodeValue);

The output of the code above will be:

Everyday Italian

Example 2

The following code fragment prints the number of child nodes from the first <book> element in "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book")[0].childNodes;

document.write(x.length);

In Internet Explorer the output of the code above will be:

4

In Mozilla browsers the output of the code above will be:

9

Internet Explorer will skip white-space text nodes that are generated between nodes (e.g. new-line characters), while Mozilla will not. So, in the example above, the output will be different.

To read more about the differences between IE and Mozilla browers, visit our Mozilla vs. IE chapter in our XML DOM Tutorial.

Try-It-Yourself Demos

getelemenstByTagname() and childNodes - Get an element's value

childNodes - Get the NodeList's length


XML DOM childNodes Property

Definition and Usage

The childNodes property returns a NodeList of child nodes for the specified node.

Syntax

nodeObject.childNodes

Tips and Notes

Tip: Use the NodeLists's length property to determine the number of nodes in a node list. When you know the length of a node list, you can easily loop through it and extract the values you want!

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the child nodes of the XML document:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.childNodes;

for (i=0;i<x.length;i++)

{

document.write("Nodename: " + x[i].nodeName)

document.write(" (nodetype: " + x[i].nodeType + ")<br />")

}

Output IE:

Nodename: xml (nodetype: 7)

Nodename: #comment (nodetype: 8)

Nodename: bookstore (nodetype: 1)

Output Mozilla (Firefox):

Nodename: #comment (nodetype: 8)

Nodename: bookstore (nodetype: 1)

Try-It-Yourself Demos

Display the child nodes of the XML document


XML DOM compareDocumentPosition() Method

Definition and Usage

The compareDocumentPosition() method compares the document position of the current node, with a specified node, according to the document order.

Syntax

nodeObject.compareDocumentPostition(node)

Parameter | Description
node | Required. Specifies the node to compare with the current node

In all examples, we will use the XML file , and the JavaScript function .

Example

The following code fragment compares the document position of the first and the third <book> element:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book')[0];

var y=xmlDoc.getElementsByTagName('book')[2];

document.write(x.compareDocumentPosition(y));

Output:

4

Internet Explorer will skip the white-space text nodes that are generated between nodes (e.g. new line characters), while Mozilla will not. So, in the example above, Mozilla browsers will output 4, while Internet Explorer will output 2.

To read more about the differences between IE and Mozilla browers, visit our Mozilla vs. IE chapter in our XML DOM Tutorial.

Try-It-Yourself Demos

compareDocumentPosition() - Compare the document position of two nodes


XML DOM createCDATASection() Method

Definition and Usage

The createCDATASection() method creates a CDATA section node.

This method returns a CDATASection object.

Syntax

createCDATASection(data)

Parameter | Description
data | A string that specifies the data for the node

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment adds a CDATA section node to the <book> element:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

var newCDATA,newtext;

newtext="Special Offer & Book Sale";

for (i=0;i<x.length;i++)

{

newCDATA=xmlDoc.createCDATASection(newtext);

x[i].appendChild(newCDATA);

}

Try-It-Yourself Demos


XML DOM createComment() Method

Definition and Usage

The createComment() method creates a comment node.

This method returns a Comment object.

Syntax

createComment(data)

Parameter | Description
data | A string that specifies the data for the node

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment adds a comment node to the <book> element:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

var newComment,newtext;

newtext="Revised September 2006";

for (i=0;i<x.length;i++)

{

newComment=xmlDoc.createComment(newtext);

x[i].appendChild(newComment);

}

Try-It-Yourself Demos

createComment() - Create a comment node


XML DOM createElement() Method

Definition and Usage

The createElement() method creates an element node.

This method returns an Element object.

Syntax

createElement(name)

Parameter | Description
name | A string that specifies the name for the element node

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment adds an element node with a containing text node to each <book> element:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

var newel,newtext

for (i=0;i<x.length;i++)

{

newel=xmlDoc.createElement('edition');

newtext=xmlDoc.createTextNode('First');

newel.appendChild(newtext);

x[i].appendChild(newel);

}

Try-It-Yourself Demos


XML DOM createElementNS() Method

Definition and Usage

The createElementNS() method creates an element node with a namespace.

This method returns an Element object.

Syntax

createElementNS(ns,name)

Parameter | Description
ns | A string that specifies the namespace name for the element node
name | A string that specifies the name for the element node

In all examples, we will use the XML file , and the JavaScript function loadXMLDoc().

Example

The following code fragment adds an element node with a namespace to each <book> element:

mlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

var newel,newtext;

for (i=0;i<x.length;i++)

{

newel=xmlDoc.createElementNS('p','edition');

newtext=xmlDoc.createTextNode('First');

newel.appendChild(newtext);

x[i].appendChild(newel);

}

Try-It-Yourself Demos

createElementNS() - Create an element node with a namespace


XML DOM createTextNode() Method

Definition and Usage

The createTextNode() method creates a text node.

This method returns a Text object.

Syntax

createTextNode(text)

Parameter | Description
text | A string that specifies the text for the node

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment adds an element node with a containing text node to each <book> element:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

var newel,newtext

for (i=0;i<x.length;i++)

{

newel=xmlDoc.createElement('edition');

newtext=xmlDoc.createTextNode('First');

newel.appendChild(newtext);

x[i].appendChild(newel);

}

Try-It-Yourself Demos


XML DOM data Property

Definition and Usage

The data property returns the data of the selected node

Syntax

CDATANode.data

In all examples, we will use the XML file books_cdata.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment prints the data from all the <html> elements in "books_cdata.xml":

xmlDoc=loadXMLDoc("books_cdata.xml");

var x=xmlDoc.getElementsByTagName("html");

for (i=0;i<x.length;i++)

{

document.write(x[i].childNodes[0].data);

document.write("<br />");

}

The output of the code above will be:

Stunning!

Magic! Six stars!

Learn XQuery

Learn XML

Try-It-Yourself Demos


XML DOM data Property

Definition and Usage

The data property sets or returns the text of a comment.

Syntax

commentNode.data

In all examples, we will use the XML file , and the JavaScript function .

Example

The following code fragment outputs comment text from the first <book> element in "books_comment.xml":

xmlDoc=loadXMLDoc("books_comment.xml");

var x=xmlDoc.getElementsByTagName("book")[0].childNodes;

for (var i=0;i<x.length;i++)

{

if (x[i].nodeType==8)

  {

  //Process only comment nodes

  document.write(x[i].data);

  document.write("<br />");

  }

}

The output of the code above will be:

125 Simple and Delicious Recipes (Hardcover)

In the example above we use a loop and an if-test to make sure we only process comment nodes. A comment node has a node type of 8.

Try-It-Yourself Demos


XML DOM data Property

Definition and Usage

The data property sets or returns the text of an element or attribute.

Syntax

textNode.data

In all examples, we will use the XML file books.xml, and the JavaScript function .

Example

The following code fragment outputs the text from the first <title> element in "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]

document.write(x.data);

The output of the code above will be:

Everyday Italian

Try-It-Yourself Demos


XML DOM deleteData() Method

Definition and Usage

The deleteData() method deletes data from a CDATA node.

Syntax

CDATANode.deleteData(start,length)

Parameter | Description
start | Required. Specifies where to begin removing characters. Start value starts at zero
length | Required. Specifies how many characters to delete

In all examples, we will use the XML file books_cdata.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment deletes some characters (the "<b>" tag) from the text node of the first <html> element in "books_cdata.xml":

xmlDoc=loadXMLDoc("books_cdata.xml");

var x=xmlDoc.getElementsByTagName("html")[0].childNodes[0]

x.deleteData(0,3);

document.write(x.data);

Output:

Stunning!

Try-It-Yourself Demos

deleteData() - Remove characters from a CDATA node


XML DOM deleteData() Method

Definition and Usage

The deleteData() method deletes data from a text node.

Syntax

deleteData(start,length)

Parameter | Description
start | Required. Specifies where to begin removing characters. Start value starts at zero
length | Required. Specifies how many characters to delete

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment deletes some characters from the text node of the first <title> element in "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];

x.deleteData(0,9);

document.write(x.data);

Output:

Italian

Try-It-Yourself Demos


XML DOM doctype Property

Definition and Usage

The doctype property returns the Document Type Declaration associated with the document.

For XML documents without a DTD this returns null.

This provides direct access to the DocumentType object (a child node of this Document).

Syntax

documentObject.doctype

In all examples, we will use the XML file note_internal_dtd.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment returns a DocumentType object:

xmlDoc=loadXMLDoc("note_internal_dtd.xml");

document.write(xmlDoc.doctype);

Output:

[object DocumentType]

Try-It-Yourself Demos


XML DOM documentElement Property

Definition and Usage

The documentElement property returns the root node of the document.

Syntax

documentObject.documentElement

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the location of the XML document:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.documentElement;

document.write("Nodename: " + x.nodeName + "<br />");

document.write("Nodevalue: " + x.nodeValue + "<br />");

document.write("Nodetype: " + x.nodeType);

Output:

Nodename: bookstore

Nodevalue: null

Nodetype: 1

Try-It-Yourself Demos


XML DOM documentURI Property

Definition and Usage

The documentURI property sets or returns the location of the document.

Syntax

documentObject.documentURI

In all examples, we will use the XML file books.xml, and the JavaScript function .

Example

The following code fragment displays the location of the XML document:

xmlDoc=loadXMLDoc("books.xml");

document.write("Document location: " + xmlDoc.documentURI);

Output:

Document location: http://www.w3schools.com/dom/books.xml

Try-It-Yourself Demos


XML DOM entities Property

Definition and Usage

The entities property returns a NamedNodeMap containing both the external and internal entities declared in the DTD.

Syntax

documentObject.doctype.entities

In all examples, we will use the XML file , and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the node name and the node type of the entities declared in the DTD:

xmlDoc=loadXMLDoc("note_internal_dtd.xml");

var x=xmlDoc.doctype.entities

for (i=0;i<x.length;i++)

{

document.write("Nodename: " + x.item(i).nodeName);

document.write("<br />")

document.write("Nodetype: " + x.item(i).nodeType);

document.write("<br />")

}

Output:

Nodename: writer

Nodetype: 6

Nodename: copyright

Nodetype: 6

Try-It-Yourself Demos

Get the entities declared in the DTD of the XML document


XML DOM Examples

XML DOM Parsing

The XML file used in the examples below: note.xml

Parse an XML file - Crossbrowser example

Examples explained

XML DOM Traversing Nodes

The XML file used in the examples below: note.xml

Traverse a node tree

Examples explained

XML DOM Get Nodes

In the examples below, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Use getElementsbyTagname()

Use getAttribute()

Use getNamedItem()

Examples explained

XML DOM Set Nodes

In the examples below, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Set a new attribute and attribute value

Create a new attribute node

Change an attribute's value

Examples explained

XML DOM Remove Nodes

In the examples below, we will use the XML file books.xml, and the JavaScript function .

Remove an element

Remove text from a text node

Remove an attribute

Use removeAttributeNode()

XML DOM Replace Nodes

In the examples below, we will use the XML file books.xml, and the JavaScript function .

Examples explained

XML DOM Create Nodes

In the examples below, we will use the XML file , and the JavaScript function loadXMLDoc().

Create an attribute node

Create a text node

Create a CDATA section node

Examples explained

XML DOM Add Nodes

In the examples below, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Add a node to the end of a node list

Add a node before a specific node

Insert data into a text node

Examples explained

XML DOM Clone Nodes

In the examples below, we will use the XML file , and the JavaScript function loadXMLDoc().

Copy a node and add it to the node list

Examples explained


XML DOM firstChild Property

Definition and Usage

The firstChild property returns the first child node of the document.

Syntax

documentObject.firstChild

Tips and Notes

Note: Internet Explorer will skip white-space text nodes that are generated between nodes (e.g. new-line characters), while Mozilla will not. So, in the example below, we have a function that checks the node type of the first child node.

Element nodes has a nodeType of 1, so if the first child node is not an element node, it moves to the next node, and checks if this node is an element node. This continues until the first child node (which must be an element node) is found. This way, the result will be correct in both Internet Explorer and Mozilla.

Tip: To read more about the XML DOM differences between IE and Mozilla browsers, visit our Mozilla vs. IE chapter.

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the node name and node type of the first child node of the document:

//check if the first node is an element node

function get_firstchild(n)

{

var x=n.firstChild;

while (x.nodeType!=1)

{

x=x.nextSibling;

}

return x;

}

xmlDoc=loadXMLDoc("books.xml");

var x=get_firstchild(xmlDoc);

document.write("Nodename: " + x.nodeName);

document.write(" (nodetype: " + x.nodeType);

Output:

Nodename: bookstore (nodetype: 1)

Try-It-Yourself Demos


XML DOM firstChild Property

Definition and Usage

The firstChild property returns the first child node of the selected element

If the selected node has no children, this property returns NULL.

Syntax

elementNode.firstChild

Tips and Notes

Note: Internet Explorer will skip white-space text nodes that are generated between nodes (e.g. new-line characters), while Mozilla will not. So, in the example below, we have a function that checks the node type of the first child node.

Element nodes has a nodeType of 1, so if the first child node is not an element node, it moves to the next node, and checks if this node is an element node. This continues until the first child node (which must be an element node) is found. This way, the result will be correct in both Internet Explorer and Mozilla.

Tip: To read more about the XML DOM differences between IE and Mozilla browsers, visit our Mozilla vs. IE chapter.

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment gets the first child node from "books.xml":

//check if the first node is an element node

function get_firstchild(n)

{

var x=n.firstChild;

while (x.nodeType!=1)

  {

  x=x.nextSibling;

  }

return x;

}

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.documentElement;

var firstNode=get_firstchild(x);

for (var i=0;i<firstNode.childNodes.length;i++)

{

  if (firstNode.childNodes[i].nodeType==1)

  {

  //Process only element nodes

  document.write(firstNode.childNodes[i].nodeName);

  document.write(" = ");

  document.write(firstNode.childNodes[i].childNodes[0].nodeValue);

  document.write("<br />");

  }

}

The output of the code above will be:

title = Everyday Italian

author = Giada De Laurentiis

year = 2005

price = 30.00

Try-It-Yourself Demos


XML DOM getAttributeNode() Method

Definition and Usage

The getAttributeNode() method gets an attribute node by name from the current element.

Syntax

elementNode.getAttributeNode(name)

Parameter | Description
name | Required. Specifies the attribute node to get

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment gets the "category" attribute from all <book> elements in "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

for(i=0;i<x.length;i++)

{

attnode=x.item(i).getAttributeNode("category")

document.write(attnode.name);

document.write(" = ");

document.write(attnode.value);

document.write("<br />");

}

Output:

category = COOKING

category = CHILDREN

category = WEB

category = WEB

Try-It-Yourself Demos

getAttributeNode() - Get all attribute nodes with a specific name


XML DOM getAttributeNodeNS() Method

Definition and Usage

The getAttributeNS() method gets an attribute node by namespace URI and name.

Syntax

elementNode.getAttributeNodeNS(ns,name)

Parameter | Description
ns | Required. Specifies the namespace URI to get the attribute value from
name | Required. Specifies the attribute to get the attribute value from

In all examples, we will use the XML file books_ns.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment gets the "lang" attribute name and value from the first <title> element in "books_ns.xml":

xmlDoc=loadXMLDoc("books_ns.xml");

var x=xmlDoc.getElementsByTagName("title")[0];

var ns="http://www.w3schools.com/children/"

y=x.getAttributeNodeNS(ns,"lang");

document.write(y.nodeName);

document.write(" = ");

document.write(y.nodeValue);

Output:

c:lang = en

Try-It-Yourself Demos

Get an attribute's value

This example uses the getAttributeNodeNS() method to get the name and value of a "lang" attribute in "books_ns.xml".


XML DOM getAttributeNS() Method

Definition and Usage

The getAttributeNS() method gets an attribute value by namespace URI and name.

Syntax

elementNode.getAttributeNS(ns,name)

Parameter | Description
ns | Required. Specifies the namespace URI to get the attribute value from
name | Required. Specifies the attribute to get the attribute value from

In all examples, we will use the XML file books_ns.xml, and the JavaScript function .

Example

The following code fragment gets the "lang" attribute value from the first <title> element in "books_ns.xml":

xmlDoc=loadXMLDoc("books_ns.xml");

var x=xmlDoc.getElementsByTagName("title")[0];

var ns="http://www.w3schools.com/children/"

document.write(x.getAttributeNS(ns,"lang"));

Output:

en

Try-It-Yourself Demos

getAttributeNS() - Get an attribute's value by name and namespace


XML DOM getElementsByTagName() Method

Definition and Usage

The getElementsByTagName() method returns a NodeList of all a elements with a specified name.

Syntax

getElementsByTagName(name)

Parameter | Description
name | A string that specifies the tagname to search for. The value "*" matches all tags

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the value of all <title> elements in "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('title');

for (i=0;i<x.length;i++)

{

document.write(x[i].childNodes[0].nodeValue)

document.write("<br />")

}

Output:

Everyday Italian

Harry Potter

XQuery Kick Start

Learning XML

Try-It-Yourself Demos

getElementsByTagName() - Get the values of a specified node


XML DOM getElementsByTagName() Method

Definition and Usage

The getElementsByTagName() method returns a NodeList of all a elements with a specified name.

Syntax

getElementsByTagName(name)

Parameter | Description
name | A string that specifies the tagname to search for. The value "*" matches all tags

In all examples, we will use the XML file , and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the value of all <title> elements in "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('title');

for (i=0;i<x.length;i++)

{

document.write(x[i].childNodes[0].nodeValue)

document.write("<br />")

}

Output:

Everyday Italian

Harry Potter

XQuery Kick Start

Learning XML

Try-It-Yourself Demos

getElementsByTagName() - Get the values of a specified element by name


XML DOM getElementsByTagNameNS() Method

Definition and Usage

The getElementsByTagNameNS() method returns a NodeList of all elements with a specified name and namespace.

Syntax

getElementsByTagNameNS(ns,name)

Parameter | Description
ns | A string that specifies the namespace name to search for. The value "*" matches all tags
name | A string that specifies the tagname to search for. The value "*" matches all tags

In all examples, we will use the XML file , and the JavaScript function .

Example

The following code fragment adds an element node with a namespace to each <book> element:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

var newel,newtext;

for (i=0;i<x.length;i++)

{

newel=xmlDoc.createElementNS('p','edition');

newtext=xmlDoc.createTextNode('First');

newel.appendChild(newtext);

x[i].appendChild(newel);

}

//Output all titles and editions

var y=xmlDoc.getElementsByTagName("title");

var z=xmlDoc.getElementsByTagNameNS("p","edition");

for (i=0;i<y.length;i++)

{

document.write(y[i].childNodes[0].nodeValue);

document.write(" - ");

document.write(z[i].childNodes[0].nodeValue);

document.write(" edition");

document.write("<br />");

}

Try-It-Yourself Demos


XML DOM getElementsByTagNameNS() Method

Definition and Usage

The getElementsByTagNameNS() method returns a NodeList of all elements with a specified name and namespace.

Syntax

elementNode.getElementsByTagNameNS(ns,name)

Parameter | Description
ns | A string that specifies the namespace to search for. The value "*" matches all tags
name | A string that specifies the tagname to search for. The value "*" matches all tags

In all examples, we will use the XML file books_ns.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment gets an element by tag name and namespace:

xmlDoc=loadXMLDoc("books_ns.xml");

var x=xmlDoc.getElementsByTagNameNS("http://www.w3schools.com/children/","title");

document.write(x[0].nodeName);

Output:

c:title

Try-It-Yourself Demos


XML DOM getNamedItem() Method

Definition and Usage

The getNamedItem() method returns the specified node.

Syntax

getNamedItem(nodename)

Parameter | Description
nodename | The name of the node to retrieve

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment loops through the <book> elements and prints the values of the category attributes:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

for(i=0;i<x.length;i++)

{

var att=x.item(i).attributes.getNamedItem("category");

document.write(att.value + "<br />")

}

The output of the code above will be:

COOKING

CHILDREN

WEB

WEB

Try-It-Yourself Demos

getNamedItem() - Get an item's value

getNamedItem() - Change an item's value


XML DOM hasAttribute() Method

Definition and Usage

The hasAttribute() method returns TRUE if the current element node has the attribute specified by name, and FALSE otherwise.

Syntax

hasAttribute(name)

Parameter | Description
name | Required. Specifies the attribute to find

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment checks if the first <book> elements in "books.xml" has any "category" attributes:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book")[0];

document.write(x.hasAttribute("category"));

Output:

true

Try-It-Yourself Demos

hasAttribute() - Checks if an element has the specified attribute


XML DOM hasAttributeNS() Method

Definition and Usage

The hasAttributeNS() method returns TRUE if the current element node has the attribute specified by namespace and name, and FALSE otherwise.

Syntax

hasAttributeNS(ns,name)

Parameter | Description
ns | Required. Specifies the namespace of the attribute to find
name | Required. Specifies the name of the attribute to find

In all examples, we will use the XML file books_ns.xml, and the JavaScript function .

Example

The following code fragment checks if the first <title> elements in "books_ns.xml" has any attributes of the specified namespace and name:

xmlDoc=loadXMLDoc("books_ns.xml");

var x=xmlDoc.getElementsByTagName("title")[0];

var ns="http://www.w3schools.com/children/"

document.write(x.hasAttributeNS(ns,"lang"));

Output:

true

Try-It-Yourself Demos


XML DOM hasAttributes() Method

Definition and Usage

The hasAttributes() method returns TRUE if the current element node has any attributes, and FALSE otherwise.

Syntax

hasAttributes()

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment checks if the first <book> element in "books.xml" has any attributes:

xxmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book')[0];

document.write(x.hasAttributes());

Output:

true

Try-It-Yourself Demos

hasAttributes() - Checks if an element has attributes


XML DOM hasAttributes() Method

Definition and Usage

The hasAttributes() method returns true if a node has any attributes, otherwise it returns false.

Syntax

nodeObject.hasAttributes()

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment returns whether the first <book> element has any attributes:

xxmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book')[0];

document.write(x.hasAttributes());

Output:

true

Try-It-Yourself Demos

hasAttributes() - Checks if an element has any attributes


XML DOM hasChildNodes() Method

Definition and Usage

The hasChildNodes() method returns TRUE if the current element node has child nodes, and FALSE otherwise.

Syntax

elementNode.hasChildNodes()

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code checks if the first <book> element in "books.xml" has any child nodes:

xxmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book")[0];

document.write(x.hasChildNodes());

Output:

true

Try-It-Yourself Demos

hasChildNodes() - Checks if an element has child nodes


XML DOM hasChildNodes() Method

Definition and Usage

The hasChildNodes() method returns true if a node has any child nodes, otherwise it returns false.

Syntax

nodeObject.hasChildNodes()

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment returns whether the first <book> element has any child nodes:

xxmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book")[0];

document.write(x.hasChildNodes());

Output:

true

Try-It-Yourself Demos


XML DOM implementation Property

Definition and Usage

The implementation property returns the DOMImplementation object that handles the document.

Syntax

documentObject.implementation

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment returns the DOMImplementation object that handles the document:

xmlDoc=loadXMLDoc("books.xml");

document.write(xmlDoc.implementation);

Output:

[object DOMImplementation]

Try-It-Yourself Demos


XML DOM inputEncoding Property

Definition and Usage

The inputEncoding property returns the encoding used for the document (when parsing).

Syntax

documentObject.inputEncoding

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the XML encoding, standalone attribute, and XML version of the document:

xmlDoc=loadXMLDoc("books.xml");

document.write("XML encoding: " + xmlDoc.xmlEncoding);

document.write("<br />");

document.write("XML standalone: " + xmlDoc.xmlStandalone);

document.write("<br />");

document.write("XML version: " + xmlDoc.xmlVersion);

document.write("<br />");

document.write("Encoding when parsing: " + xmlDoc.inputEncoding);

Output:

XML encoding: ISO-8859-1

XML standalone: false

XML version: 1.0

Encoding when parsing: ISO-8859-1

Try-It-Yourself Demos


XML DOM insertBefore() Method

Definition and Usage

The insertBefore() method inserts a new child node before an existing child node.

This method returns the new child node.

Syntax

elementNode.insertBefore(new_node,existing_node)

Parameter | Description
new_node | Required. The node to insert
existing_node | Required. The existing node. The new node is inserted before this node.

Tips and Notes

Note: Internet Explorer will skip white-space text nodes that are generated between nodes (e.g. new-line characters), while Mozilla will not. So, in the example below, we have a function that checks the node type of the last child node.

Element nodes has a nodeType of 1, so if the last child node is not an element node, it moves to the previous node, and checks if this node is an element node. This continues until the last child node (which must be an element node) is found. This way, the result will be correct in both Internet Explorer and Mozilla.

Tip: To read more about the XML DOM differences between IE and Mozilla browsers, visit our Mozilla vs. IE chapter.

In all examples, we will use the XML file books.xml, and the JavaScript function .

Example

The following code fragment creates a new <book> node and inserts it before the last <book> element in the document:

//check if the last childnode is an element node

function get_lastchild(n)

{

var x=n.lastChild;

while (x.nodeType!=1)

{

x=x.previousSibling;

}

return x;

}

xmlDoc=loadXMLDoc("books.xml");

var newNode=xmlDoc.createElement("book");

var newTitle=xmlDoc.createElement("title");

var newText=xmlDoc.createTextNode("A Notebook");

newTitle.appendChild(newText);

newNode.appendChild(newTitle);

xmlDoc.documentElement.insertBefore(newNode,get_lastchild(x));

Try-It-Yourself Demos

insertBefore() - Add a node before a specific node

insertBefore() - Add a node before a specific child node


XML DOM insertBefore() Method

Definition and Usage

The insertBefore() method inserts a new child node before an existing child node.

This method returns the new child node.

Syntax

insertBefore(newchild,refchild)

Parameter | Description
newchild | The new node to insert
refchild | The node before which the new node is to be inserted

Tips and Notes

Note: Internet Explorer will skip white-space text nodes that are generated between nodes (e.g. new-line characters), while Mozilla will not. So, in the example below, we have a function that checks the node type of the last child node.

Element nodes has a nodeType of 1, so if the last child node is not an element node, it moves to the previous node, and checks if this node is an element node. This continues until the last child node (which must be an element node) is found. This way, the result will be correct in both Internet Explorer and Mozilla.

Tip: To read more about the XML DOM differences between IE and Mozilla browsers, visit our Mozilla vs. IE chapter.

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment creates a new <book> node and inserts it before the last <book> element in the document:

//check if the last childnode is an element node

function get_lastchild(n)

{

var x=n.lastChild;

while (x.nodeType!=1)

{

x=x.previousSibling;

}

return x;

}

xmlDoc=loadXMLDoc("books.xml");

var newNode=xmlDoc.createElement("book");

var newTitle=xmlDoc.createElement("title");

var newText=xmlDoc.createTextNode("A Notebook");

newTitle.appendChild(newText);

newNode.appendChild(newTitle);

xmlDoc.documentElement.insertBefore(newNode,get_lastchild(x));

Try-It-Yourself Demos

insertBefore() - Insert a node before a specific node


XML DOM insertData() Method

Definition and Usage

The insertData() method inserts data to a text node.

Syntax

insertData(start,string)

Parameter | Description
start | Required. Specifies where to begin inserting characters. Start value starts at zero
string | Required. Specifies the string to insert

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment inserts a string to the text node of the first <title> element in "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];

x.insertData(0,"Cooking: ");

document.write(x.data);

Output:

Cooking: Everyday Italian

Try-It-Yourself Demos

insertData() - Insert text to a text node


XML DOM internalSubset Property

Definition and Usage

The internalSubset property returns the internal DTD as a string (without the delimiting square brackets), or null if there is none.

Syntax

documentObject.doctype.internalSubset

In all examples, we will use the XML file note_internal_dtd.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the internal DTD as a string:

xmlDoc=loadXMLDoc("note_internal_dtd.xml");

document.write(xmlDoc.doctype.internalSubset);

Output:

<!ELEMENT note (to,from,heading,body)>

<!ELEMENT to (#PCDATA)>

<!ELEMENT from (#PCDATA)>

<!ELEMENT heading (#PCDATA)>

<!ELEMENT body (#PCDATA)>

<!ENTITY writer "Donald Duck.">

<!ENTITY copyright "Copyright W3Schools">


XML DOM isEqualNode() Method

Definition and Usage

The isEqualNode() method returns true if a node is equal to the given one, otherwise it returns false.

Syntax

elementObject.isEqualNode(node)

Parameter | Description
node | Required. The node to check

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code checks if two nodes are equal:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book")[1];

var y=xmlDoc.getElementsByTagName("book")[2];

document.write(x.isEqualNode(y));

Output:

false


XML DOM isEqualNode() Method

Definition and Usage

The isEqualNode() method returns true if a node is equal to the given one, otherwise it returns false.

Syntax

nodeObject.isEqualNode(node)

Parameter | Description
node | Required. The node to check

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code checks if two nodes are equal:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book")[1];

var y=xmlDoc.getElementsByTagName("book")[2];

document.write(x.isEqualNode(y));

Output:

false


XML DOM isId Property

Definition and Usage

The isId property returns true if an attribute is known to be of type ID (e.g. contains an identifier for its owner element), otherwise it returns false.

Syntax

attrObject.isId

In all examples, we will use the XML file , and the JavaScript function loadXMLDoc().

Example

The following code fragment returns whether the category attribute is an ID attribute of the <book> element:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

for(i=0;i<x.length;i++)

{

document.write(x.item(i).attributes[0].isId);

document.write("<br />");

}

The output of the code above will be:

false

Try-It-Yourself Demos


XML DOM isSameNode() Method

Definition and Usage

The isSameNode() method checks if the specified node is the same as the existing node.

This function returns TRUE if the two nodes are the same, and FALSE otherwise.

Syntax

elementNode.isSameNode(node)

Parameter | Description
node | Required. The node to check

In all examples, we will use the XML file , and the JavaScript function loadXMLDoc().

Example

The following code checks a if two nodes are the same:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book")[0];

var y=xmlDoc.getElementsByTagName("book")[1];

document.write(x.isSameNode(y));

Output:

false

Try-It-Yourself Demos

isSameNode() - Check if two nodes are the same


XML DOM isSameNode() Method

Definition and Usage

The isSameNode() method returns true if a node is the same node as the given one, otherwise it returns false.

Syntax

nodeObject.isSameNode(node)

Parameter | Description
node | Required. The node to check

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code checks if two nodes are the same node:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book")[0];

var y=xmlDoc.getElementsByTagName("book")[1];

document.write(x.isSameNode(y));

Output:

false

Try-It-Yourself Demos


XML DOM item() Method

Definition and Usage

The item() method returns the node at the specified index in a node list.

Syntax

item(index)

Parameter | Description
index | The index

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment loops through all direct child nodes of the <bookstore> element in the XML document:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.documentElement.childNodes;

for (i=0;i<x.length;i++)

{

//Display only element nodes

if (x.item(i).nodeType==1)

  {

  document.write(x.item(i).nodeName)

  document.write("<br />")

  }

}

Output:

book

book

book

book

Try-It-Yourself Demos


XML DOM item() Method

Definition and Usage

The item() method returns the node at the specified index in a node list.

Syntax

item(index)

Parameter | Description
index | The index

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment loops through the <book> elements and prints the values of the category attributes:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

for(i=0;i<x.length;i++)

{

var att=x.item(i).attributes.getNamedItem("category");

document.write(att.value + "<br />")

}

The output of the code above will be:

COOKING

CHILDREN

WEB

WEB

Try-It-Yourself Demos

Loop through the items in a node list

getNamedItem() - Get an item's value

getNamedItem() - Change an item's value


XML DOM lastChild Property

Definition and Usage

The lastChild property returns the last child node of the document.

Syntax

documentObject.lastChild

Tips and Notes

Note: Internet Explorer will skip white-space text nodes that are generated between nodes (e.g. new-line characters), while Mozilla will not. So, in the example below, we have a function that checks the node type of the last child node.

Element nodes has a nodeType of 1, so if the last child node is not an element node, it moves to the previous node, and checks if this node is an element node. This continues until the last child node (which must be an element node) is found. This way, the result will be correct in both Internet Explorer and Mozilla.

Tip: To read more about the XML DOM differences between IE and Mozilla browsers, visit our Mozilla vs. IE chapter.

In all examples, we will use the XML file , and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the node name and node type of the last child node of the document:

//check if the last node is an element node

function get_lastchild(n)

{

var x=n.lastChild;

while (x.nodeType!=1)

{

x=x.previousSibling;

}

return x;

}

xmlDoc=loadXMLDoc("books.xml");

var x=get_lastchild(xmlDoc);

document.write("Nodename: " + x.nodeName);

document.write(" (nodetype: " + x.nodeType);

Output:

Nodename: bookstore (nodetype: 1)

Try-It-Yourself Demos


XML DOM lastChild Property

XML DOM firstChild Property

Definition and Usage

The lastChild property returns the last child node of the selected element

If the selected node has no children, this property returns NULL.

Syntax

elementNode.lastChild

Tips and Notes

Note: Internet Explorer will skip white-space text nodes that are generated between nodes (e.g. new-line characters), while Mozilla will not. So, in the example below, we have a function that checks the node type of the last child node.

Element nodes has a nodeType of 1, so if the last child node is not an element node, it moves to the previous node, and checks if this node is an element node. This continues until the last child node (which must be an element node) is found. This way, the result will be correct in both Internet Explorer and Mozilla.

Tip: To read more about the XML DOM differences between IE and Mozilla browsers, visit our Mozilla vs. IE chapter.

In all examples, we will use the XML file books.xml, and the JavaScript function .

Example

The following code fragment gets the last child node from "books.xml":

//check if the last node is an element node

function get_lastchild(n)

{

var x=n.lastChild;

while (x.nodeType!=1)

  {

  x=x.previousSibling;

  }

return x;

}

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.documentElement;

var lastNode=get_lastchild(x);

for (var i=0;i<lastNode.childNodes.length;i++)

{

if (lastNode.childNodes[i].nodeType==1)

  {

  //Process only element nodes

  document.write(lastNode.childNodes[i].nodeName);

  document.write(" = ");

  document.write(lastNode.childNodes[i].childNodes[0].nodeValue);

  document.write("<br />");

  }

}

The output of the code above will be:

title = Learning XML

author = Erik T. Ray

year = 2003

price = 39.95

Try-It-Yourself Demos


XML DOM length Property

XML DOM data Property

Definition and Usage

The length property returns the number of characters in the selected node

Syntax

CDATANode.length

In all examples, we will use the XML file books_cdata.xml, and the JavaScript function .

Example

The following code fragment prints the text node data and length from the first <title> element in "books_cdata.xml":

xmlDoc=loadXMLDoc("books_cdata.xml");

var x=xmlDoc.getElementsByTagName("html")[0].childNodes[0]

document.write(x.data);

document.write(" - Length: ");

document.write(x.length);

The output of the code above will be:

Stunning! - Length: 16

Remember that the length above is from the entire CDATA section (<b>Stunning!</b>), not just the text.

Try-It-Yourself Demos


XML DOM length Property

Definition and Usage

The length property returns the length of the text in a comment node (in characters).

Syntax

commentNode.length

In all examples, we will use the XML file books_comment.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment prints the text node data and length from the first <title> element in "books_comment.xml":

xmlDoc=loadXMLDoc("books_comment.xml");

var x=xmlDoc.getElementsByTagName("book")[0].childNodes;

for (var i=0;i<x.length;i++)

{

if (x[i].nodeType==8)

  {

  //Process only comment nodes

  document.write(x[i].length);

  document.write("<br />");

  }

}

The output of the code above will be:

44

In the example above we use a loop and an if-test to make sure we only process comment nodes. A comment node has a node type of 8.

Try-It-Yourself Demos


XML DOM length Property

Definition and Usage

The length property returns the number of nodes in a node list.

Syntax

nodelistObject.length

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment gets the number of <title> elements in the XML document:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('title');

document.write("Number of title elements: " + x.length);

The output of the code above will be:

Number of title elements: 4

Try-It-Yourself Demos

length - Loop through the nodes in a node list


XML DOM length Property

Definition and Usage

The length property returns the number of nodes in a NamedNodeMap.

Syntax

nodemapObject.length

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment gets the number of attributes in the first <book> element in the XML document:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

document.write(x.item(0).attributes.length);

The output of the code above will be:

1

Try-It-Yourself Demos

length - Return the number of nodes in a named node map

length - Return the number of nodes in a node list


XML DOM length Property

Definition and Usage

The length property returns the length of the text of a node (in characters).

Syntax

textNode.length

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment prints the text node data and length from the first <title> element in "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]

document.write(x.data);

document.write(" - Length: ");

document.write(x.length);

The output of the code above will be:

Everyday Italian - Length: 16

Try-It-Yourself Demos


XML DOM localName Property

Definition and Usage

The localName property returns the local part of the name of an attribute.

Syntax

attrObject.localName

In all examples, we will use the XML file books_ns.xml, and the JavaScript function .

Example

The following code fragment returns the local name of the "lang" attributes:

xmlDoc=loadXMLDoc("books_ns.xml");

var x=xmlDoc.getElementsByTagName('title');

for(i=0;i<x.length;i++)

{

document.write(x.item(i).attributes[0].localName);

document.write("<br />");

}

The output of the code above will be:

lang

lang

Try-It-Yourself Demos


XML DOM localName Property

Definition and Usage

The localName property returns the local name (element name) of the selected element

If the selected node is not an element or attribute, this property returns NULL.

Syntax

elementNode.localName

In all examples, we will use the XML file books.xml, and the JavaScript function .

Example 1

The following code fragment gets the local name from the first <book> element in "books.xml":

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("book")[0]

document.write(x.localName);

The output of the code above will be:

book

Example 2

The following code fragment gets the local name from the last child node in "books.xml":

//check if the last node is an element node

function get_lastchild(n)

{

var x=n.lastChild;

while (x.nodeType!=1)

  {

  x=x.previousSibling;

  }

return x;

}

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.documentElement;

var lastNode=get_lastchild(x);

document.write(lastNode.localName);

The output of the code above will be:

book

Try-It-Yourself Demos


XML DOM lookupNamespaceURI() Method

Definition and Usage

The lookupNamespaceURI() method returns the namespace matching the specified prefix on the current node.

Syntax

elementNode.lookupNamespaceURI(prefix)

Parameter | Description
prefix | Required. A string that specifies prefix to find

In all examples, we will use the XML file books_ns.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment finds the namespace URI for the "c" prefix in the first <book> element:

xmlDoc=loadXMLDoc("books_ns.xml");

var x=xmlDoc.getElementsByTagName("book")[0];

document.write(x.lookupNamespaceURI("c"));

Output:

http://www.w3schools.com/children/

Try-It-Yourself Demos


XML DOM lookupNamespaceURI() Method

Definition and Usage

The lookupNamespaceURI() method returns the namespace URI matching the specified prefix on a node.

Syntax

nodeObject.lookupNamespaceURI(prefix)

Parameter | Description
prefix | Required. The prefix

In all examples, we will use the XML file books_ns.xml, and the JavaScript function .

Example

The following code fragment finds the namespace URI for the "c" prefix in the first <book> element:

xmlDoc=loadXMLDoc("books_ns.xml");

var x=xmlDoc.getElementsByTagName("book")[0];

document.write(x.lookupNamespaceURI("c"));

Output:

http://www.w3schools.com/children/

Try-It-Yourself Demos


XML DOM lookupPrefix() Method

Definition and Usage

The lookupPrefix() method returns the prefix matching the specified namespace URI on the current node.

Syntax

elementNode.lookupPrefix(URI)

Parameter | Description
URI | Required. The namespace URI for the prefix to find

In all examples, we will use the XML file books_ns.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment finds the prefix for a namespace URI in the first <book> element:

xmlDoc=loadXMLDoc("books_ns.xml");

var x=xmlDoc.getElementsByTagName("book")[0];

document.write(x.lookupPrefix("http://www.w3schools.com/children/"));

Output:

c

Try-It-Yourself Demos


XML DOM lookupPrefix() Method

Definition and Usage

The lookupPrefix() method returns the prefix matching the specified namespace URI on a node.

Syntax

nodeObject.lookupPrefix(URI)

Parameter | Description
URI | Required. The namespace URI

In all examples, we will use the XML file books_ns.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment finds the prefix for the namespace URI in the first <book> element:

xmlDoc=loadXMLDoc("books_ns.xml");

var x=xmlDoc.getElementsByTagName("book")[0];

document.write(x.lookupPrefix("http://www.w3schools.com/children/"));

Output:

c

Try-It-Yourself Demos

lookupPrefix() - Get a prefix by namespace


XML DOM name Property

Definition and Usage

The name property returns the name of an attribute.

Syntax

attrObject.name

In all examples, we will use the XML file books.xml, and the JavaScript function .

Example

The following code fragment displays the name and value of the category attribute:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

for(i=0;i<x.length;i++)

{

document.write(x.item(i).attributes[0].name);

document.write(" = ");

document.write(x.item(i).attributes[0].value);

document.write("<br />");

}

Output:

category = COOKING

category = CHILDREN

category = WEB

category = WEB

Try-It-Yourself Demos


XML DOM name Property

Definition and Usage

The name property returns the name of the DTD (the name immediately following the DOCTYPE keyword).

Syntax

documentObject.doctype.name

In all examples, we will use the XML file , and the JavaScript function .

Example

The following code fragment displays the name of the DTD associated with the XML document:

xmlDoc=loadXMLDoc("note_internal_dtd.xml");

document.write(xmlDoc.doctype.name);

Output:

note

Try-It-Yourself Demos


XML DOM namespaceURI Property

Definition and Usage

The namespaceURI property sets or returns the namespace URI of an attribute.

Syntax

attrObject.namespaceURI

In all examples, we will use the XML file books_ns.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment returns the namespace URI of the "lang" attributes:

xmlDoc=loadXMLDoc("books_ns.xml");

var x=xmlDoc.getElementsByTagName('title');

for(i=0;i<x.length;i++)

{

document.write(x.item(i).attributes[0].namespaceURI);

document.write("<br />");

}

The output of the code above will be:

http://www.w3schools.com/children/

http://www.w3schools.com/xml/

Try-It-Yourself Demos


XML DOM namespaceURI Property

Definition and Usage

The namespaceURI property returns URI of the namespace for the selected element

If the selected node is not an element or attribute, this property always returns NULL.

Syntax

elementNode.namespaceURI

In all examples, we will use the XML file books_ns.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment gets namespace URI from the first <title> element in "books_ns.xml":

xmlDoc=loadXMLDoc("books_ns.xml");

x=xmlDoc.getElementsByTagName("title")[0]

document.write(x.namespaceURI);

The output of the code above will be:

http://www.w3schools.com/children/

Try-It-Yourself Demos


XML DOM nextSibling Property

Definition and Usage

The nextSibling property returns the next sibling node (the following node in the same tree level) of the selected element

If there is no such node, this property returns null.

Syntax

elementNode.nextSibling

Tips and Notes

Note: Internet Explorer will skip white-space text nodes that are generated between nodes (e.g. new-line characters), while Mozilla will not. So, in the example below, we have a function that checks the node type of the next sibling node.

Element nodes has a nodeType of 1, so if the next sibling node is not an element node, it moves to the next node, and checks if this node is an element node. This continues until the next sibling node (which must be an element node) is found. This way, the result will be correct in both Internet Explorer and Mozilla.

Tip: To read more about the XML DOM differences between IE and Mozilla browsers, visit our Mozilla vs. IE chapter.

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment gets the next sibling node from the first <title> element in the XML document:

//check if the next sibling node is an element node

function get_nextsibling(n)

{

var x=n.nextSibling;

while (x.nodeType!=1)

 {

 x=x.nextSibling;

 }

return x;

}

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0];

document.write(x.nodeName);

document.write(" = ");

document.write(x.childNodes[0].nodeValue);

var y=get_nextsibling(x);

document.write("<br />Next sibling: ");

document.write(y.nodeName);

document.write(" = ");

document.write(y.childNodes[0].nodeValue);

The output of the code above will be:

title = Everyday Italian

Next sibling: author = Giada De Laurentiis

Try-It-Yourself Demos

nextSibling - Get the next sibling of a node

previousSibling - Get the previous sibling of a node


XML DOM nextSibling Property

Definition and Usage

The nextSibling property returns the node immediately following a node (the following node in the same tree level).

If there is no such node, this property returns null.

Syntax

nodeObject.nextSibling

Tips and Notes

Note: Internet Explorer will skip white-space text nodes that are generated between nodes (e.g. new-line characters), while Mozilla will not. So, in the example below, we have a function that checks the node type of the next sibling node.

Element nodes has a nodeType of 1, so if the next sibling node is not an element node, it moves to the next node, and checks if this node is an element node. This continues until the next sibling node (which must be an element node) is found. This way, the result will be correct in both Internet Explorer and Mozilla.

Tip: To read more about the XML DOM differences between IE and Mozilla browsers, visit our Mozilla vs. IE chapter.

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment gets the next sibling node from the first <title> element in the XML document:

//check if the next sibling node is an element node

function get_nextsibling(n)

{

var x=n.nextSibling;

while (x.nodeType!=1)

 {

 x=x.nextSibling;

 }

return x;

}

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0];

document.write(x.nodeName);

document.write(" = ");

document.write(x.childNodes[0].nodeValue);

var y=get_nextsibling(x);

document.write("<br />Next sibling: ");

document.write(y.nodeName);

document.write(" = ");

document.write(y.childNodes[0].nodeValue);

The output of the code above will be:

title = Everyday Italian

Next sibling: author = Giada De Laurentiis

Try-It-Yourself Demos

nextSibling - Get the next sibling of a node

previousSibling - Get the previous sibling of a node


XML DOM Node Information

The nodeName, nodeValue, and nodeType properties contain information about nodes.

Node Information

Every node has some properties that contain some information about the node. The properties are:

· nodeName
· nodeValue
· nodeType

nodeName

The nodeName property contains the name of a node.

· The nodeName of an element node is the tag name
· The nodeName of an attribute node is the attribute name
· The name of a text node is always #text
· The name of the document node is always #document

Note: nodeName always contains the uppercase tag name of an XML element.

nodeValue

On text nodes, the nodeValue property contains the text.

On attribute nodes, the nodeValue property contains the attribute value.

The nodeValue property is not available on document and element nodes.

nodeType

The nodeType property returns the type of node.

The most important node types are:

Element type | NodeType
Element | 1
Attribute | 2
Text | 3
Comment | 8
Document | 9


XML DOM nodeName Property

Definition and Usage

The nodeName property returns the name of a node, depending on its type.

Syntax

attrObject.nodeName

In all examples, we will use the XML file , and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the node name, node value, and node type of the category attribute:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

for(i=0;i<x.length;i++)

{

document.write(x.item(i).attributes[0].nodeName);

document.write(" = ");

document.write(x.item(i).attributes[0].nodeValue);

document.write(" (nodetype: ");

document.write(x.item(i).attributes[0].nodeType + ")");

document.write("<br />");

}

Output:

category = COOKING (nodetype: 2)

category = CHILDREN (nodetype: 2)

category = WEB (nodetype: 2)

category = WEB (nodetype: 2)

Try-It-Yourself Demos


XML DOM nodeName Property

Definition and Usage

The nodeName property returns the name of a node, depending on its type.

Syntax

documentObject.nodeName

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the node name and node type of the root node:

xmlDoc=loadXMLDoc("books.xml");

document.write("Nodename: " + xmlDoc.nodeName);

document.write(" (nodetype: " + xmlDoc.nodeType);

Output:

Nodename: #document (nodetype: 9)

Try-It-Yourself Demos

Display nodeName and nodeType of all elements

Display nodeName and nodeValue of all elements


XML DOM nodeName Property

Definition and Usage

The nodeName property returns the tag name of the selected element.

Syntax

elementNode.nodeName

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment gets the tag name from the first <title> element of "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0];

document.write(x.nodeName);

The output of the code above will be:

title

Try-It-Yourself Demos


XML DOM nodeName Property

Definition and Usage

The nodeName property returns the name of a node, depending on its type.

Syntax

nodeObject.nodeName

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the node name and node type of the root node:

xmlDoc=loadXMLDoc("books.xml");

document.write("Nodename: " + xmlDoc.nodeName);

document.write(" (nodetype: " + xmlDoc.nodeType);

Output:

Nodename: #document (nodetype: 9)

Try-It-Yourself Demos


XML DOM nodeType Property

Definition and Usage

The nodeType property returns the type of a node.

Syntax

attrObject.nodeType

In all examples, we will use the XML file , and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the node name, node value, and node type of the category attribute:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

for(i=0;i<x.length;i++)

{

document.write(x.item(i).attributes[0].nodeName);

document.write(" = ");

document.write(x.item(i).attributes[0].nodeValue);

document.write(" (nodetype: ");

document.write(x.item(i).attributes[0].nodeType + ")");

document.write("<br />");

}

Output:

category = COOKING (nodetype: 2)

category = CHILDREN (nodetype: 2)

category = WEB (nodetype: 2)

category = WEB (nodetype: 2)

Try-It-Yourself Demos


XML DOM nodeType Property

Definition and Usage

The nodeType property returns the node type of a node.

Syntax

documentObject.nodeType

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the node name and node type of the root node:

xmlDoc=loadXMLDoc("books.xml");

document.write("Nodename: " + xmlDoc.nodeName);

document.write(" (nodetype: " + xmlDoc.nodeType);

Output:

Nodename: #document (nodetype: 9)

Try-It-Yourself Demos

Display nodeName and nodeType of all elements


XML DOM nodeType Property

Definition and Usage

The nodeType property returns node type of the selected node.

Syntax

elementNode.nodeName

Node Number: | Node Name:
1 | Element
2 | Attribute
3 | Text
4 | CDATA Section
5 | Entity Reference
6 | Entity
7 | Processing Instrucion
8 | Comment
9 | Document
10 | Document Type
11 | Document Fragment
12 | Notation

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment gets the node type from the first <title> element of "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0];

document.write(x.nodeType);

The output of the code above will be:

1

Try-It-Yourself Demos


XML DOM nodeType Property

Definition and Usage

The nodeType property returns the node type of a node.

Syntax

nodeObject.nodeType

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the node name and node type of the root node:

xmlDoc=loadXMLDoc("books.xml");

document.write("Nodename: " + xmlDoc.nodeName);

document.write(" (nodetype: " + xmlDoc.nodeType);

Output:

Nodename: #document (nodetype: 9)

Try-It-Yourself Demos

Display nodeName and nodeType of all elements


XML DOM nodeValue Property

Definition and Usage

The nodeValue property sets or returns the value of a node, depending on its type.

Syntax

attrObject.nodeValue

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the node name, node value, and node type of the category attribute:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

for(i=0;i<x.length;i++)

{

document.write(x.item(i).attributes[0].nodeName);

document.write(" = ");

document.write(x.item(i).attributes[0].nodeValue);

document.write(" (nodetype: ");

document.write(x.item(i).attributes[0].nodeType + ")");

document.write("<br />");

}

Output:

category = COOKING (nodetype: 2)

category = CHILDREN (nodetype: 2)

category = WEB (nodetype: 2)

category = WEB (nodetype: 2)

Try-It-Yourself Demos


XML DOM nodeValue Property

Definition and Usage

The nodeValue property sets or returns the value of a node, depending on its type.

Syntax

documentObject.nodeValue

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the node name and node value of the root node:

xmlDoc=loadXMLDoc("books.xml");

document.write("Nodename: " + xmlDoc.nodeName);

document.write(" (value: " + xmlDoc.childNodes[0].nodeValue);

Output:

Nodename: #document (value: version="1.0" encoding="ISO-8859-1"

Try-It-Yourself Demos

Display nodeName and nodeType of all elements

Display nodeName and nodeValue of all elements


XML DOM nodeValue Property

Definition and Usage

The nodeValue property sets or returns the value of a node, depending on its type.

Syntax

nodeObject.nodeValue

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the node name and node value of the root node:

xmlDoc=loadXMLDoc("books.xml");

document.write("Nodename: " + xmlDoc.nodeName);

document.write(" (value: " + xmlDoc.childNodes[0].nodeValue);

Output:

Nodename: #document (value: version="1.0" encoding="ISO-8859-1"

Try-It-Yourself Demos

Display nodeName and nodeType of all elements

Display nodeName and nodeValue of all elements


XML DOM ownerDocument Property

Definition and Usage

The ownerDocument property returns the root element (document object) for a node.

Syntax

attrObject.ownerDocument

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment returns the root element of the first category attribute node in the XML document:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

document.write(x.item(0).attributes[0].ownerDocument);

document.write("<br />");

document.write(x.item(0).attributes[0].ownerDocument.nodeName);

document.write("<br />");

document.write(x.item(0).attributes[0].ownerDocument.nodeType);

The output of the code above will be:

[object XMLDocument]

#document

9

Try-It-Yourself Demos

ownerDocument - Get the root element (document object) for an attribute node


XML DOM ownerDocument Property

Definition and Usage

The ownerDocument property returns the document object the selected element belongs to.

Syntax

elementNode.ownerDocument

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment gets name and node type from the owner document of the first <title> element in "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0];

x=x.ownerDocument;

document.write("Nodename: " + x.nodeName);

document.write(" (nodetype: " + x.nodeType + ")");

The output of the code above will be:

Nodename: #document (nodetype: 9)

Try-It-Yourself Demos

ownerDocument - Get the owner document of a node


XML DOM ownerDocument Property

Definition and Usage

The ownerDocument property returns the root element (document object) for a node.

Syntax

nodeObject.ownerDocument

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment returns the root element of the first <title> node in the XML document:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0].ownerDocument;

document.write("Nodename: " + x.nodeName);

document.write(" (nodetype: " + x.nodeType + ")");

The output of the code above will be:

Nodename: #document (nodetype: 9)

Try-It-Yourself Demos

ownerDocument - Get the root element (document object) for a node


XML DOM ownerElement Property

Definition and Usage

The ownerElement property returns the element node the attribute is attached to.

Syntax

attrObject.ownerElement

In all examples, we will use the XML file , and the JavaScript function loadXMLDoc().

Example

The following code fragment returns the element node the first category attribute is attached to:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

document.write(x.item(0).attributes[0].ownerElement);

document.write("<br />");

document.write(x.item(0).attributes[0].ownerElement.nodeName);

document.write("<br />");

document.write(x.item(0).attributes[0].ownerElement.nodeType);

The output of the code above will be:

[object Element]

book

1

Try-It-Yourself Demos

ownerElement - Get the element node an attribute is attached to


XML DOM parentNode Property

Definition and Usage

The parentNode property returns the parent node of the specified element.

Syntax

elementNode.parentNode

In all examples, we will use the XML file , and the JavaScript function loadXMLDoc().

Example

The following code fragment gets the parent node from the first <title> element in "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0];

var parent=x.parentNode;

document.write("Parent node: " + parent.nodeName);

The output of the code above will be:

Parent node: book

Try-It-Yourself Demos


XML DOM parentNode Property

Definition and Usage

The parentNode property returns the parent node of a node.

Syntax

nodeObject.parentNode

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment returns the parent node of the first <title> element:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0];

var parent=x.parentNode;

document.write("Parent node: " + parent.nodeName);

The output of the code above will be:

Parent node: book

Try-It-Yourself Demos


XML DOM Parser

Parsing the XML DOM

To read and update, create and manipulate an XML document, you will need an XML parser.

Examples

Parse an XML file - Crossbrowser example

This example is a cross-browser example that loads an existing XML document ("note.xml") into the XML parser.

Parse an XML string - Crossbrowser example

This example is a cross-browser example on how to load and parse an XML string.

Parsing the XML DOM

To manipulate an XML document, you need an XML parser. The parser loads the document into your computer's memory. Once the document is loaded, its data can be manipulated using the DOM. The DOM treats the XML document as a tree.

There are some differences between Microsoft's XML parser and the XML parser used in Mozilla browsers. In this tutorial we will show you how to create cross browser scripts that will work in both Internet Explorer and Mozilla browsers.

Microsoft's XML Parser

Microsoft's XML parser is a COM component that comes with Internet Explorer 5 and higher. Once you have installed Internet Explorer, the parser is available to scripts.

Microsoft's XML parser supports all the necessary functions to traverse the node tree, access the nodes and their attribute values, insert and delete nodes, and convert the node tree back to XML.

To create an instance of Microsoft's XML parser, use the following code:

JavaScript:

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

VBScript:

set xmlDoc=CreateObject("Microsoft.XMLDOM")

ASP:

set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")

The following code fragment loads an existing XML document ("note.xml") into Microsoft's XML parser:

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.async="false";

xmlDoc.load("note.xml");

The first line of the script above creates an instance of the XML parser. The second line turns off asynchronized loading, to make sure that the parser will not continue execution of the script before the document is fully loaded. The third line tells the parser to load an XML document called "note.xml".

XML Parser in Mozilla, Firefox, and Opera

Mozilla's XML parser supports all the necessary functions to traverse the node tree, access the nodes and their attribute values, insert and delete nodes, and convert the node tree back to XML.

To create an instance of the XML parser in Mozilla browsers, use the following code:

JavaScript:

var xmlDoc=document.implementation.createDocument("ns","root",null);

The first parameter, ns, defines the namespace used for the XML document. The second parameter, root, is the XML root element in the XML file. The third parameter, null, is always null because it is not implemented yet.

The following code fragment loads an existing XML document ("note.xml") into Mozillas' XML parser:

var xmlDoc=document.implementation.createDocument("","",null);

xmlDoc.load("note.xml");

The first line of the script above creates an instance of the XML parser. The second line tells the parser to load an XML document called "note.xml".

Parsing an XML File - A Cross browser Example

The following example is a cross browser example that loads an existing XML document ("note.xml") into the XML parser:

<html>

<head>

<script type="text/javascript">

var xmlDoc;

function loadXML()

{

// code for IE

if (window.ActiveXObject)

{

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.async=false;

xmlDoc.load("note.xml");

getmessage();

}

// code for Mozilla, Firefox, Opera, etc.

else if (document.implementation &&

document.implementation.createDocument)

{

xmlDoc=document.implementation.createDocument("","",null);

xmlDoc.load("note.xml");

xmlDoc.onload=getmessage;

}

else

{

alert('Your browser cannot handle this script');

}

}

function getmessage()

{

document.getElementById("to").innerHTML=

xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;

document.getElementById("from").innerHTML=

xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;

document.getElementById("message").innerHTML=

xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;

}

</script>

</head>

<body onload="loadXML()">

<h1>W3Schools Internal Note</h1>

<p><b>To:</b> <span id="to"></span><br />

<b>From:</b> <span id="from"></span><br />

<b>Message:</b> <span id="message"></span>

</p>

</body>

</html>

Output:

W3Schools Internal Note

To: Tove

From: Jani

Message: Don't forget me this weekend!

Important Note

To extract the text (Jani) from an XML element like: <from>Jani</from>, the correct syntax is:

getElementsByTagName("from")[0].childNodes[0].nodeValue

IMPORTANT: getElementsByTagName returns an array of nodes. The array contains all elements with the specified name within the XML document. In this case there is only one "from" element, but you still have to specify the array index ( [0] ).

Parsing an XML String - A Cross browser Example

The following code is a cross-browser example on how to load and parse an XML string:

<html>

<body>

<script type="text/javascript">

var text="<note>";

text=text+"<to>Tove</to>";

text=text+"<from>Jani</from>";

text=text+"<heading>Reminder</heading>";

text=text+"<body>Don't forget me this weekend!</body>";

text=text+"</note>";

// code for IE

if (window.ActiveXObject)

{

var doc=new ActiveXObject("Microsoft.XMLDOM");

doc.async="false";

doc.loadXML(text);

}

// code for Mozilla, Firefox, Opera, etc.

else

{

var parser=new DOMParser();

var doc=parser.parseFromString(text,"text/xml");

}

// documentElement always represents the root node

var x=doc.documentElement;

document.write("Text of first child element: ");

document.write(x.childNodes[0].childNodes[0].nodeValue);

document.write("<br />");

document.write("Text of second child element: ");

document.write(x.childNodes[1].childNodes[0].nodeValue);

</script>

</body>

</html>

Output:

Text of first child element: Tove

Text of second child element: Jani

Note: Internet Explorer uses the loadXML() method to parse an XML string, while Mozilla browsers uses the DOMParser object.


XML DOM Parser Errors

Microsoft's parseError object can be used to retrieve error information from the Microsoft XML parser.

The parseError Object

When trying to open an XML document, a parser-error may occur.

With the parseError object, you can retrieve the error code, the error text, the line that caused the error, and more.

Note: The parseError object is not a part of the W3C DOM standard!

File Error

In the following code we will try to load a non-existing file, and display some of its error properties:

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")

xmlDoc.async="false"

xmlDoc.load("ksdjf.xml")

document.write("Error code: " + xmlDoc.parseError.errorCode)

document.write("<br />Error reason: " + xmlDoc.parseError.reason)

document.write("<br />Error line: " + xmlDoc.parseError.line)

Try it yourself

XML Error

In the following code we let the parser load an XML document that is not well-formed.

(You can read more about well-formed and valid XML in our XML tutorial)

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")

xmlDoc.async="false"

xmlDoc.load("note_error.xml")

document.write("Error code: " + xmlDoc.parseError.errorCode)

document.write("<br />Error reason: " + xmlDoc.parseError.reason)

document.write("<br />Error line: " + xmlDoc.parseError.line)

Try it yourself or just look at the XML file

The parseError Object's Properties

Property | Description
errorCode | Returns a long integer error code
reason | Returns a string containing the reason for the error
line | Returns a long integer representing the line number for the error
linepos | Returns a long integer representing the line position for the error
srcText | Returns a string containing the line that caused the error
url | Returns the URL pointing the loaded document
filepos | Returns a long integer file position of the error


XML DOM prefix Property

Definition and Usage

The prefix property sets or returns the namespace prefix of an attribute.

Syntax

attrObject.prefix

In all examples, we will use the XML file books_ns.xml, and the JavaScript function .

Example

The following code fragment returns the namespace prefix of the "lang" attributes:

xmlDoc=loadXMLDoc("books_ns.xml");

var x=xmlDoc.getElementsByTagName('title');

for(i=0;i<x.length;i++)

{

document.write(x.item(i).attributes[0].prefix);

document.write("<br />");

}

The output of the code above will be:

c

x

Try-It-Yourself Demos


XML DOM prefix Property

Definition and Usage

The prefix property returns namespace prefix for the selected element

If the selected node is not an element or attribute, this property always returns NULL.

Syntax

elementNode.prefix

In all examples, we will use the XML file books_ns.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment gets the namespace prefix from the first <title> element in "books_ns.xml":

xmlDoc=loadXMLDoc("books_ns.xml");

x=xmlDoc.getElementsByTagName("title")[0]

document.write(x.prefix);

The output of the code above will be:

c

Try-It-Yourself Demos


XML DOM prefix Property

Definition and Usage

The prefix property sets or returns the namespace prefix of a node.

Syntax

nodeObject.prefix

In all examples, we will use the XML file books_ns.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment returns the namespace prefix of the <title> elements:

xmlDoc=loadXMLDoc("books_ns.xml");

var x=xmlDoc.getElementsByTagName('title');

for(i=0;i<x.length;i++)

{

document.write(x.item(i).prefix);

document.write("<br />");

}

The output of the code above will be:

c

x

Try-It-Yourself Demos


XML DOM previousSibling Property

Definition and Usage

The previousSibling property returns the previous sibling node (the previous node in the same tree level) of the selected element

If there is no such node, this property returns null.

Syntax

elementNode.previousSibling

Tips and Notes

Note: Internet Explorer will skip white-space text nodes that are generated between nodes (e.g. new-line characters), while Mozilla will not. So, in the example below, we have a function that checks the node type of the previous sibling node.

Element nodes has a nodeType of 1, so if the previous sibling node is not an element node, it moves to the previous node, and checks if this node is an element node. This continues until the previous sibling node (which must be an element node) is found. This way, the result will be correct in both Internet Explorer and Mozilla.

Tip: To read more about the XML DOM differences between IE and Mozilla browsers, visit our chapter.

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment gets the previous sibling node from the first <author> element in the XML document:

//check if the previous sibling node is an element node

function get_previoussibling(n)

{

var x=n.previousSibling;

while (x.nodeType!=1)

{

x=x.previousSibling;

}

return x;

}

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("author")[0];

document.write(x.nodeName);

document.write(" = ");

document.write(x.childNodes[0].nodeValue);

var y=get_previoussibling(x);

document.write("<br />Previous sibling: ");

document.write(y.nodeName);

document.write(" = ");

document.write(y.childNodes[0].nodeValue);

The output of the code above will be:

author = Giada De Laurentiis

Previous sibling: title = Everyday Italian

Try-It-Yourself Demos

previousSibling - Get the previous sibling of a node

nextSibling - Get the next sibling of a node


XML DOM previousSibling Property

Definition and Usage

The previousSibling property returns the node immediately before a node (the following node in the same tree level).

If there is no such node, this property returns null.

Syntax

nodeObject.previousSibling

Tips and Notes

Note: Internet Explorer will skip white-space text nodes that are generated between nodes (e.g. new-line characters), while Mozilla will not. So, in the example below, we have a function that checks the node type of the previous sibling node.

Element nodes has a nodeType of 1, so if the previous sibling node is not an element node, it moves to the previous node, and checks if this node is an element node. This continues until the previous sibling node (which must be an element node) is found. This way, the result will be correct in both Internet Explorer and Mozilla.

Tip: To read more about the XML DOM differences between IE and Mozilla browsers, visit our Mozilla vs. IE chapter.

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment gets the previous sibling node from the first <author> element in the XML document:

//check if the previous sibling node is an element node

function get_previoussibling(n)

{

var x=n.previousSibling;

while (x.nodeType!=1)

{

x=x.previousSibling;

}

return x;

}

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("author")[0];

document.write(x.nodeName);

document.write(" = ");

document.write(x.childNodes[0].nodeValue);

var y=get_previoussibling(x);

document.write("<br />Previous sibling: ");

document.write(y.nodeName);

document.write(" = ");

document.write(y.childNodes[0].nodeValue);

The output of the code above will be:

author = Giada De Laurentiis

Previous sibling: title = Everyday Italian

Try-It-Yourself Demos

nextSibling - Get the next sibling of a node


XML DOM removeAttribute() Method

Definition and Usage

The removeAttribute() method removes a specified attribute.

If a default value for the attribute is defined in a DTD, a new attribute immediately appears with the default value

Syntax

elementNode.removeAttribute(name)

Parameter | Description
name | Required. Specifies the attribute to remove

In all examples, we will use the XML file books.xml, and the JavaScript function .

Example

The following code fragment removes the "category" attribute from all <book> elements in "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

for (i=0;i<x.length;i++)

{

x[i].removeAttribute('category'));

}

Try-It-Yourself Demos

removeAttributes() - Remove attributes


XML DOM removeAttributeNode() Method

Definition and Usage

The removeAttributeNode() method removes a specified attribute node.

If a default value for the attribute is defined in a DTD, a new attribute immediately appears with the default value.

This function returns the removed attribute node.

Syntax

elementNode.removeAttributeNode(node)

Parameter | Description
node | Required. The node to remove

In all examples, we will use the XML file books.xml, and the JavaScript function .

Example

The following code fragment removes the "category" attribute nodes from all <book> elements in "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

for(i=0;i<x.length;i++)

{

attnode=x.item(i).getAttributeNode("category")

old_att=x.item(i).removeAttributeNode(attnode);

document.write("Removed attribute: " + old_att.name + "<br />");

}

Output:

Removed attribute: category

Removed attribute: category

Removed attribute: category

Removed attribute: category

Try-It-Yourself Demos

removeAttributeNode() - Remove an attribute node


XML DOM removeAttributeNS() Method

Definition and Usage

The removeAttributeNS() method removes an attribute specified by namespace and name.

Syntax

elementNode.removeAttributeNS(ns,name)

Parameter | Description
ns | Required. Specifies the namespace of the attribute to remove
name | Required. Specifies the name attribute to remove

In all examples, we will use the XML file , and the JavaScript function loadXMLDoc().

Example

The following code fragment removes the "lang" attribute from the first <title> element in "books_ns.xml":

xmlDoc=loadXMLDoc("books_ns.xml");

var x=xmlDoc.getElementsByTagName("title")[0];

var ns="http://www.w3schools.com/children/"

document.write("Attribute Found: ");

document.write(x.hasAttributeNS(ns,"lang"));

x.removeAttributeNS(ns,"lang");

document.write("<br />Attribute Found: ");

document.write(x.hasAttributeNS(ns,"lang"));

Output:

Attribute Found: true

Attribute Found: false

Try-It-Yourself Demos

removeAttributeNS() - Remove attribute by name and namespace


XML DOM removeChild() Method

Definition and Usage

The removeChild() method removes a child node.

This function returns the removed node on success, or NULL on failure.

Syntax

elementNode.removeChild(node)

Parameter | Description
node | Required. Specifies the child node to remove

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment removes the last child node in the first <book> element:

//check if last child node is an element node

function get_lastchild(n)

{

var x=n.lastChild;

while (x.nodeType!=1)

{

x=x.previousSibling;

}

return x;

}

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book")[0];

deleted_node=x.removeChild(get_lastchild(x));

document.write("Node removed: " + deleted_node.nodeName);

Output:

Node removed: price

Internet Explorer will skip white-space text nodes that are generated between nodes (e.g. new-line characters), while Mozilla will not. So, in the example above, we have created a function to get the right "lastChild" element.

To read more about the differences between IE and Mozilla browsers, visit our Mozilla vs. IE chapter in our XML DOM Tutorial.

Try-It-Yourself Demos


XML DOM removeChild() Method

Definition and Usage

The removeChild() method removes a node from the list of child nodes.

This method returns the removed node on success, or NULL on failure.

Syntax

nodeObject.removeChild(node)

Parameter | Description
node | Required. Specifies the node to remove

Tips and Notes

Note: Internet Explorer will skip white-space text nodes that are generated between nodes (e.g. new-line characters), while Mozilla will not. So, in the example below, we have a function that checks the node type of the last child node.

Element nodes has a nodeType of 1, so if the last child node is not an element node, it moves to the previous node, and checks if this node is an element node. This continues until the last child node (which must be an element node) is found. This way, the result will be correct in both Internet Explorer and Mozilla.

Tip: To read more about the XML DOM differences between IE and Mozilla browsers, visit our Mozilla vs. IE chapter.

In all examples, we will use the XML file books.xml, and the JavaScript function .

Example

The following code fragment removes the last child node in the first <book> element:

//check if last child node is an element node

function get_lastchild(n)

{

var x=n.lastChild;

while (x.nodeType!=1)

{

x=x.previousSibling;

}

return x;

}

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book")[0];

deleted_node=x.removeChild(get_lastchild(x));

document.write("Node removed: " + deleted_node.nodeName);

Output:

Node removed: price

Try-It-Yourself Demos


XML DOM removeNamedItem() Method

Definition and Usage

The removeNamedItem() method removes the specified node.

If the removed attribute has a default value, a new attribute immediately appears containing the default value as well as the namespace URI, local name, and prefix, if any.

This method returns the removed node.

Syntax

removeNamedItem(nodename)

Parameter | Description
nodename | The name of the node to remove

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment loops through the <book> elements and removes the category attributes:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

for(i=0;i<x.length;i++)

{

x.item(i).attributes.removeNamedItem("category");

}

Try-It-Yourself Demos

removeNamedItem() - Remove an item


XML DOM renameNode() Method

Definition and Usage

The renameNode() method renames an existing element or attribute node.

When possible, this changes the name of the given node, otherwise this creates a new node with the specified name and replaces the existing node with the new node.

This method returns the renamed node.

Syntax

renameNode(node,uri,name)

Parameter | Description
node | The element or attribute node to rename
uri | A string that specifies the new namespace name
name | A string that specifies the new name

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

Try-It-Yourself Demos


XML DOM replaceChild() Method

Definition and Usage

The replaceChild() method replaces a child node with another.

This function returns the replaced node on success, or NULL on failure.

Syntax

elementNode.replaceChild(new_node,old_node)

Parameter | Description
new_node | Required. Specifies the new node
old_node | Required. Specifies the child node to replace

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment replaces the first <title> element in the first <book> elements of "books.xml":

//check if first child node is an element node

function get_firstchild(n)

{

var x=n.firstChild;

while (x.nodeType!=1)

  {

  x=x.nextSibling;

  }

return x;

}

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book")[0];

//create a title element and a text node

var newNode=xmlDoc.createElement("title");

var newText=xmlDoc.createTextNode("Giada's Family Dinners");

//add the text node to the title node,

newNode.appendChild(newText);

//replace the last node with the new node

x.replaceChild(newNode,get_firstchild(x));

var y=xmlDoc.getElementsByTagName("title");

for (i=0;i<y.length;i++)

{

document.write(y[i].childNodes[0].nodeValue);

document.write("<br />");

}

Output:

Giada's Family Dinners

Harry Potter

XQuery Kick Start

Learning XML

Internet Explorer will skip white-space text nodes that are generated between nodes (e.g. new-line characters), while Mozilla will not. So, in the example above, we have created a function to get the right "firstChild" element.

To read more about the differences between IE and Mozilla browers, visit our chapter in our XML DOM Tutorial.

Try-It-Yourself Demos

replaceChild() - Replace an element node


XML DOM replaceChild() Method

Definition and Usage

The replaceChild() method replaces a child node with another.

This method returns the replaced node on success, or NULL on failure.

Syntax

nodeObject.replaceChild(new_node,old_node)

Parameter | Description
new_node | Required. Specifies the new node
old_node | Required. Specifies the node to be replaced

Tips and Notes

Note: Internet Explorer will skip white-space text nodes that are generated between nodes (e.g. new-line characters), while Mozilla will not. So, in the example below, we have a function that checks the node type of the first child node.

Element nodes has a nodeType of 1, so if the first child node is not an element node, it moves to the next node, and checks if this node is an element node. This continues until the first child node (which must be an element node) is found. This way, the result will be correct in both Internet Explorer and Mozilla.

Tip: To read more about the XML DOM differences between IE and Mozilla browsers, visit our Mozilla vs. IE chapter.

In all examples, we will use the XML file , and the JavaScript function loadXMLDoc().

Example

The following code fragment replaces the <title> element in the first <book> element:

//check if first child node is an element node

function get_firstchild(n)

{

var x=n.firstChild;

while (x.nodeType!=1)

{

x=x.nextSibling;

}

return x;

}

xmlDoc=loadXMLDoc("books.xml");

//create a title element and a text node

var newNode=xmlDoc.createElement("title");

var newText=xmlDoc.createTextNode("Giada's Family Dinners");

//add the text node to the title node,

newNode.appendChild(newText);

//replace the first child node with the new node

var x=xmlDoc.getElementsByTagName("book")[0];

x.replaceChild(newNode,get_firstchild(x));

//output all titles

var y=xmlDoc.getElementsByTagName("title");

for (i=0;i<y.length;i++)

{

document.write(y[i].childNodes[0].nodeValue);

document.write("<br />");

}

Output:

Giada's Family Dinners

Harry Potter

XQuery Kick Start

Learning XML

Try-It-Yourself Demos

replaceChild() - Replace an element node


XML DOM replaceData() Method

Definition and Usage

The replaceData() method replaces data in a CDATA node.

Syntax

CDATANode.replaceData(start,length,string)

Parameter | Description
start | Required. Specifies where to begin replacing characters. Start value starts at zero
length | Required. Specifies how many characters to replace
string | Required. Specifies the string to insert

In all examples, we will use the XML file books_cdata.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment will replace "Stunning" with "Fantastic" in the CDATA node of the first <html> element:

xmlDoc=loadXMLDoc("books_cdata.xml");

var x=xmlDoc.getElementsByTagName("html")[0].childNodes[0]

x.replaceData(3,8,"Fantastic");

document.write(x.nodeValue);

Output:

Fantastic!

Try-It-Yourself Demos

replaceData() - Replace data in a CDATA node


XML DOM replaceData() Method

Definition and Usage

The replaceData() method replaces data in a comment node.

Syntax

commentNode.replaceData(start,length,string)

Parameter | Description
start | Required. Specifies where to begin replacing characters. Start value starts at zero
length | Required. Specifies how many characters to replace
string | Required. Specifies the string to insert

In all examples, we will use the XML file books_comment.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment will replace "Simple" with "Easy" in the comment node of the first <book> element:

xmlDoc=loadXMLDoc("books_comment.xml");

var x=xmlDoc.getElementsByTagName("book")[0].childNodes;

for (var i=0;i<x.length;i++)

{

if (x[i].nodeType==8)

  {

  //Process only comment nodes

  x[i].replaceData(4,6,"Easy");

  document.write(x[i].data);

  document.write("<br />");

  }

}

Output:

125 Easy and Delicious Recipes (Hardcover)

In the example above we use a loop and an if-test to make sure we only process comment nodes. A comment node has a node type of 8.

Try-It-Yourself Demos

replaceData() - Replace data in a comment node


XML DOM replaceData() Method

Definition and Usage

The replaceData() method replaces data in a text node.

Syntax

replaceData(start,length,string)

Parameter | Description
start | Required. Specifies where to begin replacing characters. Start value starts at zero
length | Required. Specifies how many characters to replace
string | Required. Specifies the string to insert

In all examples, we will use the XML file books.xml, and the JavaScript function .

Example

The following code fragment will replace the eight first characters from the text node in the first <title> element with "Easy":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];

x.replaceData(0,8,"Easy");

document.write(x.nodeValue);

Output:

Easy Italian

Try-It-Yourself Demos

replaceData() - Replace data in a text node


XML DOM setAttribute() Method

Definition and Usage

The setAttribute() method adds a new attribute.

If an attribute with that name already exists in the element, its value is changed to be that of the value parameter

Syntax

elementNode.setAttribute(name,value)

Parameter | Description
name | Required. Specifies the name of the attribute to set
value | Required. Specifies the value of the attribute to set

In all examples, we will use the XML file books.xml, and the JavaScript function .

Example

The following code adds an "edition" attribute to all <book> elements in "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book");

for(i=0;i<x.length;i++)

{

x.item(i).setAttribute("edition","first");

}

//Output book title and edition value

var x=xmlDoc.getElementsByTagName("title");

for (i=0;i<x.length;i++)

{

document.write(x[i].childNodes[0].nodeValue);

document.write(" - Edition: ");

document.write(x[i].parentNode.getAttribute('edition'));

document.write("<br />");

}

Output:

Everyday Italian - Edition: FIRST

Harry Potter - Edition: FIRST

XQuery Kick Start - Edition: FIRST

Learning XML - Edition: FIRST

Try-It-Yourself Demos

setAttribute() - Change an attribute's value

setAttribute() - Create a new attribute and attribute value


XML DOM setAttributeNode() Method

Definition and Usage

The setAttributeNode() method adds a new attribute node.

If an attribute with that name already exists in the element, it is replaced by the new one. If the new attribute replaces an existing attribute, the replaced attribute node is returned, otherwise it returns null.

Syntax

elementNode.setAttributeNode(att_node)

Parameter | Description
att_node | Required. Specifies the attribute node to set

In all examples, we will use the XML file books.xml, and the JavaScript function .

Example

The following code adds a "edition" attribute to all <book> elements in "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

var newatt;

for (i=0;i<x.length;i++)

{

newatt=xmlDoc.createAttribute("edition");

newatt.value="first";

x[i].setAttributeNode(newatt);

}

//Output all "edition" attribute values

for (i=0;i<x.length;i++)

{

document.write("Edition: ");

document.write(x[i].getAttribute("edition"));

document.write("<br />");

}

Output:

Edition: first

Edition: first

Edition: first

Edition: first

Try-It-Yourself Demos


XML DOM setAttributeNS() Method

Definition and Usage

The setAttributeNS() method adds a new attribute (with a namespace).

If an attribute with that name or namespace already exists in the element, its value is changed to be that of the prefix and value parameter

Syntax

elementNode.setAttributeNS(name,value)

Parameter | Description
ns | Required. Specifies the namespace URI of the attribute to set
name | Required. Specifies the name of the attribute to set
value | Required. Specifies the value of the attribute to set

In all examples, we will use the XML file , and the JavaScript function loadXMLDoc().

Example 1

The following code adds an "edition" attribute to the first <book> element in "books_ns.xml":

xmlDoc=loadXMLDoc("books_ns.xml");

var x=xmlDoc.getElementsByTagName("book")[0];

var ns="http://www.w3schools.com/edition/";

x.setAttributeNS(ns,"edition","first");

document.write(x.getAttributeNS(ns,"edition"));

Output:

first

Example 2

The following code adds changes the "lang" value of the first <title> element in "books_ns.xml":

xmlDoc=loadXMLDoc("books_ns.xml");

var x=xmlDoc.getElementsByTagName("title")[0];

var ns="http://www.w3schools.com/children/";

x.setAttributeNS(ns,"c:lang","italian");

document.write(x.getAttributeNS(ns,"lang"));

Output:

italian

Try-It-Yourself Demos

attribute and attribute value

This example uses setAttributeNS() to set a new attribute/attribute value.

Change an attribute value

This example uses setAttributeNS() to change an attribute value.


XML DOM specified Property

Definition and Usage

The specified property returns true if the attribute value is set in the document, and false if it's a default value in a DTD/Schema.

Syntax

attrObject.specified

In all examples, we will use the XML file , and the JavaScript function .

Example

The following code fragment displays the name and value of the category attribute:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

for(i=0;i<x.length;i++)

{

document.write(x.item(i).attributes[0].specified);

document.write("<br />");

}

Output:

true

true

true

true

Try-It-Yourself Demos


XML DOM splitText() Method

Definition and Usage

The splitText() method splits the text node into two nodes at the specified offset.

This function returns the node containing the text after the offset.

The text before the offset remains in the original text node.

Syntax

replaceData(offset)

Parameter | Description
offset | Required. Specifies where to split the text node. Offset value starts at zero

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment will split the text in the first CDATA node:

xmlDoc=loadXMLDoc("books_cdata.xml");

var x=xmlDoc.getElementsByTagName("html")[0].childNodes[0]

y=x.splitText(8);

document.write(x.nodeValue);

document.write("<br />");

document.write(y.nodeValue);

Output:

Stunn

ing!

Try-It-Yourself Demos


XML DOM splitText() Method

Definition and Usage

The splitText() method splits the text node into two nodes at the specified offset.

This function returns the node containing the text after the offset.

The text before the offset remains in the original text node.

Syntax

replaceData(offset)

Parameter | Description
offset | Required. Specifies where to split the text node. Offset value starts at zero

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment will split the text node after the first word:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];

y=x.splitText(9);

document.write(x.nodeValue);

document.write("<br />");

document.write(y.nodeValue);

Output:

Everyday

Italian

Try-It-Yourself Demos


XML DOM strictErrorChecking Property

Definition and Usage

The strictErrorChecking property sets or returns whether error-checking is enforced or not.

When set to false, the implementation is free to not test every possible error case. This property is true by default.

Syntax

documentObject.strictErrorChecking

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment returns whether error-checking is enforced or not:

xmlDoc=loadXMLDoc("books.xml");

var errCheck=xmlDoc.strictErrorChecking;

document.write(errCheck);

Output:

true

Try-It-Yourself Demos

Check whether error checking is enforced or not


XML DOM substringData() Method

Definition and Usage

The substringData() method gets a string from the CDATA node.

Syntax

CDATANode.substringData(start,length)

Parameter | Description
start | Required. Specifies where to begin extracting characters. Start value starts at zero
length | Required. Specifies how many characters to extract

In all examples, we will use the XML file books_cdata.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment gets the "Stun" string form the first CDATA element:

xmlDoc=loadXMLDoc("books_cdata.xml");

var x=xmlDoc.getElementsByTagName("html")[0].childNodes[0]

y=x.substringData(3,4);

document.write(x.nodeValue);

document.write("<br />");

document.write(y);}

Output:

Stunning!

Stun

Try-It-Yourself Demos

substringData() - insert a string to a comment node


XML DOM substringData() Method

Definition and Usage

The substringData() method gets a string from the comment node.

Syntax

substringData(start,length)

Parameter | Description
start | Required. Specifies where to begin extracting characters. Start value starts at zero
length | Required. Specifies how many characters to extract

In all examples, we will use the XML file , and the JavaScript function loadXMLDoc().

Example

The following code fragment gets the "(Hardcover)" string form the first comment element:

xmlDoc=loadXMLDoc("books_comment.xml");

var x=xmlDoc.getElementsByTagName("book")[0].childNodes;

for (var i=0;i<x.length;i++)

{

if (x[i].nodeType==8)

  {

  //Process only comment nodes

  y=x[i].substringData(33,11);

  document.write(y);

  document.write("<br />");

  }

}

Output:

(Hardcover)

In the example above we use a loop and an if-test to make sure we only process comment nodes. A comment node has a node type of 8.

Try-It-Yourself Demos

substringData() - insert a string to a comment node


XML DOM substringData() Method

Definition and Usage

The substringData() method gets data from the text node.

Syntax

substringData(start,length)

Parameter | Description
start | Required. Specifies where to begin extracting characters. Start value starts at zero
length | Required. Specifies how many characters to extract

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment gets a fragment from the text node of the first <title> element "books.xml", and then outputs it:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];

y=x.substringData(9,7);

document.write(x.nodeValue);

document.write("<br />");

document.write(y);

Output:

Everyday Italian

Italian

Try-It-Yourself Demos

substringData() - insert a string to a text node


XML DOM Summary

You Have Learned XML DOM, Now What?

 Top Previous Next

XML DOM Summary

This tutorial has taught you how to access and manipulate XML documents.

You have learned that the XML DOM views XML documents as a tree structure of elements embedded within other elements. and that all elements can be accessed through the DOM tree. Their contents can be modified or deleted, and new elements can be created by the DOM.

You have learned about XML parsers, and how to load XML documents into the parser.

You have also been introduced to the most important DOM objects, and how to use them.

For more information on XML DOM, please look at our .

Now You Know XML DOM, What's Next?

The next step is to learn about XSLT.

If you need to validate XML documents, the next step is to learn about DTD and XML Schema.

XSLT

XSLT is the style sheet language for XML files.

With XSLT you can transform XML documents into other formats, like XHTML.

If you want to learn more about XSLT, please visit our XSLT tutorial.

DTD

The purpose of a DTD is to define which elements and attributes that are legal in an XML document.

A DTD is used to validate XML data.

If you want to learn more about DTD, please visit our DTD tutorial.

XML Schema will replace DTD.

XML Schema is an XML-based alternative to DTD.

Unlike DTD, XML Schemas has support for data types and namespaces.

If you want to learn more about XML Schema, please visit our XML Schema tutorial.


XML DOM systemId Property

Definition and Usage

The systemId property returns the system identifier of the external DTD.

Syntax

documentObject.doctype.systemId

In all examples, we will use the XML file , and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the system id for the external DTD associated with the XML document:

xmlDoc=loadXMLDoc("note_external_dtd.xml");

document.write(xmlDoc.doctype.systemId);

Output:

note.dtd

Try-It-Yourself Demos


XML DOM tagName Property

Definition and Usage

The tagName property returns the tag name of the selected element.

Syntax

elementNode.tagName

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment gets the tag name from the first <title> element of "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0];

document.write(x.tagName);

The output of the code above will be:

title

Try-It-Yourself Demos


XML DOM text Property

Definition and Usage

The text property returns the text of an attribute.

Syntax

attrObject.text

Tips and Notes

Note: This property is Internet Explorer-only!

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the text of the category attribute in the XML document:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

for(i=0;i<x.length;i++)

{

document.write(x.item(i).attributes[0].text);

document.write("<br />");

}

Output:

COOKING

CHILDREN

WEB

WEB

Try-It-Yourself Demos


XML DOM text Property

Definition and Usage

The text property returns the text of a node and its descendants.

Syntax

documentObject.text

Tips and Notes

Note: This property is Internet Explorer-only!

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the text of the XML document:

xmlDoc=loadXMLDoc("books.xml");

document.write(xmlDoc.text);

Output:

Everyday Italian Giada De Laurentiis 2005 30.00

Harry Potter J K. Rowling 2005 29.99 XQuery Kick Start

James McGovern Per Bothner Kurt Cagle James Linn

Vaidyanathan Nagarajan 2003 49.99 Learning XML

Erik T. Ray 2003 39.95

Try-It-Yourself Demos

Display the text of an XML document


XML DOM text Property

Definition and Usage

The text property returns the value of all text nodes from the selected element.

Syntax

elementNode.text

Tips and Notes

Tip: For returning the text from text nodes for Mozilla browsers, use the textContent property.

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment gets text nodes from the first <title> element in "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0];

document.write("Text Nodes: ");

document.write(x.text);

The output of the code above will be:

Text Nodes: Everyday Italian

Try-It-Yourself Demos


XML DOM text Property

Definition and Usage

The text property returns the text of a node and its descendants.

Syntax

nodeObject.text

Tips and Notes

Note: This property is Internet Explorer-only!

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the text of the XML document:

xmlDoc=loadXMLDoc("books.xml");

document.write(xmlDoc.text);

Output:

Everyday Italian Giada De Laurentiis 2005 30.00

Harry Potter J K. Rowling 2005 29.99 XQuery Kick Start

James McGovern Per Bothner Kurt Cagle James Linn

Vaidyanathan Nagarajan 2003 49.99 Learning XML

Erik T. Ray 2003 39.95

Try-It-Yourself Demos

Display the text of an XML document


XML DOM textContent Property

Definition and Usage

The textContent property sets or returns the textual content of an attribute.

Syntax

attrObject.textContent

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment returns the textual content of the category attributes:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

for(i=0;i<x.length;i++)

{

document.write(x.item(i).attributes[0].textContent);

document.write("<br />");

}

The output of the code above will be:

COOKING

CHILDREN

WEB

WEB

Try-It-Yourself Demos

textContent - Get the textual content of an attribute

textContent - Set the textual content of an attribute


XML DOM textContent Property

Definition and Usage

The textContent property returns or sets the text from the selected element.

On returning text, this property returns the value of all text nodes within the element node.

On setting text, this property removes all child nodes and replaces them with a single text node.

Syntax

Return text:

elementNode.textContent

Set text:

elementNode.textContent=string

Tips and Notes

Tip: For returning the text from text nodes for IE browsers, use the text property.

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example 1

The following code fragment gets text nodes from the first <title> element in "books.xml":

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0];

document.write("Text Nodes: ");

document.write(x.textContent);

The output of the code above will be:

Text Nodes: Everyday Italian

Example 2

The following code fragment gets text nodes from the first <book> element in "books.xml", and then replaces all nodes with a new text node:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book")[0];

document.write("Before: ");

document.write(x.textContent);

document.write("<br />");

x.textContent="hello";

document.write("After: ");

document.write(x.textContent);

The output of the code above will be:

Before: Everyday Italian Giada De Laurentiis 2005 30.00

After: hello

Try-It-Yourself Demos


XML DOM textContent Property

Definition and Usage

The textContent property sets or returns the textual content of a node and its descendants.

On setting, any child nodes are removed and replaced by a single Text node containing the string this property is set to.

Syntax

nodeObject.textContent

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment returns the textual content of the <book> elements:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

for(i=0;i<x.length;i++)

{

document.write(x.item(i).textContent);

document.write("<br />");

}

The output of the code above will be:

Everyday Italian Giada De Laurentiis 2005 30.00

Harry Potter J K. Rowling 2005 29.99

XQuery Kick Start James McGovern Per Bothner Kurt Cagle James Linn

Vaidyanathan Nagarajan 2003 49.99

Learning XML Erik T. Ray 2003 39.95

Try-It-Yourself Demos

textContent - Get the textual content of a node

textContent - Set the textual content of a node


XML DOM Tutorial

XML DOM Tutorial

The XML Document Object Model (XML DOM) defines a standard way for accessing and manipulating XML documents.

The DOM presents an XML document as a tree-structure (a node tree), with the elements, attributes, and text defined as nodes.

Start learning the XML DOM!

XML DOM Objects Reference

At W3Schools you will find a complete DOM reference, with all the objects and their properties and methods.

XML DOM Reference

XML DOM Examples

Learn by 50 examples! With our editor, you can edit the source, and click on a test button to view the result.


XML DOM value Property

Definition and Usage

The value property returns the value of an attribute.

Syntax

attrObject.value

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the name and value of the category attribute:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

for(i=0;i<x.length;i++)

{

document.write(x.item(i).attributes[0].name);

document.write(" = ");

document.write(x.item(i).attributes[0].value);

document.write("<br />");

}

Output:

category = COOKING

category = CHILDREN

category = WEB

category = WEB

Try-It-Yourself Demos


XML DOM xml Property

Definition and Usage

The xml property returns the XML of an attribute.

Syntax

attrObject.xml

Tips and Notes

Note: This property is Internet Explorer-only!

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the XML of the category attribute in the XML document:

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

for(i=0;i<x.length;i++)

{

document.write("<xmp>" + x.item(i).attributes[0].xml + "</xmp>");

document.write("<br />");

}

Output:

category="COOKING"

category="CHILDREN"

category="WEB"

category="WEB"

Try-It-Yourself Demos


XML DOM xml Property

Definition and Usage

The xml property returns the XML of a node and its descendants.

Syntax

documentObject.xml

Tips and Notes

Note: This property is Internet Explorer-only!

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the XML of the XML document:

xmlDoc=loadXMLDoc("books.xml");

document.write("<xmp>" + xmlDoc.xml + "</xmp>");

Output:

<?xml version="1.0"?>

<!-- Edited with XML Spy v2007 (http://www.altova.com) -->

<bookstore>

<book category="COOKING">

  <title lang="en">Everyday Italian</title>

  <author>Giada De Laurentiis</author>

  <year>2005</year>

  <price>30.00</price>

</book>

<book category="CHILDREN">

  <title lang="en">Harry Potter</title>

  <author>J K. Rowling</author>

  <year>2005</year>

  <price>29.99</price>

</book>

<book category="WEB">

  <title lang="en">XQuery Kick Start</title>

  <author>James McGovern</author>

  <author>Per Bothner</author>

  <author>Kurt Cagle</author>

  <author>James Linn</author>

  <author>Vaidyanathan Nagarajan</author>

  <year>2003</year>

  <price>49.99</price>

</book>

<book category="WEB">

  <title lang="en">Learning XML</title>

  <author>Erik T. Ray</author>

  <year>2003</year>

  <price>39.95</price>

</book>

</bookstore>

Try-It-Yourself Demos

Display the XML of an XML document


XML DOM xml Property

Definition and Usage

The xml property returns the XML of a node and its descendants.

Syntax

nodeObject.xml

Tips and Notes

Note: This property is Internet Explorer-only!

In all examples, we will use the XML file , and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the XML of the XML document:

xmlDoc=loadXMLDoc("books.xml");

document.write("<xmp>" + xmlDoc.xml + "</xmp>");

Output:

<?xml version="1.0"?>

<!-- Edited with XML Spy v2007 (http://www.altova.com) -->

<bookstore>

<book category="COOKING">

  <title lang="en">Everyday Italian</title>

  <author>Giada De Laurentiis</author>

  <year>2005</year>

  <price>30.00</price>

</book>

<book category="CHILDREN">

  <title lang="en">Harry Potter</title>

  <author>J K. Rowling</author>

  <year>2005</year>

  <price>29.99</price>

</book>

<book category="WEB">

  <title lang="en">XQuery Kick Start</title>

  <author>James McGovern</author>

  <author>Per Bothner</author>

  <author>Kurt Cagle</author>

  <author>James Linn</author>

  <author>Vaidyanathan Nagarajan</author>

  <year>2003</year>

  <price>49.99</price>

</book>

<book category="WEB">

  <title lang="en">Learning XML</title>

  <author>Erik T. Ray</author>

  <year>2003</year>

  <price>39.95</price>

</book>

</bookstore>

Try-It-Yourself Demos

Display the XML of an XML document


XML DOM xmlEncoding Property

Definition and Usage

The xmlEncoding property returns the encoding of the document.

Syntax

documentObject.xmlEncoding

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the XML encoding, standalone attribute, and XML version of the document:

xmlDoc=loadXMLDoc("books.xml");

document.write("XML encoding: " + xmlDoc.xmlEncoding);

document.write("<br />");

document.write("XML standalone: " + xmlDoc.xmlStandalone);

document.write("<br />");

document.write("XML version: " + xmlDoc.xmlVersion);

document.write("<br />");

document.write("Encoding when parsing: " + xmlDoc.inputEncoding);

Output:

XML encoding: ISO-8859-1

XML standalone: false

XML version: 1.0

Encoding when parsing: ISO-8859-1

Try-It-Yourself Demos


XML DOM xmlStandalone Property

Definition and Usage

The xmlStandalone property sets or returns whether the document is standalone.

Syntax

documentObject.xmlStandalone

In all examples, we will use the XML file , and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the XML encoding, standalone attribute, and XML version of the document:

xmlDoc=loadXMLDoc("books.xml");

document.write("XML encoding: " + xmlDoc.xmlEncoding);

document.write("<br />");

document.write("XML standalone: " + xmlDoc.xmlStandalone);

document.write("<br />");

document.write("XML version: " + xmlDoc.xmlVersion);

document.write("<br />");

document.write("Encoding when parsing: " + xmlDoc.inputEncoding);

Output:

XML encoding: ISO-8859-1

XML standalone: false

XML version: 1.0

Encoding when parsing: ISO-8859-1

Try-It-Yourself Demos


XML DOM xmlVersion Property

Definition and Usage

The xmlVersion property sets or returns the XML version of the document.

Syntax

documentObject.xmlVersion

In all examples, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().

Example

The following code fragment displays the XML encoding, standalone attribute, and XML version of the document:

xmlDoc=loadXMLDoc("books.xml");

document.write("XML encoding: " + xmlDoc.xmlEncoding);

document.write("<br />");

document.write("XML standalone: " + xmlDoc.xmlStandalone);

document.write("<br />");

document.write("XML version: " + xmlDoc.xmlVersion);

document.write("<br />");

document.write("Encoding when parsing: " + xmlDoc.inputEncoding);

Output:

XML encoding: ISO-8859-1

XML standalone: false

XML version: 1.0

Encoding when parsing: ISO-8859-1

Try-It-Yourself Demos


Tryit Editor v1.4

The file you asked for does not exist


.NET Mobile Tutorial

.NET Mobile

.NET Mobile Tutorial

msnet4

In this tutorial you will learn about .NET Mobile.

This tutorial is about how to develop mobile applications with an extension to the .NET Framework, called the Microsoft Mobile Internet Toolkit (MMIT) or simply .NET Mobile.

Start learning .NET Mobile!

Table of contents

.NET Mobile Introduction

This chapter explains what ASP.NET Mobile is, and how it can be used.

.NET Mobile Example

This simple example demonstrates the power of ASP.NET Mobile.

.NET Mobile Emulators

This chapter describes some emulators that can be used to test mobile applications.

This chapter explains the use of mobile forms.

.NET Mobile Events

This chapter explains the use of events in mobile forms.

.NET Mobile Input

This chapter explains the use of mobile input controls.

.NET Mobile Validation

This chapter explains the use of mobile input validation.

This chapter explains the use of the mobile list control.

.NET Mobile Selection

This chapter explains the use of the mobile selection list control.

.NET Mobile Images

This chapter explains the use of the mobile image control.

.NET Mobile Utilities

This chapter explains the use of the mobile utilities controls, like the AdRotator and the PhoneCall controls.

.NET Mobile Reference

This is a complete reference to all mobile control objects, including properties, methods and events.

.NET Mobile Devices

This chapter list the version 1.0 support for mobile devices.

.NET Mobile Updates

This chapter list the updates to mobile devices support.


ASP.NET Mobile AdRotator Control

Definition and Usage

The AdRotator control is used to display a sequence of ad images in a mobile page.

This control uses an XML file to store the ad information. The XML file must begin and end with an <Advertisements> tag. Inside the <Advertisements> tag there may be several <Ad> tags which defines each ad.

The predefined elements inside the <Ad> tag are listed below:

Element | Description
<ImageUrl> | Optional. The URL of the image to display
<NavigateUrl> | Optional. The URL of the page to display if the user clicks the ad
<OptionalImageUrl> | Optional. The URL of a monochrome image to display
<OptionalNavigateUrl> | Optional.
<AlternateText> | Optional. An alternate text for the image
<Keyword> | Optional. A category for the ad (used to filter ads)
<Impressions> | Optional. The display rates in percent of the hits

Properties

Property | Value | Description
AdvertisementFile | URL | Optional. The path to the XML file that contains ad information
Alignment | left center right | Optional. How to align the control
BackColor | rgb(x,x,x) #xxxxxx colorname | Optional. A background color for the control
ForeColor | rgb(x,x,x) #xxxxxx colorname | Optional. A foreground color for the control
Font-Bold | false true | Optional. Specifies whether or not the text in the control should be bold
Font-Italic | false true | Optional. Specifies whether or not the text in the control should be italic
Font-Name | fontname | Optional. Specifies the font name of the text in the control
Font-Size | normal small large | Optional. Specifies the font size of the text in the control
id | unique_name | Optional. A unique id for the control
ImageKey | imagekey | Optional. Specifies the name from which the image URL is retrieved from an ad
KeywordFilter | filter | Optional. A filter to limit ads after categories
NavigateUrlKey | navigateurlkey | Optional. Specifies the element name from which the target URL is retrieved from an ad
OnAdCreated | function_name | Optional. he name of the function to be executed after the creation of the control, before page rendering
runat | "server" | Required. Specifies that the control is a server control
StyleReference | name_of_style_element | Optional. Specifies a reference to a style to be applied to the control
Wrapping | wrap nowrap | Optional. Specifies whether or not the text in the control should wrap

Example 1

The following example contains one form in an .aspx file. The form contains a AdRotator control that will rotate between three images:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage"%>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<Mobile:Form runat="server">

<Mobile:AdRotator runat="server"

AdvertisementFile="advertisements.xml" />

</Mobile:Form>

This is the ad file called "advertisements.xml":

<?xml version="1.0" ?>

<Advertisements>

<Ad>

<ImageUrl>image1.gif</ImageUrl>

<NavigateUrl>http://www.1.com</NavigateUrl>

<AlternateText>Visit 1</AlternateText>

</Ad>

<Ad>

<ImageUrl>image2.gif</ImageUrl>

<NavigateUrl>http://www.2.com</NavigateUrl>

<AlternateText>Visit 2</AlternateText>

</Ad>

<Ad>

<ImageUrl>image3.gif</ImageUrl>

<NavigateUrl>http://www.3.com</NavigateUrl>

<AlternateText>Visit 3</AlternateText>

</Ad>

</Advertisements>


ASP.NET Mobile Calendar Control

Definition and Usage

The Calendar control is used to display a calendar on a mobile page.

This control displays a one-month calendar that allows the user to select dates and move to the next and previous months.

Properties

Property | Value | Description
Alignment | left center right | Optional. How to align the control
BackColor | rgb(x,x,x) #xxxxxx colorname | Optional. A background color for the control
BreakAfter | true false | Optional. Default is true
CalendarEntryText | text | Optional. Specifies the text used on CHTML and WML devices to enter the Calendar control. Default is "Calendar"
EnableViewState | true false | Optional. Default is true
FirstDayOfWeek | Default Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sunday | Optional. Specifies the day of the week to display in the first column. If this property is set to "default" it uses the server's locale settings to determine which day of the week to display in the first column
ForeColor | rgb(x,x,x) #xxxxxx colorname | Optional. A foreground color for the control
Font-Bold | false true | Optional. Specifies whether or not the text in the control should be bold
Font-Italic | false true | Optional. Specifies whether or not the text in the control should be italic
Font-Name | fontname | Optional. Specifies the font name of the text in the control
Font-Size | normal small large | Optional. Specifies the font size of the text in the control
id | unique_name | Optional. A unique id for the control
OnSelectionChanged | function_name | Optional. The name of the function to be executed when the user selects a day, week, or month
runat | "server" | Required. Specifies that the control is a server control
SelectedDate | selecteddate | Optional. Specifies the currently selected date. Default is today's date
SelectionMode | Day DayWeek DayWeekMonth None | Optional. How a user is allowed to select dates. Default is Day. To disable date selection, set this property to "None"
ShowDayHeader | true false | Optional. Specifies whether or not the names of the days of the week should be displayed in the header of the calendar. Default is true
StyleReference | name_of_style_element | Optional. Specifies a reference to a style to be applied to the control
Visible | true false | Optional.
VisibleDate | visibleDateMonth | Optional. Specifies a date that specifies the month to display
Wrapping | wrap nowrap | Optional. Specifies whether or not the text in the control should wrap

Example 1

The following example contains two forms in an .aspx file. The first form displays a calendar. When the user select a date from the calendar, the selected date is displayed in another form:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage"%>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<script runat="server">

Sub CalChanged(sender as Object,e as EventArgs)

lbl1.Text="You selected " & c1.SelectedDate

ActiveForm=f2

End Sub

</script>

<Mobile:Form id="f1" runat="server">

<Mobile:Calendar id="c1"

OnSelectionChanged="CalChanged" runat="server" />

</Mobile:Form>

<Mobile:Form id="f2" runat="server">

<Mobile:Label id="lbl1" runat="server" />

</Mobile:Form>


ASP.NET Mobile Command Control

Definition and Usage

The Command control is used to perform an action on a mobile device, like posting user input back to the server.

Properties

Property | Value | Description
Alignment | left center right | Optional. How to align the command control
BackColor | rgb(x,x,x) #xxxxxx colorname | Optional. A background color for the command control
BreakAfter | true false | Optional. Default is "true"
CausesValidation | true false | Optional. By default, a page is validated when a Command control is clicked. To prevent a page from being validated when clicking on a Command control, set this property to "false"
CommandArgument |  | Optional. Additional information about the command to perform
CommandName |  | Optional. The command associated with the ItemCommand event
EnableViewState | true false | Optional. Default is "true"
Font-Bold | false true | Optional. Specifies whether or not the text in the command control should be bold
Font-Italic | false true | Optional. Specifies whether or not the text in the command control should be italic
Font-Name | fontname | Optional. Specifies the font name of the text in the command control
Font-Size | normal small large | Optional. Specifies the font size of the text in the command control
ForeColor | rgb(x,x,x) #xxxxxx colorname | Optional. A foreground color for the command control
Format | button link | Optional. Specifies whether the Command control should be a button or a link
id | unique_name | Optional. A unique id for the control
ImageUrl | URL | Optional. An URL to an image source
OnClick | function_name | Optional. The name of the function to be executed when the control is clicked
OnItemCommand | function_name | Optional. The name of the function to be executed when the control is activated
runat | "server" | Required. Specifies that the control is a server control
SoftkeyLabel | softkeylabel | Optional.
StyleReference | name_of_style_element | Optional. Specifies a reference to a style to be applied to the control
Text | text | Optional. The text to display on the control
Visible | true false | Optional. Specifies whether or not the Command control should be visible
Wrapping | wrap nowrap | Optional. Specifies whether or not the text in the command control should wrap

Example 1

The following example will declare two forms in an .aspx file. The first form has a label with the text "Age?", an input box to input the age, and a submit button. The second form is activated by the submit button on the first form, and displays a response:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage"%>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<script runat="server">

Dim age

Sub AgeClick(sender As Object, e As EventArgs)

age=text1.Text

ActiveForm=Form2

End Sub

Sub Form2_Activate(sender As Object,e As EventArgs)

message.Text="You are " & age & " years old"

End Sub

</script>

<Mobile:Form id="form1" runat="server">

<Mobile:Label runat="server">Age?</Mobile:Label>

<Mobile:TextBox runat="server" id="text1" />

<Mobile:Command runat="server" OnClick="AgeClick"

Text="Submit" />

</Mobile:Form>

<Mobile:Form id="form2" runat="server"

OnActivate="Form2_Activate">

<Mobile:Label runat="server" id="message" />

</Mobile:Form>


ASP.NET Mobile CompareValidator Control

Definition and Usage

The CompareValidator control is used to compare the value of one input control to the value of another input control or to a fixed value.

Note: The validation will not fail if the input control is empty. Use the RequiredFieldValidator control to make the field required.

Properties

Property

Value

Description

Alignment

left

center

right

Optional. How to align the control

BackColor

rgb(x,x,x)

#xxxxxx

colorname

Optional. A background color for the control

ControlToCompare

id_of_control

Optional. The name of the control to compare with

ControlToValidate

id_of_target_control

Optional. The id of the control to validate

Display

None

Static

Dynamic

Optional. The display behavior for the validation control. Legal values are:

· None (the control is not displayed. Used to show the error message only in the ValidationSummary control)
· Static (the control displays an error message if validation fails. Space is reserved on the page for the message even if the input passes validation
· Dynamic (the control displays an error message if validation fails. Space is not reserved on the page for the message if the input passes validation

Dynamic is default

ErrorMessage

errortext_for_summary

Optional. The text to display in the ValidationSummary control when validation fails

ForeColor

rgb(x,x,x)

#xxxxxx

colorname

Optional. A foreground color for the control

Font-Bold

false

true

Optional. Specifies whether or not the text in the control should be bold

Font-Italic

false

true

Optional. Specifies whether or not the text in the control should be italic

Font-Name

fontname

Optional. Specifies the font name of the text in the control

Font-Size

normal

small

large

Optional. Specifies the font size of the text in the control

id

unique_name

Optional. A unique id for the control

Operator

DataTypeCheck

Equal

GreaterThan

GreaterThanEqual

LessThan

LessThanEqual

NotEqual

Optional. The type of comparison to perform

runat

"server"

Required. Specifies that the control is a server control

StyleReference

name_of_style_element

Optional. Specifies a reference to a style to be applied to the control

Text

errortext

Optional. The message to display when validation fails

Type

Currency

Date

Double

Integer

String

Optional. Specifies the data type of the values to compare

ValueToCompare

value

Optional. A specified value to compare with

Wrapping

wrap

nowrap

Optional. Specifies whether or not the text in the control should wrap

Example 1

The following example contains two forms in an .aspx file. The first form has a label with the text "Age?", an input box to input the age, and a submit button. The second page is activated by the submit button on the first page, and displays a response. If the input value validates as an error, an error message is displayed:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage"%>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<script runat="server">

Sub Page2(Sender as Object,E as EventArgs)

If Page.IsValid Then

ActiveForm=f2

text2.Text="You are " & age.text & " years old"

end if

End Sub

</script>

<Mobile:Form id="f1" runat="server">

<Mobile:CompareValidator runat="server"

ControlToValidate="age"

Type="Integer"

ValueToCompare="18"

Operator="GreaterThanEqual">

You must be at least 18

</Mobile:CompareValidator>

<Mobile:Label runat="server">Age?</Mobile:Label>

<Mobile:TextBox id="age" runat="server" />

<Mobile:Command OnClick="Page2" runat="server">

Submit</Mobile:Command>

</Mobile:Form>

<Mobile:Form id="f2" runat="server">

<Mobile:Label id="text2" runat="server" />

</Mobile:Form>


ASP.NET Mobile CustomValidator Control

Definition and Usage

The CustomValidator control allows you to write a method to handle the validation of the value entered.

Properties

Property

Value

Description

Alignment

left

center

right

Optional. How to align the control

BackColor

rgb(x,x,x)

#xxxxxx

colorname

Optional. A background color for the control

ControlToValidate

id_of_target_control

Optional. The id of the control to validate

Display

None

Static

Dynamic

Optional. The display behavior for the validation control. Legal values are:

· None (the control is not displayed. Used to show the error message only in the ValidationSummary control)
· Static (the control displays an error message if validation fails. Space is reserved on the page for the message even if the input passes validation
· Dynamic (the control displays an error message if validation fails. Space is not reserved on the page for the message if the input passes validation

Dynamic is default

ErrorMessage

errortext_for_summary

Optional. The text to display in the ValidationSummary control when validation fails

ForeColor

rgb(x,x,x)

#xxxxxx

colorname

Optional. A foreground color for the control

Font-Bold

false

true

Optional. Specifies whether or not the text in the control should be bold

Font-Italic

false

true

Optional. Specifies whether or not the text in the control should be italic

Font-Name

fontname

Optional. Specifies the font name of the text in the control

Font-Size

normal

small

large

Optional. Specifies the font size of the text in the control

id

unique_name

Optional. A unique id for the control

OnServerValidate

function_name

Optional. Specifies the name of the server-side validation script function to be executed

runat

"server"

Required. Specifies that the control is a server control

StyleReference

name_of_style_element

Optional. Specifies a reference to a style to be applied to the control

Text

errortext

Optional. The message to display when validation fails

Wrapping

wrap

nowrap

Optional. Specifies whether or not the text in the control should wrap

Example 1

The following example contains two forms in an .aspx file. The first form has a label with the text "Please enter a username", an input box to input a username, a CustomValidator control that checks that the input value is between 8 and 16 characters, and a submit button. The second page is activated by the submit button on the first page, and displays a response. If the input value validates as an error, an error message is displayed:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage"%>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<script runat="server">

Sub Page2(Sender as Object,E as EventArgs)

If Page.IsValid Then

ActiveForm=f2

txt2.Text="Your username is: " & txt1.text

end if

End Sub

Sub user(source As object,args As ServerValidateEventArgs)

if len(args.Value)<8 or len(args.Value)>16 then

 args.IsValid=false

else

 args.IsValid=true

end if

End Sub

</script>

<Mobile:Form id="f1" runat="server">

<Mobile:Label runat="server">

Please enter a username

</Mobile:Label>

<Mobile:TextBox id="txt1" runat="server" />

<Mobile:CustomValidator runat="server"

ControlToValidate="txt1"

OnServerValidate="user"

Text="A username must be between 8 and 16 characters!" />

<Mobile:Command OnClick="Page2" runat="server">

Submit</Mobile:Command>

</Mobile:Form>

<Mobile:Form id="f2" runat="server">

<Mobile:Label id="txt2" runat="server" />

</Mobile:Form>


ASP.NET Mobile Form Control

Definition and Usage

The Form control defines a container for mobile controls.

Each mobile page must have at least one Form control, and each Form control can have a number of mobile controls.

Note that mobile pages can have multiple Form controls. This is due to the nature of mobile devices. Mobile devices have small screens and it is very normal to navigate between screens with simple links.

Properties

Property | Value | Description
Action | URL | Optional. A URL that defines where to send the data when the form is submitted
Alignment | left center right | Optional. How to align the form
BackColor | rgb(x,x,x) #xxxxxx colorname | Optional. A background color for the form
ForeColor | rgb(x,x,x) #xxxxxx colorname | Optional. A foreground color for the form
Font-Bold | false true | Optional. Specifies whether or not the text in the form should be bold
Font-Italic | false true | Optional. Specifies whether or not the text in the form should be italic
Font-Name | fontname | Optional. Specifies the font name of the text in the form
Font-Size | normal small large | Optional. Specifies the font size of the text in the form
id | unique_name | Optional. A unique id for the control
Method | post get | Optional. How the form posts data to the server. Default is "post"
OnActivate | function_name | Optional. The name of the function to be executed when form is activated
OnDeactivate | function_name | Optional. The name of the function to be executed when form is deactivated
OnPaginate | function_name | Optional. The name of the function to be executed when form is paginated
Paginate | true false | Optional. Whether the form is to be paginated
runat | "server" | Required. Specifies that the control is a server control
StyleReference | name_of_style_element | Optional. Specifies a reference to a style to be applied to the control
Title | form_title | Optional. The title of the form
Wrapping | wrap nowrap | Optional. Specifies whether or not the text in the form should wrap

Example 1

The following example has one form control, and it will display "Hello W3Schools" in a Label control in an .aspx file:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage" %>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<Mobile:Form runat="server">

<Mobile:Label runat="server">Hello W3Schools

</Mobile:Label>

</Mobile:Form>

Example 2

The following example will declare two forms in an .aspx file. The first form has a label with the text "Age?", an input box to input the age, and a submit button. The second form is activated by the submit button on the first form, and displays a response:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage"%>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<script runat="server">

Dim age

Sub AgeClick(sender As Object, e As EventArgs)

age=text1.Text

ActiveForm=Form2

End Sub

Sub Form2_Activate(sender As Object,e As EventArgs)

message.Text="You are " & age & " years old"

End Sub

</script>

<Mobile:Form id="form1" runat="server">

<Mobile:Label runat="server">Age?</Mobile:Label>

<Mobile:TextBox runat="server" id="text1" />

<Mobile:Command runat="server" OnClick="AgeClick"

Text="Submit" />

</Mobile:Form>

<Mobile:Form id="form2" runat="server"

OnActivate="Form2_Activate">

<Mobile:Label runat="server" id="message" />

</Mobile:Form>


ASP.NET Mobile Image Control

Definition and Usage

The Image control is used to display an image on a mobile device.

Note: Different wireless devices may support different image formats! For example, HTML-capable browsers support GIF files and WML-capable browsers support WBMP files.

You can specify multiple image files in the Image control and the Image control itself will choose the correct image format based on the target mobile device.

Properties

Property | Value | Description
AlternateText | text | Optional. Specifies an alternate text for the image
Alignment | left center right | Optional. How to align the image
BackColor | rgb(x,x,x) #xxxxxx colorname | Optional. A background color for the image
id | unique_name | Optional. A unique id for the control
ImageUrl | url | Optional. The URL of the image
NavigateUrl | targetUrl | Optional. Sets or returns the target URL of the link
runat | "server" | Required. Specifies that the control is a server control
SoftkeyLabel | label | Optional. Sets or returns the text displayed for a softkey when the NavigateUrl property defined
StyleReference | name_of_style_element | Optional. Specifies a reference to a style to be applied to the control

Example 1

The following example will display an image in an .aspx file:

<%@ Page

Inherits=

"System.Web.UI.MobileControls.MobilePage"%>

<%@ Register

TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<Mobile:Form runat="server">

<Mobile:Image runat="server">

<DeviceSpecific>

  <Choice ImageURL="image.gif" />

  <Choice ImageURL="image.bmp" />

  <Choice ImageURL="image.wbmp" />

</DeviceSpecific>

</Mobile:Image>

</Mobile:Form>

When this page is displayed on pocket PC, a GIF image will be displayed. On a cell phone a WBMP image or a BMP image will be displayed, according to the characteristics of the cell phone.


ASP.NET Mobile Label Control

Definition and Usage

The Label control is used to display a text on a mobile device.

The text can be specified by the text attribute or as the content of the Label element. If the text is specified in both ways, the inner text takes precedence. However, if the text is programmatically set, the inner text is replaced with this text.

Properties

Property | Value | Description
Alignment | left center right | Optional. How to align the label
BackColor | rgb(x,x,x) #xxxxxx colorname | Optional. A background color for the label
ForeColor | rgb(x,x,x) #xxxxxx colorname | Optional. A foreground color for the label
Font-Bold | false true | Optional. Specifies whether or not the text in the label should be bold
Font-Italic | false true | Optional. Specifies whether or not the text in the label should be italic
Font-Name | fontname | Optional. Specifies the font name of the text in the label
Font-Size | normal small large | Optional. Specifies the font size of the text in the label
id | unique_name | Optional. A unique id for the control
runat | "server" | Required. Specifies that the control is a server control
StyleReference | name_of_style_element | Optional. Specifies a reference to a style to be applied to the control
Text | text | Optional. The text to display in the label
Wrapping | wrap nowrap | Optional. Specifies whether or not the text in the label should wrap

Example 1

The following example will display "Hello W3Schools" in a Label control in an .aspx file:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage" %>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<Mobile:Form runat="server">

<Mobile:Label runat="server">Hello W3Schools

</Mobile:Label>

</Mobile:Form>

Example 2

The following example will declare two forms in an .aspx file. The first form has a label with the text "Age?", an input box to input the age, and a submit button. The second form is activated by the submit button on the first form, and displays a response:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage"%>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<script runat="server">

Dim age

Sub AgeClick(sender As Object, e As EventArgs)

age=text1.Text

ActiveForm=Form2

End Sub

Sub Form2_Activate(sender As Object,e As EventArgs)

message.Text="You are " & age & " years old"

End Sub

</script>

<Mobile:Form id="form1" runat="server">

<Mobile:Label runat="server">Age?</Mobile:Label>

<Mobile:TextBox runat="server" id="text1" />

<Mobile:Command runat="server" OnClick="AgeClick"

Text="Submit" />

</Mobile:Form>

<Mobile:Form id="form2" runat="server"

OnActivate="Form2_Activate">

<Mobile:Label runat="server" id="message" />

</Mobile:Form>


ASP.NET Mobile Link Control

Definition and Usage

The Link control is used to create a hyperlink on a mobile device.

Properties

Property | Value | Description
Alignment | left center right | Optional. How to align the Link control
BackColor | rgb(x,x,x) #xxxxxx colorname | Optional. A background color for the link
ForeColor | rgb(x,x,x) #xxxxxx colorname | Optional. A foreground color for the link
Font-Bold | false true | Optional. Specifies whether or not the text in the link should be bold
Font-Italic | false true | Optional. Specifies whether or not the text in the link should be italic
Font-Name | fontname | Optional. Specifies the font name of the text in the link
Font-Size | normal small large | Optional. Specifies the font size of the text in the link
id | unique_name | Optional. A unique id for the control
NavigateUrl | URL #form_id | Optional. The URL of the link. If the value of this property begins with a #, it means that the link should navigate to another form on the current MobilePage control
runat | "server" | Required. Specifies that the control is a server control
SoftkeyLabel | text | Optional. Sets or returns the text displayed for a soft key when the NavigateUrl property is defined
StyleReference | name_of_style_element | Optional. Specifies a reference to a style to be applied to the control
Text | text | Optional. The text to display in the link
Wrapping | wrap nowrap | Optional. Specifies whether or not the text in the link should wrap

Example 1

The following example contains one form in an .aspx file. The Link control creates a hyperlink to W3Schools:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage"%>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<Mobile:Form runat="server">

<Mobile:Link runat="server"

NavigateURL="http://www.w3schools.com">Go to W3Schools!

</Mobile:Link>

</Mobile:Form>

Example 2

The following example contains two forms in an .aspx file. The Link control lets the user navigate between the two mobile forms:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage"%>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<Mobile:Form id="f1" runat="server">

<Mobile:Label runat="server">Hello W3Schools

</Mobile:Label>

<Mobile:Link runat="server" NavigateURL="#f2">2

</Mobile:Link>

</Mobile:Form>

<Mobile:Form id="f2" runat="server">

<Mobile:Label runat="server">Hello Again

</Mobile:Label>

<Mobile:Link runat="server" NavigateURL="#f1">1

</Mobile:Link>

</Mobile:Form>


ASP.NET Mobile List Control

Definition and Usage

The List control is used to create a list on a mobile device.

Properties

Property | Value | Description
Alignment | left center right | Optional. How to align the list
BackColor | rgb(x,x,x) #xxxxxx colorname | Optional. A background color for the list
DataMember | dataMember | Optional. Specifies the data member to extract in data binding to a data source
DataSource | dataSource | Optional. Specifies the data source the control will be bound to
DataTextField | dataTextField | Optional.
DataValueField | dataValueField | Optional.
Decoration | None Bulleted Numbered | Optional. Specifies the type of decoration used for items in the list
ForeColor | rgb(x,x,x) #xxxxxx colorname | Optional. A foreground color for the list
Font-Bold | false true | Optional. Specifies whether or not the text in the list should be bold
Font-Italic | false true | Optional. Specifies whether or not the text in the list should be italic
Font-Name | fontname | Optional. Specifies the font name of the text in the list
Font-Size | normal small large | Optional. Specifies the font size of the text in the list
id | unique_name | Optional. A unique id for the control
ItemsAsLinks | true false | Optional. Whether or not the items in the list are to be treated as hyperlinks. Default is false
ItemCount | itemCount | Optional.
OnItemCommand | function_name | Optional. The name of the function to be executed when an individual list item generates an event
OnItemDataBind | function_name | Optional. The name of the function to be executed when an item is data bound to a MobileListItem object
OnLoadItems | function_name | Optional. The name of the function to be executed when the items are to be loaded
runat | "server" | Required. Specifies that the control is a server control
StyleReference | name_of_style_element | Optional. Specifies a reference to a style to be applied to the control
Wrapping | wrap nowrap | Optional. Specifies whether or not the text in the list should wrap

Example 1

The following example is an .aspx page with two forms. The first form has a list of cars. The second form is activated when a car is selected in the first form, and it displays the price of the selected car:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage"%>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<script runat="server">

Sub Show_Price(sender As Object,e As ListCommandEventArgs)

text1.Text=e.ListItem.Text & "=" & e.ListItem.Value

ActiveForm=f2

End Sub

</script>

<Mobile:Form id="f1" runat="server">

<Mobile:List runat="server"

OnItemCommand="Show_Price">

<Item text="Volvo" value="$30,000" />

<Item text="BMW" value="$32,000" />

<Item text="Audi" value="$34,000" />

</Mobile:List>

</Mobile:Form>

<Mobile:Form id="f2" runat="server">

<Mobile:Label runat="server" id="text1" />

</Mobile:Form>


ASP.NET Mobile MobilePage Control

Definition and Usage

The MobilePage control defines a base class for all mobile pages.

A mobile page requires two directives:

· The Page directive
· The Register directive

The Page directive tells ASP to use (inherit) mobile page handling instead of regular page handling (like the one used for traditional browsers).

The Register directive defines the prefix that will be used for mobile controls. We have used "Mobile", but you can use any prefix you like.

A mobile page starts with something like this:

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" %>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

Properties

Property | Description
Assembly | Required. Points to the assembly where the namespace resides
Inherits | Required. Specifies a class that this page should inherit from. If the page inherits directly from a MobilePage object, set this property to the "System.Web.UI.MobileControls.MobilePage" namespace. If the page inherits from a code-behind class, the name of the class must be specified instead
Language | Optional. Specifies the scripting language used on the page
NameSpace | Required. The namespace to use for mobile server controls
TagPrefix | Required. The tag prefix to use

Example 1

The following example will display "Hello W3Schools" in a Label control in an .aspx file:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage" %>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<Mobile:Form runat="server">

<Mobile:Label runat="server">Hello W3Schools

</Mobile:Label>

</Mobile:Form>


ASP.NET Mobile Panel Control

Definition and Usage

The Panel control defines a container for other controls on a mobile page.

Properties

Property | Value | Description
Alignment | left center right | Optional. How to align the panel
BackColor | rgb(x,x,x) #xxxxxx colorname | Optional. A background color for the panel
ForeColor | rgb(x,x,x) #xxxxxx colorname | Optional. A foreground color for the panel
Font-Bold | false true | Optional. Specifies whether or not the text in the panel should be bold
Font-Italic | false true | Optional. Specifies whether or not the text in the panel should be italic
Font-Name | fontname | Optional. Specifies the font name of the text in the panel
Font-Size | normal small large | Optional. Specifies the font size of the text in the panel
id | unique_name | Optional. A unique id for the control
runat | "server" | Required. Specifies that the control is a server control
StyleReference | name_of_style_element | Optional. Specifies a reference to a style to be applied to the control
Wrapping | wrap nowrap | Optional. Specifies whether or not the text in the panel should wrap

Example 1

The following example contains one form in an .aspx file. The form contains two Panel controls. The first Panel control has its Font-Bold property set to "true" and the Label controls inside this Panel control will inherit this property. The second Panel control has its ForeColor property set to "red" and the Label controls inside this Panel control will inherit this property:

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" %>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<Mobile:Form runat="server">

<Mobile:Panel runat="server" Font-Bold="true">

  <Mobile:Label runat="server">Audi</Mobile:Label>

  <Mobile:Label runat="server">BMW</Mobile:Label>

</Mobile:Panel>

<Mobile:Panel runat="server" ForeColor="red">

  <Mobile:Label runat="server">Saab</Mobile:Label>

  <Mobile:Label runat="server">Volvo</Mobile:Label>

</Mobile:Panel>

</Mobile:Form>


ASP.NET Mobile PhoneCall Control

Definition and Usage

The PhoneCall control is used to specify a phone number to call.

For devices that can make a phone call, this control is displayed as an element that when selected, it makes a phone call. On other devices, the phone number is displayed as text or as a hyperlink.

Properties

Property | Value | Description
Alignment | left center right | Optional. How to align the control
AlternateFormat | text | Optional. The formatting string for the text value of the PhoneNumber property. If you use the value "{0}" it will display the text from the "Text" property. If you use the value "{1}" it will display the text from the "PhoneNumber" attribute. If you use the value "{0} is {1}" it will display the text from the Text property first, an "is", and then the text from the PhoneNumber property. Default value is {0} {1}. Note: This property is used only with devices that are unable to make a phone call!
AlternateURL | URL | Optional. If you specify a URL in this property, the value in the AlternateFormat property will be displayed as a hyperlink. If you click on the hyperlink, the control browses to the specified URL. Note: This property is used only with devices that are unable to make a phone call!
BackColor | rgb(x,x,x) #xxxxxx colorname | Optional. A background color for the control
ForeColor | rgb(x,x,x) #xxxxxx colorname | Optional. A foreground color for the control
Font-Bold | false true | Optional. Specifies whether or not the text in the control should be bold
Font-Italic | false true | Optional. Specifies whether or not the text in the control should be italic
Font-Name | fontname | Optional. Specifies the font name of the text in the control
Font-Size | normal small large | Optional. Specifies the font size of the text in the control
id | unique_name | Optional. A unique id for the control
PhoneNumber | phone_number | Optional. Specifies a phone number
runat | "server" | Required. Specifies that the control is a server control
SoftKeylabel | softkeylabel | Optional.
StyleReference | name_of_style_element | Optional. Specifies a reference to a style to be applied to the control
Text | text | Optional. Specifies the text to be displayed for devices that are able to make phone calls. Default value is Phone Number
Wrapping | wrap nowrap | Optional. Specifies whether or not the text in the control should wrap

Example 1

The following example contains one form in an .aspx file. The first form contains a PhoneCall control that will display the text "Tove's number" and dial the number (555) 555-5555 when the user selects the text:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage"%>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<Mobile:Form runat="server">

<Mobile:PhoneCall runat="server"

PhoneNumber="(555) 555-5555"

Text="Tove's number"

AlternateFormat="{0}" />

</Mobile:Form>


ASP.NET Mobile RangeValidator Control

Definition and Usage

The RangeValidator control is used to check that the user enters an input value that falls between two values. It is possible to check ranges within numbers, dates, and characters.

Note: The validation will not fail if the input control is empty. Use the RequiredFieldValidator control to make the field required.

Properties

Property

Value

Description

Alignment

left

center

right

Optional. How to align the control

BackColor

rgb(x,x,x)

#xxxxxx

colorname

Optional. A background color for the control

ControlToValidate

id_of_target_control

Optional. The id of the control to validate

Display

None

Static

Dynamic

Optional. The display behavior for the validation control. Legal values are:

· None (the control is not displayed. Used to show the error message only in the ValidationSummary control)
· Static (the control displays an error message if validation fails. Space is reserved on the page for the message even if the input passes validation
· Dynamic (the control displays an error message if validation fails. Space is not reserved on the page for the message if the input passes validation

Dynamic is default

ErrorMessage

errortext_for_summary

Optional. The text to display in the ValidationSummary control when validation fails

ForeColor

rgb(x,x,x)

#xxxxxx

colorname

Optional. A foreground color for the control

Font-Bold

false

true

Optional. Specifies whether or not the text in the control should be bold

Font-Italic

false

true

Optional. Specifies whether or not the text in the control should be italic

Font-Name

fontname

Optional. Specifies the font name of the text in the control

Font-Size

normal

small

large

Optional. Specifies the font size of the text in the control

id

unique_name

Optional. A unique id for the control

MaximumValue

max_value

Optional. Specifies the maximum value of the control that is validated

MinimumValue

min_value

Optional. Specifies the minimum value of the control that is validated

runat

"server"

Required. Specifies that the control is a server control

StyleReference

name_of_style_element

Optional. Specifies a reference to a style to be applied to the control

Text

errortext

Optional. The message to display when validation fails

Type

Currency

Date

Double

Integer

String

Optional. Specifies the data type of the values to compare

Wrapping

wrap

nowrap

Optional. Specifies whether or not the text in the control should wrap

Example 1

The following example contains two forms in an .aspx file. The first form has a label with the text "Please enter a number from 1 through 100", an input box to input a number, a RangeValidator control that checks that the input value is a number from 1 through 100, a RequiredFieldValidator control that checks that the input field isn't empty, and a submit button. The second page is activated by the submit button on the first page, and displays a response. If the input value validates as an error, an error message is displayed:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage"%>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<script runat="server">

sub page2(Sender as Object,E as EventArgs)

if Page.IsValid then

ActiveForm=f2

lbl2.Text="You entered number " & txt1.text

end if

end sub

</script>

<Mobile:Form id="f1" runat="server">

<Mobile:Label runat="server">

Please enter a number from 1 through 100

</Mobile:Label>

<Mobile:TextBox id="txt1" runat="server"/>

<Mobile:RangeValidator

ControlToValidate="txt1"

Type="Integer"

MaximumValue="100"

MinimumValue="1"

Text="Invalid number"

runat="server" />

<Mobile:RequiredFieldValidator

ControlToValidate="txt1"

Text="A number is required"

runat="server" />

<Mobile:Command runat="server"

OnClick="page2">Submit

</Mobile:Command>

</Mobile:Form>

<Mobile:Form id="f2" runat="server">

<Mobile:Label id="lbl2" runat="server" />

</Mobile:Form>


ASP.NET Mobile RegularExpressionValidator Control

Definition and Usage

The RegularExpressionValidator control is used to ensure that an input value matches a specified pattern.

Note: The validation will not fail if the input control is empty. Use the RequiredFieldValidator control to make the field required.

Properties

Property

Value

Description

Alignment

left

center

right

Optional. How to align the control

BackColor

rgb(x,x,x)

#xxxxxx

colorname

Optional. A background color for the control

ControlToValidate

id_of_target_control

Optional. The id of the control to validate

Display

None

Static

Dynamic

Optional. The display behavior for the validation control. Legal values are:

· None (the control is not displayed. Used to show the error message only in the ValidationSummary control)
· Static (the control displays an error message if validation fails. Space is reserved on the page for the message even if the input passes validation
· Dynamic (the control displays an error message if validation fails. Space is not reserved on the page for the message if the input passes validation

Dynamic is default

ErrorMessage

errortext_for_summary

Optional. The text to display in the ValidationSummary control when validation fails

ForeColor

rgb(x,x,x)

#xxxxxx

colorname

Optional. A foreground color for the control

Font-Bold

false

true

Optional. Specifies whether or not the text in the control should be bold

Font-Italic

false

true

Optional. Specifies whether or not the text in the control should be italic

Font-Name

fontname

Optional. Specifies the font name of the text in the control

Font-Size

normal

small

large

Optional. Specifies the font size of the text in the control

id

unique_name

Optional. A unique id for the control

runat

"server"

Required. Specifies that the control is a server control

StyleReference

name_of_style_element

Optional. Specifies a reference to a style to be applied to the control

Text

errortext

Optional. The message to display when validation fails

ValidationExpression

regexp

Optional. Specifies the pattern/expression assigned to be the validation criteria

Wrapping

wrap

nowrap

Optional. Specifies whether or not the text in the control should wrap

Example 1

The following example contains two forms in an .aspx file. The first form has a label with the text "Please enter a ZIP code", an input box to input a ZIP code, a RegularExpressionValidator control that checks that the input value contains exactly five digits, a RequiredFieldValidator control that checks that the input field isn't empty, and a submit button. The second page is activated by the submit button on the first page, and displays a response. If the input value validates as an error, an error message is displayed:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage"%>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<script runat="server">

sub page2(Sender as Object,E as EventArgs)

if Page.IsValid then

ActiveForm=f2

lbl2.Text="The ZIP code entered is: " & txt1.text

end if

end sub

</script>

<Mobile:Form id="f1" runat="server">

<Mobile:Label runat="server">

Please enter a ZIP code

</Mobile:Label>

<Mobile:TextBox id="txt1" runat="server"/>

<Mobile:RegularExpressionValidator

ControlToValidate="txt1"

ValidationExpression="\d{5}"

Text="The zip code must be five digits!"

runat="server" />

<Mobile:RequiredFieldValidator

ControlToValidate="txt1"

Text="A ZIP code is required!"

runat="server" />

<Mobile:Command runat="server"

OnClick="page2">Submit

</Mobile:Command>

</Mobile:Form>

<Mobile:Form id="f2" runat="server">

<Mobile:Label id="lbl2" runat="server" />

</Mobile:Form>


ASP.NET Mobile RequiredFieldValidator Control

Definition and Usage

The RequiredFieldValidator control is used to make an input control a required field.

With this control, the validation fails if the input value does not change from its initial value. By default, the initial value is null.

Note: Leading and trailing spaces of the input value are removed before validation.

Note: The InitialValue property does not set the default value for the input control. It indicates the value that you do not want the user to enter in the input control.

Properties

Property

Value

Description

Alignment

left

center

right

Optional. How to align the control

BackColor

rgb(x,x,x)

#xxxxxx

colorname

Optional. A background color for the control

ControlToValidate

id_of_target_control

Optional. The id of the control to validate

Display

None

Static

Dynamic

Optional. The display behavior for the validation control. Legal values are:

· None (the control is not displayed. Used to show the error message only in the ValidationSummary control)
· Static (the control displays an error message if validation fails. Space is reserved on the page for the message even if the input passes validation
· Dynamic (the control displays an error message if validation fails. Space is not reserved on the page for the message if the input passes validation

Dynamic is default

ErrorMessage

errortext_for_summary

Optional. The text to display in the ValidationSummary control when validation fails

ForeColor

rgb(x,x,x)

#xxxxxx

colorname

Optional. A foreground color for the control

Font-Bold

false

true

Optional. Specifies whether or not the text in the control should be bold

Font-Italic

false

true

Optional. Specifies whether or not the text in the control should be italic

Font-Name

fontname

Optional. Specifies the font name of the text in the control

Font-Size

normal

small

large

Optional. Specifies the font size of the text in the control

id

unique_name

Optional. A unique id for the control

InitialValue

initial_value

Optional. Specifies the starting value of the input control. Default value is null

runat

"server"

Required. Specifies that the control is a server control

StyleReference

name_of_style_element

Optional. Specifies a reference to a style to be applied to the control

Text

errortext

Optional. The message to display when validation fails

Wrapping

wrap

nowrap

Optional. Specifies whether or not the text in the control should wrap

Example 1

The following example contains two forms in an .aspx file. The first form has a label with the text "Please enter a number from 1 through 100", an input box to input a number, a RangeValidator control that checks that the input value is a number from 1 through 100, a RequiredFieldValidator control that checks that the input field isn't empty, and a submit button. The second page is activated by the submit button on the first page, and displays a response. If the input value validates as an error, an error message is displayed:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage"%>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<script runat="server">

sub page2(Sender as Object,E as EventArgs)

if Page.IsValid then

ActiveForm=f2

lbl2.Text="You entered number " & txt1.text

end if

end sub

</script>

<Mobile:Form id="f1" runat="server">

<Mobile:Label runat="server">

Please enter a number from 1 through 100

</Mobile:Label>

<Mobile:TextBox id="txt1" runat="server"/>

<Mobile:RangeValidator

ControlToValidate="txt1"

Type="Integer"

MaximumValue="100"

MinimumValue="1"

Text="Invalid number"

runat="server" />

<Mobile:RequiredFieldValidator

ControlToValidate="txt1"

Text="A number is required"

runat="server" />

<Mobile:Command runat="server"

OnClick="page2">Submit

</Mobile:Command>

</Mobile:Form>

<Mobile:Form id="f2" runat="server">

<Mobile:Label id="lbl2" runat="server" />

</Mobile:Form>


ASP.NET Mobile SelectionList Control

Definition and Usage

The SelectionList control is used to create a list on a mobile device.

Differences between a SelectionList control and a List control:

· A SelectionList control supports multiple item selections and the List control only supports single item selections
· A SelectionList control supports drop-down lists, combo boxes, and radio buttons and the List control only supports common lists
· An item selected from a SelectionList control does not generate a server event
· A SelectionList control does not offer pagination

Properties

Property | Value | Description
Alignment | left center right | Optional. How to align the list
BackColor | rgb(x,x,x) #xxxxxx colorname | Optional. A background color for the list
DataMember | dataMember | Optional. Specifies the data member to extract in data binding to a data source
DataTextField | dataTextField | Optional.
DataValueField | dataValueField | Optional.
ForeColor | rgb(x,x,x) #xxxxxx colorname | Optional. A foreground color for the list
Font-Bold | false true | Optional. Specifies whether or not the text in the list should be bold
Font-Italic | false true | Optional. Specifies whether or not the text in the list should be italic
Font-Name | fontname | Optional. Specifies the font name of the text in the list
Font-Size | normal small large | Optional. Specifies the font size of the text in the list
id | unique_name | Optional. A unique id for the control
OnItemDataBind | function_name | Optional. The name of the function to be executed when an item is data bound to a MobileListItem object
OnSelectedIndexChanged | function_name | Optional. The name of the function to be executed when the index of the selected item has changed
Rows | rows | Optional. Specifies the number of rows to display. Default is "4"
runat | "server" | Required. Specifies that the control is a server control
SelectType | DropDown ListBox Radio MultiSelectListBox CheckBox | Optional. Specifies the type of list to display. "DropDown" is default.
StyleReference | name_of_style_element | Optional. Specifies a reference to a style to be applied to the control
Title | text | Optional. Specifies a title to display. Only for WML devices
Wrapping | wrap nowrap | Optional. Specifies whether or not the text in the list should wrap

Example 1

The following example is an .aspx page with two forms. The first form has a list of cars. The second form is activated when a car is selected in the first form, and it displays the price of the selected car:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage"%>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<script runat="server">

Sub Car_Click(sender as Object, e as EventArgs)

ActiveForm=f2

t1.text=cars.Selection.Value

End Sub

</script>

<Mobile:Form id="f1" runat="server">

<Mobile:SelectionList runat="server" id="cars" >

  <Item Text="Volvo" Value="$30,000" />

  <Item Text="BMW" Value="$32,000" />

  <Item Text="Audi" Value="$34,000" />

</Mobile:SelectionList>

<Mobile:Command runat="server"

OnClick="Car_Click" Text="Submit" />

</Mobile:Form>

<Mobile:Form id="f2" runat="server">

<Mobile:Label id="t1" runat="server" />

</Mobile:Form>

When this page is displayed on a mobile device, the navigation and display functions of the page will be compiled differently for different devices with different display characteristics.

Fore some devices, like a handheld PC, it might display a dropdown list to choose from. For a cell phone it might display a list of options to select from.


ASP.NET Mobile StyleSheet Control

Definition and Usage

The StyleSheet control defines styles to apply to other controls.

The StyleSheet control can contain any number of <Style> elements. Each Style element must have a unique name. The name may be used to refer to each Style element from other controls on the same page.

A mobile page can also use an external style sheet. To create an external style sheet, you create a user control and a StyleSheet control in an .ascx file. To refer to this file, you add a StyleSheet control on a page and set its ReferencePath property to the URL of the .ascx file.

Properties

Property | Value | Description
id | unique_name | Optional. A unique id for the control
ReferencePath | URL | Optional. Specifies a relative path to an .ascx file that contains a set of style elements
runat | "server" | Required. Specifies that the control is a server control

Example 1

The following example is an .aspx page with two labels in a form. Each label has a reference to an internal style. The text in the first label will be displayed in bold and the text in the second label will be displayed in red:

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage"%>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<Mobile:StyleSheet runat="server">

<Style name="title" Font-Bold="true" />

<Style name="message" ForeColor="red" />

</Mobile:StyleSheet>

<Mobile:Form id="f1" runat="server">

<Mobile:Label runat="server" Text="Hello W3Schools!"

StyleReference="title" />

<Mobile:Label runat="server" Text="This is a nice day!"

StyleReference="message" />

</Mobile:Form>


ASP.NET Mobile TextBox Control

Definition and Usage

The TextBox control is used to create a single-line input box on a mobile device.

The text can be specified by the text attribute or as the content of the TextBox element. If the text is specified in both ways, the inner text takes precedence. However, if the text is programmatically set, the inner text is replaced with this text.

Properties

Property | Value | Description
Alignment | left center right | Optional. How to align the textbox
BackColor | rgb(x,x,x) #xxxxxx colorname | Optional. A background color for the textbox
ForeColor | rgb(x,x,x) #xxxxxx colorname | Optional. A foreground color for the textbox
Font-Bold | false true | Optional. Specifies whether or not the text in the textbox should be bold
Font-Italic | false true | Optional. Specifies whether or not the text in the textbox should be italic
Font-Name | fontname | Optional. Specifies the font name of the text in the textbox
Font-Size | normal small large | Optional. Specifies the font size of the text in the textbox
id | unique_name | Optional. A unique id for the control
MaxLength | number_of_char | Optional. The maximum number of characters allowed in the textbox
Numeric | true false | Optional. Specifies whether or not the value of the textbox should be numeric
OnTextChanged | function_name | Optional. The name of the function to be executed when the text is changed
Password | true false | Optional. Specifies whether or not the textbox should be treated as a password field
runat | "server" | Required. Specifies that the control is a server control
Size | size_of_textbox | Optional. The size of the textbox (in characters)
StyleReference | name_of_style_element | Optional. Specifies a reference to a style to be applied to the control
Text | text | Optional. The text to display in the textbox
Wrapping | wrap nowrap | Optional. Specifies whether or not the text in the textbox should wrap

Example 1

The following example will declare two forms in an .aspx file. The first form has a label with the text "Age?", a textbox to input the age, and a submit button. The second form is activated by the submit button on the first form, and displays a response:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage"%>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<script runat="server">

Dim age

Sub AgeClick(sender As Object, e As EventArgs)

age=text1.Text

ActiveForm=Form2

End Sub

Sub Form2_Activate(sender As Object,e As EventArgs)

message.Text="You are " & age & " years old"

End Sub

</script>

<Mobile:Form id="form1" runat="server">

<Mobile:Label runat="server">Age?</Mobile:Label>

<Mobile:TextBox runat="server" id="text1" />

<Mobile:Command runat="server" OnClick="AgeClick"

Text="Submit" />

</Mobile:Form>

<Mobile:Form id="form2" runat="server"

OnActivate="Form2_Activate">

<Mobile:Label runat="server" id="message" />

</Mobile:Form>


ASP.NET Mobile TextView Control

Definition and Usage

The TextView control is used to create a multi-line input box on a mobile device.

The text can be specified by the text attribute or as the content of the TextView element. If the text is specified in both ways, the inner text takes precedence. However, if the text is programmatically set, the inner text is replaced with this text.

Properties

Property | Value | Description
Alignment | left center right | Optional. How to align the textbox
BackColor | rgb(x,x,x) #xxxxxx colorname | Optional. A background color for the textbox
ForeColor | rgb(x,x,x) #xxxxxx colorname | Optional. A foreground color for the textbox
Font-Bold | false true | Optional. Specifies whether or not the text in the textbox should be bold
Font-Italic | false true | Optional. Specifies whether or not the text in the textbox should be italic
Font-Name | fontname | Optional. Specifies the font name of the text in the textbox
Font-Size | normal small large | Optional. Specifies the font size of the text in the textbox
id | unique_name | Optional. A unique id for the control
runat | "server" | Required. Specifies that the control is a server control
StyleReference | name_of_style_element | Optional. Specifies a reference to a style to be applied to the control
Text | text | Optional. The text to display in the textbox
Wrapping | wrap nowrap | Optional. Specifies whether or not the text in the textbox should wrap

Example 1

The following example will declare one form in an .aspx file. The form has a TextView control containing a long text:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage"%>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<Mobile:Form runat="server">

<Mobile:TextView runat="server">

This is a very long text to demonstrate

how text can be displayed over several screens.

This is a very long text to demonstrate

how text can be displayed over several screens.

This is a very long text to demonstrate

how text can be displayed over several screens.

This is a very long text to demonstrate

how text can be displayed over several screens.

</Mobile:TextView>

</Mobile:Form>

Example 2

The following example will declare one form in an .aspx file. The form has a TextView control containing a long text. The text will be centered on the page and displayed in italic:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage"%>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<Mobile:Form runat="server">

<Mobile:TextView runat="server" alignment="center"

font-italic="true">

This is a very long text to demonstrate

how text can be displayed over several screens.

This is a very long text to demonstrate

how text can be displayed over several screens.

This is a very long text to demonstrate

how text can be displayed over several screens.

This is a very long text to demonstrate

how text can be displayed over several screens.

</Mobile:TextView>

</Mobile:Form>


ASP.NET Mobile ValidationSummary Control

Definition and Usage

The ValidationSummary control is used to display a summary of all validation errors occurred in a Web page.

The error message displayed in this control is specified by the ErrorMessage property of each validation control. If the ErrorMessage property of the validation control is not set, no error message is displayed for that validation control.

Properties

Property | Value | Description
Alignment | left center right | Optional. How to align the control
BackColor | rgb(x,x,x) #xxxxxx colorname | Optional. A background color for the control
BackLabel | backlabel | Optional. Specifies a text that serves as a link to "go back" that will be displayed on the validation summary page
ForeColor | rgb(x,x,x) #xxxxxx colorname | Optional. A foreground color for the control
FormToValidate | form_id | Optional. Specifies the id of the form to validate
Font-Bold | false true | Optional. Specifies whether or not the text in the control should be bold
Font-Italic | false true | Optional. Specifies whether or not the text in the control should be italic
Font-Name | fontname | Optional. Specifies the font name of the text in the control
Font-Size | normal small large | Optional. Specifies the font size of the text in the control
id | unique_name | Optional. A unique id for the control
runat | "server" | Required. Specifies that the control is a server control
StyleReference | name_of_style_element | Optional. Specifies a reference to a style to be applied to the control
Wrapping | wrap nowrap | Optional. Specifies whether or not the text in the control should wrap

Example 1

The following example contains two forms in an .aspx file. The first form has a label with the text "Please enter a number from 1 through 100", an input box to input a number, a RangeValidator control that checks that the input value is a number from 1 through 100, a RequiredFieldValidator control that checks that the input field isn't empty, and a submit button. The second form is activated by the submit button on the first form, and displays a response. If one of the input value did not validate, the ValidationSummary control will display (in a list) the text in the ErrorMessage property for each control that did not validate:

<%@ Page

Inherits="System.Web.UI.MobileControls.MobilePage"%>

<%@ Register TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<script runat="server">

sub page2(Sender as Object,E as EventArgs)

ActiveForm=f2

end sub

</script>

<Mobile:Form id="f1" runat="server">

<Mobile:Label runat="server">

Please enter a number from 1 through 100

</Mobile:Label>

<Mobile:TextBox id="txt1" runat="server"/>

<Mobile:RangeValidator

ControlToValidate="txt1"

Type="Integer"

MaximumValue="100"

MinimumValue="1"

ErrorMessage="Invalid number"

runat="server" />

<Mobile:RequiredFieldValidator

ControlToValidate="txt1"

ErrorMessage="A number is required"

runat="server" />

<Mobile:Command runat="server"

OnClick="page2">Show errors in Summary

</Mobile:Command>

</Mobile:Form>

<Mobile:Form id="f2" runat="server">

<Mobile:Label runat="server">

Your input is valid if no error is shown below.

</Mobile:Label>

<Mobile:ValidationSummary FormToValidate="f1"

HeaderText="Error listed below:"

BackLabel="Back to main frame" runat="server" />

</Mobile:Form>


.NET Mobile Devices Update1

.NET Mobile Devices

Mobile Device Update 1

An update to the Mobile Internet Toolkit was released May 13, 2002. This update provided additional support for the following devices:

Device | Browser
@Migo PD-600C | Microsoft Pocket Internet Explorer 2002 (4.1)
Alcatel One Touch 311 | Openwave UP.Browser 4.1.23a
Alcatel One Touch 501 | Openwave UP.Browser 4.1.19e
Alcatel One Touch 511 | Openwave UP.Browser 4.1.23a
Audiovox Maestro Handheld Pocket PC | Microsoft Pocket Internet Explorer 2002 (4.1)
Casio BE-500 | OEM 1.00.62(J) (HTML)
Compaq iPAQ H3870 | Microsoft Pocket Internet Explorer 2002 (4.1)
Ericsson T20e/ec | Ericsson T20/R2A
Ericsson T29s/sc | Ericsson T20/R2A
Ericsson T39m/mc | Ericsson T39/R202
Ericsson T65 | Ericsson T65/R101
Fujitsu F211i | ACCESS Compact NetFront 2.0
Fujitsu F671i | ACCESS Compact NetFront 2.0
Handspring Treo 180 | Blazer 2.0
Handspring Visor Platinum | Blazer 2.0
HP Jornada 567 | Microsoft Pocket Internet Explorer 2002 (4.1)
Mitsubishi D211i | ACCESS Compact NetFront 2.0
Mitsubishi D503iS | ACCESS Compact NetFront 2.0
Motorola i80s | Openwave UP.Browser 4.1.23
Motorola i90c | Openwave UP.Browser 4.1.23
Motorola Talkabout 191 | Openwave UP.Browser 4.1
Motorola Timeport 270c | Openwave UP.Browser 4.1.21b
Motorola TimePort T260 | Openwave UP.Browser 4.1.8
Motorola V50 | Openwave UP.Browser 4.1.16s
Motorola V200 | Openwave UP.Browser 4.1
NEC FOMA N2001 | ACCESS Compact NetFront 2.0
NEC N211i | ACCESS Compact NetFront 2.0
NEC N503i | ACCESS Compact NetFront 2.0
NEC N503iS | ACCESS Compact NetFront 2.0
Nokia 3285 | Openwave UP.Browser 3.1.11A.1
Nokia 6310 | Nokia 1.0 (4.10)
Nokia 8310 | Nokia 1.0 (3.07)
Nokia 9110i | Nokia 1.1 (HTML)
Nokia 9210 | Symbian Crystal 6.0 (HTML)
Palm m505 | Blazer 2.0
Palm VIIx | AvantGo 4.0
Palm Vx | GoAmerica Go.Web 6.0
Panasonic GD95 | Original Equipment Manufacturer's Version
Panasonic P503i | Original Equipment Manufacturer's Version
Panasonic P503iS | Original Equipment Manufacturer's Version
Panasonic P821i | ACCESS Compact NetFront 2.0
Samsung SGH-A300 | Openwave UP.Browser 4.1.19k
Samsung SGH-A400 | Openwave UP.Browser 4.1.19k
Samsung SPH-N200 | Openwave UP.Browser 4.1.22b
Samsung SPH-i300 | Openwave UP.Browser 4.1.22c1
Sanyo C1001SA | Openwave UP.Browser 3.2
Sanyo SCP-4700 | Openwave UP.Browser 4.1.24f
Sanyo SCP-6000 | Openwave UP.Browser 4.1.23a
Sharp J-SH07 | Original Equipment Manufacturer's Version 3.0
Sharp SH821i | ACCESS Compact NetFront 2.0
Sharp Zaurus MI-E21 | Original Equipment Manufacturer's Version 6.2
Siemens ME45 | Openwave UP.Browser 5.0.1.1.102 (GUI)
Siemens M35 | Openwave UP.Browser 4.1.16m
Siemens S40 | Openwave UP.Browser 4.1.16
Sony C1002S | Openwave UP.Browser 3.2
Sony PEG T600C | ilinx Xiino 1.0.6a4SJ
Sony SO210i | ACCESS Compact NetFront 2.0
Sony SO503iS | ACCESS Compact NetFront 2.0
Sprint LG Touchpoint 5200 | Openwave UP.Browser 4.1.22b
Toshiba Genio e550x | Microsoft Pocket Internet Explorer 2002 (4.1) ja
Toshiba J-T06 | Original Equipment Manufacturer's Version 3.0


.NET Mobile Devices

Mobile Internet Toolkit 1.0 Devices

The Mobile Internet Toolkit 1.0 was released January 15, 2002. The following devices where supported in this first release:

Device | Browser
Alcatel One Touch 701 | Openwave UP.Browser 4.1.19
Audiovox CDM-135 | Openwave UP.Browser 4.1.2
Audiovox CDM-9000 | Openwave UP.Browser 3.1.11
Audiovox CDM-9100 | Openwave UP.Browser 4.1.21c
Benefon Q | Microsoft Mobile Explorer 2.01
Casio Cassiopeia E-125 | Microsoft Pocket Internet Explorer 2000 (4.01)
Compaq iPAQ H3630 | Microsoft Pocket Internet Explorer 2000 (4.01)
Compaq iPAQ H3650 | GoAmerica Go.Web 5.0.1
Compaq iPAQ H3650 | Microsoft Pocket Internet Explorer 2000 (4.01)
Compaq iPAQ H3650 | Omnisky 2.0
Compaq iPAQ H3670 | Microsoft Pocket Internet Explorer 2002 (4.1)
Ericsson R280LX | Openwave UP.Browser 3.03
Ericsson R320 | Ericsson R320/R1A
Ericsson R380 | Ericsson R380 2.0
Ericsson R520m | Ericsson R520/R201
Ericsson T20s | Ericsson T20/R2A
Fujitsu F503i | ACCESS Compact NetFront 2.0
Handspring Visor Prism | Blazer 1.0
Handspring Visor Platinum | Qualcomm Eudora Internet Suite 2.1
Handspring Visor Platinum | Omnisky 2.1.0.15
Hitachi C407H | UP.Browser 3.1
HP Jornada 720 | Microsoft Pocket Internet Explorer 2000 (4.01)
IBM WorkPad c505 | ilinx Xiino 1.01J
Kyocera QCP 3035 | Openwave UP.Browser 3.1.17
Kyocera QCP 2035A | Openwave UP.Browser 3.1.17
Kyocera QCP 6035 | Qualcomm Eudora 2.0
LG V111 | Openwave UP.Browser 3.1
Mitsubishi D502i | ACCESS Compact NetFront 2.0
Mitsubishi D503i | ACCESS Compact NetFront 2.0
Mitsubishi T250 | Openwave UP.Browser 3.1.11A
Motorola i1000plus | Openwave UP.Browser 4.1.17
Motorola i2000plus | Openwave UP.Browser 4.1.17
Motorola i50sx | Openwave UP.Browser 4.1.21b
Motorola i85s | Openwave UP.Browser 4.1.21b
Motorola TimePort P7382i | Openwave UP.Browser 4.1.19i
Motorola TimePort P7389 | Openwave UP.Browser 4.1.16g
Motorola TimePort P8767 | Openwave UP.Browser 3.1.10
Motorola StarTAC 7868W | Openwave UP.Browser 3.1.02
Motorola T2288 | Openwave UP.Browser 4.1.8
Motorola V100 | Openwave UP.Browser 4.1.22
Motorola V120c | Openwave UP.Browser 4.1.21b
Motorola V2288 | Openwave UP.Browser 4.1.16f
Motorola V60c | Openwave UP.Browser 4.1.21b
NEC N210i | ACCESS Compact NetFront 2.0
NEC N502i | ACCESS Compact NetFront 2.0
Nokia 3330 | Nokia 1.0 (3.12)
Nokia 6210 | Nokia 1.0 (4.27)
Nokia 7110 | Nokia 1.0 (5.01)
Nokia 9110i | Nokia 1.1
Nokia 9210 | Symbian Crystal 6.0
Palm m505 | MyPalm 1.1
Palm VIIx | MyPalm 1.0
Palm Vx | AU-Systems 2.12181.1
Palm Vx | GoAmerica Go.Web 3.0.6
Palm Vx | Omnisky 2.0.0.4
Panasonic P210i | Original Equipment Manufacturer's Version
Panasonic P502i | Original Equipment Manufacturer's Version
Personal computer | Microsoft Internet Explorer® 5.5
Personal computer | Microsoft Internet Explorer 6.0
RIM Blackberry 857 | GoAmerica Go.Web 1.8.004 (HTML)
RIM Blackberry 857 | GoAmerica Go.Web 6.0.010 (HTML)
RIM Blackberry 950 | GoAmerica Go.Web 1.000.6 (HTML)
RIM Blackberry 950 | GoAmerica Go.Web 6.010.0 (HTML)
RIM Blackberry 957 | GoAmerica Go.Web 1.6.000 (HTML)
RIM Blackberry 957 | GoAmerica Go.Web 6.0.10.0 (HTML)
Samsung SCH-6100 | Openwave UP.Browser 3.1
Samsung SCH-850 | Openwave UP.Browser 3.1
Samsung SCH-8500 | Openwave UP.Browser 3.1.140.TC14
Samsung UpRoar M100 | Openwave UP.Browser 3.1
Sanyo C401SA | Openwave UP.Browser 3.2
Sanyo SCP-4500 | Openwave UP.Browser 3.1.04
Sanyo SCP-5000 | Openwave UP.Browser 3.2
Sharp J-SH04 | Original Equipment Manufacturer's Version 3.0
Sharp Zaurus MI-E1 | Original Equipment Manufacturer's Version 6.1
Siemens C35i | Openwave UP.Browser 4.1.8c
Siemens S35i | Openwave UP.Browser 4.1.16
Siemens SL45 | Openwave UP.Browser 4.1
Sony CLIE PEG-N700C | ilinx Palmscape 4.0SJ
Sony CMD-Z5 | Microsoft Mobile Explorer 2.0 r54ue
Sony CMD-J5 | Microsoft Mobile Explorer 2.0 r54ue
Sony SO503i | ACCESS Compact NetFront 2.0
Sprint Denso Touchpoint 120 | Openwave UP.Browser 3.1
Sprint Denso Touchpoint 2200 | Openwave UP.Browser 3.1
Sprint LG Touchpoint 3000 | Openwave UP.Browser 3.1
Toshiba J-T05 | Original Equipment Manufacturer's Version 3.0

Device Updates

Updates to the Mobile Internet Toolkit will be released when support for new devices are ready. Please refer to the following pages for updates.


.NET Mobile Emulators

Mobile applications can be tested and viewed with different emulators.

Using your Browser

Since mobile web pages detect your browser, you can test your mobile applications with a standard browser.

When a mobile web page detects a standard web browser it will produce HTML output. This will work in Internet Explorer and in other browsers that support inline frames.

Microsoft's Pocket Internet Explorer

Pocket Internet Explorer is Microsoft's browser for PDAs and Pocket PCs.

Openwave Simulators

The Openwave mobile browser is the most common browser used in Internet enabled cell phones.

An emulator can be downloaded from http://www.openwave.com

The Nokia Mobile Internet Toolkit

This toolkit contains emulators for most of the different Nokia devices.

This toolkit can be downloaded from http://forum.nokia.com

The Pocket PC 2002 SDK

The Pocket PC 2002 Software Development Kit includes an emulator that uses a virtual machine to run the Pocket PC 2002 operating system on your PC.

The Pocket PC 2002 Software Development Kit can be downloaded from http://msdn.microsoft.com/mobility/downloads/sdks/default.aspx


.NET Mobile Events

Mobile Controls exposes device independent programmable events.

Programming Events

Mobile controls have an object model with programmable properties, methods and events.

For a complete overview please refer to the reference section.

Submitting Text

This page has two forms:

<%@ Page

Inherits=

"System.Web.UI.MobileControls.MobilePage"%>

<%@ Register

TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<script runat="server">

Dim age

Sub AgeClick(sender As Object, e As EventArgs)

age=text1.Text

ActiveForm=Form2

End Sub

Sub Form2_Activate(sender As Object,e As EventArgs)

message.Text="You are " & age & " years old"

End Sub

</script>

<Mobile:Form id="form1" runat="server">

<Mobile:Label runat="server">Age?</Mobile:Label>

<Mobile:TextBox runat="server" id="text1" />

<Mobile:Command runat="server" OnClick="AgeClick" Text="Submit" />

</Mobile:Form>

<Mobile:Form id="form2" runat="server" OnActivate="Form2_Activate">

<Mobile:Label runat="server" id="message" />

</Mobile:Form>

When a page has two forms, the first form is always opened by default.

The first form has a label with the text "Age?", an input box to input the age, and a submit button.

The second page is activated by the submit button on the first page, and displays a response.

When the application runs on a mobile device, the two pages will display like this:

Form 1

Age?

[TEditFormControlObj]

Form 2

You are 11 years old


.NET Mobile Forms

.NET Mobile Forms are specialized web forms designed to work on different mobile devices.

Mobile Pages

A mobile page is much the same as an ordinary .NET web page. It is a text file with an aspx extension, and it can contain a variety of web controls.

The difference is the page directive that identifies the page as a mobile page, and the controls used on the page, which are mobile controls.

The mobile controls can be programmed device-independently, and the page will produce an output that suits the device that access it.

Mobile Forms

Each mobile page must have at least one mobile form, and each mobile form can have a number of mobile controls.

Note that mobile pages can have multiple mobile forms. This is due to the nature of mobile devices. Mobile devices have small screens and it is very normal to navigate between screens with a simple link.

Automatic Paging

.NET Mobile supports automatic paging for different mobile devices.

The paging is handled differently for each control. For example when paging takes place the controls included in a panel control will stay together.

Displaying Text

This mobile page uses a TextView control to display a large amount of text:

<%@ Page

Inherits=

"System.Web.UI.MobileControls.MobilePage"%>

<%@ Register

TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<Mobile:Form runat="server">

<Mobile:TextView runat="server">

This is a very long text to demonstrate

how text can be displayed over several screens.

This is a very long text to demonstrate

how text can be displayed over several screens.

This is a very long text to demonstrate

how text can be displayed over several screens.

This is a very long text to demonstrate

how text can be displayed over several screens.

</Mobile:TextView>

</Mobile:Form>

When this page is displayed on a mobile device, the navigation and display functions of the page will be compiled differently for different devices with different display characteristics.

When the text is displayed on a pocket PC with a small display, the user will be able to scroll the text with a scroll bar, but on a cell phone the text will be displayed over several screens with proper navigation tools added.

Note that all mobile controls must have the runat attribute set to "server", in order to secure proper rendering of the page for different devices.

Single Forms

This mobile page has one form:

<%@ Page

Inherits=

"System.Web.UI.MobileControls.MobilePage"%>

<%@ Register

TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<Mobile:Form runat="server">

 <Mobile:Label runat="server">Hello W3Schools

 </Mobile:Label>

</Mobile:Form>

Multiple Forms

This mobile page has two forms:

<%@ Page

Inherits=

"System.Web.UI.MobileControls.MobilePage"%>

<%@ Register

TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<Mobile:Form id="f1" runat="server">

<Mobile:Label runat="server">Hello W3Schools

</Mobile:Label>

<Mobile:Link runat="server" NavigateURL="#f2">2

</Mobile:Link>

</Mobile:Form>

<Mobile:Form id="f2" runat="server">

<Mobile:Label runat="server">Hello Again

</Mobile:Label>

<Mobile:Link runat="server" NavigateURL="#f1">1

</Mobile:Link>

</Mobile:Form>

Links

Note the <Mobile:Link> element in the example above. The link control lets the user navigate between the two mobile forms.


.NET Mobile Images

.NET Mobile displays different types of images for different types of devices.

The Image Control

Different mobile devices have different display capabilities.

The Image Control allows the developer to specify different types of images for different types of devices.

Image Types

Some mobile devices will display GIF images. Other mobile devices will display BMP images or WBMP images. The Image Control allows you to specify different images for each preferred image type.

This mobile page displays an image:

<%@ Page

Inherits=

"System.Web.UI.MobileControls.MobilePage"%>

<%@ Register

TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<Mobile:Form runat="server">

<Mobile:Image runat="server">

<DeviceSpecific>

  <Choice ImageURL="image.gif" />

  <Choice ImageURL="image.bmp" />

  <Choice ImageURL="image.wbmp" />

</DeviceSpecific>

</Mobile:Image>

</Mobile:Form>

When this page is displayed on pocket PC, a GIF image will be displayed. On a cell phone a WBMP image or a BMP image will be displayed, according to the characteristics of the cell phone.


.NET Mobile Input

Input Controls are used to collect input from the mobile user.

Input Controls

There is a number of mobile controls that support user input.

The most common input control is perhaps the TextBox control, which was demonstrated in the previous chapter. The TextBox control is perfect for simple user input like names, numbers, identifications and keywords.

For larger amount of input a TextView control is a better choice. The TextView control allows long multi-line input like the one you need for SMS or other messages.

Numeric Input

The numeric attribute of the textbox control can be set to true or false to specify whether the textbox should accept only numeric input.

Note: This behavior will normally work on cell phones by changing the input mode from letters to numbers. For HTML browsers however, this behavior is normally not supported.

Password Input

The password attribute of the textbox control can be set to true or false to specify whether the textbox should be treated as a password field.

A password field will hide the input by displaying * (stars) instead of ordinary text.

List Controls

TextBox and TextView controls are well suited for entering input, but sometimes you want the user to select from a list of predefined values.

The SelectionList Control supports drop down lists, check boxes and radio buttons. This topic is covered in another chapter.

The List Control supports selection from menus and lists. The List Control is covered in another chapter.

User Interface Controls

User Interface Controls are controls which display the user interface:

Name | Function
Command | Performs an action
Form | Defines a container for mobile controls
Image | Defines an image
Label | Defines a text
Link | Defines a hyperlink
List | Defines a list
MobilePage | Defines a container for mobile controls
ObjectList | Defines a list of data objects
Panel | Defines a container for other controls
SelectionList | Defines a list to select from
StyleSheet | Defines styles to be applied to other controls
TextBox | Defines a single line input box
TextView | Defines a multi-line input box

For a full control reference, including properties methods, events, and more examples, please refer to the "Mobile Reference" page.


.NET Mobile Lists

The Mobile List Control supports different input and display properties.

Selecting from a List

This page has two forms:

<%@ Page

Inherits=

"System.Web.UI.MobileControls.MobilePage"%>

<%@ Register

TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<script runat="server">

Sub Show_Price(sender As Object,e As ListCommandEventArgs)

text1.Text=e.ListItem.Text & "=" & e.ListItem.Value

ActiveForm=f2

End Sub

</script>

<Mobile:Form id="f1" runat="server">

<Mobile:List runat="server"

OnItemCommand="Show_Price">

<Item text="Volvo" value="$30,000" />

<Item text="BMW" value="$32,000" />

<Item text="Audi" value="$34,000" />

</Mobile:List>

</Mobile:Form>

<Mobile:Form id="f2" runat="server">

<Mobile:Label runat="server" id="text1" />

</Mobile:Form>

The first form has a list of cars.

The second page displays a price. This page is activated when a car is selected on the first page.

When the application runs on a mobile device the two pages will display like this:

Form 1

Volvo

BMW

Audi

Form 2

Volvo=$30,000


ASP.NET Mobile Controls Reference

Main Mobile Objects

.NET Mobile supports three main objects:

· The Mobile Page
· The Mobile Form
· The Mobile Panel

The Mobile Page is the container for the application.

Each Mobile Page can have one or more Mobile Forms.

Each Mobile Form can have zero ore more Mobile Panels.

Mobile Forms and Mobile Panels are used to group Mobile Controls.

Mobile Controls

Mobile Controls are grouped into:

· User interface controls
· Validation controls
· Utility controls

UI Controls

UI controls are controls that displays the user interface:

Name | Function
 | Performs an action
Form | Defines a container for mobile controls
Image | Defines an image
Label | Defines a text
Link | Defines a hyperlink
List | Defines a list
MobilePage | Defines a base class for all mobile pages
ObjectList | Defines a list of data objects
Panel | Defines a container for other controls
SelectionList | Defines a list to select from
StyleSheet | Defines styles to apply to other controls
 | Defines a single line input box
TextView | Defines a multi-line input box

Validation Controls

Validation controls are used to validate the data entered by a user:

Name | Function
CompareValidator | Compares the value of one input control to the value of another input control or to a fixed value
 | Allows you to write a method to handle the validation of the value entered
 | Checks that the user enters a value that falls between two values
RegularExpressionValidator | Ensures that the value of an input control matches a specified pattern
RequiredFieldValidator | Makes an input control a required field
ValidationSummary | Displays a report of all validation errors occurred in a page

Utility Controls

Utility controls support complicated user interfaces with minimum of code:

Name | Function
AdRotator | Displays advertisements
Calendar | Displays a calendar
PhoneCall | Calls a telephone number


.NET Mobile Selection Lists

.NET Mobile Selections

The SelectionList Control supports drop down lists, check boxes and radio buttons.

The SelectionList

This mobile page uses a SelectionList to let the user select a car:

<%@ Page

Inherits=

"System.Web.UI.MobileControls.MobilePage"%>

<%@ Register

TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<script runat="server">

Sub Car_Click(sender as Object, e as EventArgs)

ActiveForm=f2

t1.text=cars.Selection.Value

End Sub

</script>

<Mobile:Form id="f1" runat="server">

<Mobile:SelectionList runat="server" id="cars" >

<Item Text="Volvo" Value="$30,000" />

<Item Text="BMW" Value="$32,000" />

<Item Text="Audi" Value="$34,000" />

</Mobile:SelectionList>

<Mobile:Command runat="server"

OnClick="Car_Click" Text="Submit" />

</Mobile:Form>

<Mobile:Form id="f2" runat="server">

<Mobile:Label id="t1" runat="server" />

</Mobile:Form>

When this page is displayed on a mobile device, the navigation and display functions of the page will be compiled differently for different devices with different display characteristics.

Fore some devices, like a handheld PC, it might display a dropdown list to choose from. For a cell phone it might display a list of options to select from.


.NET Mobile Utilities

Utility controls support complicated user interfaces with minimum of code.

The AdRotator Control

This mobile page displays different advertisements:

<%@ Page

Inherits=

"System.Web.UI.MobileControls.MobilePage"%>

<%@ Register

TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<Mobile:Form runat="server">

<Mobile:AdRotator runat="server"

AdvertisementFile="advertisements.xml">

</Mobile:AdRotator>

</Mobile:Form>

This is the ad file called "advertisements.xml":

<?xml version="1.0" ?>

<Advertisements>

<Ad>

<ImageUrl>image1.gif</ImageUrl>

<BmpImageUrl>image1.bmp</BmpImageUrl>

<WBmpImageUrl>image1.wbmp</WBmpImageUrl>

<NavigateUrl>http://www.1.com</NavigateUrl>

<AlternateText>Visit 1</AlternateText>

</Ad>

<Ad>

<ImageUrl>image2.gif</ImageUrl>

<BmpImageUrl>image2.bmp</BmpImageUrl>

<WBmpImageUrl>image2.wbmp</WBmpImageUrl>

<NavigateUrl>http://www.2.com</NavigateUrl>

<AlternateText>Visit 2</AlternateText>

</Ad>

<Ad>

<ImageUrl>image3.gif</ImageUrl>

<BmpImageUrl>image3.bmp</BmpImageUrl>

<WBmpImageUrl>image3.wbmp</WBmpImageUrl>

<NavigateUrl>http://www.3.com</NavigateUrl>

<AlternateText>Visit 3</AlternateText>

</Ad>

</Advertisements>

The Calendar Control

This mobile page displays a calendar:

<%@ Page

Inherits=

"System.Web.UI.MobileControls.MobilePage"%>

<%@ Register

TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<script runat="server">

Sub CalChanged(sender as Object,e as EventArgs)

lab1.Text="You selected " & c1.SelectedDate

ActiveForm=f2

End Sub

</script>

<Mobile:Form id="f1" runat="server">

<Mobile:Calendar id="c1"

OnSelectionChanged="CalChanged" runat="server" />

</Mobile:Form>

<Mobile:Form id="f2" runat="server">

<Mobile:Label id="lab1" runat="server" />

</Mobile:Form>

In this example a calendar is displayed in the first form. When the user select a date from the calendar, the selected date is displayed in a new form.

The PhoneCall Control

This mobile page will display the text "Tove's number" and dial the number (555) 555-5555 when the user selects the text:

<%@ Page

Inherits=

"System.Web.UI.MobileControls.MobilePage"%>

<%@ Register

TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<Mobile:Form runat="server">

<Mobile:PhoneCall runat="server"

PhoneNumber="(555) 555-5555"

Text="Tove's number"

AlternateFormat="{0}" />

</Mobile:Form>

The attribute "AlternateFormat" has the value "{0}". This displays the text from the attribute "Text".

If you use the value "{1}" it will display the text from the attribute "PhoneNumber".

You can also use a construct like this: AlternateFormat="{0} is {1}". This will display the text "Tove's number is (555) 555-5555".

Utility Controls

Name | Function
AdRotator | Displays advertisements
Calendar | Displays a calendar
PhoneCall | Calls a telephone number

For a full control reference, including properties methods, events, and more examples, please refer to the "Mobile Reference" page.


.NET Mobile Input Validation

Validation Controls are used to validate the data entered by a user.

Validation Controls

Validation controls are used to validate the data entered by a user.

Validation controls allow you to validate an input control (like a TextBox), and display a message when validation fails.

Each validation control performs a specific type of validation (like validating against a specific value or a range of values).

By default, page validation is performed when a command control is clicked. You can prevent validation when a control is clicked by setting the CausesValidation property to false.

Validating Input

This page has two forms:

<%@ Page

Inherits=

"System.Web.UI.MobileControls.MobilePage"%>

<%@ Register

TagPrefix="Mobile"

Namespace="System.Web.UI.MobileControls"

Assembly="System.Web.Mobile" %>

<script runat="server">

Sub Page2(Sender as Object,E as EventArgs)

If Page.IsValid Then

ActiveForm=f2

text2.Text="You are " & age.text & " years old"

end if

End Sub

</script>

<Mobile:Form id="f1" runat="server">

<Mobile:CompareValidator runat="server"

ControlToValidate="age"

Type="Integer"

ValueToCompare="18"

Operator="GreaterThanEqual">

You must be at least 18

</Mobile:CompareValidator>

<Mobile:Label runat="server">Age?</Mobile:Label>

<Mobile:TextBox id="age" runat="server" />

<Mobile:Command OnClick="Page2" runat="server">

Submit</Mobile:Command>

</Mobile:Form>

<Mobile:Form id="f2" runat="server">

<Mobile:Label id="text2" runat="server" />

</Mobile:Form>

The first form has a label with the text "Age?", an input box to input the age, and a submit button.

The second page is activated by the submit button on the first page, and displays a response.

If the input validates as error, an error message is displayed.

When the application runs on a mobile device, the two pages will display like this:

Form 1

Age?

[TEditFormControlObj]

Form 2

You are 21 years old

The ValidationSummary Control

The previous example used a CompareValidator control to validate an input field. The field to validate was defined by the attribute ContolToValidate.

You can also use a ValidationSummary control with the attribute FormToValidate, to validate all the input of a form.

This way you can display a summary of errors instead of one error at the time.

Validation Controls Reference

Name | Function
CompareValidator | Compares two values
CustomValidator | Provides custom validation
RangeValidator | Validates a range
RegularExpressionValidator | Validates an expression
RequiredFieldValidator | Validates required data
ValidationSummary | Displays a validation summary

For a full control reference, including properties methods, events, and more examples, please refer to the "Mobile Reference" page.


Introduction to DTD

A Document Type Definition defines the legal building blocks of an XML document. It defines the document structure with a list of legal elements.

A DTD can be declared inline in your XML document, or as an external reference.

Internal DOCTYPE Declaration

If the DTD is included in your XML source file, it should be wrapped in a DOCTYPE definition with the following syntax:

<!DOCTYPE root-element [element-declarations]>

Example XML document with a DTD: ( it in IE5, and select view source):

<?xml version="1.0"?>

<!DOCTYPE note [

<!ELEMENT note (to,from,heading,body)>

<!ELEMENT to      (#PCDATA)>

<!ELEMENT from    (#PCDATA)>

<!ELEMENT heading (#PCDATA)>

<!ELEMENT body    (#PCDATA)>

]>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend</body>

</note>

The DTD above is interpreted like this:

!DOCTYPE note (in line 2) defines that this is a document of the type note.

!ELEMENT note (in line 3) defines the note element as having four elements: "to,from,heading,body".

!ELEMENT to (in line 4) defines the to element to be of the type "#PCDATA".

!ELEMENT from (in line 5) defines the from element to be of the type "#PCDATA"

and so on.....

External DOCTYPE Declaration

If the DTD is external to your XML source file, it should be wrapped in a DOCTYPE definition with the following syntax:

<!DOCTYPE root-element SYSTEM "filename">

This is the same XML document as above, but with an external DTD: (Open it in IE5, and select view source)

<?xml version="1.0"?>

<!DOCTYPE note SYSTEM "note.dtd">

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

And this is a copy of the file "note.dtd" containing the DTD:

<!ELEMENT note (to,from,heading,body)>

<!ELEMENT to (#PCDATA)>

<!ELEMENT from (#PCDATA)>

<!ELEMENT heading (#PCDATA)>

<!ELEMENT body (#PCDATA)>

Why Use a DTD?

With DTD, each of your XML files can carry a description of its own format with it.

With a DTD, independent groups of people can agree to use a common DTD for interchanging data.

Your application can use a standard DTD to verify that the data you receive from the outside world is valid.

You can also use a DTD to verify your own data.


DTD Tutorial

DTD Tutorial

schema

The purpose of a DTD (Document Type Definition) is to define the legal building blocks of an XML document. It defines the document structure with a list of legal elements.

Start learning DTD!

Table of Contents

Introduction to DTD

An introduction to the XML DTD, and why you should use it.

DTD - XML Building Blocks

The XML building blocks that can be defined in a DTD.

DTD Elements

How to define the legal elements of an XML document using DTD.

DTD Attributes

How to define the legal attributes of XML elements using DTD.

DTD Entities

How to define XML entities using DTD.

How to test for DTD errors while loading XML documents.

DTD Examples

Some real world DTD examples.

DTD Summary

This chapter contains a summary on what you have learned in this tutorial and a recommendation on what subject you should study next.


DTD - Attributes

In a DTD, Attributes are declared with an ATTLIST declaration.

Declaring Attributes

An attribute declaration has the following syntax:

<!ATTLIST element-name attribute-name

attribute-type default-value>

example:

DTD example:

<!ATTLIST payment type CDATA "check">

XML example:

<payment type="check" />

The attribute-type can have the following values:

Value | Explanation
CDATA | The value is character data
(en1|en2|..) | The value must be one from an enumerated list
ID | The value is a unique id
IDREF | The value is the id of another element
IDREFS | The value is a list of other ids
NMTOKEN | The value is a valid XML name
NMTOKENS | The value is a list of valid XML names
ENTITY | The value is an entity
ENTITIES | The value is a list of entities
NOTATION | The value is a name of a notation
xml: | The value is a predefined xml value

The default-value can have the following values:

Value | Explanation
value | The default value of the attribute
#REQUIRED | The attribute value must be included in the element
#IMPLIED | The attribute does not have to be included
#FIXED value | The attribute value is fixed

Specifying a Default Attribute Value

DTD:

<!ELEMENT square EMPTY>

<!ATTLIST square width CDATA "0">

Valid XML:

<square width="100" />

In the example above, the "square" element is defined to be an empty element with a "width" attribute of type CDATA. If no width is specified, it has a default value of 0.

#IMPLIED

Syntax

<!ATTLIST element-name attribute-name

attribute-type #IMPLIED>

Example

DTD:

<!ATTLIST contact fax CDATA #IMPLIED>

Valid XML:

<contact fax="555-667788" />

Valid XML:

<contact />

Use the #IMPLIED keyword if you don't want to force the author to include an attribute, and you don't have an option for a default value.

#REQUIRED

Syntax

<!ATTLIST element-name attribute_name

attribute-type #REQUIRED>

Example

DTD:

<!ATTLIST person number CDATA #REQUIRED>

Valid XML:

<person number="5677" />

Invalid XML:

<person />

Use the #REQUIRED keyword if you don't have an option for a default value, but still want to force the attribute to be present.

#FIXED

Syntax

<!ATTLIST element-name attribute-name

attribute-type #FIXED "value">

Example

DTD:

<!ATTLIST sender company CDATA #FIXED "Microsoft">

Valid XML:

<sender company="Microsoft" />

Invalid XML:

<sender company="W3Schools" />

Use the #FIXED keyword when you want an attribute to have a fixed value without allowing the author to change it. If an author includes another value, the XML parser will return an error.

Enumerated Attribute Values

Syntax:

<!ATTLIST element-name

attribute-name (en1|en2|..) default-value>

DTD example:

<!ATTLIST payment type (check|cash) "cash">

XML example:

<payment type="check" />

or

<payment type="cash" />

Use enumerated attribute values when you want the attribute values to be one of a fixed set of legal values.


DTD Building Blocks

DTD - XML Building Blocks

The main building blocks of both XML and HTML documents are tags like <body>....</body>.

The Building Blocks of XML Documents

Seen from a DTD point of view, all XML documents (and HTML documents) are made up by the following simple building blocks:

· Elements
· Attributes
· Entities
· PCDATA
· CDATA

The following is a brief explanation of each of the building blocks:

Elements

Elements are the main building blocks of both XML and HTML documents.

Examples of HTML elements are "body" and "table". Examples of XML elements could be "note" and "message". Elements can contain text, other elements, or be empty. Examples of empty HTML elements are "hr", "br" and "img".

Examples:

<body>body text in between</body>

<message>some message in between</message>

Attributes

Attributes provide extra information about elements.

Attributes are always placed inside the starting tag of an element. Attributes always come in name/value pairs. The following "img" element has additional information about a source file:

<img src="computer.gif" />

The name of the element is "img". The name of the attribute is "src". The value of the attribute is "computer.gif". Since the element itself is empty it is closed by a " /".

Entities

Entities are variables used to define common text. Entity references are references to entities.

Most of you will know the HTML entity reference: "&nbsp;". This "no-breaking-space" entity is used in HTML to insert an extra space in a document. Entities are expanded when a document is parsed by an XML parser.

The following entities are predefined in XML:

Entity References | Character
&lt; | <
&gt; | >
&amp; | &
&quot; | "
&apos; | '

PCDATA

PCDATA means parsed character data.

Think of character data as the text found between the start tag and the end tag of an XML element.

PDATA is text that WILL be parsed by a parser. The text will be examined by the parser for entities and markup.

Tags inside the text will be treated as markup and entities will be expanded.

However, parsed character data should not contain any &, <, or > characters; these need to be represented by the &amp; &lt; and &gt; entities, respectively.

CDATA

CDATA means character data.

CDATA is text that will NOT be parsed by a parser. Tags inside the text will NOT be treated as markup and entities will not be expanded.


DTD - Elements

In a DTD, XML elements are declared with a DTD element declaration.

Declaring an Element

In the DTD, XML elements are declared with an element declaration. An element declaration has the following syntax:

<!ELEMENT element-name category>

or

<!ELEMENT element-name (element-content)>

Empty Elements

Empty elements are declared with the category keyword EMPTY:

<!ELEMENT element-name EMPTY>

example:

<!ELEMENT br EMPTY>

XML example:

<br />

Elements with Only Parsed Character Data

Elements with only parsed character data are declared with #PCDATA inside parentheses:

<!ELEMENT element-name (#PCDATA)>

example:

<!ELEMENT from (#PCDATA)>

Elements with any Contents

Elements declared with the category keyword ANY, can contain any combination of parsable data:

<!ELEMENT element-name ANY>

example:

<!ELEMENT note ANY>

Elements with Children (sequences)

Elements with one or more children are defined with the name of the children elements inside parentheses:

<!ELEMENT element-name

(child-element-name)>

or

<!ELEMENT element-name

(child-element-name,child-element-name,.....)>

example:

<!ELEMENT note (to,from,heading,body)>

When children are declared in a sequence separated by commas, the children must appear in the same sequence in the document. In a full declaration, the children must also be declared, and the children can also have children. The full declaration of the "note" element will be:

<!ELEMENT note (to,from,heading,body)>

<!ELEMENT to      (#PCDATA)>

<!ELEMENT from    (#PCDATA)>

<!ELEMENT heading (#PCDATA)>

<!ELEMENT body    (#PCDATA)>

Declaring Only One Occurrence of an Element

<!ELEMENT element-name (child-name)>

example:

<!ELEMENT note (message)>

The example declaration above declares that the child element message must occur once, and only once inside the "note" element.

Declaring Minimum One Occurrence of an Element

<!ELEMENT element-name (child-name+)>

example:

<!ELEMENT note (message+)>

The + sign in the example above declares that the child element message must occur one or more times inside the "note" element.

Declaring Zero or More Occurrences of an Element

<!ELEMENT element-name (child-name*)>

example:

<!ELEMENT note (message*)>

The * sign in the example above declares that the child element message can occur zero or more times inside the "note" element.

Declaring Zero or One Occurrences of an Element

<!ELEMENT element-name (child-name?)>

example:

<!ELEMENT note (message?)>

The ? sign in the example above declares that the child element message can occur zero or one times inside the "note" element.

Declaring either/or Content

example:

<!ELEMENT note (to,from,header,(message|body))>

The example above declares that the "note" element must contain a "to" element, a "from" element, a "header" element, and either a "message" or a "body" element.

Declaring Mixed Content

example:

<!ELEMENT note (#PCDATA|to|from|header|message)*>

The example above declares that the "note" element can contain zero or more occurrences of parsed character, "to", "from", "header", or "message" elements.


DTD - Entities

Entities are variables used to define shortcuts to common text.

· Entity references are references to entities
· Entities can be declared internal or external

An Internal Entity Declaration

Syntax

<!ENTITY entity-name "entity-value">

Example

DTD Example:

<!ENTITY writer "Donald Duck.">

<!ENTITY copyright "Copyright W3Schools.">

XML example:

<author>&writer;&copyright;</author>

An External Entity Declaration

Syntax

<!ENTITY entity-name SYSTEM "URI/URL">

Example

DTD Example:

<!ENTITY writer

SYSTEM "http://www.w3schools.com/dtd/entities.dtd">

<!ENTITY copyright

SYSTEM "http://www.w3schools.com/dtd/entities.dtd">

XML example:

<author>&writer;&copyright;</author>


DTD Examples

DTD - Examples from the Net

TV Schedule DTD

By David Moisan. Copied from his Web: http://www.davidmoisan.org/

<!DOCTYPE TVSCHEDULE [

<!ELEMENT TVSCHEDULE (CHANNEL+)>

<!ELEMENT CHANNEL (BANNER,DAY+)>

<!ELEMENT BANNER (#PCDATA)>

<!ELEMENT DAY (DATE,(HOLIDAY|PROGRAMSLOT+)+)>

<!ELEMENT HOLIDAY (#PCDATA)>

<!ELEMENT DATE (#PCDATA)>

<!ELEMENT PROGRAMSLOT (TIME,TITLE,DESCRIPTION?)>

<!ELEMENT TIME (#PCDATA)>

<!ELEMENT TITLE (#PCDATA)>

<!ELEMENT DESCRIPTION (#PCDATA)>

<!ATTLIST TVSCHEDULE NAME CDATA #REQUIRED>

<!ATTLIST CHANNEL CHAN CDATA #REQUIRED>

<!ATTLIST PROGRAMSLOT VTR CDATA #IMPLIED>

<!ATTLIST TITLE RATING CDATA #IMPLIED>

<!ATTLIST TITLE LANGUAGE CDATA #IMPLIED>

]>

Newspaper Article DTD

Copied from

<!DOCTYPE NEWSPAPER [

<!ELEMENT NEWSPAPER (ARTICLE+)>

<!ELEMENT ARTICLE (HEADLINE,BYLINE,LEAD,BODY,NOTES)>

<!ELEMENT HEADLINE (#PCDATA)>

<!ELEMENT BYLINE (#PCDATA)>

<!ELEMENT LEAD (#PCDATA)>

<!ELEMENT BODY (#PCDATA)>

<!ELEMENT NOTES (#PCDATA)>

<!ATTLIST ARTICLE AUTHOR CDATA #REQUIRED>

<!ATTLIST ARTICLE EDITOR CDATA #IMPLIED>

<!ATTLIST ARTICLE DATE CDATA #IMPLIED>

<!ATTLIST ARTICLE EDITION CDATA #IMPLIED>

<!ENTITY NEWSPAPER "Vervet Logic Times">

<!ENTITY PUBLISHER "Vervet Logic Press">

<!ENTITY COPYRIGHT "Copyright 1998 Vervet Logic Press">

]>

Product Catalog DTD

Copied from http://www.vervet.com/

<!DOCTYPE CATALOG [

<!ENTITY AUTHOR "John Doe">

<!ENTITY COMPANY "JD Power Tools, Inc.">

<!ENTITY EMAIL "jd@jd-tools.com">

<!ELEMENT CATALOG (PRODUCT+)>

<!ELEMENT PRODUCT

(SPECIFICATIONS+,OPTIONS?,PRICE+,NOTES?)>

<!ATTLIST PRODUCT

NAME CDATA #IMPLIED

CATEGORY (HandTool|Table|Shop-Professional) "HandTool"

PARTNUM CDATA #IMPLIED

PLANT (Pittsburgh|Milwaukee|Chicago) "Chicago"

INVENTORY (InStock|Backordered|Discontinued) "InStock">

<!ELEMENT SPECIFICATIONS (#PCDATA)>

<!ATTLIST SPECIFICATIONS

WEIGHT CDATA #IMPLIED

POWER CDATA #IMPLIED>

<!ELEMENT OPTIONS (#PCDATA)>

<!ATTLIST OPTIONS

FINISH (Metal|Polished|Matte) "Matte"

ADAPTER (Included|Optional|NotApplicable) "Included"

CASE (HardShell|Soft|NotApplicable) "HardShell">

<!ELEMENT PRICE (#PCDATA)>

<!ATTLIST PRICE

MSRP CDATA #IMPLIED

WHOLESALE CDATA #IMPLIED

STREET CDATA #IMPLIED

SHIPPING CDATA #IMPLIED>

<!ELEMENT NOTES (#PCDATA)>

]>


DTD Summary

You Have Learned DTD, Now What?

 Top Previous Next

DTD Summary

This tutorial has taught you how to describe the structure of an XML document.

You have learned how to use a DTD to define the legal elements of an XML document, and how the DTD can be declared inside your XML document, or as an external reference.

You have learned how to declare the legal elements, attributes, entities, and CDATA sections for XML documents.

You have also seen how to validate an XML document against a DTD.

Now You Know DTD, What's Next?

The next step is to learn about XML Schema.

XML Schema is used to define the legal elements of an XML document, just like a DTD. We think that very soon XML Schemas will be used in most Web applications as a replacement for DTDs.

XML Schema is an XML-based alternative to DTD.

Unlike DTD, XML Schemas has support for data types and namespaces.

If you want to learn more about XML Schema, please visit our .


DTD Validation

Internet Explorer 5.0 can validate your XML against a DTD.

Validating With the XML Parser

If you try to open an XML document, the XML Parser might generate an error. By accessing the parseError object, the exact error code, the error text, and even the line that caused the error can be retrieved:

Note: The load( ) method is used for files, while the loadXML( ) method is used for strings.

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")

xmlDoc.async="false"

xmlDoc.validateOnParse="true"

xmlDoc.load("note_dtd_error.xml")

document.write("<br>Error Code: ")

document.write(xmlDoc.parseError.errorCode)

document.write("<br>Error Reason: ")

document.write(xmlDoc.parseError.reason)

document.write("<br>Error Line: ")

document.write(xmlDoc.parseError.line)

Try it Yourself or just look at the XML file

Turning Validation Off

Validation can be turned off by setting the XML parser's validateOnParse="false".

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")

xmlDoc.async="false"

xmlDoc.validateOnParse="false"

xmlDoc.load("note_dtd_error.xml")

document.write("<br>Error Code: ")

document.write(xmlDoc.parseError.errorCode)

document.write("<br>Error Reason: ")

document.write(xmlDoc.parseError.reason)

document.write("<br>Error Line: ")

document.write(xmlDoc.parseError.line)

Try it Yourself

A General XML Validator

To help you validate your xml files, we have created this link so that you can Validate any XML file.

The parseError Object

You can read more about the parseError object in our XML DOM tutorial.


tryit_view4ddb.html

This demonstrates a parser error:


E4X Tutorial

1

2

3

4

5

6

7

8

9

10

11

12

E4X is a new extension to JavaScript

E4X adds direct support for XML to JavaScript

E4X is an official JavaScript standard

What You Should Already Know

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

· HTML
· JavaScript
· XML

To study these subjects first, find all the tutorials you need on our Home Page.

JavaScript = ECMAScript

ECMAScript is the official name for JavaScript.

ECMAScript is the same as JavaScript.

ECMA (The European Computer Manufacturers Association) is the organization standardizing JavaScript.

E4X = JavaScript for XML

E4X means "ECMAScript For XML". It is a standard extension to ECMAScript.

So in real life E4X means "JavaScript for XML".

XML As a JavaScript Object

E4X is an official JavaScript standard that adds direct support for XML.

With E4X, you can declare an XML object variable the same way as you declare a Date or an Array object variable:

var x = new XML()

var y = new Date()

var z = new Array()

E4X makes scripting for XML with JavaScript very simple.

Examples are provided in the next chapter.

E4X is a Web Standard

ECMA-262 (JavaScript 1.3) was standardized in December 1999.

E4X is an extension of JavaScript that adds direct support for XML.

ECMA-357 (E4X) was standardized in June 2004.

ECMA International

ECMA International was founded in 1961.

The ECMA organization is dedicated to the standardization of Information and Communication Technology (ICT) and Consumer Electronics (CE).

ECMA has developed standards for

· JavaScript
· C# Language
· International Character Sets
· Optical Disks
· Magnetic Tapes
· Data Compression
· Data Communication
· and much more


E4X Browsers

The browser support for E4X is limited.

Limited Browser Support for E4X

None of the mainstream browsers are currently supporting E4X.

A beta version of the Mozilla engine (1.8) has limited support for E4X. The first browser to support E4X is expected to be Firefox 1.1.

Support for E4X is also expected in a later version of Internet Explorer.

Firefox 1.1

In the next version of Firefox, Firefox 1.1 is expected to have relatively good support for E4X.

In the next chapter there is a list of examples, describing some of the things you can do with E4x in Firefox 1.1.

Internet Explorer 7

So far there is no indication for of E4X support in Internet Explorer 7.

It looks like Microsoft is going to support its own alternative to AJAX.

AJAX is a new web development technique for creating interactive web applications using JavaScript, XML, and CSS.

You can read more about AJAX in our AJAX tutorial.


E4X Examples

E4X Example

E4X makes scripting for XML very simple.

E4X Example

As an example, we will work with an XML document that represents an order.

The XML document looks like this:

<order>

<date>2005-08-01</date>

<customer>

<firstname>John</firstname>

<lastname>Johnson</lastname>

</customer>

<item>

<name>Maxilaku</name>

<qty>5</qty>

<price>155.00</price>

</item>

</order>

If we had this XML document stored in a string called txt, we could load it into an XML object variable called order, by writing the following JavaScript statement:

var order = new XML(txt)

Or we could assign the XML text directly to the XML object variable:

var order = new XML()

order=<order id="555">

<date>2005-08-01</date>

<customer>

<firstname>John</firstname>

<lastname>Johnson</lastname>

</customer>

<item>

<name>Maxilaku</name>

<qty>5</qty>

<price>155.00</price>

</item>

</order>

Working With the Data

Calculate the price:

var total=order.item.qty * order.item.price

Display the customers full name:

document.write(order.customer.lastname)

document.write(",")

document.write(order.customer.firstname)

Add a new item:

order.item+=

<item>

<name>Pavlova</name>

<qty>10</qty>

<price>128.00</price>

</item>

Display the order id:

document.write(order.@id)

Calculate the total price, when the order has many items:

var price=0

for each (i in order.item)

{

price+= i.qty*i.price

}


E4X How To

With E4X, you can define an XML document as a JavaScript object.

E4X Example

As an example, we can parse and edit an XML document that represents a note.

The XML document looks like this:

<note>

<date>2002-08-01</date>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

If we had this XML document stored in a string called note, we could load it into an XML object variable called x, by writing the following JavaScript statement:

var x = new XML(note)

Or we could assign the XML text directly to the XML object variable:

var x = new XML()

x=

<note>

<date>2002-08-01</date>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

XML As a JavaScript Object

With E4X, you can declare an XML object the same way as you declare Date or Math objects:

var x = new XML()

var y = new Date()

var z = new Array()

Since you can declare an XML document as an XML object, it is also very easy to parse and manipulate the XML document.

For the XML example above, the JavaScript statement:

document.write(x.from)

will produce the output:

Jani

Quite simple. Don't you think?


E4X Example

Why E4X?

 Top Previous Next

E4X makes XML very simple to use.

E4X is Much Simpler

If you have ever tried to use JavaScript to parse and manipulate XML, you will find that E4X is much simpler to use.

Without E4X you have to use an XML library (or an XML component) to work with XML.

These libraries or components have different syntax and work differently in different browsers.

Without E4X

The following example is a cross browser example that loads an existing XML document ("note.xml") into the XML parser and displays the message from the note:

var xmlDoc

//code for Internet Explorer

if (window.ActiveXObject)

{

xmlDoc = new ActiveXObject("Microsoft.XMLDOM")

xmlDoc.async=false;

xmlDoc.load("note.xml")

displaymessage()

}

// code for Mozilla, Firefox, etc.

else (document.implementation && document.implementation.createDocument)

{

xmlDoc= document.implementation.createDocument("","",null)

xmlDoc.load("note.xml");

xmlDoc.onload=displaymessage

}

function displaymessage()

{

document.write(xmlDoc.getElementsByTagName("body")[0].firstChild.nodeValue)

}

Try it yourself

With E4X

The following example is the same as above but using E4X:

var xmlDoc=new XML()

xmlDoc.load("note.xml")

document.write(xmlDoc.body)

Much simpler, isn't it?


Flash Tutorial

Flash Tutorial

flash2

Flash is a tool for creating interactive and animated Web sites! In our Flash tutorial you will learn how to start using Flash in your applications.

Start learning Flash!

Table of Contents

Video Tutorials Powered by LearnFlash.com

Introduction to Flash

What is Flash? Advantages of Flash compared to animated images and Java Applets.

What do you need to view Flash? What do you need to create Flash movies? Where to start?

Flash in HTML

How to embed a Flash movie into an HTML page.

With Tweening you can create movements and changes in a Flash movie. In this chapter you will learn how to make an object move across the screen.

How to move an object from one location to another along a specified path.

Flash Tint Tween

How to change the color of an object.

Flash Shape Tween

How to change one object into another.

Flash Button 1

How to insert an image, convert it to a button, and add a URL to it so it becomes a link.

Flash Button 2

How to create your own button and add a URL to it so it becomes a link.

Flash Animation

How to make a symbol turn around while moving from one location to another.

Flash Sound

How to deal with sound files in Flash.


Flash Animation

Example

Example

Click here to see this tutorial in video format

Step 1

Insert a text in the upper left corner of the Stage area. Do this by selecting the text tool from the left toolbar. Write some text in the "textarea".

Step 2

Select the arrow tool from the left toolbar. Click on the text once to select it.

Step 3

Convert the text to a symbol. From the top menu choose Insert > Convert to Symbol. Name the symbol "text", choose graphic from the Behavior list and select OK.

Step 4

Go to Frame 30 in the Timeline. Do this by clicking the gray field below 30. Then right click in this field. Choose Insert Keyframe. Keyframes appear as circles in a frame.

Step 5

Click on the Timeline any place between Frame 1 and Frame 30. Then right click and choose Create Motion Tween.

Step 6

Go back to Frame 30 in the Timeline. Move the text to the lower right corner.

Step 7

Make sure the text is selected. Choose Modify > Transform > Flip Horizontal.

Step 8

Choose Control > Test Movie from the top menu to test your Flash movie. The text should move from the first location (in frame 1) to the second location (in frame 2). The text should also turn around on its way to the second location.


Flash Button 2

Example

In this example you will learn how to create your own button and add a URL to it so it becomes a link.

Example

Step 1

Choose Insert > New Symbol from the top menu.

Step 2

Name the symbol "button", choose Button from the Behavior list and click OK. In the Timeline area, you will now see the four states of a button: up, over, down, hit.

Step 3

Select the Rectangle tool, pick a light red Fill Color and draw a rectangle in the work area.

Step 4

Select the Text tool, pick a dark Fill Color and write "Click Me" over the rectangle.

Step 5

Select the Arrow tool and place the text in the middle of the rectangle.

Step 6

Add a keyframe to the Over State in the Timeline. The Over State indicates what should happen when you mouse over the button.

Step 7

Select the Rectangle, change the Fill color to a light green.

Step 8

Choose Edit > Edit Movie to go back to the movie.

Step 9

Choose Window > Library to locate the button. Drag the button into the work area.

Step 10

Right click on the image. Choose Actions from the pop-up menu.

Step 11

In the Object Actions box click on the + sign. Choose Basic Actions > Get URL.

Step 12

Enter a full URL in the URL field (like http://www.w3schools.com).

Step 13

Choose target in the Window field. Close the Object Actions box.

Step 14

Choose Control > Test Movie from the top menu to test your Flash movie.


Flash Button 1

Example

In this example you will learn how to insert an image, convert it to a button, and add a URL to it so it becomes a link.

Example

Step 1

Choose File > Import to import an image that will become a button. Locate the image and click Open. The image will be saved in the Library.

Step 2

Select the image with the Arrow tool.

Step 3

Convert the image to a symbol. Choose Insert > Convert to Symbol from the top menu. Name the symbol "button", choose Button from the Behavior list and click OK.

Step 4

Right click on the image. Choose Actions from the pop-up menu.

Step 5

In the Object Actions box click on the + sign. Choose Basic Actions > Get URL.

Step 6

Enter a full URL in the URL field (like http://www.w3schools.com).

Step 7

Choose target in the Window field. Close the Object Actions box.

Step 8

Choose Control > Test Movie from the top menu to test your Flash movie.


Flash Guide Tweening

With Motion Guide Tweening you can move an object from one location to another along a specified path.

Example

In this example you will learn how to draw a path an object should follow.

Example

Click here to see this tutorial in video format

Step 1

Choose Window > Common Libraries > Graphics. Select the image you want to use. In this example we have used a blue mouse.

Step 2

Click on the image and drag it outside the left edge of the Stage.

Step 3

Go to Frame 40 in the Timeline. Do this by clicking the gray field below 40. Then right click in this field. Choose Insert Keyframe. Keyframes appear as circles in a frame. This operation duplicates the image.

Step 4

Click on the Timeline any place between Frame 1 and Frame 40. Then right click and choose Create Motion Tween.

Step 5

Right click on Layer 1 (Click on the layer name, where it says "Layer 1"). Choose Add Motion Guide in the pop-up menu. The Flash program will now insert a motion guide layer on top of layer 1. Motion guide layers are used to draw lines an animated symbol should follow.

Step 6

Click on the Motion Guide Layer to make sure it is the active layer (Click on the layer name, where it says "Guide: Layer 1").

Step 7

Click on the Pencil tool in the left toolbox. Set the Pencil Mode to Smooth (in the Options section of the left toolbox).

Step 8

Draw a line. Begin on the image and draw a line to the other side of the Stage.

Step 9

Go back to Frame 1 in the Timeline. Click on the Arrow tool in the left toolbox. Select the "Snap to Objects" button in the Options section of the left toolbox.

Step 10

Place the image with its center on the beginning of the motion guide (the black line you have drawn with the Pencil). The center of the image shows as a +. A black circle appears when the image is snapped to the motion guide. Release the mouse button when the image is snapped to the guide.

Step 11

Go to Frame 40. Place the image with its center on the end of the motion guide.

Step 12

Choose Control > Test Movie from the top menu to test your Flash movie.

Is your Flash Movie Playing too Fast?

You can control this by selecting Modify > Movie from the top menu. A Movie Properties box will show. The Frame Rate field sets how many frames to display per second. Adjust the number to a lower number, and test your movie again.


Flash Shape Tweening

With Shape Tweening you can change one object into another.

Example

In this example you will learn how to change one object into another.

Example

Click here to see this tutorial in video format

Step 1

Choose the Text tool in the left toolbox. Choose Text > Size > 48 from the top menu to make the text big. Choose Text > Style > Bold to make the text thick.

Step 2

Click in the work area and write "Hello".

Step 3

Right click on the text you just wrote and choose Panels > Align from the pop-up menu.

Step 4

In the Align box select the "To Stage" button first. Then click on the "Align Horizontal Center" button and the "Align Vertical Center" button. Close the Align box.

Step 5

Select the Arrow Tool and click on the text. Choose Modify > Break Apart from the top menu.

Step 6

Insert keyframes at Frame 24, 50 and 51.

Step 7

Delete the text "Hello" in Frame 24. Select it and press the Delete button on your keyboard.

Step 8

Write a new text on the Stage. Write "World!" (Font size: 48, style: bold).

Step 9

Right click on the text you just wrote and choose Panels > Align from the pop-up menu. In the Align box select the "To Stage" button first. Then click on the "Align Horizontal Center" button and the "Align Vertical Center" button. Close the Align box

Step 10

Select the Arrow Tool and click on the text. Choose Modify > Break Apart from the top menu.

Step 11

Insert a keyframe in Frame 26.

Step 12

Double click the keyframe in Frame 1. In the small pop-up box click on the Frame tab. Set Tweening to Shape. Close the pop-up box.

Step 13

Double click the keyframe in Frame 26. In the small pop-up box click on the Frame tab. Set Tweening to Shape. Close the pop-up box.

Step 14

Double click the keyframe in Frame 51. In the large pop-up box click on the Frame Actions tab. Click on the + sign. Choose Basic Actions > Go To. Close the pop-up boxes.

Step 15

Choose Control > Test Movie from the top menu to test your Flash movie.


Flash Sound

Example

Example

Click here to see this tutorial in video format

Step 1

Choose File > Import to import a sound file. Locate the sound file and click Open. The sound file will be saved in the Library.

Step 2

Click in the first frame of "Layer 1" in the Timeline. Choose Window > Panels > Sound from the top menu.

Step 3

In the pop up window (Sound) choose the sound you imported in the Sound field. Choose Stream in the Sync field. Close the pop up window.

Step 4

Go to frame 50 in the Timeline. Right click and choose Insert Frame.

Step 5

Choose Control > Test Movie from the top menu to test your Flash movie.


Flash Tint Tweening

With Tint Tweening you can change the color of an object.

Example

In this example you will learn how to change the color of an object.

Example

Click here to see this tutorial in video format

Step 1

Choose Insert > New Symbol.

Note: To add Tint effects the object must be a symbol.

Step 2

Name the symbol "changecolor" and select the Graphic option in Behavior. Click OK.

Note: You will now be taken to the symbol generator in the Flash program. Here you create symbols. Symbols can be dragged to the stage of your movie after you have created them.

Step 3

Choose the Text tool in the left toolbox. Choose Text > Size > 36 from the top menu to make the text big. Choose Text > Style > Bold to make the text thick.

Step 4

Click in the work area and write "Color Changing Text".

Step 5

Jump back to the movie. Do this by choosing Edit > Edit Movie.

Step 6

Insert the symbol you just created into the movie. Choose Window > Library. Select the "changecolor" symbol and drag it into the middle of the Stage.

Step 7

Insert a keyframe in Frame 15 and in Frame 30.

Step 8

Go to Frame 15. Right click on the text in the Stage. In the pop-up menu, choose Panels > Effect.

Step 9

Choose Tint from the drop down menu. A color map will show. Set the colors to: R=0, G=255, B=0.

Step 10

Click on the Timeline any place between Frame 1 and Frame 15. Then right click and choose Create Motion Tween.

Step 11

Click on the Timeline any place between Frame 15 and Frame 30. Then right click and choose Create Motion Tween.

Step 12

Choose Control > Test Movie from the top menu to test your Flash movie.


Web Hosting Tutorial

If you want your Web Site to be visible to the world, it has to be Hosted on a Web Server.

In this tutorial we will teach you what Web Hosting is, and what Web Hosting has to offer.

Table of Contents

Introduction to Web Hosting

This chapter explains how the WWW works, how you can publish your own web site, and what an Internet service provider can offer.

Web Hosting Providers

This chapter explains the difference between hosting your web site on your own server and hosting it with an Internet service provider.

Web Hosting Domains

This chapter explains how to register your own domain name, and how to use it as your web address.

Web Hosting Capacities

This chapter explains about disk space and traffic capacities.

Web Hosting Email

This chapter explains the most common e-mail services an Internet service provider offer.

Web Hosting Technologies

This chapter explains some of the most common hosting technologies.

Web Hosting Databases

This chapter explains some of the most common web database technologies.

Web Hosting Types

This chapter explains the different types of web hosting.

Web Hosting E-commerce

This chapter describes e-commerce web hosting.

Web Hosting Resources

This chapter lists some valuable hosting resources.


Hosting Capacities

Make sure you get the disk space and the traffic volume you need.

How Much Disk Space?

A small or medium web site will need between 10 and 100MB of disk space.

If you look at the size of HTML pages, you will see that the average size is very small. Maybe even smaller than 1KB. But if you look at the size of the images (button, gif, banner, jpg) used inside the pages, you will often find images many times larger than the page itself.

Expect each HTML page to take up between 5 and 50KB of disk space on your web server, depending on the use of images or other space consuming elements.

If you plan to use lots of images or graphic elements (not to mention sound files or movies), you might be needing much more disk space.

Make sure that you know your needs before you start looking for your web host.

Monthly Traffic

A small or medium web site will consume between 1GB and 5GB of data transfer per month.

You can calculate this by multiplying your average page size with the number of expected page views per month. If your average page size is 30KB and you expect 50,000 page views per month, you will need 0.03MB x 50,000 = 1.5GB.

Larger, commercial sites often consume more than 100GB of monthly traffic.

Before you sign a contract with a host provider, make sure to check this:

· What are the restrictions on monthly transfer
· Will your site be closed if you exceed the volume
· Will you be billed a fortune if you exceed the volume
· Will my future need be covered
· Is upgrading a simple task

Connection Speed

Visitors to your web site will often connect via a modem, but your host provider should have a much faster connection.

In the early days of the Internet a T1 connection was considered a fast connection. Today connection speeds are much faster.

1 byte equals to 8 bits (and that's the number of bits used to transport one character). Low speed communication modems can transport from about 14 000 to 56 000 bits per second (14 to 56 kilobytes per second). That is somewhere between 2000 and 7000 characters per second, or about 1 to 5 pages of written text.

One kilobit (Kb) is 1024 bits. One megabit (Mb) is 1024 kilobits. One gigabit (Gb) is 1024 megabits.

These are connection speeds used on the Internet today:

Name | Connection | Speed per second
Modem | Analog | 14.4-56Kb
D0 | Digital (ISDN) | 64Kb
T1 | Digital | 1.55Mb
T3 | Digital | 43Mb
OC-1 | Optical Carrier | 52Mb
OC-2 | Optical Carrier | 156Mb
OC-12 | Optical Carrier | 622Mb
OC-24 | Optical Carrier | 1.244Gb
OC-48 | Optical Carrier | 2.488Gb

Before you sign up a contract with any hosting provider, surf some other web sites on their servers, and try to get a good feeling about their network speed. Also compare the other sites against yours, to see if it looks like you have the same needs. Contacting some of the other customers is also a valuable option.


Web Hosting Databases

Web Hosting Database Technologies

SQL Server or Oracle for high traffic database-driven web sites.

Access or MySQL for low traffics database-access.

Web Databases

If your web site needs to update large quantities of information via the web, you will need a database to store your information.

There are many different database systems available for web hosting. The most common are MS Access, MySQL, SQL Server, and Oracle.

Using the SQL Language

SQL is the language for accessing databases.

If you want your web site to be able to store and retrieve data from a database, your web server should have access to a database-system that uses the SQL language.

If you want to learn more about SQL, please visit our SQL tutorial.

SQL Server

Microsoft's SQL Server is one of the most popular database software for database-driven web sites with high traffic.

SQL Server is a very powerful, robust and full featured SQL database system.

Oracle

Oracle is also a very popular database software for database-driven web sites with high traffic.

Oracle is a very powerful, robust and full featured SQL database system.

Access

When a web site requires a simple database solution, Microsoft Access is a very popular option.

Access is not well suited for very high-traffic, and not as powerful as Oracle or SQL Server.

MySQL

MySQL is also a popular database software for web sites.

MySQL is an inexpensive alternative to the expensive Microsoft and Oracle solutions.


Hosting Domain Names

Hosting and Domain Names

A Domain Name is a unique name for your web site.

Choosing a hosting solution should include domain name registration.

Your domain name should be easy to remember and easy to type.

What is a Domain Name?

A domain name is a unique name for a web site, like microsoft.com and w3schools.com.

Domain names must be registered. When domain names are registered they are added to a large domain name register, and information about your site - including your internet IP address - is stored on a DNS server.

DNS stands for Domain Name System. A DNS server is responsible for informing all other computers on the Internet about your domain name and your site address.

Registering a Domain

Domains can be registered from domain name registration companies such as http://www.dotdnr.com.

These companies provide interfaces to search for available domain names and they offer a variety of domain name extensions that can be registered at the same time.

Domain Name Registration provides registration services for .com .net .org .biz .info .us .nu .ws .cc and .tv domains.

Newer domain extensions such as .biz .info and .us have more choices available as many of the popular domains have yet to be taken. While .com and .net domains are well established and recognized, most popular domains with these extensions are already registered.

Choosing Your Domain

Choosing a domain is a major step for any individual or organization.

While domains are being registered at a record, new domain extensions and creative thinking still offer thousands of excellent choices. When selecting a name it is important to consider the purpose of a domain name, which is to provide people an easy way to reach your web site. The best domains have the following characteristics:

Short - People don't like to type! The shorter your domain, the easier it is to reach and the less are the chance the user will make a typographical error while typing it.

Meaningful - A short domain is nothing without meaning, 34i4nh69.com is only 8 characters long but would not be easy to enter or remember. Select a domain that relates to your site in a way that people will understand.

Clear - Clarity is important when selecting a domain name. You should avoid selecting a name that is difficult to spell or pronounce. Also, pay close attention to how your domain sounds and how effectively it can be communicated over the phone.

Exposure: Just like premium real-estate on the ground that gets the most exposure, names that are short and easy to remember are an asset. In addition to humans viewing your domain, you should consider search engines. Search engines index your site and rank it for relevance against terms people search for online. In order to maximize your sites exposure, consider including a relevant search term in your domain. Of course, this should only be considered if it still maintains a short, clear and meaningful domain.

Sub Domains

Most people are unaware but they already use sub domains on a daily basis. The famous "www" of the World Wide Web is the most common example of a sub domain. Sub domains can be created on a DNS server and they don't need to be registered with a domain registrar, of course, the original domain would need to be registered before a sub domain could be created. Common examples of sub domains used on the internet are http://store.apple.com and http://support.microsoft.com.

Sub domains can be requested from your web hosting provider or created by yourself if you manage your own DNS server.

False Domain Names - Directory Listings

Some providers will offer you a unique name under their own name like: www.theircompany.com/yourcompany/

This is not a real domain name, it is a directory - and you should try to avoid it.

These URLs are not desirable, especially for companies. Try to avoid them if you can afford to register a domain. Typically these are more commonly used for personal sites and free sites provided by your ISP, you may have seen www.theircompany.com/~username as a common address, this is just another way to share a single domain and provide users their own address.

Open competition in domain name registration has brought about a dramatic decrease in pricing so domain sharing is far less common since people can register their own domains for only $15 per year.

Expired Domains

Another source for domain registrations is expired domains. When you register a domain, think of it as a rental, assuming there are no legal or trademark issues with the domain name, you are free to use it as long as you continue to pay the yearly fee (you can now also register in advance as many as 10 years). Some people register domains as speculators, hoping that they can later sell them, while others may have planned to use a domain and never had the time. The result is that domains that were previously registered regularly become available for registration again. You can see, and search through a list of recently expired domains for free at http://www.dotdnr.com. If you wish to register an expired domain you pay the same fee as you would for a new registration.

Use Your Domain Name

After you have chosen - and registered - your own domain name, make sure you use it on all your web pages and on all your correspondence, like email and traditional mail.

It is important to let other people be aware of your name, and to inform your partners and customers about your web site.


Web Hosting E-Commerce

If you are selling a product or a service, e-commerce might be a smart way to do business.

Internet Commerce

E-Commerce is about selling products or services over the Internet.

If you are selling a product or a service, e-commerce might be a smart way to do business. Over the Internet you can reach a large number of customers.

E-Commerce Systems

It is not a very good idea to build your own e-commerce system. Some (larger) companies might do it, but we will not recommend it if you run a smaller business. Building an e-commerce system is a complicated process, with the potential for a lot of errors.

You might buy a ready-to-use system and run it on your own server. Many systems are available on the market today, and most of them will cover your basic needs for order management and processing. But again, if you are not familiar with hosting your own web site, starting with an e-commerce site is not the right thing.

The best solution, in our opinion, is to find a hosting provider that offers an e-commerce solution.

Hosting Providers

E-commerce covers a very huge range of products. With different hosting providers you will find anything from very simple to very complex solutions.

Most providers will offer a simple and inexpensive solution that allow you to run your own "virtual store".

Your Checklist

· How does it handle customers?
· How does it handle product catalogs?
· How does it handle orders?
· How does it handle inventory?
· How does it handle back orders?
· How does it handle shipment?
· How does it handle accounts?
· How does it handle billing?
· How does it handle payment?
· How does it handle foreign currency?
· How does it handle credit cards?
· How does it handle taxes?
· How does it handle security?
· How does it handle integrity (encryption)?

Also check if the most time-consuming tasks are automated. Look for automated billing, invoice handling, accounting, and report generation.

Before you sign up a contract with any hosting provider, surf some other e-commerce sites on their servers. Find out how it works. Actually try some shopping and see if you get a good feeling. Also compare the other sites against yours, to see if it looks like you have the same needs. Contacting some of the other customers is also a valuable option.

Tax Issues

Taxes is a complex issue for most on-line stores. Especially VAT (Value Added Tax).

If you are selling on-line, you will most likely be in the export business.

Trading with different countries is easy, but tax issues might be tricky. Exporting goods may not be the subject of VAT in your country, but often your customers will have to pay their local VAT when they pick up the goods.

In addition, there will be the issue of income tax for your shop, depending on how you report your income from sales.

Before starting an on-line store, be sure to consult your tax adviser.


Hosting Email Services

Hosting services should include proper Email Accounts and Email Services.

Email Accounts

Hosting solutions should include email accounts for each person in your company. Email addresses should appear like this:

peter@mycompany.com

paul@mycompany.com

mary@mycompany.com

Most common is to use first name or first initial and last name.

POP Email

POP stands for Post Office Protocol. POP is a standard client/server protocol for sending and receiving email.

The emails are received and held on your internet server until you pick it up with a client email program, like Outlook, Outlook Express, Netscape Messenger, etc. POP email programs are built into Netscape and Internet Explorer browsers (i.e. Microsoft Outlook Express).

IMAP Email

IMAP stands for Internet Message Access Protocol. IMAP is another standard protocol for sending and receiving email.

The emails are received and held on your internet server until you pick it up with a client email program, like Outlook, Outlook Express, Netscape Messenger, etc.

IMAP represents an improvement over POP because email stored on an IMAP server can be manipulated from several computers (a computer at home, a workstation at the office, etc.) without having to transfer messages back and forth between computers. POP was designed to support email access on a single computer.

Web-based Email

Web-based email services enable you to access email via a web browser. You log into your email account via the Web to send and retrieve email. Being able to access your email from any browser anywhere in the world is a very attractive option.

Examples of web-based email services are Yahoo! Mail and Hotmail.

Email Forwarding

Email forwarding allows you to have multiple email personalities.

With email forwarding, you can setup aliases for other email accounts like

postmaster@mycompany.com should be forwarded to peter@mycompany.com

sales@mycompany.com should be forwarded to mary@mycompany.com

Mailing Lists

Some service providers offer mailing list capabilities. This is a valuable plus if you plan sending out email to a large number of users.


Introduction to Web Hosting

How does the Web work? How can I make my own Web Site?

What is a Web Host? What is an Internet Service Provider?

What is the World Wide 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 Netscape Navigator.

How does a Browser Fetch a Web Page?

· A browser fetches a page from a web server by a request.
· A request is a standard HTTP request containing a page address.
· An address may looks like this: http://www.someone.com/page.htm.

How does a Browser Display a Web Page?

· All web pages contain instructions for display
· The browser displays the page by reading these instructions.
· The most common display instructions are called HTML tags.
· HTML tags look like this <p>This is a Paragraph</p>.

If you want to learn more about HTML, please visit our HTML tutorial.

What is a Web Server?

· The collection of all your web pages is called your web site.
· To let others view your work, you must publish your web site.
· To publish your work, you must copy your site to a web server.
· Your own PC can act as a web server if it is connected to a network.
· Most common is to use an Internet Service Provider (ISP).

What is an Internet Service Provider?

· ISP is a shortcut for Internet Service Provider.
· An ISP provides Internet services.
· A common Internet service is web hosting.
· Web hosting means storing your web site on a public server.
· Web hosting normally includes email services.
· Web hosting often includes domain name registration.

Summary

If you want other people to view your web site, you must copy your site to a public server. Even if you can use your own PC as a web server, it is more common to let an Internet Service Provider (ISP) host your site.

Included in a Web hosting solution you can expect to find domain name registration and standard email services.

You can read more about domain name registration, email and other services in the next chapters of this tutorial.


Web Hosting Providers

If you want your web site to be visible to the world, you have to store it on a web server.

Most small businesses and companies store their web site on a server provided by an Internet Service Provider (ISP).

Hosting Your Own Web

Hosting your web site on your own server is always an option. Here are some problems to consider:

Hardware Expenses

To run a "real" web site, you will have to buy some powerful server hardware. Don't expect that a low cost PC will do the job. You will also need a permanent (24 hours a day ) high speed connection to your office, and such connections are expensive.

Software Expenses

Don't forget to count the extra cost for software licenses. Remember that server licenses often are much higher than client licenses. Also note that some server software licenses might have limits on number of concurrent users.

Labor Expenses

Don't expect low labor expenses. Remember that you have to install your own hardware and software. You also have to deal with bugs and viruses, and keep your server constantly running in an environment where "everything could happen".

Using an Internet Service Provider

Renting a server from an Internet Service Provider (ISP) is a common option. Here are some advantages:

Connection Speed

Most providers have very fast connections to the Internet, like full T3 fiber-optic 45Mps connections equivalent to about 2000 traditional (28K) modems or 1000 high speed (56K) modems.

Powerful Hardware

Service providers often have many powerful web servers that can be shared by several companies. You can also expect them to have an effective load balancing, and necessary backup servers.

Security and Stability

Internet Service Providers are specialists on web hosting. Expect their servers to have more than 99% up time, the latest software patches, and the best virus protection.

Things to Consider

24-hour support

Make sure your Internet service provider offers 24-hours support. Don't put yourself in a situation where you cannot fix critical problems without having to wait until the next working day. Toll-free phone could be vital if you don't want to pay for long distance calls.

Daily Backup

Make sure your service provider runs a secure daily backup routine, otherwise you may lose some valuable data.

Traffic Volume

Study the provider's traffic volume restrictions. Make sure that you don't have to pay a fortune for unexpected high traffic if your web site becomes popular.

Bandwidth or Content Restrictions

Study the provider's bandwidth and content restrictions. If you plan to publish pictures or broadcast video or sound, make sure that you can.

Email Capabilities

Make sure your provider fully supports the email capabilities you need. (You can read more about email capabilities in a later chapter)

Front Page Extensions

Make sure your provider fully supports FrontPage server extensions if you plan to use FrontPage to develop your site.

Database Access

Make sure your provider fully supports the database access you need if you plan to use databases from your site. (You can read more about database access in a later chapter)


Web Hosting Resources

This section lists some well-known Web hosting resources.

DotDNR offers .com .net .org .ws .cc and .tv domains for as little as $15 per year.

In addition, you can transfer your domain to DotDNR and add a full year to your existing registration for only $15. Save $20 or more over other major registrars.

International domain name registration is also offered.

www.dotdnr.com

Whether you need an entry-level web server to run your web application, or a high-end application or database server, one of MaximumASP's dedicated server configurations will meet your needs:

· SQL Server database and Email included with every server
· Enterprise Firewall, Intrusion Prevention, and Anti-Virus included!
· 99.999% Guaranteed Network Uptime
· Complete Service Pack and Critical Patch Management
· Fully Managed Servers starting at $199/month!


Web Hosting Technologies

Web Hosting Server Technologies

This section describes some of the most common hosting technologies.

Windows Hosting

Windows hosting means hosting of web services that runs on the Windows operating system.

You should choose Windows hosting if you plan to use ASP (Active Server Pages) as server scripting, or if you plan to use a database like Microsoft Access or Microsoft SQL Server. Windows hosting is also the best choice if you plan to develop your web site using Microsoft Front Page.

Unix Hosting

Unix hosting means hosting of web services that runs on the Unix operating system.

Unix was the first (original) web server operating system, and it is known for being reliable and stable. Often less expensive than Windows.

Linux Hosting

Linux hosting means hosting of web services that runs on the Linux operating system.

CGI

Web pages can be executed as CGI scripts. CGI scripts are executables that will execute on the server to produce dynamic and interactive web pages.

Most Internet service providers will offer some kind of CGI capabilities. And many will offer preinstalled, ready to run, guest-books, page-counters, and chat-forums solutions written in CGI scripts.

The use of CGI is most common on Unix or Linux servers.

ASP - Active Server Pages

Active Server Pages is a server-side scripting technology developed by Microsoft.

With ASP you can create dynamic web pages by putting script code inside your HTML pages. The code is executed by the web server before the page is returned to the browser. Both Visual Basic and JavaScript can be used.

ASP is a standard component in Windows 95,98, 2000, and XP. It can be activated on all computers running Windows.

Many web hosting providers are offering ASP, as it is becoming a more and more popular technology.

If you want to learn more about ASP, please visit our ASP tutorial.

Chili!Soft ASP

Microsoft's ASP technology runs only on Windows platforms.

However, Chili!Soft ASP is a software product that allows ASP to run on UNIX and some other platforms.

JSP

JSP is a server-side technology much like ASP developed by Sun.

With JSP you can create dynamic web pages by putting Java code inside your HTML pages. The code is executed by the web server before the page is returned to the browser.

Since JSP uses Java, the technology is not restricted to any server-specific platform.

FrontPage

FrontPage is a very common web site design tool developed by Microsoft.

FrontPage allows users to develop a web site without any deep knowledge of web development. Most Windows hosting solutions support FrontPage server extensions for users that use FrontPage to develop their web site.

If you plan to use FrontPage, you should look for a Windows hosting solution (meaning not Unix / Linux).

PHP

Just like ASP, PHP is a server-side scripting language which allows you to create dynamic web pages by putting script code inside your HTML pages. The code is executed by the web server before the page is returned to the browser.

Cold Fusion

Cold Fusion is another server-side scripting language used to develop dynamic web pages.

Cold Fusion is developed by Macromedia.

Secure Server

A secure server can transmit data encrypted.

If you plan to do online credit card transactions, or other types of web communication that needs to be protected against unauthorized access, your web host must provide a secure server.


Web Hosting Types

Hosting can be FREE, SHARED or DEDICATED.

Free Hosting

Some service providers offer free web hosting.

Free web hosting is best suited for small sites with low traffic, like family sites or sites about hobbies. It is not recommended for high traffic or for real business. Technical support is often limited, and technical options are few.

Very often you cannot use your own domain name at a free site. You have to use a name provided by your host like http://www.freesite/users/~yoursite.htm. This is hard to type, hard to remember, and not very professional.

Good: | Bad:
Low cost. It's free. | No domain names.
Good for family, hobby or personal sites. | Few, limited, or no software options.
Free email is often an option. | Limited security options.
 | Limited or no database support.
 | Limited technical support.

Shared (Virtual) Hosting

Shared hosting is very common, and very cost effective.

With shared hosting, your web site is hosted on a powerful server along with maybe 100 other web sites. On a shared host it is common that each web site have their own domain name.

Shared solutions often offer multiple software solutions like email, database, and many different editing options. Technical support tends to be good.

Good: | Bad:
Low cost. Cost is shared with others. | Reduced security due to many sites on one server.
Good for small business and average traffic. | Restrictions on traffic volume.
Multiple software options. | Restricted database support.
Own domain name. | Restricted software support.
Good support |

Dedicated Hosting

With dedicated hosting your web site is hosted on a dedicated server.

Dedicated hosting is the most expensive form of hosting. The solution is best suited for large web sites with high traffic, and web sites that use special software.

You should expect dedicated hosting to be very powerful and secure, with almost unlimited software solutions.

Good: | Bad:
Good for large business. | Expensive.
Good for high traffic. | Requires higher skills.
Multiple domain names. |
Powerful email solutions. |
Powerful database support. |
Strong (unlimited) software support. |

Collocated Hosting

Collocation means "co-location". It is a solution that lets you place (locate) your own web server on the premises (locations) of a service provider.

This is pretty much the same as running your own server in your own office, only that it is located at a place better designed for it.

Most likely a provider will have dedicated resources like high-security against fire and vandalism, regulated backup power, dedicated Internet connections and more.

Good: | Bad:
High bandwidth. | Expensive.
High up-time. | Requires higher skills.
High security. | Harder to configure and debug.
Unlimited software options. |

Your Checklist

Before you choose your web host, make sure that:

· The hosting type suits your current needs
· The hosting type is cost effective
· Upgrading to a better server is a possible solution
· If needed, upgrading to a dedicated server is possible

Before you sign up a contract with any hosting provider, surf some other web sites on their servers, and try to get a good feeling about their network speed. Also compare the other sites against yours, to see if it looks like you have the same needs. Contacting some of the other customers is also a valuable option.


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 Tutorial

HTML Tutorial

compteacher

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!

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!

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 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.

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.

Computer Joke

Support: "Type dir, space, a, colon."

Customer: "With a space after 'space'?"


HTML Color Names

HTML Color Names

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 | Color HEX | Color
AliceBlue |  |
AntiqueWhite | #FAEBD7 |
Aqua | #00FFFF |
Aquamarine |  |
Azure | #F0FFFF |
Beige | #F5F5DC |
Bisque |  |
Black |  |
BlanchedAlmond | #FFEBCD |
Blue | #0000FF |
BlueViolet | #8A2BE2 |
Brown | #A52A2A |
BurlyWood | #DEB887 |
 | #5F9EA0 |
 | #7FFF00 |
Chocolate | #D2691E |
Coral | #FF7F50 |
CornflowerBlue | #6495ED |
Cornsilk | #FFF8DC |
Crimson | #DC143C |
Cyan |  |
DarkBlue | #00008B |
 | #008B8B |
DarkGoldenRod | #B8860B |
DarkGray | #A9A9A9 |
DarkGrey | #A9A9A9 |
DarkGreen | #006400 |
DarkKhaki | #BDB76B |
DarkMagenta | #8B008B |
 | #556B2F |
Darkorange | #FF8C00 |
DarkOrchid | #9932CC |
DarkRed |  |
 | #E9967A |
DarkSeaGreen | #8FBC8F |
DarkSlateBlue | #483D8B |
DarkSlateGray | #2F4F4F |
DarkSlateGrey | #2F4F4F |
DarkTurquoise |  |
DarkViolet |  |
DeepPink | #FF1493 |
DeepSkyBlue | #00BFFF |
DimGray | #696969 |
DimGrey | #696969 |
 | #1E90FF |
FireBrick | #B22222 |
 | #FFFAF0 |
ForestGreen | #228B22 |
Fuchsia | #FF00FF |
Gainsboro | #DCDCDC |
GhostWhite |  |
Gold | #FFD700 |
GoldenRod |  |
 | #808080 |
GreenYellow | #ADFF2F |
HoneyDew | #F0FFF0 |
 | #FF69B4 |
IndianRed |  |
Indigo | #4B0082 |
Ivory | #FFFFF0 |
Khaki | #F0E68C |
Lavender |  |
LavenderBlush | #FFF0F5 |
LawnGreen | #7CFC00 |
LightBlue |  |
LightCoral | #F08080 |
LightCyan | #E0FFFF |
LightGoldenRodYellow | #FAFAD2 |
LightGray | #D3D3D3 |
LightGrey | #D3D3D3 |
LightGreen | #90EE90 |
LightPink | #FFB6C1 |
LightSalmon |  |
 | #20B2AA |
LightSkyBlue | #87CEFA |
LightSlateGray | #778899 |
LightSlateGrey |  |
LightSteelBlue | #B0C4DE |
 | #FFFFE0 |
Lime | #00FF00 |
LimeGreen | #32CD32 |
Linen | #FAF0E6 |
Magenta |  |
Maroon | #800000 |
MediumAquaMarine | #66CDAA |
MediumBlue | #0000CD |
MediumOrchid | #BA55D3 |
MediumPurple | #9370D8 |
 | #7B68EE |
MediumSpringGreen | #00FA9A |
MediumTurquoise | #48D1CC |
MediumVioletRed | #C71585 |
MidnightBlue |  |
 | #F5FFFA |
MistyRose | #FFE4E1 |
Moccasin | #FFE4B5 |
Navy | #000080 |
OldLace |  |
Olive | #808000 |
OliveDrab | #6B8E23 |
 | #FFA500 |
OrangeRed | #FF4500 |
Orchid |  |
PaleGoldenRod | #EEE8AA |
PaleGreen | #98FB98 |
PaleTurquoise | #AFEEEE |
PaleVioletRed | #D87093 |
PapayaWhip | #FFEFD5 |
PeachPuff | #FFDAB9 |
 | #CD853F |
Pink |  |
Plum | #DDA0DD |
PowderBlue |  |
Purple | #800080 |
Red | #FF0000 |
RosyBrown | #BC8F8F |
RoyalBlue | #4169E1 |
SaddleBrown | #8B4513 |
Salmon | #FA8072 |
SandyBrown | #F4A460 |
 | #2E8B57 |
SeaShell | #FFF5EE |
Sienna | #A0522D |
 | #C0C0C0 |
SkyBlue | #87CEEB |
SlateBlue |  |
SlateGray |  |
 | #708090 |
Snow | #FFFAFA |
SpringGreen | #00FF7F |
SteelBlue | #4682B4 |
Tan | #D2B48C |
Thistle | #D8BFD8 |
Tomato | #FF6347 |
Turquoise | #40E0D0 |
Violet | #EE82EE |
Wheat |  |
White |  |
WhiteSmoke | #F5F5F5 |
Yellow |  |
YellowGreen | #9ACD32 |


HTML Colors

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

Color Values

HTML colors can be defined as 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) and the highest value is 255 (hex #FF).

The table below shows the result of combining Red, Green, and Blue light sources:.

Color | Color HEX | Color RGB
 | #000000 | rgb(0,0,0)
 | #FF0000 | rgb(255,0,0)
 | #00FF00 | rgb(0,255,0)
 | #0000FF | rgb(0,0,255)
 | #FFFF00 | rgb(255,255,0)
 | #00FFFF | rgb(0,255,255)
 | #FF00FF | rgb(255,0,255)
 | #C0C0C0 | rgb(192,192,192)
 | #FFFFFF | rgb(255,255,255)

W3C Standard Color Names

W3C has listed 16 color names that will validate with an HTML validator.

The color names are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Cross-browser Color Names

A collection of nearly 150 color names are supported by all major browsers.

View the cross-browser color names

Cross-browser Color Values

Some years ago, when most computers only supported 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.

The 216 cross-browser 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 | 003333 | 003366 | 003399 | 0033CC | 0033FF
006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF
009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF
00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF
00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF
330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF
333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF
336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF
339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF
33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF
33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF
660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF
663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF
666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF
669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF
66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF
66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF
990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF
993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF
996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF
999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF
99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF
99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF
CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF
CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF
CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF
CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF
CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF
CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF
FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF
FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF
FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF
FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF
FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF
FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF


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.

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 | RGB
 | #000000 |
 |  | rgb(8,0,0)
 | #100000 | rgb(16,0,0)
 | #180000 | rgb(24,0,0)
 | #200000 | rgb(32,0,0)
 | #280000 | rgb(40,0,0)
 |  | rgb(48,0,0)
 | #380000 | rgb(56,0,0)
 | #400000 | rgb(64,0,0)
 | #480000 | rgb(72,0,0)
 |  | rgb(80,0,0)
 |  | rgb(96,0,0)
 | #680000 | rgb(104,0,0)
 | #700000 | rgb(112,0,0)
 | #780000 |
 | #800000 | rgb(128,0,0)
 | #880000 | rgb(136,0,0)
 | #900000 | rgb(144,0,0)
 |  | rgb(152,0,0)
 |  | rgb(160,0,0)
 | #A80000 | rgb(168,0,0)
 | #B00000 | rgb(176,0,0)
 | #B80000 | rgb(184,0,0)
 | #C00000 |
 | #C80000 |
 | #D00000 | rgb(208,0,0)
 |  | rgb(216,0,0)
 |  | rgb(224,0,0)
 |  | rgb(232,0,0)
 |  | rgb(240,0,0)
 | #F80000 | rgb(248,0,0)
 | #FF0000 |

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) | #080808
RGB(16,16,16) | #101010
RGB(24,24,24) | #181818
RGB(32,32,32) | #202020
RGB(40,40,40) | #282828
RGB(48,48,48) | #303030
RGB(56,56,56) | #383838
RGB(64,64,64) | #404040
RGB(72,72,72) | #484848
RGB(80,80,80) | #505050
RGB(88,88,88) | #585858
RGB(96,96,96) | #606060
RGB(104,104,104) | #686868
RGB(112,112,112) | #707070
RGB(120,120,120) | #787878
RGB(128,128,128) | #808080
RGB(136,136,136) | #888888
RGB(144,144,144) | #909090
RGB(152,152,152) | #989898
RGB(160,160,160) | #A0A0A0
RGB(168,168,168) | #A8A8A8
RGB(176,176,176) | #B0B0B0
RGB(184,184,184) | #B8B8B8
RGB(192,192,192) | #C0C0C0
RGB(200,200,200) | #C8C8C8
RGB(208,208,208) | #D0D0D0
RGB(216,216,216) | #D8D8D8
RGB(224,224,224) | #E0E0E0
RGB(232,232,232) | #E8E8E8
RGB(240,240,240) | #F0F0F0
RGB(248,248,248) | #F8F8F8
RGB(255,255,255) | #FFFFFF


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

Some Other Commonly Used Character Entities:

Result | Description | Entity Name | Entity Number
¢ | cent | &cent; | &#162;
£ | pound | &pound; | &#163;
¥ | yen | &yen; | &#165;
§ | section | &sect; | &#167;
© | copyright | &copy; | &#169;
® | registered trademark | &reg; | &#174;
× | multiplication | &times; | &#215;
÷ | division | &divide; | &#247;

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


HTML 4.0 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 | Value | Description
onload | script | 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 | Value | Description
onchange | script | Script to be run when the element changes
onsubmit | script | Script to be run when the form is submitted
onreset | script | Script to be run when the form is reset
onselect | script | Script to be run when the element is selected
onblur | script | Script to be run when the element loses focus
onfocus | script | 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 | Value | Description
onkeydown | script | What to do when key is pressed
onkeypress | script | What to do when key is pressed and released
onkeyup | script | 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 | Value | Description
onclick | script | What to do on a mouse click
ondblclick | script | What to do on a mouse double-click
onmousedown | script | What to do when mouse button is pressed
onmousemove | script | What to do when mouse pointer moves
onmouseout | script | What to do when mouse pointer moves out of an element
onmouseover | script | What to do when mouse pointer moves over an element
onmouseup | script | What to do when mouse button is released


HTML Examples

HTML Basic Tags Examples

A very simple HTML document

How text inside paragraphs is displayed

More paragraphs

Poem problems (some problems with HTML formatting)

Heading tags

Insert a horizontal rule

Examples explained

HTML Formatting Text Examples

Text formatting

Preformatted text (how to control line breaks and spaces)

Insert an address

Abbreviations and acronyms

Text direction

Long and short quotations

How to mark deleted and inserted text

HTML Link Examples

How to create hyperlinks

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

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

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

Examples explained

HTML Table Examples

Simple tables

Different table borders

Table with no borders

Headings in a table

Empty cells

Table with a caption

Tags inside a table

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 ordered list

Different types of ordered lists

Nested list

Examples explained

HTML Form and Input Examples

Password fields

Checkboxes

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

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)

Create an image-map, with clickable regions

Examples explained

HTML Background Examples

Good background and text color

Bad background and text color

Good background image

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

Font Attributes

Attribute | Example | Purpose
size="number" | size="2" | Defines the font size
size="+number" | size="+1" | Increases the font size
size="-number" | size="-1" | Decreases the font size
face="face-name" | face="Times" | Defines the font-name
color="color-value" | color="#eeff00" | Defines the font color
color="color-name" | color="red" | 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.

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

This example demonstrates how you can format text in an HTML document.

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 | Description
< b> | Defines bold text
big> | Defines big text
 | Defines emphasized text
i> | Defines italic text
< small> | Defines small text
< strong> | Defines strong text
sub> | Defines subscripted text
< sup> | Defines superscripted text
< ins> | Defines inserted text
del> | Defines deleted text
< s> | Deprecated. Use <del> instead
< | Deprecated. Use <del> instead
u> | Deprecated. Use styles instead

"Computer Output" Tags

Tag | Description
< code> | Defines computer code text
< kbd> | Defines keyboard text
< samp> | Defines sample computer code
< tt> | Defines teletype text
var> | Defines a variable
< pre> | Defines preformatted text
<listing> | Deprecated. Use <pre> instead
<plaintext> | Deprecated. Use <pre> instead
<xmp> | Deprecated. Use <pre> instead

Citations, Quotations, and Definition Tags

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


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: [TEditFormControlObj]

Last name: [TEditFormControlObj]

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:

[TRadioButtonFormControlObj] Male

[TRadioButtonFormControlObj] 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: [TCheckBoxFormControlObj]

I have a car: [TCheckBoxFormControlObj]

I have an airplane: [TCheckBoxFormControlObj]

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: [TEditFormControlObj]

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.

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.

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


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.

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 | Description
< frameset> | Defines a set of frames
< frame> | Defines a sub window (a frame)
< noframes> | Defines a noframe section for browsers that do not handle frames
< iframe> | Defines an inline sub window (frame)


HTML Head

Examples

The title of a document

The title information inside a head element is not displayed in the browser window.

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 | Description
< head> | Defines information about the document
< title> | Defines the document title
< base> | Defines a base URL for all the links on a page
< link> | Defines a resource reference
< meta> | Defines meta information

Tag | Description
< !DOCTYPE> | Defines the document type. This tag goes before the <html> start tag.


HTML Images

With HTML you can display images in a document.

Examples

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

Insert images from different

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.

This example demonstrates how to let an image float to the left or right of a paragraph.

Adjust images to different

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 | Description
< img> | Defines an image
< map> | Defines an image map
area> | Defines a clickable area inside an image map


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.

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.

An HTML <table> is used to divide a part of this Web page into two columns.

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 .

HTML Joke

Student: "How do you spell HTML?"


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.

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

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.

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 | Description
< a> | Defines an anchor


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.

This example demonstrates how you can nest lists.

2

This example demonstrates a more complicated nested list.

This example demonstrates a definition list.

List Tags

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


HTML Meta Element

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 (meta-information) 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 .

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 .

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.


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.

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


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:webmaster@example.com">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 Quiz

You can test your HTML skills with W3Schools' Quiz.

The Test

The test contains 20 questions and there is no time limit.

The test is not official, it's just a nice way to see how much you know, or don't know, about HTML.

Your Score Will be Counted

You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 20 points.

Good luck! Start the HTML Quiz


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 | Description
< | Defines a script
< noscript> | Defines an alternate text if the script is not executed
object> | Defines an embedded object
param> | Defines run-time settings (parameters) for an object
applet> | Deprecated. Use <object> instead


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 | Value | Description
class | class_rule or style_rule | The class of the element
id | id_name | A unique id for the element
style | style_definition | An inline style definition
title | tooltip_text | A text to display in a tool tip

Language Attributes

Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.

Attribute | Value | Description
dir | ltr | rtl | Sets the text direction
lang | language_code | Sets the language code

Keyboard Attributes

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


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 | Description
< style> | Defines a style definition
link> | Defines a resource reference
< div> | Defines a section in a document
< | Defines a section in a document
font> | Deprecated. Use styles instead
basefont> | Deprecated. Use styles instead
< | Deprecated. Use styles instead

Joke

Customer: Hello, it's me!

Support: It's me too!

Customer: No, Esmie. E, s, m, i, e!

Support: Sorry!


HTML Summary

You Have Learned HTML, Now What?

 Top Previous Next

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.


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.

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

This example demonstrates how to add a background to a table.

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 | Description
< table> | Defines a table
< | Defines a table header
< tr> | Defines a table row
< td> | Defines a table cell
< caption> | Defines a table caption
< colgroup> | Defines groups of table columns
< col> | Defines the attribute values for one or more columns in a table
< thead> | Defines a table head
 | Defines a table body
< tfoot> | Defines a table footer


HTML URL's

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 | Access
file | a file on your local PC
ftp | a file on an FTP server
http | a file on a World Wide Web Server
gopher | a file on a Gopher server
news | a Usenet newsgroup
telnet | a Telnet connection
WAIS | 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:someone@w3schools.com">someone@w3schools.com</a>

creates a link to your own mail system like this:


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.

[TTextAreaFormControlObj]

URL-encoding from %00 to %8f

ASCII Value | URL-encode | ASCII Value | URL-encode | ASCII Value | URL-encode
æ | %00 | 0 | %30 | ` | %60
 | %01 | 1 | %31 | a | %61
 | %02 | 2 | %32 | b | %62
 | %03 | 3 | %33 | c | %63
 | %04 | 4 | %34 | d | %64
 | %05 | 5 | %35 | e | %65
 | %06 | 6 | %36 | f | %66
 | %07 | 7 | %37 | g | %67
backspace | %08 | 8 | %38 | h | %68
tab | %09 | 9 | %39 | i | %69
linefeed | %0a | : | %3a | j | %6a
 | %0b | ; | %3b | k | %6b
 | %0c | < | %3c | l | %6c
c return | %0d | = | %3d | m | %6d
 | %0e | > | %3e | n | %6e
 | %0f | ? | %3f | o | %6f
 | %10 | @ | %40 | p | %70
 | %11 | A | %41 | q | %71
 | %12 | B | %42 | r | %72
 | %13 | C | %43 | s | %73
 | %14 | D | %44 | t | %74
 | %15 | E | %45 | u | %75
 | %16 | F | %46 | v | %76
 | %17 | G | %47 | w | %77
 | %18 | H | %48 | x | %78
 | %19 | I | %49 | y | %79
 | %1a | J | %4a | z | %7a
 | %1b | K | %4b | { | %7b
 | %1c | L | %4c | | | %7c
 | %1d | M | %4d | } | %7d
 | %1e | N | %4e | ~ | %7e
 | %1f | O | %4f |  | %7f
space | %20 | P | %50 | € | %80
! | %21 | Q | %51 |  | %81
" | %22 | R | %52 |  | %82
# | %23 | S | %53 | ƒ | %83
$ | %24 | T | %54 |  | %84
% | %25 | U | %55 | … | %85
& | %26 | V | %56 |  | %86
' | %27 | W | %57 | ‡ | %87
( | %28 | X | %58 | ˆ | %88
) | %29 | Y | %59 | ‰ | %89
* | %2a | Z | %5a | Š | %8a
+ | %2b | [ | %5b | ‹ | %8b
, | %2c | \ | %5c | Œ | %8c
- | %2d | ] | %5d |  | %8d
. | %2e | ^ | %5e | Ž | %8e
/ | %2f | _ | %5f |  | %8f

URL-encoding from %90 to %ff

ASCII Value | URL-encode | ASCII Value | URL-encode | ASCII Value | URL-encode
 | %90 | À | %c0 | ð | %f0
 | %91 | Á | %c1 | ñ | %f1
 | %92 | Â | %c2 | ò | %f2
 | %93 | Ã | %c3 | ó | %f3
 | %94 | Ä | %c4 | ô | %f4
• | %95 | Å | %c5 | õ | %f5
 | %96 | Æ | %c6 | ö | %f6
 | %97 | Ç | %c7 | ÷ | %f7
˜ | %98 | È | %c8 | ø | %f8
™ | %99 | É | %c9 | ù | %f9
š | %9a | Ê | %ca | ú | %fa
› | %9b | Ë | %cb | û | %fb
œ | %9c | Ì | %cc | ü | %fc
 | %9d | Í | %cd | ý | %fd
ž | %9e | Î | %ce | þ | %fe
Ÿ | %9f | Ï | %cf | ÿ | %ff
 | %a0 | Ð | %d0 |  |
¡ | %a1 | Ñ | %d1 |  |
¢ | %a2 | Ò | %d2 |  |
£ | %a3 | Ó | %d3 |  |
 | %a4 | Ô | %d4 |  |
¥ | %a5 | Õ | %d5 |  |
| | %a6 | Ö | %d6 |  |
§ | %a7 |  | %d7 |  |
¨ | %a8 | Ø | %d8 |  |
© | %a9 | Ù | %d9 |  |
ª | %aa | Ú | %da |  |
« | %ab | Û | %db |  |
¬ | %ac | Ü | %dc |  |
¯ | %ad | Ý | %dd |  |
® | %ae | Þ | %de |  |
¯ | %af | ß | %df |  |
° | %b0 | à | %e0 |  |
± | %b1 | á | %e1 |  |
² | %b2 | â | %e2 |  |
³ | %b3 | ã | %e3 |  |
´ | %b4 | ä | %e4 |  |
µ | %b5 | å | %e5 |  |
¶ | %b6 | æ | %e6 |  |
· | %b7 | ç | %e7 |  |
¸ | %b8 | è | %e8 |  |
¹ | %b9 | é | %e9 |  |
º | %ba | ê | %ea |  |
» | %bb | ë | %eb |  |
¼ | %bc | ì | %ec |  |
½ | %bd | í | %ed |  |
¾ | %be | î | %ee |  |
¿ | %bf | ï | %ef |  |


How to publish your work

Ready to Publish Your Work?

 Top Previous Next

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 !!


Why Use HTML 4

Why use HTML 4.0?

 Top Previous Next

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 .

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/)

[TEditFormControlObj]


Last Page

Congratulations !

 Top Previous Next

You have reached the last page on the Internet. We hope that you have enjoyed surfing the Web.

Now there is really nothing more to see. You can safely turn off your computer, and come back to life.


Showit v1.4

This example cannot be edited because our editor uses a textarea for input, and your browser does not allow a textarea inside a textarea.

[TTextAreaFormControlObj]


tryit_viewc77d.html

This example cannot be edited because our editor uses a textarea for input, and your browser does not allow a textarea inside a textarea.

[TTextAreaFormControlObj]


altKey Event Attribute

Definition and Usage

The altKey event attribute returns a Boolean value that indicates whether or not the "ALT" key was pressed when an event was triggered.

Syntax

event.altKey=true|false|1|0

Example

The following example alerts whether or not the "ALT" key was pressed when a mouse button is clicked:

<html>

<head>

<script type="text/javascript">

function isKeyPressed(event)

{

if (event.altKey==1)

  {

  alert("The ALT key was pressed!")

  }

else

  {

  alert("The ALT key was NOT pressed!")

  }

}

</script>

</head>

<body onmousedown="isKeyPressed(event)">

<p>Click somewhere in the document.

An alert box will tell you if you

pressed the ALT key or not.</p>

</body>

</html>

Try-It-Yourself Demos


bubbles Event Attribute

Definition and Usage

The bubbles event attribute returns a Boolean value that indicates whether or not the event is a bubbling event.

Event bubbling directs an event to its intended target, it works like this:

· A button is clicked and the event is directed to the button
· If an event handler is set for that object, the event is triggered
· If no event handler is set for that object, the event bubbles up (like a bubble in water) to the objects parent

The event bubbles up from parent to parent until it is handled, or until it reaches the document object.

Syntax

event.bubbles

Example

The following example checks if the triggered event is a bubbling event:

<html>

<head>

<script type="text/javascript">

function getEventType(event)

{

alert(event.bubbles);

}

</script>

</head>

<body onmousedown="getEventType(event)">

<p>Click somewhere in the document.

An alert box will tell if the

event is a bubbling event.</p>

</body>

</html>

Try-It-Yourself Demos


button Event Attribute

Definition and Usage

The button event attribute returns a number that indicates which mouse button was clicked when an event was triggered.

Syntax

event.button=0|1|2

Parameter | Description
0 | Specifies the left mouse-button
1 | Specifies the middle mouse-button
2 | Specifies the right mouse-button

Internet Explorer has different parameters:

Parameter | Description
1 | Specifies the left mouse-button
4 | Specifies the middle mouse-button
2 | Specifies the right mouse-button

Tips and Notes

Note: For left-handed configured mice the button parameter values are reversed.

Tip: Mozilla gives a Ctrl–Click a button value of 2 (same as right-click).

Example

The following example alerts which mouse button was clicked:

<html>

<head>

<script type="text/javascript">

function whichButton(event)

{

  if (event.button==2)

    {

    alert("You clicked the right mouse button!")

    }

  else

    {

    alert("You clicked the left mouse button!")

    }

}

</script>

</head>

<body onmousedown="whichButton(event)">

<p>Click in the document. An alert box will

alert which mouse button you clicked.</p>

</body>

</html>

Try-It-Yourself Demos


cancelable Event Attribute

Definition and Usage

The cancelable event attribute returns whether or not the event is a cancelable event.

The event is cancelable if it is possible to prevent the events default action.

Syntax

event.cancelable

Example

The following example checks if the triggered event is a cancelable event:

<html>

<head>

<script type="text/javascript">

function isEventCancelable(event)

{

alert(event.cancelable);

}

</script>

</head>

<body onmousedown="isEventCancelable(event)">

<p>Click somewhere in the document.

An alert box will tell if the

event is a cancelable event.</p>

</body>

</html>

Try-It-Yourself Demos

Check if an event is a cancelable event


clientX Event Attribute

Definition and Usage

The clientX event attribute returns the horizontal coordinate (according to the client area) of the mouse pointer when an event was triggered.

The client area is the current window.

Syntax

event.clientX

Example

The following example alerts the coordinates of the mouse pointer when the mouse button was clicked:

<html>

<head>

<script type="text/javascript">

function show_coords(event)

{

x=event.clientX

y=event.clientY

alert("X coords: " + x + ", Y coords: " + y)

}

</script>

</head>

<body onmousedown="show_coords(event)">

<p>Click in the document. An alert box will alert

the x and y coordinates of the mouse pointer.</p>

</body>

</html>

Try-It-Yourself Demos


clientY Event Attribute

Definition and Usage

The clientY event attribute returns the vertical coordinate (according to the client area) of the mouse pointer when an event was triggered.

The client area is the current window.

Syntax

event.clientY

Example

The following example alerts the coordinates of the mouse pointer when the mouse button was clicked:

<html>

<head>

<script type="text/javascript">

function show_coords(event)

{

x=event.clientX

y=event.clientY

alert("X coords: " + x + ", Y coords: " + y)

}

</script>

</head>

<body onmousedown="show_coords(event)">

<p>Click in the document. An alert box will alert

the x and y coordinates of the mouse pointer.</p>

</body>

</html>

Try-It-Yourself Demos


ctrlKey Event Attribute

Definition and Usage

The ctrlKey event attribute returns a Boolean value that indicates whether or not the "CTRL" key was pressed when an event was triggered.

Syntax

event.ctrlKey=true|false|1|0

Example

The following example alerts whether or not the "CTRL" key was pressed when a mouse button was clicked:

<html>

<head>

<script type="text/javascript">

function isKeyPressed(event)

{

if (event.ctrlKey==1)

  {

  alert("The CTRL key was pressed!")

  }

else

  {

  alert("The CTRL key was NOT pressed!")

  }

}

</script>

</head>

<body onmousedown="isKeyPressed(event)">

<p>Click somewhere in the document.

An alert box will tell you if you

pressed the CTRL key or not.</p>

</body>

</html>

Try-It-Yourself Demos

ctrlKey - Check whether or not the CTRL key was pressed


currentTarget Event Attribute

Definition and Usage

The currentTarget event attribute returns the element whose event listeners triggered the event.

This is particularly useful during capturing and bubbling.

Syntax

event.currentTarget

Example

The following example gets the element whose event listeners triggered the event:

<html>

<head>

<script type="text/javascript">

function getEventTrigger(event)

{

x=event.currentTarget;

alert("The id of the triggered element: "

+ x.id);

}

</script>

</head>

<body >

<p id="p1" onmousedown="getEventTrigger(event)">

Click on this paragraph. An alert box will

show which element triggered the event.</p>

</body>

</html>

Try-It-Yourself Demos

Get the element whose event listeners triggered the event


DELETED

HTML DOM TableHeader Object

TableHeader Object

The TableHeader object represents an HTML table header element.

For each instance of a <th> tag in an HTML document, a TableHeader object is created.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

TableHeader Object Properties

Property | Description | IE | F | O | W3C
abbr | Sets or returns an abbreviated text for the table header cell (for non-visual media such as speech or Braille) | 6 |  |  | Yes
accessKey | Sets or returns the keyboard key to access the table header cell | 5 |  |  | ?
align | Sets or returns the horizontal alignment of data within the table header cell | 4 |  |  | Yes
axis | Sets or returns a comma-delimited list of related table header cells (categories) | 6 |  |  | Yes
cellIndex | Returns the position of the cell in the cells collection of a row | 4 |  |  | Yes
ch | Sets or returns the alignment character for the table header cell | 6 |  |  | Yes
chOff | Sets or returns the offset of alignment character for the table header cell | 6 |  |  | Yes
colSpan | Sets or returns the number of columns the table header cell should span | 4 |  |  | Yes
headers | Sets or returns a list of space-separated header cell ids | 6 |  |  | Yes
height | Sets or returns the height of the table header cell | 4 |  |  | ?
id | Sets or returns the id of the table header cell (In IE 4 this property is read-only) | 4 |  |  | Yes
innerHTML | Sets or returns the HTML between the start and end tags of the table header cell | 4 |  |  | ?
innerText | Sets or returns the text between the start and end tags of the table header cell | 4 |  |  | ?
noWrap | Sets or returns a Boolean value indicating whether or not the browser automatically performs word wrap in the table header cell | 4 |  |  | Yes
rowSpan | Sets or returns the number of rows the table header cell should span | 4 |  |  | Yes
scope |  | 6 |  |  | Yes
tabIndex | Sets or returns the tab order for the table header cell | 5 |  |  | Yes
vAlign | Sets or returns how header cell content are vertically aligned | 4 |  |  | Yes
width | Sets or returns the width of the table header cell | 4 |  |  | Yes


DOM Examples

Anchor Object

Change text, URL, and target attribute of a link

Using focus() and blur()

Add an accessKey to a link

Document Object

Write text to the output

Write text with formatting to the output

Return the title of a document

Return the URL of a document

Return the referrer of a document

Return the domain name of the document's server

Use getElementById()

Use getElementsByName()

Open a new document, specify MIME type and add some text

Return the number of anchors in a document

Access an item in a collection

Event Object

What are the coordinates of the cursor?

What is the unicode of the key pressed?

What are the coordinates of the cursor?

Was the shift key pressed?

Which element was clicked?

Which eventype occured?

Form and Form Input Objects

View and change the action URL of a form

View the method that is to be used when sending form data

Alert id, type, and value of a Button object + disable button

Check and uncheck a checkbox

Checkboxes in a form

Checkbox - If the user clicks in a checkbox, the content of the text fields are converted to uppercase.

Reset a form

Submit a form

Form validation

Set focus to an input field when the page loads

Select the content of an input field

Dropdown list in a form

A dropdown menu

Jump to the next field when the current field's maxlength has been reached

Add accessKeys to form fields

Frame, Frameset, and IFrame Objects

Resizable and not resizable frames

Frames with and without scrollbars

Change the source / URL of two frames

Break out of a frame

Image Object

Change the height and width of an image

Change the src of an image

Location Object

Send the client to a new location / URL

Reload a page

Break out of a frame

Anchors array - This example opens two windows. The first window contains four buttons and the second window defines four anchors from 0 to 3. When a button is clicked in the first window, the onclick event handler goes to the specified anchor in the second window.

Navigator Object

Detect the visitor's browser and browser version

More details about the visitor's browser

Alert user, depending on browser

Option and Select Objects

Disable and enable a dropdown list

Get the id of the form that contains the dropdown list

Get the number of options in the dropdown list

Turn the dropdown list into a multiline list

Select multiple options in a dropdown list

Alert the index of the selected option in a dropdown list

Change the text of the selected option

Screen Object

Detect details about the client's screen

Table, TableHeader, TableRow, TableData Objects

Change the width of a table border

Change the cellPadding and cellSpacing of a table

Specify frames of a table

Specify rules for a table

InnerHTML of a row

InnerHTML of a cell

Create a caption for a table

Delete rows in a table

Add rows to a table

Add cells to a table row

Align the cell content in a table row

Align the cell content in a single cell

Vertical align the cell content in a single cell

Change the content of a table cell

Change the colspan of a table row

Window Object

Display an alert box

Alert box with line-breaks

Display a prompt box

Open a new window when clicking on a button

Open multiple windows with one click

Send the client to a new location / URL

Reload a page

Write some text in the windows status bar

Print a page

Break out of a frame

Scroll the window

Scroll the window to a specified position

Simple timing

Another simple timing

Timing event in an infinite loop

Timing event in an infinite loop - with a Stop button

A clock created with a timing event

Create a pop-up


HTML DOM abbr Property

Definition and Usage

The abbr property sets or returns an abbreviated version of the content in a table cell (for non-visual media such as speech or Braille).

Syntax

tabledataObject.abbr=text

Example

The following example aligns a table cell to the right:

<html>

<head>

<script type="text/javascript">

function alertAbbr()

{

alert(document.getElementById('td1').abbr);

}

</script>

</head>

<body>

<table border="1">

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td id="td1" abbr="Some text">Peter</td>

<td id="td2">Griffin</td>

</tr>

</table>

<br />

<input type="button" onclick="alertAbbr()"

value="Alert abbr" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM Access Nodes

With the DOM, you can access every node in an HTML document.

Find and Access Nodes

You can find the element you want to manipulate in several ways:

· By using the getElementById() and getElementsByTagName() methods
· By using the parentNode, firstChild, and lastChild properties of an element node

getElementById() and getElementsByTagName()

The two methods getElementById() and getElementsByTagName(), can find any HTML element in the entire document.

These methods ignore the document structure. If you want to find all <p> elements in the document, the getElementsByTagName() method will find them all, regardless of on which level the <p> elements are. Furthermore, the getElementById() method always returns the correct element, wherever it is hidden in the document structure.

These two methods give you the HTML elements you need regardless of where they are in the document!

The getElementById() method returns the element with the specified ID:

getElementById() Syntax

document.getElementById("someID");

Note: The getElementById() method doesn't work in XML. In an XML document, you must search through attributes that have the type id, and this type must be declared in the XML document's Document Type Definition (DTD).

The getElementsByTagName() method returns all elements (as a nodeList) with the specified tag name that are descendants of the element you are on when using this method.

The getElementsByTagName() can be used on any HTML element, and also on the document:

getElementsByTagName() Syntax

document.getElementsByTagName("tagname");

or:

document.getElementById('someID').getElementsByTagName("tagname");

Example 1

The following example returns a nodeList of all <p> elements in the document:

document.getElementsByTagName("p");

Example 2

The following example returns a nodeList of all <p> elements that are descendants of the element with id="maindiv":

document.getElementById('maindiv').getElementsByTagName("p");

nodeList

When working with a nodeList, we usually store the list in a variable, like this:

var x=document.getElementsByTagName("p");

Now the variable x contains a list of all <p> elements in the page, and we can access the <p> elements by their index numbers.

Note: The index starts at 0.

You can loop through the nodeList by using the length property:

var x=document.getElementsByTagName("p");

for (var i=0;i<x.length;i++)

{

// do something with each paragraph

}

You can also access a specific element by using the index number.

To access the third <p> you can write:

var y=x[2];

parentNode, firstChild, and lastChild

The five properties parentNode, firstChild, and lastChild follow the document structure and allow short-distance travel in the document.

Look at the following HTML fragment:

<table>

<tr>

  <td>John</td>

  <td>Doe</td>

  <td>Alaska</td>

</tr>

</table>

In the HTML code above, the first <td> is the firstChild of the <tr> element, and the last <td> is the lastChild of the <tr> element.

Furthermore, the <tr> is the parentNode of every <td> element.

The most common use of firstChild is to access the text of an element:

var x=[a paragraph];

var text=x.firstChild.nodeValue;

The parentNode property is often used to change the document structure. Suppose you want to remove the node with id="maindiv" from the document:

var x=document.getElementById("maindiv");

x.parentNode.removeChild(x);

First you find the node with the specified id, then you move to its parent and execute the removeChild() method.

Root Nodes

There are two special document properties that allow access to the tags:

· document.documentElement
· document.body

The first property returns the root node of the document and exists in all XML and HTML documents.

The second property is a special addition for HTML pages, and gives direct access to the <body> tag.


HTML DOM accessKey Property

Definition and Usage

The accessKey property sets or returns a keyboard key to access a link.

Note: Use Alt + accessKey to give focus to the element with the specified access key.

Syntax

anchorObject.accessKey=accessKey

Example

The following example sets the access key of the of the link:

<html>

<head>

<script type="text/javascript">

function accesskey()

{

document.getElementById('w3').accessKey="w"

}

</script>

</head>

<body onload="accesskey()">

<a id="w3" href="http://www.w3schools.com/">W3Schools.com</a>

</body>

</html>

Try-It-Yourself Demos


HTML DOM accessKey Property

Definition and Usage

The accessKey property sets or returns a keyboard key to access an area.

Note: Use Alt + accessKey to give focus to the element with the specified access key.

Syntax

areaObject.accessKey=accessKey

Example

The following example returns the access key of the "Venus" area in the image-map:

<html>

<body>

<img src="planets.gif"

width="145" height="126"

usemap="#planetmap" />

<map name="planetmap">

<area id="venus" shape="circle"

coords="124,58,8"

alt="Venus"

href="venus.htm" accessKey="v" />

</map>

<p>Access key for "Venus" is:

<script type="text/javascript">

x=document.getElementById('venus');

document.write(x.accessKey);

</script>

</p>

</body>

</html>

Try-It-Yourself Demos

Return the accessKey for an area in an image-map


HTML DOM accessKey Property

Definition and Usage

The accessKey property sets or returns a keyboard key to access a button.

Note: Use Alt + accessKey to give focus to the element with the specified access key.

Syntax

buttonObject.accessKey=accessKey

Example

The following example returns the access key for a button:

<html>

<body>

<form>

<input type="button" value="Click me!"

accesskey="b" id="button1" />

</form>

<p>AccessKey for button is:

<script type="text/javascript">

x=document.getElementById('button1');

document.write(x.accessKey);

</script></p>

</body>

</html>

Try-It-Yourself Demos

Return the access key for a button


HTML DOM accessKey Property

Definition and Usage

The accessKey property sets or returns a keyboard key to access a password field.

Note: Use Alt + accessKey to give focus to the element with a specified access key.

Syntax

passwordObject.accessKey=accessKey

Example

The following example returns the access key for a password field:

<html>

<body>

<form>

<input type="password" accesskey="p" id="password1" />

</form>

<p>AccessKey for password field is:

<script type="text/javascript">

x=document.getElementById('password1');

document.write(x.accessKey);

</script></p>

</body>

</html>

Try-It-Yourself Demos

Return the access key for a password field


HTML DOM accessKey Property

Definition and Usage

The accessKey property sets or returns a keyboard key to access a button.

Note: Use Alt + accessKey to give focus to the element with the specified access key.

Syntax

buttonObject.accessKey=accessKey

Example

The following example returns the access key for a button:

<html>

<body>

<button id="button1" accessKey="a">

Click Me!</button>

<p>AccessKey for button is:

<script type="text/javascript">

x=document.getElementById('button1');

document.write(x.accessKey);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM accessKey Property

Definition and Usage

The accessKey property sets or returns a keyboard key to access a radio button.

Note: Use Alt + accessKey to give focus to the element with a specified access key.

Syntax

radioObject.accessKey=accesskey

Example

The following example returns the access key for the radio button:

<html>

<body>

<form>

Male: <input id="male" accesskey="m" type="radio"

name="Sex" value="Male" />

<br />

Female: <input id="female" accesskey="f" type="radio"

name="Sex" value="Female" />

</form>

<p>The access key for the radio buttons are:

<script type="text/javascript">

document.write(document.getElementById('male').accessKey);

document.write(" and ");

document.write(document.getElementById('female').accessKey);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM accessKey Property

Definition and Usage

The accessKey property sets or returns a keyboard key to access a reset button.

Note: Use Alt + accessKey to give focus to the element with the specified access key.

Syntax

resetObject.accessKey=accessKey

Example

The following example returns the access key for a reset button:

<html>

<body>

<form>

<input type="reset" accesskey="r" id="reset1" />

</form>

<p>AccessKey for the reset button is:

<script type="text/javascript">

x=document.getElementById('reset1');

document.write(x.accessKey);

</script></p>

</body>

</html>

Try-It-Yourself Demos

Return the access key for a reset button


HTML DOM accessKey Property

Definition and Usage

The accessKey property sets or returns a keyboard key to access a submit button.

Note: Use Alt + accessKey to give focus to the element with the specified access key.

Syntax

submitObject.accessKey=accessKey

Example

The following example returns the access key for a submit button:

<html>

<body>

<form>

<input type="submit" accesskey="s" id="submit1" />

</form>

<p>AccessKey for the submit button is:

<script type="text/javascript">

x=document.getElementById('submit1');

document.write(x.accessKey);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM accessKey Property

Definition and Usage

The accessKey property sets or returns the keyboard key to access a text area.

Note: Use Alt + accessKey to give focus to an element with a specified access key.

Syntax

textareaObject.accessKey=accessKey

Example

The following example specifies an access key for a text area:

<html>

<head>

<script type="text/javascript">

function setAccessKey()

{

document.getElementById('txt1').accessKey="t"

}

</script>

</head>

<body onload="setAccessKey()">

<textarea id="txt1">

Hello world....This is a text area

</textarea>

</body>

</html>


HTML DOM action Property

Definition and Usage

The action property sets or returns the action attribute of a form.

The action attribute defines where to send the data when the form is submitted.

Syntax

formObject.action=URL

Example

The following example changes the action URL of a form:

<html>

<head>

<script type="text/javascript">

function changeAction()

{

var x=document.getElementById("myForm")

alert("Original action: " + x.action)

x.action="default.asp"

alert("New action: " + x.action)

x.submit()

}

</script>

</head>

<body>

<form id="myForm" action="js_examples.asp">

Name: <input type="text" value="Mickey Mouse" />

<input type="button" onclick="changeAction()"

value="Change action attribute and submit form" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM add() Method

Definition and Usage

The add() method is used to add an option to a dropdown list.

Syntax

selectObject.add(option,before)

Parameter | Description
option | Required. Specifies the option to add. Must be an option or optgroup element
before | Required. Where to insert the new option (null indicates that the new option will be inserted at the end of the list)

Example

The following example adds a "kiwi" option to the end of the dropdown list:

<html>

<head>

<script type="text/javascript">

function insertOption()

{

var y=document.createElement('option');

y.text='Kiwi'

var x=document.getElementById("mySelect");

try

  {

  x.add(y,null); // standards compliant

  }

catch(ex)

  {

  x.add(y); // IE only

  }

}

</script>

</head>

<body>

<form>

<select id="mySelect">

<option>Apple</option>

<option>Pear</option>

<option>Banana</option>

<option>Orange</option>

</select>

<input type="button" onclick="insertOption()"

value="Insert option" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM alert() Method

Definition and Usage

The alert() method is used to display an alert box with a specified message and an OK button.

Syntax

alert(message)

Example

<html>

<head>

<script type="text/javascript">

function display_alert()

{

alert("I am an alert box!!")

}

</script>

</head>

<body>

<input type="button" onclick="display_alert()"

value="Display alert box" />

</body>

</html>

Try-It-Yourself Demos

Display an alert box

Alert box with line-breaks


HTML DOM align Property

Definition and Usage

The align property sets or returns how to align an iframe according to the surrounding text

Syntax

iframeObject.align=left|right|top|middle|bottom

Example

The following example aligns the iframe to the right according to the surrounding text:

<html>

<body>

<iframe src="frame_a.htm" id="frame1"></iframe>

<p>Some text. Some text. Some text. Some text.</p>

<script type="text/javascript">

document.getElementById("frame1").align="right";

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM align Property

Definition and Usage

The align property sets or returns the horizontal alignment of data within a table cell.

Syntax

tabledataObject.align=left|right|center

Example

The following example aligns a table cell to the right:

<html>

<head>

<script type="text/javascript">

function alignCell()

{

document.getElementById('td1').align="right"

}

</script>

</head>

<body>

<table border="1">

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td id="td1">Peter</td>

<td id="td2">Griffin</td>

</tr>

</table>

<br />

<input type="button" onclick="alignCell()"

value="Align cell" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM align Property

Definition and Usage

The align property sets or returns the horizontal alignment of data within a table row.

Syntax

tablerowObject.align=left|center|right|justify|char

Example

The following example changes the alignment of the content in a table row:

<html>

<head>

<script type="text/javascript">

function leftAlign()

{

document.getElementById('header').align="left";

}

</script>

</head>

<body>

<table width="100%" border="1">

<tr id="header">

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

</table>

<br />

<input type="button" onclick="leftAlign()"

value="Left-align table row" />

</body>

</html>

Try-It-Yourself Demos

Align the cell content of a table row


HTML DOM alt Property

Definition and Usage

The alt property sets or returns an alternate text to be displayed, if a browser cannot show an area.

Syntax

areaObject.alt=alternate_text

Example

The following example returns the alternate text for the "Venus" area in the image-map:

<html>

<body>

<img src="planets.gif"

width="145" height="126"

usemap="#planetmap" />

<map name="planetmap">

<area id="venus" shape="circle"

coords="124,58,8"

alt="The planet Venus"

href="venus.htm" />

</map>

<p>Alternate text for "Venus" is:

<script type="text/javascript">

x=document.getElementById('venus');

document.write(x.alt);

</script>

</p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM alt Property

Definition and Usage

The alt property sets or returns an alternate text to display if a browser does not support buttons.

Syntax

buttonObject.alt=alternate_text

Example

The following example returns the alt text for a button:

<html>

<body>

<form>

<input type="button" alt="Button" id="button1"

value="Click me" />

</form>

<p>The alt text for the button is:

<script type="text/javascript">

x=document.getElementById('button1');

document.write(x.alt);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM alt Property

Definition and Usage

The alt property sets or returns an alternate text to display if a browser does not support checkboxes.

Syntax

checkboxObject.alt=alternate_text

Example

The following example returns the alt text for the checkboxes:

<html>

<body>

<form>

I have a bike: <input id="bike" alt="bike"

type="checkbox" name="Bike" />

<br />

I have a car: <input id="car" alt="car"

type="checkbox" name="Car" />

</form>

<p>The alt text for the checkboxes are:

<script type="text/javascript">

document.write(document.getElementById('bike').alt);

document.write(" and ");

document.write(document.getElementById('car').alt);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM alt Property

Definition and Usage

The alt property sets or returns an alternate text to display if a browser does not support hidden input fields.

Syntax

hiddenObject.alt=alternate_text

Example

The following example returns the alt text for a hidden input field:

<html>

<body>

<form>

<input type="hidden" alt="Hidden field" id="hidden1" />

</form>

<p>The alt text for the hidden field is:

<script type="text/javascript">

x=document.getElementById('hidden1');

document.write(x.alt);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM alt Property

Definition and Usage

The alt property sets or returns an alternate text to be displayed, if a browser cannot show an image.

Syntax

imageObject.alt=alternate_text

Example

The following example changes the alternate text of an image:

<html>

<head>

<script type="text/javascript">

function changeAlt()

{

document.getElementById("compman").alt="Man using computer"

}

function alertAlt()

{

alert(document.getElementById("compman").alt)

}

</script>

</head>

<body>

<img id="compman" src="compman.gif" alt="Computerman" />

<br />

<input type="button" onclick="changeAlt()"

value="Change alt text">

<br /><br />

<input type="button" onclick="alertAlt()"

value="Alert alt text">

</body>

</html>

Try-It-Yourself Demos


HTML DOM alt Property

Definition and Usage

The alt property sets or returns an alternate text to display if a browser does not support password fields.

Syntax

passwordObject.alt=alternate_text

Example

The following example returns the alt text for a password field:

<html>

<body>

<form>

<input type="password" alt="Password field" id="pwd1" />

</form>

<p>The alt text for the password field is:

<script type="text/javascript">

x=document.getElementById('pwd1');

document.write(x.alt);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM alt Property

Definition and Usage

The alt property sets or returns an alternate text to display if a browser does not support radio buttons.

Syntax

radioObject.alt=alternate_text

Example

The following example returns the alt text for the radio buttons:

<html>

<body>

<form>

Male: <input id="male" alt="male" type="radio"

name="Sex" value="Male" />

<br />

Female: <input id="female" alt="female" type="radio"

name="Sex" value="Female" />

</form>

<p>The alt text for the radio buttons are:

<script type="text/javascript">

document.write(document.getElementById('male').alt);

document.write(" and ");

document.write(document.getElementById('female').alt);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM alt Property

Definition and Usage

The alt property sets or returns an alternate text to display if a browser does not support reset buttons.

Syntax

resetObject.alt=alternate_text

Example

The following example returns the alt text for a reset button:

<html>

<body>

<form>

<input type="reset" alt="Reset button" id="reset1" />

</form>

<p>The alt text for the reset button is:

<script type="text/javascript">

x=document.getElementById('reset1');

document.write(x.alt);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM alt Property

Definition and Usage

The alt property sets or returns an alternate text to display if a browser does not support submit buttons.

Syntax

submitObject.alt=alternate_text

Example

The following example returns the alt text for a submit button:

<html>

<body>

<form>

<input type="submit" alt="submit button" id="submit1" />

</form>

<p>The alt text for the submit button is:

<script type="text/javascript">

x=document.getElementById('submit1');

document.write(x.alt);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM alt Property

Definition and Usage

The alt property sets or returns an alternate text to display if a browser does not support text fields.

Syntax

textObject.alt=alternate_text

Example

The following example returns the alt text for a text field:

<html>

<body>

<form>

Email: <input type="text" alt="Email input field" id="email" />

</form>

<p>The alt text for the text field is:

<script type="text/javascript">

x=document.getElementById('email');

document.write(x.alt);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM Anchor Object

Anchor Object

The Anchor object represents an HTML hyperlink.

For each instance of an <a> tag in an HTML document, an Anchor object is created.

An anchor can be used to create a link to another document (with the href attribute) or to create a bookmark inside a document (with the name attribute).

You can access an anchor by searching through the anchors[] array in the Document object, or by using document.getElementById().

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Anchor Object Properties

Property | Description | IE | F | O | W3C
accessKey | Sets or returns a keyboard key to access a link | 5 | 1 | No | Yes
 | Sets or returns the character-set of the linked resource | 6 | 1 | 9 | Yes
 | Sets or returns a comma-separated list with coordinates of a link in an image-map | 6 | 1 | 9 | Yes
href | Sets or returns the URL of the linked resource | 5 | 1 | 9 | Yes
hreflang | Sets or returns the language code of the linked resource | 6 | 1 | 9 | Yes
 | Sets or returns the id of a link | 4 | 1 | 9 | Yes
innerHTML | Sets or returns the text of a link | 4 | 1 | 9 | No
name | Sets or returns the name of a link | 4 | 1 | 9 | Yes
rel | Sets or returns the relationship between the current document and the target URL | 5 | 1 | No | Yes
rev | Sets or returns the relationship between the target URL and the current document | 5 | 1 | No | Yes
shape | Sets or returns the shape of a link in an image-map | 6 | 1 | 9 | Yes
tabIndex | Sets or returns the tab order for a link | 6 | 1 | 9 | Yes
target | Sets or returns where to open a link | 5 | 1 | 9 | Yes
type | Sets or returns the MIME type of the linked resource | 6 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
className | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
title | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes

Anchor Object Methods

Method | Description | IE | F | O | W3C
blur() | Removes focus from the link | 5 | 1 | 9 | Yes
 | Gives focus to the link | 5 | 1 | 9 | Yes


HTML DOM anchors Collection

Definition and Usage

The anchors collection returns a reference to all Anchor objects in the document.

Syntax

document.anchors[]

Example

<html>

<body>

<a name="first">First anchor</a><br />

<a name="second">Second anchor</a><br />

<a name="third">Third anchor</a><br />

<br />

Number of anchors in this document:

<script type="text/javascript">

document.write(document.anchors.length)

</script>

</body>

</html>

Try-It-Yourself Demos

Return the innerHTML of the first anchor in a document


HTML DOM appCodeName Property

Definition and Usage

The appCodeName property returns the code name of the browser.

Syntax

navigator.appCodeName

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>CodeName: ")

document.write(navigator.appCodeName + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos

Detect the visitor's browser and browser version

More details about the visitor's browser

All details about the visitor's browser

Alert user, depending on browser


HTML DOM appMinorVersion Property

Definition and Usage

The appMinorVersion property returns the minor version of the browser.

Syntax

navigator.appMinorVersion

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>MinorVersion: ")

document.write(navigator.appMinorVersion + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos

Detect the visitor's browser and browser version

More details about the visitor's browser

Alert user, depending on browser


HTML DOM appName Property

Definition and Usage

The appName property returns the name of the browser.

Syntax

navigator.appName

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>Name: ")

document.write(navigator.appName + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM appVersion Property

Definition and Usage

The appVersion property returns the platform and version of the browser.

Syntax

navigator.appVersion

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>Version: ")

document.write(navigator.appVersion + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos

Detect the visitor's browser and browser version

More details about the visitor's browser

All details about the visitor's browser

Alert user, depending on browser


HTML DOM Area Object

Area Object

The Area object represents an area of an image-map (An image-map is an image with clickable regions).

For each instance of an <area> tag in an HTML document, an Area object is created.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Area Object Properties

Property | Description | IE | F | O | W3C
accessKey | Sets or returns the keyboard key to access an area | 5 | 1 | No | Yes
 | Sets or returns an alternate text to be displayed, if a browser cannot show an area | 5 | 1 | 9 | Yes
coords | Sets or returns the coordinates of a clickable area in an image-map | 5 | 1 | 9 | Yes
hash | Sets or returns the anchor part of the URL in an area | 4 | 1 | No | No
 | Sets or returns the hostname and port of the URL in an area | 4 | 1 | No | No
href | Sets or returns the URL of a link in an image-map | 4 | 1 | 9 | Yes
id | Sets or returns the id of an area | 4 | 1 | 9 | Yes
noHref | Sets or returns whether an area should be active or inactive | 5 | 1 | 9 | Yes
pathname | Sets or returns the pathname of the URL in an area | 4 | 1 | 9 | No
protocol | Sets or returns the protocol of the URL in an area | 4 | 1 | 9 | No
search | Sets or returns the query string part of the URL in an area | 4 | 1 | 9 | No
shape | Sets or returns the shape of an area in an image-map | 5 | 1 | 9 | Yes
tabIndex | Sets or returns the tab order for an area | 5 | 1 | 9 | Yes
target | Sets or returns where to open the link-URL in an area | 4 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
className | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
title | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes


HTML DOM assign() Method

Definition and Usage

The assign() method loads a new document.

Syntax

location.assign(URL)

Example

The following example uses the assign() method to load a new document:

<html>

<head>

<script type="text/javascript">

function newDoc()

{

window.location.assign("http://www.w3schools.com")

}

</script>

</head>

<body>

<input type="button" value="Load new document"

onclick="newDoc()" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM availHeight Property

Definition and Usage

The availHeight property returns the height of the client's display screen - excluding the Windows Taskbar.

Syntax

screen.availHeight

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>Available Height: ")

document.write(screen.availHeight + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos

Detect details about the client's screen


HTML DOM availWidth Property

Definition and Usage

The availWidth property returns the width of the client's display screen - excluding the Windows Taskbar.

Syntax

screen.availWidth

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>Available Width: ")

document.write(screen.availWidth + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos

Detect details about the client's screen


HTML DOM axis Property

Definition and Usage

The axis property sets or returns a comma-delimited list of related table cells (categories).

The axis attribute defines a category name for a table cell.

Syntax

tabledataObject.axis=text

Example

The following example returns the axis of a table cell:

<<html>

<head>

<script type="text/javascript">

function alertAxis()

{

alert(document.getElementById('td3').axis);

}

</script>

</head>

<body>

<table border="1">

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>City</th>

</tr>

<tr>

<td id="td1">Harry</td>

<td id="td2">Potter</td>

<td id="td3" axis="location">NY</td>

</tr>

<tr>

<td id="td4">Peter</td>

<td id="td5">Griffin</td>

<td id="td6" axis="location">Las Vegas</td>

</tr>

</table>

<br />

<input type="button" onclick="alertAxis()"

value="Alert axis" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM back() Method

Definition and Usage

The back() method loads the previous URL in the history list.

This is the same as clicking the Back button and history.go(-1).

Syntax

history.back()

Example

The following example creates a back-button on a page:

<html>

<head>

<script type="text/javascript">

function goBack()

{

window.history.back()

}

</script>

</head>

<body>

<input type="button" value="Back" onclick="goBack()" />

</body>

</html>


HTML DOM background Property

Definition and Usage

The background property sets all background properties in one declaration.

Syntax

Object.style.background=background-color background-image

background-repeat background-attachment background-position

Parameter | Description | Values
background-color | Sets the background color of an element | color-name color-rgb color-hex transparent
background-image | Sets an image as the background | url(URL) none
background-repeat | Sets if/how a background-image will be repeated | repeat repeat-x repeat-y no-repeat
background-attachment | Sets if a background-image should be fixed or should scroll with the page | scroll fixed
background-position | 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

Example

The following example styles the background of a document:

<html>

<head>

<script type="text/javascript">

function setStyle()

{

document.body.style.background="#FFCC80 url(bgdesert.jpg)

repeat-y";

}

</script>

</head>

<body>

<input type="button" onclick="setStyle()"

value="Set background style" />

</body>

</html>

Try-It-Yourself Demos

Style the background of a document


HTML DOM backgroundColor Property

Definition and Usage

The backgroundColor property sets the background color of an element.

Syntax

Object.style.backgroundColor=color-name|color-rgb

|color-hex|transparent

Example

The following example changes the background color of the body:

<html>

<head>

<style type="text/css">

body

{

background-color:#B8BFD8;

}

</style>

<script type="text/javascript">

function changeStyle()

{

document.body.style.backgroundColor="#FFCC80";

}

</script>

</head>

<body>

<input type="button" onclick="changeStyle()"

value="Change background color" />

</body>

</html>

Try-It-Yourself Demos

Change the background color (hex)


HTML DOM backgroundImage Property

Definition and Usage

The backgroundImage property sets the background image of an element.

Syntax

Object.style.backgroundImage=url(URL)|none

Parameter | Description
url(URL) | The path to an image
none | No background image

Tips and Notes

Tip: In addition to the background-image you should also set a background-color. The background-color will be used if the image is unavailable.

Example

The following example sets the background image:

<html>

<head>

<script type="text/javascript">

function changeStyle()

{

document.body.style.backgroundColor="#FFCC80";

document.body.style.backgroundImage="url(bgdesert.jpg)";

}

</script>

</head>

<body>

<input type="button" onclick="changeStyle()"

value="Set background image" />

</body>

</html>

Try-It-Yourself Demos

Set a background image


HTML DOM backgroundPosition Property

Definition and Usage

The backgroundPosition property sets the position of a background-image.

Syntax

Object.style.backgroundPosition=position

Parameter | Description
top left top center top right center left center center center right bottom left bottom center bottom right | If you only specify one keyword, the second value will be "center".
x% y% | The x value indicates the horizontal position and the y value indicates the vertical position. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.
xpos ypos | The x value indicates the horizontal position and the y value indicates the vertical position. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and units

Example

The following example changes the position of the background-image:

<html>

<head>

<style type="text/css">

body

{

background-color:#FFCC80;

background-image:url(bgdesert.jpg);

background-repeat:no-repeat

}

</style>

<script type="text/javascript">

function changePosition()

{

document.body.style.backgroundPosition="bottom center";

}

</script>

</head>

<body>

<input type="button" onclick="changePosition()"

value="Change background-image position" />

</body>

</html>

Try-It-Yourself Demos

Change the position of the background-image


HTML DOM backgroundPositionX Property

Definition and Usage

The backgroundPositionX property sets the horizontal position of a background-image.

Syntax

Object.style.backgroundPositionX=position

Parameter | Description
left center right | Horizontal position
x% | Horizontal position. Left is 0%. Right is 100%
xpos | Horizontal position . Left is 0. Units can be pixels (0px) or any other CSS units

Example

The following example changes the horizontal position of the background-image:

<html>

<head>

<style type="text/css">

body

{

background-color:#FFCC80;

background-image:url(bgdesert.jpg);

background-repeat:no-repeat

}

</style>

<script type="text/javascript">

function changePosition()

{

document.body.style.backgroundPositionX="right";

}

</script>

</head>

<body>

<input type="button" onclick="changePosition()"

value="Change background-image's x-position" />

</body>

</html>

Try-It-Yourself Demos

Change the horizontal position of a background-image


HTML DOM backgroundPositionY Property

Definition and Usage

The backgroundPositionY property sets the vertical position of a background-image.

Syntax

Object.style.backgroundPositionY=position

Parameter | Description
top center bottom | Vertical position
y% | Vertical position. Left is 0%. Right is 100%
ypos | Vertical position . Left is 0. Units can be pixels (0px) or any other CSS units

Example

The following example changes the vertical position of the background-image:

<html>

<head>

<style type="text/css">

body

{

background-color:#FFCC80;

background-image:url(bgdesert.jpg);

background-repeat:no-repeat

}

</style>

<script type="text/javascript">

function changePosition()

{

document.body.style.backgroundPositionY="bottom";

}

</script>

</head>

<body>

<input type="button" onclick="changePosition()"

value="Change background-image's y-position" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM backgroundRepeat Property

Definition and Usage

The backgroundRepeat property sets whether or not a background-image should be repeated.

Syntax

Object.style.backgroundRepeat=repeat_value

Parameter | Description
repeat | Default. The background image will be repeated vertically and horizontally
repeat-x | The background image will be repeated horizontally
repeat-y | The background image will be repeated vertically
no-repeat | The background-image will not be repeated

Example

The following example repeats the background-image only on the y-axis:

<html>

<head>

<style type="text/css">

body

{

background-color:#FFCC80;

background-image:url(bgdesert.jpg);

}

</style>

<script type="text/javascript">

function changeRepeat()

{

document.body.style.backgroundRepeat="repeat-y";

}

</script>

</head>

<body>

<input type="button" onclick="changeRepeat()"

value="Repeat background-image only on the y-axis" />

</body>

</html>

Try-It-Yourself Demos

Change the repeat property of a background-image


HTML DOM Base Object

Base Object

The Base object represents an HTML base element.

For each instance of a <base> tag in an HTML document, a Base object is created.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Base Object Properties

Property | Description | IE | F | O | W3C
href | Sets or returns a base URL for all the links in a page | 5 | 1 | 9 | Yes
id | Sets or returns the id of the <base> element | 4 | 1 | 9 | Yes
target | Sets or returns the default target frame for all the links in a page | 5 | 1 | 9 | Yes


HTML DOM blur() Method

Definition and Usage

The blur() method is used to remove focus from a link.

Syntax

anchorObject.blur()

Example

<html>

<head>

<style type="text/css">

a:active {color:green}

</style>

<script type="text/javascript">

function getfocus()

{document.getElementById('myAnchor').focus()}

function losefocus()

{document.getElementById('myAnchor').blur()}

</script>

</head>

<body>

<a id="myAnchor"

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

<br /><br/>

<input type="button" onclick="getfocus()" value="Get focus">

<input type="button" onclick="losefocus()" value="Lose focus">

</body>

</html>

Try-It-Yourself Demos

Using focus() and blur()


HTML DOM blur() Method

Definition and Usage

The blur() method is used to remove focus from a button.

Syntax

buttonObject.blur()

Example

The following example removes focus from a button:

<html>

<head>

<script type="text/javascript">

function removeFocus()

{

document.getElementById('button1').blur()

}

</script>

</head>

<body>

<form>

<input type="button" id="button1" value="Button1" />

<br />

<input type="button" onclick="removeFocus()"

value="Remove focus from Button 1" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM blur() Method

Definition and Usage

The blur() method is used to remove focus from a password field.

Syntax

passwordObject.blur()

Example

The following example sets and removes focus from a password field:

<html>

<head>

<script type="text/javascript">

function setFocus()

{

document.getElementById('password1').focus()

}

function loseFocus()

{

document.getElementById('password1').blur()

}

</script>

</head>

<body>

<form>

<input type="password" id="password1" value="thgrt456" />

<input type="button" onclick="setFocus()" value="Set focus" />

<input type="button" onclick="loseFocus()" value="Lose focus" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM blur() Method

Definition and Usage

The focus() method is used to remove focus from a dropdown list.

Syntax

selectObject.blur()

Example

The following example sets and removes focus from a dropdown list:

<html>

<head>

<script type="text/javascript">

function setFocus()

{

document.getElementById('select1').focus()

}

function loseFocus()

{

document.getElementById('select1').blur()

}

</script>

</head>

<body>

<form>

<select id="select1">

<option>Apple</option>

<option>Pear</option>

<option>Banana</option>

<option>Orange</option>

</select>

<br /><br />

<input type="button" onclick="setFocus()" value="Set focus" />

<input type="button" onclick="loseFocus()" value="Lose focus" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM blur() Method

Definition and Usage

The blur() method is used to remove focus from a text field.

Syntax

textObject.blur()

Example

The following example sets and removes focus from a text field:

<html>

<head>

<script type="text/javascript">

function setFocus()

{

document.getElementById('text1').focus()

}

function loseFocus()

{

document.getElementById('text1').blur()

}

</script>

</head>

<body>

<form>

<input type="text" id="text1" />

<br />

<input type="button" onclick="setFocus()" value="Set focus" />

<input type="button" onclick="loseFocus()" value="Lose focus" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM blur() Method

Definition and Usage

The blur() method removes focus from the current window.

Syntax

window.blur()

Example

The following example assures that the new window does NOT get focus:

<html>

<body>

<script type="text/javascript">

myWindow=window.open('','','width=200,height=100')

myWindow.document.write("This is 'myWindow'")

myWindow.blur()

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM Body Object

Body Object

The Body object represents the body of the document (the HTML body).

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Body Object Properties

Property | Description | IE | F | O | W3C
className | Sets or returns the class attribute of the element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
id | Sets or returns the id of the body | 5 | 1 | 9 | Yes
 | Sets or returns the language code for the element | 5 | 1 | 9 | Yes
title | Sets or returns the element's advisory title | 5 | 1 | 9 | Yes


HTML DOM border Property

Definition and Usage

The border property sets or returns the width of the border around an image.

Syntax

imageObject.border=pixels

Example

The following example changes the border text of an image:

<<html>

<head>

<script type="text/javascript">

function changeBorder()

{

document.getElementById("compman").border="3"

}

</script>

</head>

<body>

<img id="compman" src="compman.gif" alt="Computerman" />

<br /><br />

<input type="button" onclick="changeBorder()"

value="Change border" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM border Property

Definition and Usage

The border property sets all border properties in one declaration.

Syntax

Object.style.border=borderWidth borderStyle borderColor

Possible Values

Value | Description | Values
borderWidth | Sets the width of the border | thin medium thick length
borderStyle | Sets the style of the border | none hidden dotted dashed solid double groove ridge inset outset
borderColor | Sets the color of the border | color-name color-rgb color-hex transparent

Example

The following example changes the border of an element:

<html>

<head>

<style type="text/css">

p

{

border: thin dotted #FF0000

}

</style>

<script type="text/javascript">

function changeBorder()

{

document.getElementById("p1").style.border="thick solid #0000FF";

}

</script>

</head>

<body>

<input type="button" onclick="changeBorder()"

value="Change border" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM border Property

Definition and Usage

The border property sets or returns the width (in pixels) of the table border.

Syntax

tableObject.border=pixels

Example

<html>

<head>

<script type="text/javascript">

function changeBorder()

{

document.getElementById('myTable').border="10"

}

</script>

</head>

<body>

<table border="1" id="myTable">

<tr>

<td>100</td>

<td>200</td>

</tr>

<tr>

<td>300</td>

<td>400</td>

</tr>

</table>

<br />

<input type="button" onclick="changeBorder()"

value="Change Border">

</body>

</html>

Try-It-Yourself Demos


HTML DOM borderBottomColor Property

Definition and Usage

The borderBottomColor property sets the color of the bottom border of an element.

Syntax

Object.style.borderBottomColor=color-name|color-rgb|color-hex

Example

The following example changes the color of the bottom border:

<html>

<head>

<style type="text/css">

p {border: thick solid #FF0000}

</style>

<script type="text/javascript">

function changeBorderColor()

{

document.getElementById("p1").style.borderBottomColor="blue";

}

</script>

</head>

<body>

<input type="button" onclick="changeBorderColor()"

value="Change border color" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

borderBottomColor - Change the color of the bottom border


HTML DOM borderBottomStyle Property

Definition and Usage

The borderBottomStyle property sets the style of the bottom border.

Syntax

Object.style.borderBottomStyle=style

Possible Values

Value | Description
none | Defines no border
hidden | Same as "none", except in border conflict resolution for table elements
dotted | Defines a dotted border
dashed | Defines a dashed border
solid | Defines a solid border
double | Defines two borders. The width of the two borders are the same as the border-width value
groove | Defines a 3D grooved border. The effect depends on the border-color value
ridge | Defines a 3D ridged border. The effect depends on the border-color value
inset | Defines a 3D inset border. The effect depends on the border-color value
outset | Defines a 3D outset border. The effect depends on the border-color value

Example

The following example changes the style of the bottom border:

<html>

<head>

<style type="text/css">

p

{

border: thick solid #FF0000

}

</style>

<script type="text/javascript">

function changeBorder()

{

document.getElementById("p1").style.borderBottomStyle="dotted";

}

</script>

</head>

<body>

<input type="button" onclick="changeBorder()"

value="Change bottom border" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

borderBottomStyle - Change the style of the bottom border


HTML DOM borderBottomWidth Property

Definition and Usage

The borderBottomWidth property sets the width of the bottom border.

Syntax

Object.style.borderBottomWidth=thin|medium|thick|length

Possible Values

Value | Description
thin | Defines a thin border
medium | Defines a medium border
thick | Defines a thick border
length | Allows you to define the thickness of the border

Example

The following example changes the width of the bottom border:

<html>

<head>

<style type="text/css">

p

{

border: thin solid #FF0000

}

</style>

<script type="text/javascript">

function changeBorderWidth()

{

document.getElementById("p1").style.borderBottomWidth="thick";

}

</script>

</head>

<body>

<input type="button" onclick="changeBorderWidth()"

value="Change bottom border" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

borderBottomWidth - Change the width of the bottom border


HTML DOM borderCollapse Property

Definition and Usage

The borderCollapse property sets whether a table border should be collapsed into a single border or detached as in standard HTML.

Syntax

Object.style.borderCollapse=collapse|separate

Possible Values

Value | Description
separate | Default. Borders are detached
collapse | Borders are collapsed into a single border when possible

Example

The following example collapses a table border:

<html>

<head>

<script type="text/javascript">

function setBorderCollapse()

{

document.getElementById('myTable').style.borderCollapse="collapse"

}

</script>

</head>

<body>

<table border="1" id="myTable">

<tr>

  <td>100</td>

  <td>200</td>

</tr>

<tr>

  <td>300</td>

  <td>400</td>

</tr>

</table>

<br />

<input type="button" onclick="setBorderCollapse()"

value="Collapse border">

</body>

</html>

Try-It-Yourself Demos

borderCollapse - Collapse the table border into a single border


HTML DOM borderColor Property

Definition and Usage

The borderColor property sets the color of the border around an element.

This property can take from one to four colors:

· If you specify one color, like: table {border-color: red} - all four borders will be red
· If you specify two colors, like: table {border-color: red green} - the top and bottom border will be red, left and right border will be green
· If you specify three colors, like: table {border-color: red green blue}- the top border will be red, left and right border will be green, bottom border will be blue
· If you specify four colors, like: table {border-color: red green blue yellow} - the top border will be red, right border will be green, bottom border will be blue, left border will be yellow

Syntax

Object.style.borderColor=color-name|color-rgb|color-hex|transparent

Example

The following example changes the color of the borders:

<html>

<head>

<style type="text/css">

p

{

border: thick solid #FF0000

}

</style>

<script type="text/javascript">

function changeBorderColor()

{

document.getElementById("p1").style.borderColor="#0000FF #00FF00";

}

</script>

</head>

<body>

<input type="button" onclick="changeBorderColor()"

value="Change border color" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

borderColor - Change the color of the borders


HTML DOM borderLeft Property

Definition and Usage

The borderLeft property sets all properties for the left border in one declaration.

Syntax

Object.style.borderLeft=borderWidth borderStyle borderColor

Possible Values

Value | Description | Values
borderWidth | Sets the width of the border | thin medium thick length
borderStyle | Sets the style of the border | none hidden dotted dashed solid double groove ridge inset outset
borderColor | Sets the color of the border | color-name color-rgb color-hex transparent

Example

The following example changes the width, style, and color of the left border:

<html>

<head>

<style type="text/css">

p

{

border: thin dotted #FF0000

}

</style>

<script type="text/javascript">

function changeBorder()

{

document.getElementById("p1").style.borderLeft="thick solid #0000FF";

}

</script>

</head>

<body>

<input type="button" onclick="changeBorder()"

value="Change left border" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

borderLeft - Change width, style, and color of the left border


HTML DOM borderLeftColor Property

Definition and Usage

The borderLeftColor property sets the color of the left border of an element.

Syntax

Object.style.borderLeftColor=color-name|color-rgb|color-hex|transparent

Example

The following example changes the color of the left border:

<html>

<head>

<style type="text/css">

p

{

border: thick solid #FF0000

}

</style>

<script type="text/javascript">

function changeBorderColor()

{

document.getElementById("p1").style.borderLeftColor="#0000FF";

}

</script>

</head>

<body>

<input type="button" onclick="changeBorderColor()"

value="Change left border" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

borderleftColor - Change the color of the left border


HTML DOM borderLeftStyle Property

Definition and Usage

The borderLeftStyle property sets the style of the left border.

Syntax

Object.style.borderLeftStyle=style

Possible Values

Value | Description
none | Defines no border
hidden | Same as "none", except in border conflict resolution for table elements
dotted | Defines a dotted border
dashed | Defines a dashed border
solid | Defines a solid border
double | Defines two borders. The width of the two borders are the same as the border-width value
groove | Defines a 3D grooved border. The effect depends on the border-color value
ridge | Defines a 3D ridged border. The effect depends on the border-color value
inset | Defines a 3D inset border. The effect depends on the border-color value
outset | Defines a 3D outset border. The effect depends on the border-color value

Example

The following example changes the style of the left border:

<html>

<head>

<style type="text/css">

p

{

border: thick solid #FF0000;

}

</style>

<script type="text/javascript">

function changeBorder()

{

document.getElementById("p1").style.borderLeftStyle="dotted";

}

</script>

</head>

<body>

<input type="button" onclick="changeBorder()"

value="Change left border" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

borderLeftStyle - Change the style of the left border


HTML DOM borderLeftWidth Property

Definition and Usage

The borderLeftWidth property sets the width of the left border.

Syntax

Object.style.borderLeftWidth=thin|medium|thick|length

Possible Values

Value | Description
thin | Defines a thin border
medium | Defines a medium border
thick | Defines a thick border
length | Allows you to define the thickness of the borders

Example

The following example changes the width of the left border:

<html>

<head>

<style type="text/css">

p

{

border: thin solid #FF0000;

}

</style>

<script type="text/javascript">

function changeBorderWidth()

{

document.getElementById("p1").style.borderLeftWidth="thick";

}

</script>

</head>

<body>

<input type="button" onclick="changeBorderWidth()"

value="Change left border" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

borderLeftWidth - Change the width of the left border


HTML DOM borderRightColor Property

Definition and Usage

The borderRightColor property sets the color of the right border.

Syntax

Object.style.borderRightColor=color-name|color-rgb|color-hex|transparent

Example

The following example changes the color of the right border:

<html>

<head>

<style type="text/css">

p

{

border: thick solid #FF0000;

}

</style>

<script type="text/javascript">

function changeBorderColor()

{

document.getElementById("p1").style.borderRightColor="#0000FF";

}

</script>

</head>

<body>

<input type="button" onclick="changeBorderColor()"

value="Change right border" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

borderRightColor - Change the color of the right border


HTML DOM borderRightStyle Property

Definition and Usage

The borderRightStyle property sets the style of the right border.

Syntax

Object.style.borderRightStyle=style

Possible Values

Value | Description
none | Defines no border
hidden | Same as "none", except in border conflict resolution for table elements
dotted | Defines a dotted border
dashed | Defines a dashed border
solid | Defines a solid border
double | Defines two borders. The width of the two borders are the same as the border-width value
groove | Defines a 3D grooved border. The effect depends on the border-color value
ridge | Defines a 3D ridged border. The effect depends on the border-color value
inset | Defines a 3D inset border. The effect depends on the border-color value
outset | Defines a 3D outset border. The effect depends on the border-color value

Example

The following example changes the style of the right side of the border:

<html>

<head>

<style type="text/css">

p

{

border: thick solid #FF0000;

}

</style>

<script type="text/javascript">

function changeBorder()

{

document.getElementById("p1").style.borderRightStyle="dotted";

}

</script>

</head>

<body>

<input type="button" onclick="changeBorder()"

value="Change right border" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM borderRightWidth Property

Definition and Usage

The borderRightWidth property sets the width of the right border of an element.

Syntax

Object.style.borderRightWidth=thin|medium|thick|length

Possible Values

Value | Description
thin | Defines a thin border
medium | Defines a medium border
thick | Defines a thick border
length | Allows you to define the thickness of the border

Example

The following example changes the width of the right border:

<html>

<head>

<style type="text/css">

p

{

border: thin solid #FF0000

}

</style>

<script type="text/javascript">

function changeBorderWidth()

{

document.getElementById("p1").style.borderRightWidth="thick";

}

</script>

</head>

<body>

<input type="button" onclick="changeBorderWidth()"

value="Change right border width" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

borderRightWidth - Change the width of the right border


HTML DOM borderSpacing Property

Definition and Usage

The borderSpacing property sets the distance between the borders of adjacent cells (only for the "separated borders" model).

Syntax

Object.style.borderSpacing=length,length

Possible Values

Value | Description
length | Defines the distance in px, cm, etc. If one length parameter is specified, it defines the horizontal and vertical spacing. If two length parameters are specified, the first sets the horizontal spacing and the second sets the vertical spacing

Example

The following example sets the distance between the borders of adjacent cells:

<html>

<head>

<script type="text/javascript">

function changeBorderSpacing()

{

document.getElementById('myTable').style.borderSpacing="10px"

}

</script>

</head>

<body>

<table border="1" id="myTable">

<tr>

  <td>100</td>

  <td>200</td>

</tr>

<tr>

  <td>300</td>

  <td>400</td>

</tr>

</table>

<input type="button" onclick="changeBorderSpacing()"

value="Change border spacing">

</body>

</html>

Try-It-Yourself Demos

borderSpacing - Change the distance between the borders of adjacent cells


HTML DOM borderStyle Property

Definition and Usage

The borderStyle property sets or returns the border style for all four sides in one.

This property can take one to four styles.

Syntax

Object.style.borderStyle=style

Possible Values

Value | Description
none | Defines no border
hidden | The same as "none", except in border conflict resolution for table elements
dotted | Defines a dotted border
dashed | Defines a dashed border
solid | Defines a solid border
double | Defines two borders. The width of the two borders are the same as the border-width value
groove | Defines a 3D grooved border. The effect depends on the border-color value
ridge | Defines a 3D ridged border. The effect depends on the border-color value
inset | Defines a 3D inset border. The effect depends on the border-color value
outset | Defines a 3D outset border. The effect depends on the border-color value

Example

The following example changes the style of the border:

<html>

<head>

<style>

p

{

border: thick solid #FF0000

}

</style>

<script type="text/javascript">

function changeBorder()

{

document.getElementById("p1").style.borderStyle="dotted double";

}

</script>

</head>

<body>

<form>

<input type="button" onclick="changeBorder()"

value="Change paragraph border style" />

</form>

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM borderTop Property

Definition and Usage

The borderTop property sets all properties for the top border in one declaration.

Syntax

Object.style.borderTop=borderWidth borderStyle borderColor

Possible Values

Value | Description | Values
borderWidth | Sets the width of the border | thin medium thick length
borderStyle | Sets the style of the border | none hidden dotted dashed solid double groove ridge inset outset
borderColor | Sets the color of the border | color-name color-rgb color-hex transparent

Example

The following example changes the width, style, and color of the top border:

<html>

<head>

<style type="text/css">

p

{

border: thin dotted #FF0000

}

</style>

<script type="text/javascript">

function changeBorder()

{

document.getElementById("p1").style.borderTop="thick solid #0000FF";

}

</script>

</head>

<body>

<input type="button" onclick="changeBorder()"

value="Change top border" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

borderTop - Change width, style, and color of the top border


HTML DOM borderTopColor Property

Definition and Usage

The borderTopColor property sets the color of the top border of an element.

Syntax

Object.style.borderTopColor=color-name|color-RGB|color-hex

Example

The following example changes the color of the top border of a paragraph:

<html>

<head>

<style type="text/css">

p

{

border: thick solid #FF0000

}

</style>

<script type="text/javascript">

function changeBorderColor()

{

document.getElementById("p1").style.borderTopColor="#0000FF";

}

</script>

</head>

<body>

<input type="button" onclick="changeBorderColor()"

value="Change paragraph border color" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

borderTopColor - Change the color of the top border


HTML DOM borderTopStyle Property

Definition and Usage

The borderTopStyle property sets the style for the top border of an element.

Syntax

Object.style.borderTopStyle=style

Possible Values

Value | Description
none | Defines no border
hidden | Same as "none", except in border conflict resolution for table elements
dotted | Defines a dotted border
dashed | Defines a dashed border
solid | Defines a solid border
double | Defines two borders. The width of the two borders are the same as the border-width value
groove | Defines a 3D grooved border. The effect depends on the border-color value
ridge | Defines a 3D ridged border. The effect depends on the border-color value
inset | Defines a 3D inset border. The effect depends on the border-color value
outset | Defines a 3D outset border. The effect depends on the border-color value

Example

The following example changes the style of the top border of a paragraph:

<html>

<head>

<style type="text/css">

p

{

border: thick solid #FF0000

}

</style>

<script type="text/javascript">

function changeBorder()

{

document.getElementById("p1").style.borderTopStyle="dotted";

}

</script>

</head>

<body>

<input type="button" onclick="changeBorder()"

value="Change border style" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

borderTopStyle - Change the style of the top border


HTML DOM borderTopWidth Property

Definition and Usage

The borderTopWidth property sets the width of the top border of an element.

Syntax

Object.style.borderTopWidth=thin|medium|thick|length

Possible Values

Value | Description
thin | Defines a thin border
medium | Defines a medium border
thick | Defines a thick border
length | Allows you to define the thickness of the borders

Example

The following example changes the width of the top border:

<html>

<head>

<style type="text/css">

p

{

border: thin solid #FF0000

}

</style>

<script type="text/javascript">

function changeBorderWidth()

{

document.getElementById("p1").style.borderTopWidth="thick";

}

</script>

</head>

<body>

<input type="button" onclick="changeBorderWidth()"

value="Change border width" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

borderTopWidth - Change the width of the top border


HTML DOM bottom Property

Definition and Usage

The bottom property sets how far the bottom edge of an element is above/below the bottom edge of the parent element.

Syntax

Object.style.bottom=auto|%|length

Possible Values

Value | Description
auto | Lets the browser calculate the bottom position
% | Sets the bottom position in % from the bottom edge of the parent element
length | Sets the bottom position in px, cm, etc. from the bottom edge of the parent element. Negative values are allowed

Tips and Notes

Note: If the "position" property has a value of "static", the "bottom" property has no effect.

Example

The following example sets the bottom edge of a button:

<html>

<head>

<style type="text/css">

input

{

position:absolute;

}

</style>

<script type="text/javascript">

function setBottomEdge()

{

document.getElementById("b1").style.bottom="100px";

}

</script>

</head>

<body>

<input type="button" id="b1" onclick="setBottomEdge()"

value="Set bottom edge to 100 px" />

</body>

</html>

Try-It-Yourself Demos

bottom - Set the bottom edge of an element


HTML DOM browserLanguage Property

Definition and Usage

The browserLanguage property returns the current browser language.

Syntax

navigator.browserLanguage

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>BrowserLanguage: ")

document.write(navigator.browserLanguage + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos

Detect the visitor's browser and browser version

Alert user, depending on browser


HTML DOM bufferDepth Property

Definition and Usage

The bufferDepth property sets or returns the bit depth of the color palette in the off-screen bitmap buffer.

Syntax

screen.bufferDepth=number

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>Buffer Depth: ")

document.write(screen.bufferDepth + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos

Detect details about the client's screen


HTML DOM Button Object

Button Object

The Button object represents a button in an HTML form.

For each instance of an <input type="button"> tag in an HTML form, a Button object is created.

You can access a button by searching through the elements[] array of the form, or by using document.getElementById().

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Button Object Properties

Property | Description | IE | F | O | W3C
accessKey | Sets or returns the keyboard key to access a button | 5 | 1 | 9 | Yes
alt | Sets or returns an alternate text to display if a browser does not support buttons | 5 | 1 | 9 | Yes
disabled | Sets or returns whether or not a button should be disabled | 5 | 1 | 9 | Yes
form | Returns a reference to the form that contains the button | 4 | 1 | 9 | Yes
id | Sets or returns the id of a button | 4 | 1 | 9 | Yes
name | Sets or returns the name of a button | 4 | 1 | 9 | Yes
tabIndex | Sets or returns the tab order for a button | 5 | 1 | 9 | Yes
type | Returns the type of form element a button is | 4 | 1 | 9 | Yes
value | Sets or returns the text that is displayed on the button | 4 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
 | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
title | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes

Button Object Methods

Method | Description | IE | F | O | W3C
blur() | Removes focus from a button | 4 | 1 | 9 | Yes
click() | Simulates a mouse-click on a button | 4 | 1 | 9 | Yes
focus() | Gives focus to a button | 4 | 1 | 9 | Yes


HTML DOM Button Object

Button Object

The Button object represents a push button.

For each instance of a <button> tag in an HTML document, a Button object is created.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Button Object Properties

Property | Description | IE | F | O | W3C
accessKey | Sets or returns the keyboard key to access a button | 6 | 1 | 9 | Yes
disabled | Sets or returns whether a button should be disabled | 6 | 1 | 9 | Yes
form | Returns a reference to the form that contains the button | 6 | 1 | 9 | Yes
 | Sets or returns the id of a button | 6 | 1 | 9 | Yes
name | Sets or returns the name of a button | 6 | 1 | 9 | Yes
tabIndex | Sets or returns the tab order for a button | 6 | 1 | 9 | Yes
type | Returns the type of form element a button is | 6 | 1 | 9 | Yes
value | Sets or returns the text that is displayed on a button | 6 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
 | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
title | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes


HTML DOM caption Property

Definition and Usage

The caption property sets or returns the caption element of a table.

The <caption> element defines a table caption. The <caption> tag must be inserted immediately after the <table> tag. You can specify only one caption per table. Usually the caption will be centered above the table.

Syntax

tableObject.caption=captionObject

Example

The following example returns the text in the <caption> element of a table:

<html>

<head>

<script type="text/javascript">

function alertCaption()

{

alert(document.getElementById("table1").caption.innerHTML);

}

</script>

</head>

<body>

<table id="table1" border="1">

<caption>This is a table caption</caption>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

</table>

<br />

<input type="button" onclick=alertCaption()

value="Alert table caption" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM captionSide Property

Definition and Usage

The captionSide property sets the position of the table caption.

Syntax

Object.style.captionSide=top|bottom|left|right

Possible Values

Value | Description
top | Default. Positions the table caption above the table
bottom | Positions the table caption below the table
left | Positions the table caption to the left of the table
right | Positions the table caption to the right of the table

Example

The following example moves the table caption:

<html>

<head>

<style type="text/css">

caption

{

caption-side:bottom;

}

</style>

<script type="text/javascript">

function moveCaption()

{

document.getElementById('myTable').style.captionSide="right"

}

</script>

</head>

<body>

<table border="1" id="myTable">

<caption>This is a caption</caption>

<tr>

  <td>100</td>

  <td>200</td>

</tr>

<tr>

  <td>300</td>

  <td>400</td>

</tr>

</table>

<br />

<input type="button" onclick="moveCaption()"

value="Move table caption">

</body>

</html>

Try-It-Yourself Demos

captionSide - Position the table caption


HTML DOM cellIndex Property

Definition and Usage

The cellIndex property returns the cell index (position) of the cell in the cells collection of a row.

Syntax

tabledataObject.cellIndex

Example

The following example returns the cell index of two cells:

<html>

<head>

<script type="text/javascript">

function alertTd1()

{

alert(document.getElementById('td1').cellIndex);

}

function alertTd2()

{

alert(document.getElementById('td2').cellIndex);

}

</script>

</head>

<body>

<table border="1">

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td id="td1">Peter</td>

<td id="td2">Griffin</td>

</tr>

</table>

<br />

<input type="button" onclick="alertTd1()"

value="Alert cell index of 'Peter'" />

<br />

<input type="button" onclick="alertTd2()"

value="Alert cell index of 'Griffin'" />

</body>

</html>

Try-It-Yourself Demos

Get the cell index of table cells


HTML DOM cellPadding Property

Definition and Usage

The cellPadding property sets or returns the amount of space (in pixels) between the cell border and the cell content.

Syntax

tableObject.cellPadding=pixels

Example

The following example changes the cell padding of a table:

<html>

<head>

<script type="text/javascript">

function padding()

{

document.getElementById('myTable').cellPadding="15"

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

<td>100</td>

<td>200</td>

</tr>

<tr>

<td>300</td>

<td>400</td>

</tr>

</table>

<br />

<input type="button" onclick="padding()" value="Change Cellpadding">

</body>

</html>

Try-It-Yourself Demos


HTML DOM cells Collection

Definition and Usage

The cells collection returns an array containing each cell in a table.

Syntax

tableObject.cells[]

Example

The following example uses the cells collection to alert the content of the first cell:

<html>

<head>

<script type="text/javascript">

function cell()

{

var x=document.getElementById('myTable').cells

alert(x[0].innerHTML)

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

<td>cell 1</td>

<td>cell 2</td>

</tr>

<tr>

<td>cell 3</td>

<td>cell 4</td>

</tr>

</table>

<br />

<input type="button" onclick="cell()" value="Alert first cell">

</body>

</html>

Try-It-Yourself Demos


HTML DOM cellSpacing Property

Definition and Usage

The cellSpacing property sets or returns the amount of space (in pixels) between the cells in a table.

Syntax

tableObject.cellSpacing=pixels

Example

The following example changes the cell spacing of a table:

<html>

<head>

<script type="text/javascript">

function spacing()

{

document.getElementById('myTable').cellSpacing="15"

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

<td>100</td>

<td>200</td>

</tr>

<tr>

<td>300</td>

<td>400</td>

</tr>

</table>

<br />

<input type="button" onclick="spacing()" value="Change Cellspacing">

</body>

</html>

Try-It-Yourself Demos

Change the cellPadding and cellSpacing of a table


HTML DOM charset Property

Definition and Usage

The charset property sets or returns the character-set of the linked resource.

Syntax

anchorObject.charset=charset

Example

The following example sets the character-set of the linked resource:

<html>

<body>

<p>

<a id="myAnchor"

href="http://www.w3schools.com">W3Schools.com</a>

</p>

<script type="text/javascript">

x=document.getElementById("myAnchor");

x.charset="ISO-8859-1";

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM charset Property

HTML DOM acceptCharset Property

Definition and Usage

The acceptCharset property sets or returns a comma separated list of possible character-sets for the form data.

Syntax

formObject.acceptCharset=charset

Example

The following example alerts the possible character-set for the form data:

<html>

<head>

<script type="text/javascript">

function showCharset()

{

var x=document.getElementById("myForm")

alert(x.acceptCharset)

}

</script>

</head>

<body>

<form id="myForm" acceptCharset="ISO-8859-1">

Text: <input type="text" value="Hello World!">

<input type="button" onclick="showCharset()"

value="Show charset">

</form>

</body>

</html>

Try-It-Yourself Demos

Get the possible character-sets for the form data


HTML DOM charset Property

Definition and Usage

The charset property sets or returns the character encoding of the target URL.

Syntax

linkObject.charset=character-encoding

Example

The following example sets the character encoding of the target URL:

<html>

<head>

<link rel="stylesheet" type="text/css" id="style1"

href="try_dom_link.css" />

</head>

<body>

<script type="text/javascript">

x=document.getElementById("style1");

x.charset="ISO-8859-1";

document.write("Charset=" + x.charset);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM Checkbox Object

Checkbox Object

The Checkbox object represents a checkbox in an HTML form.

For each instance of an <input type="checkbox"> tag in an HTML form, a Checkbox object is created.

You can access a checkbox by searching through the elements[] array of the form, or by using document.getElementById().

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Checkbox Object Properties

Property | Description | IE | F | O | W3C
accessKey | Sets or returns the keyboard key to access a checkbox | 4 | 1 | 9 | Yes
alt | Sets or returns an alternate text to display if a browser does not support checkboxes | 5 | 1 | 9 | Yes
 | Sets or returns whether or not a checkbox should be checked | 4 | 1 | 9 | Yes
defaultChecked | Returns the default value of the checked attribute | 4 | 1 | 9 | Yes
disabled | Sets or returns whether or not a checkbox should be disabled | 4 | 1 | 9 | Yes
form | Returns a reference to the form that contains the checkbox | 4 | 1 | 9 | Yes
id | Sets or returns the id of a checkbox | 4 | 1 | 9 | Yes
 | Sets or returns the name of a checkbox | 4 | 1 | 9 | Yes
 | Sets or returns the tab order for a checkbox | 4 | 1 | 9 | Yes
type | Returns the type of form element a checkbox is | 4 | 1 | 9 | Yes
value | Sets or returns the value of the value attribute of a checkbox | 4 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
className | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
title | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes

Checkbox Object Methods

Method | Description | IE | F | O | W3C
 | Removes focus from a checkbox | 4 | 1 | 9 | Yes
click() | Simulates a mouse-click in a checkbox | 4 | 1 | 9 | Yes
focus() | Gives focus to a checkbox | 4 | 1 | 9 | Yes


HTML DOM checked Property

Definition and Usage

The checked property sets or returns whether or not a checkbox should be checked.

Syntax

checkboxObject.checked=true|false

Example

<html>

<head>

<script type="text/javascript">

function check()

{

document.getElementById("check1").checked=true

}

function uncheck()

{

document.getElementById("check1").checked=false

}

</script>

</head>

<body>

<form>

<input type="checkbox" id="check1" />

<input type="button" onclick="check()"

value="Check Checkbox" />

<input type="button" onclick="uncheck()"

value="Uncheck Checkbox" />

</form>

</body>

</html>

Try-It-Yourself Demos

Check and uncheck a checkbox


HTML DOM checked Property

Definition and Usage

The checked property sets or returns whether or not a radio button is checked.

Syntax

radioObject.checked=true|false

Example

The following example checks and un-checks a radio button:

<html>

<head>

<script type="text/javascript">

function check()

{

document.getElementById("radio1").checked=true

}

function uncheck()

{

document.getElementById("radio1").checked=false

}

</script>

</head>

<body>

<form>

<input type="radio" id="radio1" />

<input type="button" onclick="check()" value="Check" />

<input type="button" onclick="uncheck()" value="Uncheck" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM className Property

Definition and Usage

The className property sets or returns the class attribute of the element.

Syntax

bodyObject.className=classname

Example

The following example shows two methods on how to get the class attribute for the <body> element:

<html>

<body id="myid" class="mystyle">

<script type="text/javascript">

x=document.getElementsByTagName('body')[0];

document.write("Body CSS class: " + x.className);

document.write("<br />");

document.write("An alternate way: ");

document.write(document.getElementById('myid').className);

</script>

</body>

</html>

Output:

Body CSS class: mystyle

An alternate way: mystyle

Try-It-Yourself Demos


HTML DOM className Property

Definition and Usage

The className property sets or returns the class attribute of an element.

Syntax

object.className=classname

Example

The following example shows two methods on how to get the class attribute for the <body> element:

<html>

<body id="myid" class="mystyle">

<script type="text/javascript">

x=document.getElementsByTagName('body')[0];

document.write("Body CSS class: " + x.className);

document.write("<br />");

document.write("An alternate way: ");

document.write(document.getElementById('myid').className);

</script>

</body>

</html>

Output:

Body CSS class: mystyle

An alternate way: mystyle

Try-It-Yourself Demos


HTML DOM clear Property

Definition and Usage

The clear property sets on which sides of an element other floating elements are not allowed.

Syntax

Object.style.clear=left|right|both|none

Possible Values

Value | Description
left | No floating elements allowed on the left side
right | No floating elements allowed on the right side
both | No floating elements allowed on either the left or the right side
none | Allows floating elements on both sides

Example

The following example disallows floating elements on the left side of the text:

<html>

<head>

<style type="text/css">

img

{

float:left;

}

</style>

<script type="text/javascript">

function clearLeft()

{

document.getElementById("p1").style.clear="left";

}

</script>

</head>

<body>

<img src="logocss.gif" width="95" height="84" />

<p id="p1">This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.</p>

<input type="button" onclick="clearLeft()"

value="Clear left side of text" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM clearInterval() Method

Definition and Usage

The clearInterval() method cancels a timeout that is set with the setInterval() method.

The ID value returned by setInterval() is used as the parameter for the clearInterval() method.

Syntax

clearInterval(id_of_setinterval)

Example

The following example calls the clock() function every 50 millisecond. It also have a button to stop the clock:

<html>

<body>

<input type="text" id="clock" size="35" />

<script language=javascript>

var int=self.setInterval("clock()",50)

function clock()

{

var t=new Date()

document.getElementById("clock").value=t

}

</script>

</form>

<button onclick="int=window.clearInterval(int)">

Stop interval</button>

</body>

</html>

Try-It-Yourself Demos


HTML DOM clearTimeout() Method

Definition and Usage

The clearTimeout() method cancels a timeout that is set with the setTimeout() method.

Syntax

clearTimeout(id_of_settimeout)

Example

The following example calls the timedCount() function every second. It also have a button to stop the timed message:

<html>

<head>

<script type="text/javascript">

var c=0

var t

function timedCount()

{

document.getElementById('txt').value=c

c=c+1

t=setTimeout("timedCount()",1000)

}

function stopCount()

{

clearTimeout(t)

}

</script>

</head>

<body>

<form>

<input type="button" value="Start count!" onClick="timedCount()">

<input type="text" id="txt">

<input type="button" value="Stop count!" onClick="stopCount()">

</form>

</body>

</html>

Try-It-Yourself Demos

Timing event in an infinite loop - with a Stop button


HTML DOM click() Method

Definition and Usage

The click() method simulates a mouse-click on a button.

Syntax

buttonObject.click()

Example

The following example simulates a mouse-click on a button on body onload:

<html>

<head>

<script type="text/javascript">

function clickButton()

{

document.getElementById('button1').click()

}

function alertMsg()

{

alert("Button 1 was clicked!")

}

</script>

</head>

<body onload="clickButton()">

<form>

<input type="button" id="button1" onclick="alertMsg()"

value="Button 1" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM click() Method

Definition and Usage

The click() method is used to simulate a mouse-click on a radio button.

Syntax

radioObject.click()

Example

The following example simulates a mouse-click on a radio button:

<html>

<head>

<script type="text/javascript">

function clickRadio()

{

document.getElementById('radio1').click()

}

</script>

</head>

<body>

<form>

<input type="radio" id="radio1" />

<br />

<input type="button" onclick="clickRadio()"

value="Click radio button" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM clip Property

Definition and Usage

The clip property sets the shape of an element.

What happens if an image is larger than the element it goes inside? - The "clip" property lets you specify the dimensions of an element that should be visible, and the element is clipped into this shape, and displayed.

Syntax

Object.style.clip=rect(top,right,bottom,left)|auto

Possible Values

Value | Description
rect(top,right,bottom,left) | Sets the shape of the element
auto | The browser sets the shape of the element

Tips and Notes

Note: This property cannot be used for elements with an "overflow" property set to "visible".

Example

The following example clips an image into a specified shape:

<html>

<head>

<style type="text/css">

img

{

position:absolute;

top:100px;

}

</style>

<script type="text/javascript">

function clipImage()

{

document.getElementById("img1").style.clip="rect(0px,50px,50px,0px)";

}

</script>

</head>

<body>

<img id="img1" border="0" src="logocss.gif" width="95" height="84" />

<input type="button" onclick=clipImage() value="Clip image" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM close() Method

Definition and Usage

The close() method closes an output stream opened with the document.open method, and displays the collected data.

Syntax

document.close()

Example

<html>

<head>

<script type="text/javascript">

function createNewDoc()

{

var newDoc=document.open("text/html","replace");

var txt="<html><body>Learning about the DOM is FUN!</body></html>";

newDoc.write(txt);

newDoc.close();

}

</script>

</head>

<body>

<input type="button" value="Write to a new document"

onclick="createNewDoc()">

</body>

</html>

Try-It-Yourself Demos


HTML DOM close() Method

Definition and Usage

The close() method is used to close the current window.

Syntax

window.close()

Example

The following example closes the new window:

<html>

<head>

<script type="text/javascript">

function closeWin()

{

myWindow.close()

}

</script>

</head>

<body>

<script type="text/javascript">

myWindow=window.open('','','width=200,height=100')

myWindow.document.write("This is 'myWindow'")

</script>

<input type="button" value="Close 'myWindow'"

onclick="closeWin()" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM colorDepth Property

Definition and Usage

The colorDepth property returns the bit depth of the color palette on the destination device or buffer.

Syntax

screen.colorDepth

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>Color Depth: ")

document.write(screen.colorDepth + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos

Detect details about the client's screen


HTML DOM cols Property

Definition and Usage

The cols property sets or returns the number and size of columns in a frameset.

The comma-separated list of pixels and/or percentages defines the number and width of the columns.

Syntax

framesetObject.cols=col1,col2,col3....

Example

In our example we will first create an HTML document containing a frameset with two columns. Each column is set to 50% of the browser window:

<html>

<frameset cols="50%,50%">

<frame src="frame_cols.htm">

<frame src="frame_a.htm">

</frameset>

</html>

The HTML document "frame_cols.htm" is put into the first column, and the HTML document "frame_a.htm" is put into the second column.

The source of "frame_cols.htm" is as follows:

<html>

<head>

<script type="text/javascript">

function changeCols()

{

parent.document.getElementById("main").cols="30%,70%"

}

function restoreCols()

{

parent.document.getElementById("main").cols="50%,50%"

}

</script>

</head>

<body>

<input type="button" onclick="changeCols()"

value="Change column size" />

<input type="button" onclick="restoreCols()"

value="Restore column size" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM cols Property

Definition and Usage

The cols property sets or returns the width of a text area.

Syntax

textareaObject.cols=number_of_columns

Example

The following example changes the width of a text area:

<html>

<head>

<script type="text/javascript">

function changeCols()

{

document.getElementById('txt1').cols="20";

}

</script>

</head>

<body>

<textarea id="txt1">

Hello world....This is a text area

</textarea>

<br />

<input type="button" onclick="changeCols()" value="Change width" />

</body>

</html>


HTML DOM colSpan Property

Definition and Usage

The colSpan property sets or returns the number of columns a table cell should span.

Syntax

tabledataObject.colSpan=number_of_columns

Example

The following example changes the number of columns a table cell should span:

<html>

<head>

<script type="text/javascript">

function changeColSpan()

{

document.getElementById("td1").colSpan="2";

}

</script>

</head>

<body>

<table border="1">

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td id="td1">Peter</td>

<td id="td2">Griffin</td>

</tr>

</table>

<br />

<input type="button" onclick=changeColSpan()

value="Change colspan" />

</body>

</html>

Try-It-Yourself Demos

Change the number of columns a table cell should span


HTML DOM complete Property

Definition and Usage

The complete property returns whether or not the browser has finished loading the image.

If the image is finished loaded it returns true, otherwise it returns false.

Syntax

imageObject.complete

Example

The following example checks if the image is finished loaded on body onload:

<html>

<head>

<script type="text/javascript">

function alertComplete()

{

alert(document.getElementById("compman").complete)

}

</script>

</head>

<body onload="alertComplete()">

<img id="compman" src="compman.gif" alt="Computerman"

width="107" height="98" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM confirm() Method

Definition and Usage

The confirm() method is used to display a dialog box with a specified message and an OK and a Cancel button.

Syntax

confirm(message)

Example

<html>

<head>

<script type="text/javascript">

function disp_confirm()

{

var r=confirm("Press a button")

if (r==true)

  {

  document.write("You pressed OK!")

  }

else

  {

  document.write("You pressed Cancel!")

  }

}

</script>

</head>

<body>

<input type="button" onclick="disp_confirm()"

value="Display a confirm box" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM content Property

Definition and Usage

The content property sets or returns the value of the content attribute of a <meta> element.

Syntax

metaObject.content=text

Example

The following example has a <meta> tag that defines some keywords for search engines. The script below returns the value of the content attribute:

<html>

<head>

<meta name="keywords" content="HTML,DHTML,CSS,JavaScript" />

</head>

<body>

<script type="text/javascript">

x=document.getElementsByTagName("meta")[0];

document.write("Meta content: " + x.content);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM contentDocument Property

Definition and Usage

The contentDocument property returns the document the frame contains as an HTML object.

The returned object can be processed with all standard DOM methods.

Syntax

frameObject.contentDocument

Example

In our example we will first create an HTML document containing a frameset with two columns. Each column is set to 50% of the browser window:

<html>

<frameset cols="50%,50%">

  <frame id="leftFrame" src="frame_cdoc.htm">

  <frame id="rightFrame" src="frame_a.htm">

</frameset>

</html>

The HTML document "frame_cdoc.htm" is put into the first column, and the HTML document "frame_a.htm" is put into the second column.

The source of "frame_cdoc.htm" is as follows:

<html>

<head>

<script type="text/javascript">

function showCDoc()

{

var x=parent.document.getElementById("leftFrame")

alert(x.contentDocument.documentElement.tagName)

}

</script>

</head>

<body>

<input type="button" onclick="showCDoc()"

value="Show content-document's first tag" />

</body>

</html>

Try-It-Yourself Demos

Return the frame's document as an HTML object


HTML DOM contentDocument Property

Definition and Usage

The contentDocument property returns the iframe's document as an HTML object.

The returned object can be processed with all standard DOM methods.

Syntax

iframeObject.contentDocument

Example

The following example extracts the text from the first <h3> element in the document loaded in the iframe:

<html>

<head>

<script type="text/javascript">

function getTextNode()

{

var x=document.getElementById("frame1").contentDocument;

alert(x.getElementsByTagName("h3")[0].childNodes[0].nodeValue);

}

</script>

</head>

<body>

<iframe src="frame_a.htm" id="frame1"></iframe>

<br /><br />

<input type="button" onclick="getTextNode()" value="Get text" />

</body>

</html>

Try-It-Yourself Demos

Extract a text node from an iframe document


HTML DOM cookie Property

Definition and Usage

The cookie property sets or returns all cookies associated with the current document.

Syntax

document.cookie

Example

<html>

<body>

The cookies associated with this document is:

<script type="text/javascript">

document.write(document.cookie)

</script>

</body>

</html>

Try-It-Yourself Demos

Return the cookies associated with the current document


HTML DOM cookieEnabled Property

Definition and Usage

The cookieEnabled property returns a Boolean value that specifies whether cookies are enabled in the browser.

Syntax

navigator.cookieEnabled

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>CookieEnabled: ")

document.write(navigator.cookieEnabled + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos

More details about the visitor's browser

All details about the visitor's browser

Alert user, depending on browser


HTML DOM coords Property

Definition and Usage

The coords property sets or returns a comma-separated list with coordinates of a link in an image-map.

Syntax

anchorObject.coords=coordinates

Example

The following example returns the coordinates of a link in an image-map:

<html>

<body>

<img src="planets.gif"

width="145" height="126"

usemap="#planetmap" />

<map name="planetmap">

<area id="venus" shape="circle"

coords="124,58,8"

alt="Venus"

href="venus.htm" />

</map>

<p>Venus coordinates:

<script type="text/javascript">

x=document.getElementById("venus");

document.write(x.coords);

</script>

</p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM coords Property

Definition and Usage

The coords property sets or returns the coordinates of a clickable area in an image-map.

Syntax

areaObject.coords=coordinates

Example

The following example returns the coordinates of a clickable area in the image-map:

<html>

<body>

<img src="planets.gif"

width="145" height="126"

usemap="#planetmap" />

<map name="planetmap">

<area id="venus" shape="circle"

coords="124,58,8"

alt="Venus"

href="venus.htm" />

</map>

<p>Venus coordinates:

<script type="text/javascript">

x=document.getElementById("venus");

document.write(x.coords);

</script>

</p>

</body>

</html>

Try-It-Yourself Demos

Returns the coordinates of an area in an image-map


HTML DOM cpuClass Property

Definition and Usage

The cpuClass property returns the CPU class of the browser's system.

Syntax

navigator.cpuClass

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>CPUClass: ")

document.write(navigator.cpuClass + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos

Detect the visitor's browser and browser version

More details about the visitor's browser

All details about the visitor's browser

Alert user, depending on browser


HTML DOM createCaption() Method

Definition and Usage

The createCaption() method is used to create an empty caption element in a table.

Syntax

tableObject.createCaption()

Example

The following example creates a caption for the table:

<html>

<head>

<script type="text/javascript">

function createCaption()

{

var x=document.getElementById('myTable').createCaption()

x.innerHTML="My table caption"

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

<td>Row1 cell1</td>

<td>Row1 cell2</td>

</tr>

<tr>

<td>Row2 cell1</td>

<td>Row2 cell2</td>

</tr>

</table>

<br />

<input type="button" onclick="createCaption()"

value="Create caption">

</body>

</html>

Try-It-Yourself Demos

Create a caption for a table


HTML DOM createPopup() Method

Definition and Usage

The createPopup() method is used to create a pop-up window.

Syntax

window.createPopup()

Example

<html>

<head>

<script type="text/javascript">

function show_popup()

{

var p=window.createPopup()

var pbody=p.document.body

pbody.style.backgroundColor="lime"

pbody.style.border="solid black 1px"

pbody.innerHTML="This is a pop-up! Click outside to close."

p.show(150,150,200,50,document.body)

}

</script>

</head>

<body>

<button onclick="show_popup()">Create pop-up!</button>

</body>

</html>

Try-It-Yourself Demos

Create a pop-up


HTML DOM cssFloat Property

Definition and Usage

The cssFloat property sets where an image or text will appear (float) in another element.

Syntax

Object.style.cssFloat=left|right|none

Possible Values

Value | Description
left | The image or text will float to the left in the parent element
right | The image or text will float to the right in the parent element
none | The image or the text will be displayed just where it occurs in the parent element

Tips and Notes

Note: If there is too little space on a line for the floating element, it will jump down on the next line, and continue until a line has enough space.

Example

The following example sets the image to float to the left of the text:

<html>

<head>

<script type="text/javascript">

function setFloat()

{

document.getElementById("img1").style.cssFloat="left";

}

</script>

</head>

<body>

<img id="img1" src="logocss.gif" width="95" height="84" />

<p>This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.</p>

<input type="button" onclick="setFloat()"

value="Set image to float to the left" />

</body>

</html>

Try-It-Yourself Demos

cssFloat - Set an image to float to the left of a text


HTML DOM defaultChecked Property

Definition and Usage

The defaultChecked property returns the default value of the checked attribute.

This property returns true if the checkbox is checked by default, otherwise it returns false.

Syntax

checkboxObject.defaultChecked

Example

The following example returns the default value of the checked attribute:

<html>

<body>

<form>

<input type="checkbox" id="myCheck" checked="checked" />

</form>

<script type="text/javascript">

alert(document.getElementById("myCheck").defaultChecked)

</script>

</body>

</html>

Try-It-Yourself Demos

Return if a checkbox is checked by default

Check and uncheck a checkbox


HTML DOM defaultChecked Property

Definition and Usage

The defaultChecked property returns the default value of the checked attribute.

This property returns true if the radio button is checked by default, otherwise it returns false.

Syntax

radioObject.defaultChecked

Example

The following example returns the default value of the checked attribute:

<html>

<body>

<form>

<input type="radio" id="radio1" checked="checked" />

</form>

<script type="text/javascript">

alert(document.getElementById("radio1").defaultChecked);

</script>

</body>

</html>

Try-It-Yourself Demos

Return the default state of a radio button's checked attribute


HTML DOM defaultSelected Property

Definition and Usage

The defaultSelected property returns the default value of the selected attribute.

This property returns true if an option is selected by default, otherwise it returns false.

Note: If an option is default selected , it will be displayed first in the list.

Syntax

optionObject.defaultSelected

Example

The following example alerts if the chosen fruit is selected by default:

<html>

<head>

<script type="text/javascript">

function alertDefaultSelected()

{

var x=document.getElementById("mySelect").selectedIndex;

var y=document.getElementsByTagName("option");

var txt="Is " + y[x].text + " selected by default? ";

txt=txt + y[x].defaultSelected;

alert(txt);

}

</script>

</head>

<body>

<form>

Select your favorite fruit:

<select id="mySelect">

<option>Apple</option>

<option>Orange</option>

<option selected="selected">Pineapple</option>

<option>Banana</option>

</select>

<br />

<br />

<input type="button" onclick="alertDefaultSelected()"

value="Is the chosen fruit selected by default?">

</form>

</body>

</html>

Try-It-Yourself Demos

Check if an option is selected by default


HTML DOM defaultStatus Property

Definition and Usage

The defaultStatus property sets or returns the default text in the statusbar of the window.

The text will be displayed when the page loads.

Syntax

window.defaultStatus=sometext

Example

The following example sets the default text in the status bar:

<html>

<body>

<script type="text/javascript">

window.defaultStatus="This is the default text in the status bar!!"

</script>

<p>Look at the text in the statusbar.</p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM defaultValue Property

Definition and Usage

The defaultValue property sets or returns the default value of a text area.

Note: The default value of a text area is the text between the <textarea> and </textarea> tags.

Syntax

textareaObject.defaultValue=text

Example

The following example alerts the default value of a text area:

<html>

<head>

<script type="text/javascript">

function alertDefaultValue()

{

alert(document.getElementById('txt1').defaultValue);

}

</script>

</head>

<body>

<textarea id="txt1">

Hello world....This is a text area

</textarea>

<br />

<input type="button" onclick="alertDefaultValue()"

value="Alert default value" />

</body>

</html>


HTML DOM defaultValue Property

Definition and Usage

The defaultValue property sets or returns the default value of a text field.

Note: The default value is the value specified in the HTML "value" attribute.

Syntax

textObject.defaultValue=somevalue

Example

The following example gets the default value of the text field:

<html>

<head>

<script type="text/javascript">

function alertValue()

{

alert(document.getElementById("text1").defaultValue)

}

</script>

</head>

<body>

<form>

<input type="text" id="text1" value="Hello World!" />

<input type="button" id="button1" onclick="alertValue()"

value="Show default value" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM deleteCaption() Method

Definition and Usage

The deleteCaption() method is used to delete a caption element, and its content, from a table.

Syntax

tableObject.deleteCaption()

Example

The following example deletes the table caption:

<html>

<head>

<script type="text/javascript">

function deleteCaption()

{

document.getElementById('myTable').deleteCaption()

}

</script>

</head>

<body>

<table id="myTable" border="1">

<caption>My table caption</caption>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

</table>

<br />

<input type="button" onclick="deleteCaption()"

value="Delete caption" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM deleteCell() Method

Definition and Usage

The deleteCell() method is used to delete a cell in a table row.

Syntax

tablerowObject.deleteCell(index)

Example

The following example gets deletes a cell from a table row:

<html>

<head>

<script type="text/javascript">

function delCell()

{

document.getElementById('tr2').deleteCell(0)

}

</script>

</head>

<body>

<table border="1">

<tr id="tr1">

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr id="tr2">

<td>Peter</td>

<td>Griffin</td>

</tr>

</table>

<br />

<input type="button" onclick="delCell()" value="Delete cell">

</body>

</html>

Try-It-Yourself Demos


HTML DOM deleteRow() Method

Definition and Usage

The deleteRow() method is used to delete the row at the specified position from a table.

Syntax

tableObject.deleteRow(index)

Example

The following example deletes the first row of the table:

<html>

<head>

<script type="text/javascript">

function delRow()

{

document.getElementById('myTable').deleteRow(0)

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

<td>Row1 cell1</td>

<td>Row1 cell2</td>

</tr>

<tr>

<td>Row2 cell1</td>

<td>Row2 cell2</td>

</tr>

</table>

<br />

<input type="button" onclick="delRow()"

value="Delete first row">

</body>

</html>

Try-It-Yourself Demos

Delete rows from a table


HTML DOM deviceXDPI Property

Definition and Usage

The deviceXDPI property returns the number of horizontal dots per inch of the display screen.

Syntax

screen.deviceXDPI

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>Device XDPI: ")

document.write(screen.deviceXDPI + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos

Detect details about the client's screen


HTML DOM deviceYDPI Property

Definition and Usage

The deviceYDPI property returns the number of vertical dots per inch of the display screen.

Syntax

screen.deviceYDPI

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>Device YDPI: ")

document.write(screen.deviceYDPI + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM dir Property

Definition and Usage

The dir property sets or returns the direction of text for the element.

Syntax

bodyObject.dir=text-direction

Example

The following example shows two methods on how to get the text direction for the <body> element:

<html>

<body id="myid" dir="rtl">

<script type="text/javascript">

x=document.getElementsByTagName('body')[0];

document.write("Text direction: " + x.dir);

document.write("<br />");

document.write("An alternate way: ");

document.write(document.getElementById('myid').dir);

</script>

</body>

</html>

Output:

Text direction: rtl

An alternate way: rtl

Try-It-Yourself Demos


HTML DOM dir Property

Definition and Usage

The dir property sets or returns the text-direction for an element.

Syntax

object.dir=text-direction

Example

The following example shows two methods on how to get the text direction for the <body> element:

<html>

<body id="myid" dir="rtl">

<script type="text/javascript">

x=document.getElementsByTagName('body')[0];

document.write("Text direction: " + x.dir);

document.write("<br />");

document.write("An alternate way: ");

document.write(document.getElementById('myid').dir);

</script>

</body>

</html>

Output:

Text direction: rtl

An alternate way: rtl

Try-It-Yourself Demos


HTML DOM direction Property

Definition and Usage

The direction property sets the text direction of an element.

Syntax

Object.style.direction=ltr|rtl|inherit

Possible Values

Value | Description
ltr | Default. Content flows from left to right
rtl | Content flows from right to left
inherit | Content flow is inherited from parent element

Example

The following example sets the text to flow from right to left:

<html>

<head>

<script type="text/javascript">

function changeTextDirection()

{

document.getElementById("p1").style.direction="rtl";

}

</script>

</head>

<body>

<p id="p1">This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.</p>

<input type="button" onclick="changeTextDirection()"

value="Set text to flow right to left" />

</body>

</html>

Try-It-Yourself Demos

direction - Set text to flow from right to left


HTML DOM disabled Property

Definition and Usage

The disabled property sets or returns whether or not a button should be disabled.

Syntax

buttonObject.disabled=true|false

Example

The following example disables the button when clicking on it:

<html>

<head>

<script type="text/javascript">

function disableButton()

{

document.getElementById("myButton").disabled=true

}

</script>

</head>

<body>

<form>

<input type="button" id="myButton"

value="Click me!" onclick="disableButton()" />

</form>

</body>

</html>

Try-It-Yourself Demos

Alert id, type, and value of a Button + disable button


HTML DOM disabled Property

Definition and Usage

The disabled property sets or returns whether or not a checkbox should be disabled.

Syntax

checkboxObject.disabled=true|false

Example

The following example disables the checkbox:

<html>

<head>

<script type="text/javascript">

function disable()

{

document.getElementById("check1").disabled=true

}

</script>

</head>

<body>

<form>

<input type="checkbox" id="check1" />

<input type="button" onclick="disable()" value="Disable Checkbox" />

</form>

</body>

</html>

Try-It-Yourself Demos

Disable a checkbox


HTML DOM disabled Property

Definition and Usage

The disabled property sets or returns whether or not the target URL should be disabled.

Syntax

linkObject.disabled=true|false

Example

The following example disables the style sheet:

<html>

<head>

<link rel="stylesheet" type="text/css"

id="style1" href="try_dom_link.css" />

<script type="text/javascript">

function disableStyle()

{

document.getElementById("style1").disabled=true

}

</script>

</head>

<body>

<form>

<input type="button" id="button1" onclick="disableStyle()"

value="Disable style sheet" />

</form>

</body>

</html>

Try-It-Yourself Demos

Disable a style sheet


HTML DOM disabled Property

Definition and Usage

The disabled property sets or returns whether or not an option in a dropdown list should be disabled by default.

Note: The disabled attribute does not work properly in IE.

Syntax

optionObject.disabled=true|false

Example

The following example alerts if the chosen fruit is disabled by default:

<html>

<head>

<script type="text/javascript">

function alertDefaultDisabled()

{

var x=document.getElementById("mySelect").selectedIndex;

var y=document.getElementsByTagName("option");

alert("Is " + y[x].text + " disabled by default? " + y[x].disabled);

}

</script>

</head>

<body>

<form>

Select your favorite fruit:

<select id="mySelect">

<option>Apple</option>

<option>Orange</option>

<option disabled="disabled">Pineapple</option>

<option>Banana</option>

</select>

<br />

<br />

<input type="button" onclick="alertDefaultDisabled()"

value="Is the chosen fruit disabled by default?">

</form>

</body>

</html>

Try-It-Yourself Demos

Check if an option is disabled by default


HTML DOM disabled Property

Definition and Usage

The disabled property sets or returns whether or not a password field should be disabled.

Syntax

passwordObject.disabled=true|false

Example

The following example disables the password field:

<html>

<head>

<script type="text/javascript">

function disablePassword()

{

document.getElementById("password1").disabled=true

}

</script>

</head>

<body>

<form>

<input type="password" id="password1" />

<input type="button" id="button1" onClick="disablePassword()"

value="Disable password field" />

</form>

</body>

</html>

Try-It-Yourself Demos

Disable a password field


HTML DOM disabled Property

Definition and Usage

The disabled property sets or returns whether or not the button should be disabled.

Syntax

buttonObject.disabled=true|false

Example

The following example disables the button:

<html>

<head>

<script type="text/javascript">

function disableButton()

{

document.getElementById("myButton").disabled=true

}

</script>

</head>

<body>

<form>

<button id="myButton" onClick="disableButton()">

Click Me!</button>

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM disabled Property

Definition and Usage

The disabled property sets or returns whether or not a radio button should be disabled.

Syntax

radioObject.disabled=true|false

Example

The following example disables a radio button:

<html>

<head>

<script type="text/javascript">

function disable()

{

document.getElementById("gnome").disabled=true

}

</script>

</head>

<body>

<form>

Human: <input id="human" type="radio" name="creature"

value="Human" />

<br />

Animal: <input id="animal" type="radio" name="creature"

value="Animal" />

<br />

Gnome: <input id="gnome" type="radio" name="creature"

value="Gnome" />

<br /><br />

<input type="button" onclick="disable()"

value="Disable choice" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM disabled Property

Definition and Usage

The disabled property sets or returns whether or not a reset button should be disabled.

Syntax

resetObject.disabled=true|false

Example

The following example disables the reset button when clicking on it:

<html>

<head>

<script type="text/javascript">

function disableButton()

{

document.getElementById("reset1").disabled=true

}

</script>

</head>

<body>

<form>

<input type="reset" id="reset1" onclick="disableButton()" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM disabled Property

Definition and Usage

The disabled property sets or returns whether or not a dropdown list should be disabled.

Syntax

selectObject.disabled=true|false

Example

The following example disables and enables a dropdown list:

<html>

<head>

<script type="text/javascript">

function disable()

{

document.getElementById("mySelect").disabled=true

}

function enable()

{

document.getElementById("mySelect").disabled=false

}

</script>

</head>

<body>

<form>

<select id="mySelect">

<option>Apple</option>

<option>Pear</option>

<option>Banana</option>

<option>Orange</option>

</select>

<br /><br />

<input type="button" onclick="disable()" value="Disable list">

<input type="button" onclick="enable()" value="Enable list">

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM disabled Property

Definition and Usage

The disabled property sets or returns whether or not a submit button should be disabled.

Syntax

submitObject.disabled=true|false

Example

The following example disables the submit button when clicking on it:

<html>

<head>

<script type="text/javascript">

function disableButton()

{

document.getElementById("submit1").disabled=true

}

</script>

</head>

<body>

<form>

<input type="submit" id="submit1" onclick="disableButton()" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM disabled Property

Definition and Usage

The disabled property sets or returns whether or not a text area should be disabled.

Syntax

textareaObject.disabled=true|false

Example

The following example disables and enables a text area:

<html>

<head>

<script type="text/javascript">

function disable()

{

document.getElementById('txt1').disabled=true;

}

function enable()

{

document.getElementById('txt1').disabled=false;

}

</script>

</head>

<body>

<textarea id="txt1">

Hello world....This is a text area

</textarea>

<br />

<input type="button" onclick="disable()" value="Disable" />

<input type="button" onclick="enable()" value="Enable" />

</body>

</html>


HTML DOM disabled Property

Definition and Usage

The disabled property sets or returns whether or not a text field should be disabled.

Syntax

textObject.disabled=true|false

Example

The following example disables a text field:

<html>

<head>

<script type="text/javascript">

function disableField()

{

document.getElementById("text1").disabled=true

}

</script>

</head>

<body>

<form>

<input type="text" id="text1" value="Hello world!" />

<input type="button" id="button1" onclick="disableField()"

value="Disable text field" />

</form>

</body>

</html>

Try-It-Yourself Demos

Disable a text field


HTML DOM display Property

Definition and Usage

The display property sets how an element will be displayed.

Syntax

Object.style.display=value

Possible Values

Value | Description
none | The element will not be displayed
block | The element will be displayed as a block-level element, with a line break before and after the element
inline | The element will be displayed as an inline element, with no line break before or after the element
list-item | The element will be displayed as a list
run-in | The element will be displayed as block-level or inline element depending on context
compact | The element will be displayed as block-level or inline element depending on context
marker | This value sets content before or after a box to be a marker. Note: This value should only be used with :before and :after pseudo-elements. Otherwise this value is identical to "inline"
table | The element will be displayed as a block table (like <table>), with a line break before and after the table
inline-table | The element will be displayed as an inline table (like <table>), with no line break before or after the table
table-row-group | The element will be displayed as a group of one or more rows (like <tbody>)
table-header-group | The element will be displayed as a table header row (like <thead>)
table-footer-group | The element will be displayed as a table footer row (like <tfoot>)
table-row | The element will be displayed as a table row (like <tr>)
table-column-group | The element will be displayed as a group of one or more columns (like <colgroup>)
table-column | The element will be displayed as a column of cells (like <col>)
table-cell | The element will be displayed as a table cell (like <td> and <th>)
table-caption | The element will be displayed as a table caption (like <caption>)

Example

The following example sets an element to not be displayed:

<html>

<head>

<script type="text/javascript">

function removeElement()

{

document.getElementById("p1").style.display="none";

}

</script>

</head>

<body>

<h1>Hello</h1>

<p id="p1">This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.</p>

<input type="button" onclick="removeElement()"

value="Do not display paragraph" />

</body>

</html>

Try-It-Yourself Demos

display - Set an element to not be displayed


HTML DOM Document Object

Document Object

The Document object represents the entire HTML document and can be used to access all elements in a page.

The Document object is part of the Window object and is accessed through the window.document property.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Document Object Collections

Collection | Description | IE | F | O | W3C
anchors[] | Returns a reference to all Anchor objects in the document | 4 | 1 | 9 | Yes
forms[] | Returns a reference to all Form objects in the document | 4 | 1 | 9 | Yes
images[] | Returns a reference to all Image objects in the document | 4 | 1 | 9 | Yes
links[] | Returns a reference to all Area and Link objects in the document | 4 | 1 | 9 | Yes

Document Object Properties

Property | Description | IE | F | O | W3C
body | Gives direct access to the <body> element |  |  |  |
cookie | Sets or returns all cookies associated with the current document | 4 | 1 | 9 | Yes
domain | Returns the domain name for the current document | 4 | 1 | 9 | Yes
lastModified | Returns the date and time a document was last modified | 4 | 1 | No | No
 | Returns the URL of the document that loaded the current document | 4 | 1 | 9 | Yes
title | Returns the title of the current document | 4 | 1 | 9 | Yes
URL | Returns the URL of the current document | 4 | 1 | 9 | Yes

Document Object Methods

Method | Description | IE | F | O | W3C
close() | Closes an output stream opened with the document.open() method, and displays the collected data | 4 | 1 | 9 | Yes
getElementById() | Returns a reference to the first object with the specified id | 5 | 1 | 9 | Yes
getElementsByName() | Returns a collection of objects with the specified name | 5 | 1 | 9 | Yes
getElementsByTagName() | Returns a collection of objects with the specified tagname | 5 | 1 | 9 | Yes
open() | Opens a stream to collect the output from any document.write() or document.writeln() methods | 4 | 1 | 9 | Yes
 | Writes HTML expressions or JavaScript code to a document | 4 | 1 | 9 | Yes
writeln() | Identical to the write() method, with the addition of writing a new line character after each expression | 4 | 1 | 9 | Yes


HTML DOM domain Property

Definition and Usage

The domain property returns the domain name for the current document.

Syntax

document.domain

Example

<html>

<body>

The domain name for this document is:

<script type="text/javascript">

document.write(document.domain)

</script>

</body>

</html>

Try-It-Yourself Demos

Return the domain name of the current document


HTML DOM elements Collection

Definition and Usage

The elements collection returns an array containing each element in the form.

Syntax

formObject.elements[].property

Example

The following example outputs the value of all the form elements:

<html>

<body>

<form id="myForm">

Firstname: <input id="fname" type="text" value="Mickey" />

Lastname: <input id="lname" type="text" value="Mouse" />

<input id="sub" type="button" value="Submit" />

</form>

<p>Get the value of all the elements in the form:<br />

<script type="text/javascript">

var x=document.getElementById("myForm");

for (var i=0;i<x.length;i++)

{

document.write(x.elements[i].value);

document.write("<br />");

}

</script>

</p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM emptyCells Property

Definition and Usage

The emptyCells property sets whether or not to show empty cells in a table.

Syntax

Object.style.emptyCells=hide|show

Possible Values

Value | Description
hide | Default. No borders are drawn around empty cells
show | Borders are drawn around empty cells

Example

The following example changes how empty cells are shown:

<html>

<head>

<script type="text/javascript">

function showEmptyCells()

{

document.getElementById('myTable').style.emptyCells="show"

}

</script>

</head>

<body>

<table border="1" id="myTable">

<tr>

<td>100</td>

<td>200</td>

</tr>

<tr>

<td>300</td>

<td></td>

</tr>

</table>

<input type="button" onclick="showEmptyCells()"

value="Show empty cells">

</body>

</html>

Try-It-Yourself Demos


HTML DOM enctype Property

Definition and Usage

The enctype property sets or returns the MIME type used to encode the content of the form.

If the form has no enctype attribute, the default value when submitting text is "application/x-www-form-urlencoded".

When input type is "file", the value should be "multipart/form-data".

Syntax

formObject.encoding=encoding

Example

The following example returns the encoding type of the form:

<html>

<head>

<script type="text/javascript">

function showEnctype()

{

var x=document.getElementById("myForm")

alert(x.enctype)

}

</script>

</head>

<body>

<form id="myForm" enctype="application/x-www-form-urlencoded">

Name: <input type="text" value="Mickey Mouse" />

<input type="button" onclick="showEnctype()"

value="Show enctype" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM Event Object

The event object gives you information about an event that has occurred.

Examples

Which mouse button was clicked?

What are the coordinates of the cursor?

What is the unicode of the key pressed?

What are the coordinates of the cursor, relative to the screen?

What are the coordinates of the cursor?

Which eventype occured?

Event Object

The Event object represents the state of an event, such as the element in which the event occurred, the state of the keyboard keys, the location of the mouse, and the state of the mouse buttons.

Events are normally used in combination with functions, and the function will not be executed before the event occurs!

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Event Handlers

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 the attributes that can be inserted into HTML tags to define event actions.

Attribute | The event occurs when... | IE | F | O | W3C
onabort | Loading of an image is interrupted | 4 | 1 | 9 | Yes
onblur | An element loses focus | 3 | 1 | 9 | Yes
onchange | The content of a field changes | 3 | 1 | 9 | Yes
onclick | Mouse clicks an object | 3 | 1 | 9 | Yes
ondblclick | Mouse double-clicks an object | 4 | 1 | 9 | Yes
onerror | An error occurs when loading a document or an image | 4 | 1 | 9 | Yes
onfocus | An element gets focus | 3 | 1 | 9 | Yes
 | A keyboard key is pressed | 3 | 1 | No | Yes
onkeypress | A keyboard key is pressed or held down | 3 | 1 | 9 | Yes
onkeyup | A keyboard key is released | 3 | 1 | 9 | Yes
onload | A page or an image is finished loading | 3 | 1 | 9 | Yes
onmousedown | A mouse button is pressed | 4 | 1 | 9 | Yes
onmousemove | The mouse is moved | 3 | 1 | 9 | Yes
onmouseout | The mouse is moved off an element | 4 | 1 | 9 | Yes
onmouseover | The mouse is moved over an element | 3 | 1 | 9 | Yes
onmouseup | A mouse button is released | 4 | 1 | 9 | Yes
onreset | The reset button is clicked | 4 | 1 | 9 | Yes
onresize | A window or frame is resized | 4 | 1 | 9 | Yes
onselect | Text is selected | 3 | 1 | 9 | Yes
 | The submit button is clicked | 3 | 1 | 9 | Yes
onunload | The user exits the page | 3 | 1 | 9 | Yes

Mouse / Keyboard Attributes

Property | Description | IE | F | O | W3C
altKey | Returns whether or not the "ALT" key was pressed when an event was triggered | 6 | 1 | 9 | Yes
 | Returns which mouse button was clicked when an event was triggered | 6 | 1 | 9 | Yes
clientX | Returns the horizontal coordinate of the mouse pointer when an event was triggered | 6 | 1 | 9 | Yes
 | Returns the vertical coordinate of the mouse pointer when an event was triggered | 6 | 1 | 9 | Yes
ctrlKey | Returns whether or not the "CTRL" key was pressed when an event was triggered | 6 | 1 | 9 | Yes
metaKey | Returns whether or not the "meta" key was pressed when an event was triggered | 6 | 1 | 9 | Yes
relatedTarget | Returns the element related to the element that triggered the event | No | 1 | 9 | Yes
screenX | Returns the horizontal coordinate of the mouse pointer when an event was triggered | 6 | 1 | 9 | Yes
 | Returns the vertical coordinate of the mouse pointer when an event was triggered | 6 | 1 | 9 | Yes
shiftKey | Returns whether or not the "SHIFT" key was pressed when an event was triggered | 6 | 1 | 9 | Yes

Other Event Attributes

Property | Description | IE | F | O | W3C
 | Returns a Boolean value that indicates whether or not an event is a bubbling event | No | 1 | 9 | Yes
cancelable | Returns a Boolean value that indicates whether or not an event can have its default action prevented | No | 1 | 9 | Yes
currentTarget | Returns the element whose event listeners triggered the event | No | 1 | 9 | Yes
eventPhase | Returns which phase of the event flow is currently being evaluated |  |  |  | Yes
target | Returns the element that triggered the event | No | 1 | 9 | Yes
timeStamp | Returns the time stamp, in milliseconds, from the epoch (system start or event trigger) | No | 1 | 9 | Yes
type | Returns the name of the event | 6 | 1 | 9 | Yes


HTML DOM Example

An HTML DOM Example

The following example shows how the background color of an HTML document can be changed to yellow when a user clicks somewhere in the document:

<html>

<head>

<script type="text/javascript">

function ChangeColor()

{

document.body.bgColor="yellow"

}

</script>

</head>

<body onclick="ChangeColor()">

Click on this document!

</body>

</html>


HTML DOM FileUpload Object

FileUpload Object

For each instance of an <input type="file"> tag in an HTML form, a FileUpload object is created.

You can access a FileUpload object by searching through the elements[] array of the form, or by using document.getElementById().

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

FileUpload Object Properties

Property | Description | IE | F | O | W3C
accept | Sets or returns a comma-separated list of MIME types that indicates the MIME type of the file transfer |  |  |  | Yes
accessKey | Sets or returns the keyboard key to access the FileUpload object | 4 |  |  | Yes
alt | Sets or returns an alternate text to display if the browser does not support <input type="file"> |  |  |  | Yes
defaultValue | Sets or returns the initial value of the FileUpload object | 4 | 1 |  | Yes
disabled | Sets or returns whether or not the FileUpload object should be disabled | 4 |  |  | Yes
form | Returns a reference to the form that contains the FileUpload object | 4 | 1 |  | Yes
id | Sets or returns the id of the FileUpload object | 4 | 1 |  | Yes
name | Sets or returns the name of the FileUpload object | 4 | 1 |  | Yes
tabIndex | Sets or returns the index that defines the tab order for the FileUpload object | 4 |  |  | Yes
type | Returns the type of the form element. For a FileUpload object it will be "file" | 4 | 1 |  | Yes
value | Returns the file name of the FileUpload object after the text is set by user input | 4 | 1 |  | Yes

Standard Properties

Property | Description | IE | F | O | W3C
className | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
 | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
title | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes

FileUpload Object Methods

Method | Description | IE | F | O | W3C
blur() | Removes focus from the FileUpload object | 4 | 1 |  | Yes
focus() | Gives focus to the FileUpload object | 4 | 1 |  | Yes
select() | Selects the FileUpload object | 4 |  |  | Yes


HTML DOM focus() Method

Definition and Usage

The focus() method is used to give focus to a link.

Syntax

anchorObject.focus()

Example

<html>

<head>

<style type="text/css">

a:active {color:green}

</style>

<script type="text/javascript">

function getfocus()

{document.getElementById('myAnchor').focus()}

function losefocus()

{document.getElementById('myAnchor').blur()}

</script>

</head>

<body>

<a id="myAnchor"

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

<br /><br/>

<input type="button" onclick="getfocus()" value="Get focus">

<input type="button" onclick="losefocus()" value="Lose focus">

</body>

</html>

Try-It-Yourself Demos


HTML DOM focus() Method

Definition and Usage

The focus() method is used to give focus to a button.

Syntax

buttonObject.focus()

Example

The following example sets focus on a button:

<html>

<head>

<script type="text/javascript">

function setFocus()

{

document.getElementById('button1').focus()

}

</script>

</head>

<body>

<form>

<input type="button" id="button1" value="Button1" />

<br />

<input type="button" onclick="setFocus()"

value="Set focus to Button 1" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM focus() Method

Definition and Usage

The focus() method is used to set focus on a password field.

Syntax

passwordObject.focus()

Example

The following example sets and removes focus from a password field:

<html>

<head>

<script type="text/javascript">

function setFocus()

{

document.getElementById('password1').focus()

}

function loseFocus()

{

document.getElementById('password1').blur()

}

</script>

</head>

<body>

<form>

<input type="password" id="password1" value="thgrt456" />

<input type="button" onclick="setFocus()" value="Set focus" />

<input type="button" onclick="loseFocus()" value="Lose focus" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM focus() Method

Definition and Usage

The focus() method is used to give focus to a radio button.

Syntax

radioObject.focus()

Example

The following example sets focus to the "Male" radio button:

<html>

<body>

<form>

Male: <input id="male" type="radio" name="Sex"

value="Male" />

<br />

Female: <input id="female" type="radio" name="Sex"

value="Female" />

</form>

<script type="text/javascript">

document.getElementById('male').focus();

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM focus() Method

Definition and Usage

The focus() method is used to give focus to a dropdown list.

Syntax

selectObject.focus()

Example

The following example sets focus to the dropdown list:

<html>

<head>

<script type="text/javascript">

function setFocus()

{

document.getElementById('select1').focus()

}

</script>

</head>

<body>

<form>

<select id="select1">

<option>Apple</option>

<option>Pear</option>

<option>Banana</option>

<option>Orange</option>

</select>

<br /><br />

<input type="button" onclick="setFocus()" value="Set focus" />

</form>

</body>

</html>

Try-It-Yourself Demos

Set and remove focus from a dropdown list


HTML DOM focus() Method

Definition and Usage

The focus() method is used to give focus to a text field.

Syntax

textObject.focus()

Example

The following example sets and removes focus from a text field:

<html>

<head>

<script type="text/javascript">

function setFocus()

{

document.getElementById('text1').focus()

}

function loseFocus()

{

document.getElementById('text1').blur()

}

</script>

</head>

<body>

<form>

<input type="text" id="text1" />

<br />

<input type="button" onclick="setFocus()" value="Set focus" />

<input type="button" onclick="loseFocus()" value="Lose focus" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM focus() Method

Definition and Usage

The focus() method sets focus to the current window.

Syntax

window.focus()

Example

The following example assures that the new window gets focus:

<html>

<body>

<script type="text/javascript">

myWindow=window.open('','','width=200,height=100')

myWindow.document.write("This is 'myWindow'")

myWindow.focus()

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM font Property

Definition and Usage

The font property sets all font properties in one declaration.

Syntax

Object.style.font=value

Possible Values

Value | Description
fontStyle fontVariant fontWeight fontSize/lineHeight fontFamily | Sets the properties for a font
caption | Defines the font used for captioned controls (like buttons, drop-downs, etc.)
icon | Defines the font used to label icons
menu | Defines the font used in menus
message-box | Defines the font used in dialog boxes
small-caption | Defines the font used for labeling small controls
status-bar | Defines the font used in the window status bar

Example

The following example changes the font of a text:

<html>

<head>

<script type="text/javascript">

function setFont()

{

document.getElementById("p1").style.font="italic bold 12px arial,serif";

}

</script>

</head>

<body>

<p id="p1">This is an example paragraph.</p>

<input type="button" onclick="setFont()" value="Change paragraph style" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM fontFamily Property

Definition and Usage

The fontFamily property specifies a list of font-family names and/or generic-family names for an element.

The browser will use the first value it recognizes.

There are two types of font-family values:

· font-family: The name of a font-family, like "verdana" or "arial"
· generic-family: The name of a generic font-family, like "serif" or "sans-serif"

Syntax

Object.style.fontFamily=font1,font2,....

Possible Values

Value | Description
font1, font2,.... | A comma-separated list of font-family names and/or generic-family names for an element

Tips and Notes

Tip: Always specify a generic-family name as the last alternative.

Note: If a font-family name contains white-space, it should be quoted.

Example

The following example changes the font-family of a text:

<html>

<head>

<script type="text/javascript">

function setFont()

{

document.getElementById("p1").style.fontFamily="arial,sans-serif";

}

</script>

</head>

<body>

<p id="p1">This is an example paragraph.</p>

<input type="button" onclick="setFont()" value="Change font" />

</body>

</html>

Try-It-Yourself Demos

fontFamily - Change the font-family of a text


HTML DOM fontSize Property

Definition and Usage

The fontSize property sets the font size of an element.

Syntax

Object.style.fontSize=value

Possible Values

Value | Description
xx-small x-small small medium large x-large xx-large | Sets the size of the font to different sizes, from xx-small to xx-large
smaller | Sets the font-size to a smaller size than the parent element
larger | Sets the font-size to a larger size than the parent element
length | Sets the font-size to a fixed size
% | Sets the font-size to a % of the parent element

Example

The following example changes the font size of a text:

<html>

<head>

<script type="text/javascript">

function setFontSize()

{

document.getElementById("p1").style.fontSize="larger";

}

</script>

</head>

<body>

<p id="p1">This is an example paragraph.</p>

<input type="button" onclick="setFontSize()"

value="Change font-size" />

</body>

</html>

Try-It-Yourself Demos

fontSize - Change the font-size of a text


HTML DOM fontSizeAdjust Property

Definition and Usage

The fontSizeAdjust property sets/adjusts the size of a text.

The ratio between the height of the font's lowercase letter "x" and the height of the "font-size" is called a font's aspect value.

If the aspect value is high, the font will be readable when it is set to a smaller size. For example: Verdana has an aspect value of 0.58 (means that when font size is 100px, its x-height is 58px). Times New Roman has an aspect value of 0.46. This means that Verdana is more readable at smaller sizes than Times New Roman.

The fontSizeAdjust property specifies an aspect value for a text that will preserve the x-height of the first-choice font.

Syntax

Object.style.fontSizeAdjust=none|number

Possible Values

Value

Description

none

Do not preserve the first font's x-height if the font is unavailable

number

Defines the aspect value ratio for the font. The formula to use:

font-size of first-choice font*(aspect value of first-choice font/aspect value of available font) = font-size to apply to available font

Example: If 14px Verdana (aspect value of 0.58) was unavailable, but an available font had an aspect value of 0.46, the font-size of the substitute would be 14 * (0.58/0.46) = 17.65px

Example

The following example adjusts the font size of a text:

<html>

<head>

<script type="text/javascript">

function adjustFontSize()

{

document.getElementById("p1").style.fontSizeAdjust="0.70";

}

</script>

</head>

<body>

<p id="p1">This is an example paragraph</p>

<input type="button" onclick="adjustFontSize()"

value="Adjust font-size" />

</body>

</html>

Try-It-Yourself Demos

fontSizeAdjust - Adjust the font size of a text


HTML DOM fontSmoothingEnabled Property

Definition and Usage

The fontSmoothingEnabled property returns whether or not the user has enabled font-smoothing in the display control panel.

Syntax

screen.fontSmoothingEnabled

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>FontSmoothingEnabled: ")

document.write(screen.fontSmoothingEnabled + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos

Detect details about the client's screen


HTML DOM fontStretch Property

Definition and Usage

The fontStretch property is used to condense or stretch the current font.

Syntax

Object.style.fontStretch=value

Possible Values

Value | Description
ultra-condensed extra-condensed condensed semi-condensed normal semi-expanded expanded extra-expanded ultra-expanded | Sets the condensation/expansion. "ultra-condensed" is the most condensed (narrowest) value, and "ultra-expanded" is the most expanded (widest) value
wider | Sets the scale of expansion to the next value
narrower | Sets the scale of condensation to the next value

Example

The following example stretches the font:

<html>

<head>

<script type="text/javascript">

function setFontStretch()

{

document.getElementById("p1").style.fontStretch="ultra-expanded";

}

</script>

</head>

<body>

<p id="p1">This is an example paragraph.</p>

<input type="button" onclick="setFontStretch()"

value="Stretch font" />

</body>

</html>

Try-It-Yourself Demos

fontStretch - Stretch a font


HTML DOM fontStyle Property

Definition and Usage

The fontStyle property sets the font-style of an element.

Syntax

Object.style.fontStyle=normal|italic|oblique

Possible Values

Value | Description
normal | The browser displays a normal style
italic | The browser displays an italic style
oblique | The browser displays an oblique style

Example

The following example adds an italic style to the text:

<html>

<head>

<script type="text/javascript">

function setFontStyle()

{

document.getElementById("p1").style.fontStyle="italic";

}

</script>

</head>

<body>

<p id="p1">This is an example paragraph.</p>

<input type="button" onclick="setFontStyle()"

value="Change font-style" />

</body>

</html>

Try-It-Yourself Demos

fontStyle - Change the style of a text


HTML DOM fontVariant Property

Definition and Usage

The fontVariant property is used to display text in a small-caps font.

This means that all lowercase letters will be converted to uppercase, but the letters will have a smaller font-size compared to the rest of the text.

Syntax

Object.style.fontVariant=normal|small-caps

Possible Values

Value | Description
normal | The browser displays a normal font
small-caps | The browser displays a small-caps font

Example

The following example sets the first paragraph to be in a small-caps font:

<html>

<head>

<script type="text/javascript">

function setSmallCaps()

{

document.getElementById("p1").style.fontVariant="small-caps";

}

</script>

</head>

<body>

<p id="p1">This is an example paragraph.</p>

<p>This is another example paragraph.</p>

<input type="button" onclick="setSmallCaps()"

value="Display small-caps font" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM fontWeight Property

Definition and Usage

The fontWeight property sets the boldness of characters.

Syntax

Object.style.fontWeight=value

Possible Values

Value | Description
normal | Defines normal characters
lighter | Defines lighter characters
bold | Defines thick characters
bolder | Defines thicker characters
100 200 300 400 500 600 700 800 900 | Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold

Example

The following example sets the first paragraph to bold:

<html>

<head>

<script type="text/javascript">

function setFontWeight()

{

document.getElementById("p1").style.fontWeight="900";

}

</script>

</head>

<body>

<p id="p1">This is an example paragraph.</p>

<p>This is another example paragraph.</p>

<input type="button" onclick="setFontWeight()"

value="Display bold text" />

</body>

</html>

Try-It-Yourself Demos

fontWeight - Set the text to be bold


HTML DOM Form Object

Form Object

The Form object represents an HTML form.

For each instance of a <form> tag in an HTML document, a Form object is created.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Form Object Collections

Collection | Description | IE | F | O | W3C
elements[] | Returns an array containing each element in the form | 5 | 1 | 9 | Yes

Form Object Properties

Property | Description | IE | F | O | W3C
acceptCharset | Sets or returns a list of possible character-sets for the form data | No | No | No | Yes
 | Sets or returns the action attribute of a form | 5 | 1 | 9 | Yes
enctype | Sets or returns the MIME type used to encode the content of a form | 6 | 1 | 9 | Yes
id | Sets or returns the id of a form | 5 | 1 | 9 | Yes
length | Returns the number of elements in a form | 5 | 1 | 9 | Yes
method | Sets or returns the HTTP method for sending data to the server | 5 | 1 | 9 | Yes
name | Sets or returns the name of a form | 5 | 1 | 9 | Yes
target | Sets or returns where to open the action-URL in a form | 5 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
className | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
 | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes

Form Object Methods

Method | Description | IE | F | O | W3C
reset() | Resets the values of all elements in a form | 5 | 1 | 9 | Yes
submit() | Submits a form | 5 | 1 | 9 | Yes


HTML DOM form Property

Definition and Usage

The form property returns a reference to the form that contains the button.

This property returns a form object on success.

Syntax

buttonObject.form

Example

The following example returns the id of the form containing the button:

<html>

<body>

<form id="form1">

<input type="button" value="Click me!" id="button1" />

</form>

<p>The id of the form containing the button is:

<script type="text/javascript">

x=document.getElementById('button1');

document.write(x.form.id);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM form Property

Definition and Usage

The form property returns a reference to the form that contains the checkbox.

This property returns a form object on success.

Syntax

checkboxObject.form

Example

The following example returns the id of the form the checkbox belongs to:

<html>

<body>

<form id="form1">

<input type="checkbox" id="check1" />

</form>

<p>The form containing the checkbox is:

<script type="text/javascript">

x=document.getElementById('check1');

document.write(x.form.id);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM form Property

Definition and Usage

The form property returns a reference to the form that contains the hidden input field.

This property returns a form object on success.

Syntax

hiddenObject.form

Example

The following example returns the id of the form the hidden field belongs to:

<html>

<body>

<form id="form1">

<input type="hidden" id="hidden1" />

</form>

<p>The id of the form containing the hidden element is:

<script type="text/javascript">

x=document.getElementById('hidden1');

document.write(x.form.id);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM form Property

Definition and Usage

The form property returns a reference to the form that contains an option.

Syntax

optionObject.form

Example

<html>

<body>

<form id="myForm">

<select id="mySelect">

<option id="apple">Apple</option>

<option id="orange">Orange</option>

<option id="pineapple">Pineapple</option>

<option id="banana">Banana</option>

</select>

</form>

<p>The id of the form is:

<script type="text/javascript">

document.write(document.getElementById("apple").form.id)

</script>

</p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM form Property

Definition and Usage

The form property returns a reference to the form that contains the password field.

This property returns a form object on success.

Syntax

passwordObject.form

Example

The following example gets the id of the form the password field belongs to:

<html>

<body>

<form id="form1">

<input type="password" id="password1" />

</form>

<p>The id of the form containing the password field is:

<script type="text/javascript">

x=document.getElementById('password1');

document.write(x.form.id);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM form Property

Definition and Usage

The form property returns a reference to the form that contains the button.

This property returns a form object on success.

Syntax

buttonObject.form

Example

The following example returns the id of the form the button belongs to:

<html>

<body>

<form id="form1">

<button id="button1">Click me!</button>

</form>

<p>The form containing the button is:

<script type="text/javascript">

x=document.getElementById('button1');

document.write(x.form.id);

</script></p>

</body>

</html>

Try-It-Yourself Demos

Return the id of the form a button belongs to


HTML DOM form Property

Definition and Usage

The form property returns a reference to the form that contains the dropdown list.

Syntax

selectObject.form

Example

<html>

<body>

<form id="myForm">

<select id="mySelect">

<option>Apple</option>

<option>Pear</option>

<option>Banana</option>

<option>Orange</option>

</select>

</form>

<p>The id of the form is:

<script type="text/javascript">

document.write(document.getElementById("mySelect").form.id)

</script>

</p>

</body>

</html>

Try-It-Yourself Demos

Get the id of the form that contains the dropdown list


HTML DOM form Property

Definition and Usage

The form property returns a reference to the form that contains the submit button.

This property returns a form object on success.

Syntax

submitObject.form

Example

The following example returns the id of the form containing the submit button:

<html>

<body>

<form id="form1">

<input type="submit" id="submit1" />

</form>

<p>The id of the form containing the submit button is:

<script type="text/javascript">

x=document.getElementById('submit1');

document.write(x.form.id);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM form Property

Definition and Usage

The form property returns a reference to the form that contains the text area.

This property returns a form object on success.

Syntax

textareaObject.form

Example

The following example returns the id of the form the text area belongs to:

<html>

<body>

<form id="form1">

<textarea id="txt1">

Hello world....This is a text area

</textarea>

</form>

<p>The id of the form containing the text area is:

<script type="text/javascript">

x=document.getElementById('txt1');

document.write(x.form.id);

</script>

</p>

</body>

</html>


HTML DOM form Property

Definition and Usage

The form property returns a reference to the form that contains the text field.

This property returns a form object on success.

Syntax

textObject.form

Example

The following example gets the id of the form the text field belongs to:

<html>

<body>

<form id="form1">

<input type="text" id="text1" />

</form>

<p>The id of the form containing the text field is:

<script type="text/javascript">

x=document.getElementById('text1');

document.write(x.form.id);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM forms Collection

Definition and Usage

The forms collection returns a reference to all Form objects in the document.

Syntax

document.forms[]

Example

<html>

<body>

<form name="Form1"></form>

<form name="Form2"></form>

<form name="Form3"></form>

<script type="text/javascript">

document.write("This document contains: ")

document.write(document.forms.length + " forms.")

</script>

</body>

</html>

Try-It-Yourself Demos

Access an item in a collection


HTML DOM forward() Method

Definition and Usage

The forward() method loads the next URL in the history list.

This is the same as clicking the Forward button and history.go(1).

Syntax

history.forward()

Example

The following example creates a forward-button on a page:

<html>

<head>

<script type="text/javascript">

function goForward()

{

window.history.forward()

}

</script>

</head>

<body>

<input type="button" value="Forward" onclick="goForward()" />

</body>

</html>


HTML DOM Frame Object

Frame Object

The Frame object represents an HTML frame.

For each instance of a <frame> tag in an HTML document, a Frame object is created.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Frame Object Properties

Property | Description | IE | F | O | W3C
contentDocument | Returns the frame's document as an HTML object | No | 1 | 9 | Yes
frameBorder | Sets or returns whether or not to display borders around a frame | 5 | 1 | 9 | Yes
id | Sets or returns the id of a frame | 4 | 1 | 9 | Yes
 | Sets or returns a URL to a document containing a description of the frame contents | 6 | 1 | 9 | Yes
marginHeight | Sets or returns the top and bottom margins of a frame | 5 | 1 | 9 | Yes
marginWidth | Sets or returns the left and right margins of a frame | 5 | 1 | 9 | Yes
name | Sets or returns the name of a frame | 5 | 1 | 9 | Yes
noResize | Sets or returns whether or not a frame can be resized | 5 | 1 | 9 | Yes
 | Sets or returns whether or not a frame should have scrollbars | No | 1 | No | Yes
src | Sets or returns the URL of the document that should be loaded into a frame | 5 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
 | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
title | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes


HTML DOM frame Property

Definition and Usage

The frame property sets or returns the outer-borders of a table.

Syntax

tableObject.frame=void|above|below|hsides|vsides|lhs|rhs|box|border

Example

The following example sets two different outer borders of a table:

<html>

<head>

<script type="text/javascript">

function aboveFrames()

{

document.getElementById('myTable').frame="above"

}

function belowFrames()

{

document.getElementById('myTable').frame="below"

}

</script>

</head>

<body>

<table id="myTable">

<tr>

<td>100</td>

<td>200</td>

</tr>

<tr>

<td>300</td>

<td>400</td>

</tr>

</table>

<br />

<input type="button" onclick="aboveFrames()"

value="Show above frames">

<input type="button" onclick="belowFrames()"

value="Show below frames">

</body>

</html>

Try-It-Yourself Demos


HTML DOM frameBorder Property

Definition and Usage

The frameBorder property sets or returns whether or not to display borders around a frame.

Syntax

frameObject.frameBorder=1|0

Example

In our example we will first create an HTML document containing a frameset with two columns. Each column is set to 50% of the browser window:

<html>

<frameset cols="50%,50%">

<frame id="leftFrame" frameBorder="1"

src="frame_frameborder.htm">

<frame id="rightFrame" frameBorder="0" src="frame_a.htm" >

</frameset>

</html>

The HTML document "frame_frameborder.htm" is put into the first column, and the HTML document "frame_a.htm" is put into the second column.

The source of "frame_frameborder.htm" is as follows:

<html>

<body>

<script type="text/javascript">

x=parent.document.getElementById("leftFrame");

y=parent.document.getElementById("rightFrame");

document.write("Frame border for leftFrame is: ");

document.write(x.frameBorder);

document.write("<br />Frame border for rightFrame is: ");

document.write(y.frameBorder);

</script>

</body>

</html>

Try-It-Yourself Demos

Return the frameborder attribute from frames


HTML DOM frameBorder Property

Definition and Usage

The frameBorder property Sets or returns whether or not to display a border around an iframe.

Syntax

iframeObject.frameBorder=1|0

Example

The following example aligns the iframe to the right according to the surrounding text:

<html>

<head>

<script type="text/javascript">

function removeBorder()

{

document.getElementById("frame1").frameBorder="0";

}

function restoreBorder()

{

document.getElementById("frame1").frameBorder="1";

}

</script>

</head>

<body>

<iframe src="frame_a.htm" id="frame1"></iframe>

<br /><br />

<input type="button" onclick="removeBorder()"

value="Remove border" />

<input type="button" onclick="restoreBorder()"

value="Restore border" />

</body>

</html>

Try-It-Yourself Demos

Change the border of an iframe


HTML DOM Frameset Object

Frameset Object

The Frameset object represents an HTML frameset.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Frameset Object Properties

Property | Description | IE | F | O | W3C
cols | Sets or returns the number of columns in a frameset | 5 | 1 | 9 | Yes
id | Sets or returns the id of a frameset | 4 | 1 | 9 | Yes
rows | Sets or returns the number of rows in a frameset | 5 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
className | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
 | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
title | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes


HTML DOM getElementById() Method

Definition and Usage

The getElementById() method returns a reference to the first object with the specified ID.

Syntax

document.getElementById(id)

Example

<html>

<head>

<script type="text/javascript">

function getValue()

{

var x=document.getElementById("myHeader")

alert(x.innerHTML)

}

</script>

</head>

<body>

<h1 id="myHeader" onclick="getValue()">This is a header</h1>

<p>Click on the header to alert its value</p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM getElementsByName() Method

Definition and Usage

The getElementsByName() method returns a collection of objects with the specified NAME.

Syntax

document.getElementsByName(name)

Example

<html>

<head>

<script type="text/javascript">

function getElements()

{

var x=document.getElementsByName("myInput");

alert(x.length);

}

</script>

</head>

<body>

<input name="myInput" type="text" size="20" /><br />

<input name="myInput" type="text" size="20" /><br />

<input name="myInput" type="text" size="20" /><br />

<br />

<input type="button" onclick="getElements()"

value="How many elements named 'myInput'?" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM getElementsByTagName() Method

Definition and Usage

The getElementsByTagName() method returns a collection of objects with the specified TAGNAME.

Syntax

document.getElementsByTagName(tagname)

Example

<html>

<head>

<script type="text/javascript">

function getElements()

{

var x=document.getElementsByTagName("input");

alert(x.length);

}

</script>

</head>

<body>

<input name="myInput" type="text" size="20" /><br />

<input name="myInput" type="text" size="20" /><br />

<input name="myInput" type="text" size="20" /><br />

<br />

<input type="button" onclick="getElements()"

value="How many input elements?" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM go() Method

Definition and Usage

The go() method loads a specific page in the history list.

Syntax

history.go(number|URL)

Example

The following example loads the previous page in the history list:

<html>

<head>

<script type="text/javascript">

function goBack()

{

window.history.go(-1)

}

</script>

</head>

<body>

<input type="button" value="Back" onclick="goBack()" />

</body>

</html>


HTML DOM hash Property

Definition and Usage

The hash property sets or returns the anchor part of a URL in an area.

Syntax

areaObject.hash=anchorname

Example

The following example changes the href anchor part from #top to #bottom:

<html>

<head>

<script type="text/javascript">

function changeLink()

{

document.getElementById('venus').hash="bottom"

}

</script>

</head>

<body>

<img src="planets.gif"

width="145" height="126"

usemap="#planetmap" />

<map name="planetmap">

<area id="venus" shape="circle"

coords="124,58,8"

alt="Venus"

href="venus2.htm#top" />

</map>

<input type="button" onclick="changeLink()" value="Change link" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM hash Property

Definition and Usage

The hash property sets or returns the URL from the hash sign (#).

The hash property specifies an anchor name in a URL.

Syntax

location.hash=anchorname

Example

Assume that the current URL is: http://example.com/test.htm#part2:

<html>

<body>

<script type="text/javascript">

document.write(location.hash);

</script>

</body>

</html>

Output:

#part2

Try-It-Yourself Demos

property of the location object

Anchors array - This example opens two windows. The first window contains four buttons and the second window defines four anchors from 0 to 3. When a button is clicked in the first window, the onclick event handler goes to the specified anchor in the second window.


HTML DOM height Property

Definition and Usage

The height property sets or returns the height of an iframe (in pixels).

Syntax

iframeObject.height=pixels

Example

The following example changes the height of the iframe:

<html>

<head>

<script type="text/javascript">

function changeHeight()

{

document.getElementById("frame1").height="200";

}

</script>

</head>

<body>

<iframe src="frame_a.htm" id="frame1" height="100"></iframe>

<br /><br />

<input type="button" onclick="changeHeight()"

value="Change height" />

</body>

</html>

Try-It-Yourself Demos

Change the height and width of an iframe


HTML DOM height Property

Definition and Usage

The height property sets or returns the height of an image.

Syntax

imageObject.height=pixels

Example

<html>

<head>

<script type="text/javascript">

function changeSize()

{

document.getElementById("compman").height="250"

document.getElementById("compman").width="300"

}

</script>

</head>

<body>

<img id="compman" src="compman.gif" width="107" height="98" />

<br /><br />

<input type="button" onclick="changeSize()"

value="Change size of image">

</body>

</html>

Try-It-Yourself Demos

Change the height and width of an image


HTML DOM height Property

Definition and Usage

The height property returns the height of the client's display screen.

Syntax

screen.height

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>Height: ")

document.write(screen.height + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos

Detect details about the client's screen


HTML DOM height Property

Definition and Usage

The height property sets the height of an element.

Syntax

Object.style.height=auto|length|%

Possible Values

Value | Description
auto | The browser calculates the actual height
length | Defines the height in px, cm, etc.
% | Defines the height in % of the containing block

Example

The following example sets the height of a button:

<html>

<head>

<script type="text/javascript">

function setHeight()

{

document.getElementById("b1").style.height="50px";

}

</script>

</head>

<body>

<input type="button" id="b1" onclick="setHeight()"

value="Change height of button to 50 px" />

</body>

</html>

Try-It-Yourself Demos

height - Set the height of an element


HTML DOM Hidden Object

Hidden Object

The Hidden object represents a hidden input field in an HTML form.

For each instance of an <input type="hidden"> tag in an HTML form, a Hidden object is created.

You can access a hidden input field by searching through the elements[] array of the form, or by using document.getElementById().

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Hidden Object Properties

Property | Description | IE | F | O | W3C
alt | Sets or returns an alternate text to display if a browser does not support hidden fields | 5 | 1 | 9 | Yes
form | Returns a reference to the form that contains the hidden field | 4 | 1 | 9 | Yes
id | Sets or returns the id of a hidden field | 4 | 1 | 9 | Yes
name | Sets or returns the name of a hidden field | 4 | 1 | 9 | Yes
type | Returns the type of form element a hidden input field is | 4 | 1 | 9 | Yes
value | Sets or returns the value of the value attribute of the hidden field | 4 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
className | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
title | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes


HTML DOM History Object

History Object

The History object is actually a JavaScript object, not an HTML DOM object.

The History object is automatically created by the JavaScript runtime engine and consists of an array of URLs. These URLs are the URLs the user has visited within a browser window.

The History object is part of the Window object and is accessed through the window.history property.

IE: Internet Explorer, F: Firefox, O: Opera.

History Object Properties

Property | Description | IE | F | O
length | Returns the number of elements in the history list | 4 | 1 | 9

History Object Methods

Method | Description | IE | F | O
 | Loads the previous URL in the history list | 4 | 1 | 9
forward() | Loads the next URL in the history list | 4 | 1 | 9
 | Loads a specific page in the history list | 4 | 1 | 9


HTML DOM host Property

Definition and Usage

The host property sets or returns the hostname and port of the URL.

Syntax

areaObject.host=host

Example

The following example returns the hostname and port for the "Venus" area:

<html>

<body>

<img src="planets.gif"

width="145" height="126"

usemap="#planetmap" />

<map name="planetmap">

<area id="venus" shape="circle"

coords="124,58,8"

alt="Venus"

href="venus.htm" />

</map>

<p>The hostname and port for the "Venus" area are:

<script type="text/javascript">

x=document.getElementById('venus');

document.write(x.host);

</script>

</p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM host Property

Definition and Usage

The host property sets or returns the hostname and port number of the current URL.

Syntax

location.host

Example

Assume that the current URL is: http://example.com/test.htm#part2:

<html>

<body>

<script type="text/javascript">

document.write(location.host);

</script>

</body>

</html>

Output:

example.com

Try-It-Yourself Demos


HTML DOM hostname Property

Definition and Usage

The host property sets or returns the hostname of the current URL.

Syntax

location.hostname

Example

Assume that the current URL is: http://example.com/test.htm#part2:

<html>

<body>

<script type="text/javascript">

document.write(location.hostname);

</script>

</body>

</html>

Output:

example.com

Try-It-Yourself Demos


HTML DOM href Property

Definition and Usage

The href property sets or returns the URL of the linked resource.

Syntax

anchorObject.href=URL

Example

The following example changes the text, URL, and target of a link:

<html>

<head>

<script type="text/javascript">

function changeLink()

{

document.getElementById('myAnchor').innerHTML="W3Schools";

document.getElementById('myAnchor').href="http://www.w3schools.com";

document.getElementById('myAnchor').target="_blank";

}

</script>

</head>

<body>

<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>

<input type="button" onclick="changeLink()" value="Change link">

</body>

</html>

Try-It-Yourself Demos


HTML DOM href Property

Definition and Usage

The href property sets or returns the URL of a link in an image-map.

Syntax

areaObject.href=URL

Example

The following example changes the link of the area in the mapped image:

<html>

<head>

<script type="text/javascript">

function changeLink()

{

document.getElementById('venus').href="http://www.w3schools.com"

}

</script>

</head>

<body>

<img src="planets.gif"

width="145" height="126"

usemap="#planetmap" />

<map name="planetmap">

<area id="venus" shape="circle"

coords="124,58,8"

alt="Venus"

href="venus.htm" />

</map>

<input type="button" onclick="changeLink()" value="Change link" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM href Property

Definition and Usage

The href property sets or returns a base URL for all the links in a page.

Syntax

baseObject.href=URL

Example

The following example returns the base URL:

<html>

<head>

<base id="myBaseId" href="http://www.w3schools.com/htmldom/" />

</head>

<body>

<p>Base URL:

<script type="text/javascript">

x=document.getElementById('myBaseId');

document.write(x.href);

</script>

</p>

</body>

</html>

Output:

Base URL: http://www.w3schools.com/htmldom/

Try-It-Yourself Demos


HTML DOM href Property

Definition and Usage

The href property sets or returns the URL of the linked resource.

Syntax

linkObject.href=URL

Example

The following example changes style sheet:

<html>

<head>

<link rel="stylesheet" type="text/css"

id="style1" href="try_dom_link.css" />

<script type="text/javascript">

function changeStyle()

{

document.getElementById("style1").href="try_dom_link2.css"

}

</script>

</head>

<body>

<form>

<input type="button" id="button1" onclick="changeStyle()"

value="Change style sheet" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM href Property

Definition and Usage

The href property sets or returns the entire URL.

Syntax

location.href=URL

Example

Assume that the current URL is: http://example.com/test.htm#part2:

<html>

<body>

<script type="text/javascript">

document.write(location.href);

</script>

</body>

</html>

Output:

http://example.com/test.htm#part2

Try-It-Yourself Demos


HTML DOM hreflang Property

Definition and Usage

The hreflang property sets or returns the language code of the linked resource.

Syntax

anchorObject.hreflang=languagecode

Example

The following example returns the language code of the linked resource:

<html>

<body>

<p><a id="myAnchor" hreflang="us-en"

href="http://www.w3schools.com">W3Schools.com</a></p>

<script type="text/javascript">

x=document.getElementById("myAnchor");

document.write(x.hreflang);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM hreflang Property

Definition and Usage

The hreflang property sets or returns the base language of the target URL.

Syntax

linkObject.hreflang=languagecode

Example

The following example returns the language code of the link element:

<html>

<head>

<link rel="stylesheet" type="text/css"

hreflang="us-en" id="style1" href="try_dom_link.css" />

</head>

<body>

<script type="text/javascript">

x=document.getElementById("style1");

document.write("Language code=" + x.hreflang);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM hspace Property

Definition and Usage

The hspace property sets or returns the white space on the left and right side of an image.

The hspace and vspace properties can be used with align to set the distance between the image and the surrounding text.

Syntax

imageObject.hspace=pixels

Example

The following example sets the hspace and vspace properties of an image:

<html>

<head>

<script type="text/javascript">

function setSpace()

{

document.getElementById("compman").hspace="50"

document.getElementById("compman").vspace="50"

}

</script>

</head>

<body>

<img id="compman" src="compman.gif" alt="Computerman" align="right" />

<p>Some text. Some text. Some text. Some text.</p>

<input type="button" onclick="setSpace()"

value="Set hspace and vspace">

</body>

</html>

Try-It-Yourself Demos

Set the horizontal and vertical placement of an image


HTML DOM httpEquiv Property

Definition and Usage

The httpEquiv property connects the content attribute to an HTTP header.

Syntax

metaObject.httpEquiv=content-type|expires|refresh|set-cookie

Example

The following example refreshes a page every 5 second:

<html>

<head>

<meta http-equiv="refresh" content="5" />

</head>

<body>

<script type="text/javascript">

x=document.getElementsByTagName("meta")[0];

document.write("Http equiv: " + x.httpEquiv);

</script>

</body>

</html>

Try-It-Yourself Demos

Refresh a page every 5 second


HTML DOM id Property

Definition and Usage

The id property sets or returns the id of a link

Syntax

anchorObject.id=id

Example

The following example outputs the id of a link:

<html>

<body>

<p><a id="myAnchor"

href="http://www.w3schools.com">Visit W3Schools.com</a></p>

<script type="text/javascript">

x=document.getElementById("myAnchor");

document.write(x.id);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM id Property

Definition and Usage

The id property sets or returns the id of an area in an image-map.

Syntax

areaObject.id=id

Example

The following example returns the id of the "Venus" area in the image-map:

<html>

<body>

<img src="planets.gif"

width="145" height="126"

usemap="#planetmap" />

<map name="planetmap">

<area id="venus" shape="circle"

coords="124,58,8"

alt="Venus"

href="venus.htm" />

</map>

<p>"Venus" area id =

<script type="text/javascript">

x=document.getElementById('venus');

document.write(x.id);

</script>

</p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM id Property

Definition and Usage

The id property sets or returns the id of the <base> element.

Syntax

baseObject.id=id

Example

The following example returns the base id:

<html>

<head>

<base id="myBaseId" href="http://www.w3schools.com/htmldom/" />

</head>

<body>

<p>Base id:

<script type="text/javascript">

x=document.getElementsByTagName('base')[0];

document.write(x.id);

</script>

</body>

</html>

Output:

Base id: myBaseId

Try-It-Yourself Demos


HTML DOM id Property

Definition and Usage

The id property sets or returns the id of the body.

Syntax

bodyObject.id=id

Example

The following example shows two methods on how to get the id of the <body> element:

<html>

<body id="myid">

<script type="text/javascript">

x=document.getElementsByTagName('body')[0];

document.write("Body id: " + x.id);

document.write("<br />");

document.write("An alternate way: ");

document.write(document.getElementById('myid').id);

</script>

</body>

</html>

Output:

Body id: myid

An alternate way: myid

Try-It-Yourself Demos


HTML DOM id Property

Definition and Usage

The id property sets or returns the id of the button.

Syntax

buttonObject.id=id

Example

The following example gets the id of the button:

<html>

<head>

<script type="text/javascript">

function alertId()

{

alert(document.getElementById("myButton").id)

}

</script>

</head>

<body>

<form>

<input type="button" value="Click me!" id="myButton"

onclick="alertId()" />

</form>

</body>

</html>

Try-It-Yourself Demos

Alert id, type, and value of a Button + disable button


HTML DOM id Property

Definition and Usage

The id property sets or returns the id of a checkbox.

Syntax

checkboxObject.id=id

Example

The following example prints the id of the checkbox:

<html>

<body>

<form>

<input type="checkbox" id="check1" />

</form>

<p>The id of the checkbox is:

<script type="text/javascript">

document.write(document.getElementById("check1").id)

</script>

</p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM id Property

Definition and Usage

The id property sets or returns the id of the form.

Syntax

formObject.id=id

Example

The following example shows two methods on how to return the id of the <form> element:

<html>

<body>

<form id="myForm">

Text: <input type="text" size="20" value="Hello World" />

</form>

<script type="text/javascript">

x=document.getElementsByTagName('form')[0];

document.write("Form id: " + x.id);

document.write("<br />");

document.write("An alternate way: ");

document.write(document.getElementById('myForm').id);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM id Property

Definition and Usage

The id property sets or returns the id of a frameset.

Syntax

framesetObject.id=id

Example

In our example we will first create an HTML document containing a frameset with two columns. Each column is set to 50% of the browser window:

<html>

<frameset id="main" cols="50%,50%">

<frame id="leftFrame" src="frame_frameset_id.htm">

<frame id="rightFrame" src="frame_a.htm" >

</frameset>

</html>

The HTML document "frame_frameset_id.htm" is put into the first column, and the HTML document "frame_a.htm" is put into the second column.

The source of "frame_frameset_id.htm" is as follows:

<html>

<head>

<script type="text/javascript">

function showFrameId()

{

var txt="Frameset Id: "

txt=txt + parent.document.getElementById("main").id

alert(txt)

}

</script>

</head>

<body>

<input type="button" onclick="showFrameId()"

value="Show Frameset Id" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM id Property

Definition and Usage

The id property sets or returns the id of a frame.

Syntax

frameObject.id=id

Example

In our example we will first create an HTML document containing a frameset with two columns. Each column is set to 50% of the browser window:

<html>

<frameset cols="50%,50%">

<frame id="leftFrame" src="frame_id.htm">

<frame id="rightFrame" src="frame_a.htm" >

</frameset>

</html>

The HTML document "frame_id.htm" is put into the first column, and the HTML document "frame_a.htm" is put into the second column.

The source of "frame_id.htm" is as follows:

<html>

<body>

<script type="text/javascript">

x=parent.document.getElementsByTagName("frame")[0];

y=parent.document.getElementsByTagName("frame")[1];

document.write("The id for the left frame is: ");

document.write(x.id);

document.write("<br />The id for the right frame is: ");

document.write(y.id);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM id Property

Definition and Usage

The id property sets or returns the id of a hidden input field.

Syntax

hiddenObject.id=id

Example

The following example gets the id of the hidden input field:

<html>

<body>

<form>

<input type="hidden" id="hidden1" />

</form>

<p>The id of the hidden field is:

<script type="text/javascript">

x=document.getElementById('hidden1');

document.write(x.id);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM id Property

Definition and Usage

The id property sets or returns the id of the iframe.

Syntax

iframeObject.id=id

Example

The following example shows two ways of how to return the id of the iframe:

<html>

<body>

<iframe src="frame_a.htm" id="frame1"></iframe>

<br /><br />

<script type="text/javascript">

document.write("The iframe's id: ");

document.write(document.getElementsByTagName("iframe")[0].id);

document.write("<br /><br />");

document.write("An alternate way: ");

document.write("<br />");

document.write("The iframe's id: ");

document.write(document.getElementById("frame1").id);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM id Property

Definition and Usage

The id property sets or returns the id of an image.

Syntax

imageObject.id=id

Example

The following example returns the id of an image in two different ways:

<html>

<body>

<img id="compman" src="compman.gif" alt="Computerman" />

<br />

<script type="text/javascript">

x=document.getElementsByTagName('img')[0];

document.write("Image id: " + x.id);

document.write("<br />");

document.write("An alternate way: ");

document.write(document.getElementById('compman').id);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM id Property

Definition and Usage

The id property sets or returns the id of a link element.

Syntax

linkObject.id=id

Example

The following example outputs the id of a link element:

<html>

<head>

<link rel="stylesheet" type="text/css"

id="style1" href="try_dom_link.css" />

</head>

<body>

<script type="text/javascript">

x=document.getElementById("style1");

document.write("Id of link=" + x.id);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM id Property

Definition and Usage

The id property sets or returns the id of an option in a dropdown list.

Syntax

optionObject.id=id

Example

The following example returns the id of the selected option in a dropdown list:

<html>

<head>

<script type="text/javascript">

function alertOptionId()

{

var x=document.getElementById("mySelect").selectedIndex;

alert(document.getElementsByTagName("option")[x].id);

}

</script>

</head>

<body>

<form>

Select your favorite fruit:

<select id="mySelect">

<option id="apple">Apple</option>

<option id="orange">Orange</option>

<option id="pineapple">Pineapple</option>

<option id="banana">Banana</option>

</select>

<br /><br />

<input type="button" onclick="alertOptionId()"

value="Alert id">

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM id Property

Definition and Usage

The id property sets or returns the id of a password field.

Syntax

passwordObject.id=id

Example

The following example gets the id of the password field:

<html>

<body>

<form id="form1">

<input type="password" id="password1" />

</form>

<p>The id of the password field is:

<script type="text/javascript">

x=document.getElementById('password1');

document.write(x.id);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM id Property

Definition and Usage

The id property sets or returns the id of a button.

Syntax

buttonObject.id=id

Example

The following example gets the id of the button:

<html>

<head>

<script type="text/javascript">

function alertId()

{

alert(document.getElementById("myButton").id)

}

</script>

</head>

<body>

<form>

<button id="myButton" onClick="alertId()">

Click me!</button>

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM id Property

Definition and Usage

The id property sets or returns the id of the radio button.

Syntax

radioObject.id=id

Example

The following example alerts the id of a radio button:

<html>

<body>

<form>

<input type="radio" id="radio1" />

</form>

<p>The id of the radio button is:

<script type="text/javascript">

x=document.getElementById('radio1');

document.write(x.id);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM id Property

Definition and Usage

The id property sets or returns the id of the submit button.

Syntax

submitObject.id=id

Example

The following example gets the id of the submit button:

<html>

<head>

<script type="text/javascript">

function alertId()

{

alert(document.getElementById("submit1").id)

}

</script>

</head>

<body>

<form>

<input type="submit" id="submit1" onclick="alertId()" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM id Property

Definition and Usage

The id property sets or returns the id of a table row.

Syntax

tablerowObject.id=id

Example

The following example returns the id of a table row:

<html>

<head>

<script type="text/javascript">

function alertId()

{

alert(document.getElementById('tr1').id);

}

</script>

</head>

<body>

<table border="1">

<tr id="tr1">

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr id="tr2">

<td>Peter</td>

<td>Griffin</td>

</tr>

</table>

<br />

<input type="button" onclick="alertId()"

value="Alert table row ID" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM id Property

Definition and Usage

The idr property sets or returns the id of a table.

Syntax

tableObject.id=id

Example

<html>

<head>

<script type="text/javascript">

function alertId()

{

alert(document.getElementById("table1").id);

}

</script>

</head>

<body>

<table id="table1" border="1">

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

</table>

<br />

<input type="button" onclick=alertId()

value="Alert id of table" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM id Property

Definition and Usage

The id property sets or returns the id of a text area.

Syntax

textareaObject.id=id

Example

The following example gets the id of a text area:

<html>

<head>

<script type="text/javascript">

function alertId()

{

alert(document.getElementById('txt1').id);

}

</script>

</head>

<body>

<textarea id="txt1">

Hello world....This is a textarea

</textarea>

<br />

<input type="button" onclick="alertId()" value="Alert ID" />

</body>

</html>


HTML DOM id Property

Definition and Usage

The id property sets or returns the id of a text field.

Syntax

textObject.id=id

Example

The following example gets the id of the text field:

<html>

<body>

<form>

<input type="text" id="text1" />

</form>

<p>The id of the text field is:

<script type="text/javascript">

x=document.getElementById('text1');

document.write(x.id);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM IFrame Object

IFrame Object

The IFrame object represents an HTML inline frame.

For each instance of an <iframe> tag in an HTML document, an IFrame object is created.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Properties

Property | Description | IE | F | O | W3C
align | Sets or returns how to align an iframe according to the surrounding text | 6 | 1 | 9 | Yes
contentDocument | Returns the iframe's document as an HTML object | No | 1 | 9 | Yes
frameBorder | Sets or returns whether or not to display a border around an iframe | No | 1 | 9 | Yes
height | Sets or returns the height of an iframe | 5 | 1 | 9 | Yes
 | Sets or returns the id of an iframe | 4 | 1 | 9 | Yes
longDesc | Sets or returns a URL to a document containing a description of the iframe contents | 6 | 1 | 9 | Yes
marginHeight | Sets or returns the top and bottom margins of an iframe | 5 | 1 | 9 | Yes
marginWidth | Sets or returns the left and right margins of an frame | 5 | 1 | 9 | Yes
name | Sets or returns the name of an iframe | 5 | 1 | 9 | Yes
scrolling | Sets or returns whether or not an iframe should have scrollbars | No | 1 | No | Yes
src | Sets or returns the URL of the document that should be loaded into an iframe | 5 | 1 | 9 | Yes
width | Sets or returns the width of an iframe | 5 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
className | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
title | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes


HTML DOM Image Object

Image Object

The Image object represents an embedded image.

For each instance of an <img> tag in an HTML document, an Image object is created.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Image Object Properties

Property | Description | IE | F | O | W3C
align | Sets or returns how to align an image according to the surrounding text | 5 | 1 | 9 | Yes
alt | Sets or returns an alternate text to be displayed, if a browser cannot show an image | 5 | 1 | 9 | Yes
border | Sets or returns the border around an image | 4 | 1 | 9 | Yes
complete | Returns whether or not the browser has finished loading the image | 4 | 1 | 9 | No
height | Sets or returns the height of an image | 4 | 1 | 9 | Yes
 | Sets or returns the white space on the left and right side of the image | 4 | 1 | 9 | Yes
id | Sets or returns the id of the image | 4 | 1 | 9 | Yes
isMap | Returns whether or not an image is a server-side image map | 5 | 1 | 9 | Yes
longDesc | Sets or returns a URL to a document containing a description of the image | 6 | 1 | 9 | Yes
lowsrc | Sets or returns a URL to a low-resolution version of an image | 4 | 1 | 9 | No
 | Sets or returns the name of an image | 4 | 1 | 9 | Yes
 | Sets or returns the URL of an image | 4 | 1 | 9 | Yes
useMap | Sets or returns the value of the usemap attribute of an client-side image map | 5 | 1 | 9 | Yes
vspace | Sets or returns the white space on the top and bottom of the image | 4 | 1 | 9 | Yes
width | Sets or returns the width of an image | 4 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
className | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
title | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes


HTML DOM images Collection

Definition and Usage

The images collection returns a reference to all Image objects in the document.

Syntax

document.images[]

Example

<html>

<body>

<img border="0" src="hackanm.gif" width="48" height="48">

<br />

<img border="0" src="compman.gif" width="107" height="98">

<br /><br />

<script type="text/javascript">

document.write("This document contains: ")

document.write(document.images.length + " images.")

</script>

</body>

</html>

Try-It-Yourself Demos

Count the number of images in a document


HTML DOM index Property

Definition and Usage

The index property returns the index position of an option in a dropdown list.

Syntax

optionObject.index

Example

The following example returns the index of the selected option in a dropdown list:

<<html>

<head>

<script type="text/javascript">

function alertIndex()

{

var x=document.getElementById("mySelect").selectedIndex;

var y=document.getElementsByTagName("option");

alert(y[x].text + " has the index of: " + y[x].index);

}

</script>

</head>

<body>

<form>

Select your favorite fruit:

<select id="mySelect">

<option>Apple</option>

<option>Orange</option>

<option>Pineapple</option>

<option>Banana</option>

</select>

<br />

<br />

<input type="button" onclick="alertIndex()"

value="Show index of the chosen fruit">

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM innerHTML Property

Definition and Usage

The innerHTML property sets or returns the text of a link.

Syntax

anchorObject.innerHTML=text

Example

The following example changes the text, URL, and target of a link:

<html>

<head>

<script type="text/javascript">

function changeLink()

{

document.getElementById('myAnchor').innerHTML="W3Schools";

document.getElementById('myAnchor').href="http://www.w3schools.com";

document.getElementById('myAnchor').target="_blank";

}

</script>

</head>

<body>

<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>

<input type="button" onclick="changeLink()" value="Change link">

</body>

</html>

Try-It-Yourself Demos


HTML DOM innerHTML Property

Definition and Usage

The innerHTML property sets or returns the HTML between the start and end tags of a table cell.

Syntax

tabledataObject.innerHTML=text

Example

The following example returns the inner HTML of a table cell:

<html>

<head>

<script type="text/javascript">

function alertInnerHTML()

{

alert(document.getElementById("td1").innerHTML);

}

</script>

</head>

<body>

<table border="1">

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td id="td1">Peter</td>

<td id="td1">Griffin</td>

</tr>

</table>

<br />

<input type="button" onclick=alertInnerHTML()

value="Alert innerHTML" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM innerHTML Property

Definition and Usage

The innerHTML property sets or returns the HTML between the start and end tags of a table row.

Syntax

tablerowObject.innerHTML=HTML

Example

The following example returns the inner HTML of a table row:

<html>

<head>

<script type="text/javascript">

function getInnerHTML()

{

alert(document.getElementById("tr1").innerHTML);

}

</script>

</head>

<body>

<table border="1">

<tr id="tr1">

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr id="tr2">

<td>Peter</td>

<td>Griffin</td>

</tr>

</table>

<br />

<input type="button" onclick="getInnerHTML()"

value="Alert innerHTML of table row" />

</body>

</html>

Try-It-Yourself Demos

Get the inner HTML of a table row


HTML DOM insertCell() Method

Definition and Usage

The insertCell() method is used to insert a cell in a table row.

Syntax

tablerowObject.insertCell(index)

Example

The following example inserts cells in a table row:

<html>

<head>

<script type="text/javascript">

function insCell()

{

var x=document.getElementById('tr2').insertCell(0)

x.innerHTML="John"

}

</script>

</head>

<body>

<table border="1">

<tr id="tr1">

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr id="tr2">

<td>Peter</td>

<td>Griffin</td>

</tr>

</table>

<br />

<input type="button" onclick="insCell()" value="Insert cell">

</body>

</html>

Try-It-Yourself Demos

Insert a cell to an existing table row


HTML DOM insertRow() Method

Definition and Usage

The insertRow() method is used to insert a new row at the specified position in a table.

Syntax

tableObject.insertRow(index)

Example

The following example inserts a new row at the beginning of the table:

<html>

<head>

<script type="text/javascript">

function insRow()

{

document.getElementById('myTable').insertRow(0)

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

<td>Row1 cell1</td>

<td>Row1 cell2</td>

</tr>

<tr>

<td>Row2 cell1</td>

<td>Row2 cell2</td>

</tr>

</table>

<br />

<input type="button" onclick="insRow()"

value="Insert new row">

</body>

</html>

Try-It-Yourself Demos

Add a new row to a table - then add content to it


HTML DOM Introduction

The HTML Document Object Model (HTML DOM) defines a standard way for accessing and manipulating HTML documents.

What You Should Already Know

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

· HTML / XHTML
· JavaScript

If you want to study these subjects first, find the tutorials on our Home page.

What is the DOM?

With JavaScript you can restructure an entire HTML document. You can add, remove, change, or reorder items on a page.

To change anything on a page, JavaScript needs access to all elements in the HTML document. This access, along with methods and properties to add, move, change, or remove HTML elements, is given through the Document Object Model (DOM).

In 1998, W3C published the Level 1 DOM specification. This specification allowed access to and manipulation of every single element in an HTML page.

All browsers have implemented this recommendation, and therefore, incompatibility problems in the DOM have almost disappeared.

The DOM can be used by JavaScript to read and change HTML, XHTML, and XML documents.

The DOM is separated into different parts (Core, XML, and HTML) and different levels (DOM Level 1/2/3):

· Core DOM - defines a standard set of objects for any structured document
· - defines a standard set of objects for XML documents
· HTML DOM - defines a standard set of objects for HTML documents

You can read more about the W3C DOM specifications / levels in our W3C tutorial.


HTML DOM isMap Property

Definition and Usage

The isMap property returns whether or not the image is a server-side image map.

Syntax

imageObject.isMap

Example

The following example checks if an image is a server-side image map:

<html>

<body>

<img id="planets" src="planets.gif"

width="145" height="126"

usemap="#planetmap" />

<map name="planetmap">

<area id="venus" shape="circle"

coords="124,58,8"

alt="The planet Venus"

href="venus.htm" />

</map>

<p>Is the image a server-side image map?

<script type="text/javascript">

x=document.getElementById('planets');

document.write(x.isMap);

</script>

</p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM javaEnabled() Method

Definition and Usage

The javaEnabled() method returns a Boolean value that specifies whether the browser has Java enabled.

Syntax

navigator.javaEnabled()

Example

The following example returns whether the browser has Java enabled:

<html>

<body>

<script type="text/javascript">

alert(navigator.javaEnabled())

</script>

</body>

</html>

Output:

true

Try-It-Yourself Demos


HTML DOM lang Property

Definition and Usage

The lang property sets or returns the language code for the element.

Syntax

bodyObject.lang=language-code

Example

The following example shows two methods on how to get the language code for the <body> element:

<html>

<body id="myid" lang="en-us">

<script type="text/javascript">

x=document.getElementsByTagName('body')[0];

document.write("Body language: " + x.lang);

document.write("<br />");

document.write("An alternate way: ");

document.write(document.getElementById('myid').lang);

</script>

</body>

</html>

Output:

Body language: en-us

An alternate way: en-us

Try-It-Yourself Demos


HTML DOM lang Property

Definition and Usage

The lang property sets or returns the language code for an element.

Syntax

object.lang=language-code

Example

The following example shows two methods on how to get the language code for the <body> element:

<html>

<body id="myid" lang="en-us">

<script type="text/javascript">

x=document.getElementsByTagName('body')[0];

document.write("Body language: " + x.lang);

document.write("<br />");

document.write("An alternate way: ");

document.write(document.getElementById('myid').lang);

</script>

</body>

</html>

Output:

Body language: en-us

An alternate way: en-us

Try-It-Yourself Demos


HTML DOM lastModified Property

Definition and Usage

The lastModified property returns the date and time the document was last modified.

Syntax

document.lastModified

Example

<html>

<body>

This document was last modified on:

<script type="text/javascript">

document.write(document.lastModified)

</script>

</body>

</html>

Try-It-Yourself Demos

Return when the document was last modified


HTML DOM left Property

Definition and Usage

The left property sets how far the left edge of an element is to the right/left of the left edge of the parent element.

Syntax

Object.style.left=auto|%|length

Possible Values

Value | Description
auto | Lets the browser calculate the left position
% | Sets the left position in % from the left edge of the parent element
length | Sets the left position in px, cm, etc. from the left edge of the parent element. Negative values are allowed

Tips and Notes

Note: If the "position" property has a value of "static", the "left" property has no effect.

Example

The following example sets the left edge of an element:

<html>

<head>

<style type="text/css">

input

{

position:absolute;

}

</style>

<script type="text/javascript">

function setLeftEdge()

{

document.getElementById("b1").style.left="100px";

}

</script>

</head>

<body>

<input type="button" id="b1" onclick="setLeftEdge()"

value="Set left edge to 100 px" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM length Property

Definition and Usage

The length property returns the number of elements in a form.

Syntax

formObject.length

Example

The following example returns the number of elements in the form:

<html>

<body>

<form id="myForm" method="get">

Name: <input type="text" size="20" value="Peter Griffin" /><br />

Text: <input type="text" size="20" value="Hello World" />

</form>

<script type="text/javascript">

document.write("Number of elements in myForm: ");

document.write(document.getElementById('myForm').length);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM length Property

Definition and Usage

The length property returns the number of elements in the history list.

Note: IE 6 and Opera 9 starts at 0, while Firefox 1.5 starts at 1.

Syntax

history.length

Example

<html>

<body>

<script type="text/javascript">

document.write(history.length);

</script>

</body>

</html>

Output could be:

3

Try-It-Yourself Demos


HTML DOM lineHeight Property

Definition and Usage

The lineHeight property sets the distance between lines (sets the line-height).

Syntax

Object.style.lineHeight=normal|number|length|%

Possible Values

Value | Description
normal | Sets a reasonable distance between lines
number | Sets a number that will be multiplied with the current font-size to set the distance between the lines
length | Sets a fixed distance between the lines
% | Sets a distance between the lines in % of the current font size

Example

The following example changes the line-height:

<html>

<head>

<script type="text/javascript">

function changeLineHeight()

{

document.getElementById("div1").style.lineHeight="2";

}

</script>

</head>

<body>

<div id="div1">

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

</div>

<br />

<input type="button" onclick="changeLineHeight()"

value="Change line-height" />

</body>

</html>

Try-It-Yourself Demos

lineHeight - Change the line-height


HTML DOM Link Object

Link Object

The Link object represents an HTML <link> element. The <link> element defines the relationship between two linked documents

The <link> element is defined in the head section of an HTML document.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Link Object Properties

Property | Description | IE | F | O | W3C
charset | Sets or returns the character encoding of the target URL | 4 | 1 | 9 | Yes
disabled | Sets or returns whether or not the target URL should be disabled | 4 | 1 | 9 | Yes
href | Sets or returns the URL of a linked resource | 4 | 1 | 9 | Yes
hreflang | Sets or returns the base language of the target URL | 4 | 1 | 9 | Yes
id | Sets or returns the id of a <link> element | 4 | 1 | 9 | Yes
media | Sets or returns on what device the document will be displayed | 6 | 1 | 9 | Yes
name | Sets or returns the name of a <link> element | 4 | No | No | Yes
rel | Sets or returns the relationship between the current document and the target URL | 4 | 1 | 9 | Yes
rev | Sets or returns the relationship between the target URL and the current document | 4 | 1 | 9 | Yes
 | Sets or returns the MIME type of the target URL | 4 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes


HTML DOM links Collection

Definition and Usage

The links collection returns a reference to all Area and Link objects in the document.

Syntax

document.links[]

Example

<html>

<body>

<img src="planets.gif"

width="145" height="126"

usemap="#planetmap" />

<map name="planetmap">

<area id="venus" shape="circle"

coords="124,58,8"

alt="Venus"

href="venus.htm" />

</map>

<br />

Number of links in this document:

<script type="text/javascript">

document.write(document.links.length)

</script>

</body>

</html>

Try-It-Yourself Demos

Return the number of links in a document

Return the id of the first link (area) in a document


HTML DOM listStyle Property

Definition and Usage

The listStyle property sets all list properties in one declaration.

Syntax

Object.style.listStyle=listStyleType listStylePosition listStyleImage

Possible Values

Value | Description | Values
listStyleType | Sets the type of the list-item marker. Note: Not all values in the right column works in all browsers. | 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
listStylePosition | Positions the list-item marker | outside inside
listStyleImage | Sets an image as the list-item marker | none url(url)

Example

The following example changes the style of a list:

<html>

<head>

<script type="text/javascript">

function changeList()

{

document.getElementById("ul1").style.listStyle="decimal inside";

}

</script>

</head>

<body>

<ul id="ul1">

<li>Coffee</li>

<li>Tea</li>

<li>Water</li>

<li>Soda</li>

</ul>

<input type="button" onclick="changeList()"

value="Change list style" />

</body>

</html>

Try-It-Yourself Demos

listStyle - Change the style of a list


HTML DOM listStyleImage Property

Definition and Usage

The listStyleImage property sets an image as the list-item marker.

Syntax

Object.style.listStyleImage=url|none

Possible Values

Value | Description
url | The path to the image
none | No image will be displayed

Example

The following example changes the list-item marker of a list:

<html>

<head>

<script type="text/javascript">

function changeList()

{

document.getElementById("ul1").style.listStyleImage="url('blueb.gif')";

}

</script>

</head>

<body>

<ul id="ul1">

<li>Coffee</li>

<li>Tea</li>

<li>Water</li>

<li>Soda</li>

</ul>

<input type="button" onclick="changeList()"

value="Change list-item marker" />

</body>

</html>

Try-It-Yourself Demos

listStyleImage - Change the list-item marker of a list


HTML DOM listStylePosition Property

Definition and Usage

The listStylePosition property positions the list-item marker in the list.

Syntax

Object.style.listStylePosition=inside|outside

Possible Values

Value | Description
inside | Indents the marker and the text
outside | Default

Example

The following example changes the list-item marker position:

<html>

<head>

<script type="text/javascript">

function changeList()

{

document.getElementById("ul1").style.listStylePosition="inside";

}

</script>

</head>

<body>

<ul id="ul1">

<li>Coffee</li>

<li>Tea</li>

<li>Water</li>

<li>Soda</li>

</ul>

<input type="button" onclick="changeList()"

value="Change list-item marker position" />

</body>

</html>

Try-It-Yourself Demos

listStylePosition - Change the list-item marker position


HTML DOM listStyleType Property

Definition and Usage

The listStyleType property sets the type of the list-item marker.

Syntax

Object.style.listStyleType=value

Possible Values

Value | Description
none | No marker
disc | The marker is a filled circle
circle | The marker is a circle
square | The marker is a square
decimal | The marker is a number
decimal-leading-zero | The marker is a number with leading zeros (01, 02, 03, etc.)
lower-roman | The marker is lower-roman (i, ii, iii, iv, v, etc.)
upper-roman | The marker is upper-roman (I, II, III, IV, V, etc.)
lower-alpha | The marker is lower-alpha (a, b, c, d, e, etc.)
upper-alpha | The marker is upper-alpha (A, B, C, D, E, etc.)
lower-greek | The marker is lower-greek (alpha, beta, gamma, etc.)
lower-latin | The marker is lower-latin (a, b, c, d, e, etc.)
upper-latin | The marker is upper-latin (A, B, C, D, E, etc.)
hebrew | The marker is traditional Hebrew numbering
armenian | The marker is traditional Armenian numbering
georgian | The marker is traditional Georgian numbering (an, ban, gan, etc.)
cjk-ideographic | The marker is plain ideographic numbers
hiragana | The marker is: a, i, u, e, o, ka, ki, etc.
katakana | The marker is: A, I, U, E, O, KA, KI, etc.
hiragana-iroha | The marker is: i, ro, ha, ni, ho, he, to, etc.
katakana-iroha | The marker is: I, RO, HA, NI, HO, HE, TO, etc.

Note: Not all values above works in all browsers.

Example

The following example changes the list-item marker type:

<html>

<head>

<script type="text/javascript">

function changeList()

{

document.getElementById("ul1").style.listStyleType="square";

}

</script>

</head>

<body>

<ul id="ul1">

<li>Coffee</li>

<li>Tea</li>

<li>Water</li>

<li>Soda</li>

</ul>

<input type="button" onclick="changeList()"

value="Change list-item marker type" />

</body>

</html>

Try-It-Yourself Demos

listStyleType - Change the list-item marker type


HTML DOM Location Object

Location Object

The Location object is actually a JavaScript object, not an HTML DOM object.

The Location object is automatically created by the JavaScript runtime engine and contains information about the current URL. Example: Send a user to a new location

The Location object is part of the Window object and is accessed through the window.location property.

IE: Internet Explorer, F: Firefox, O: Opera.

Location Object Properties

Property | Description | IE | F | O
hash | Sets or returns the URL from the hash sign (#) | 4 | 1 | 9
host | Sets or returns the hostname and port number of the current URL | 4 | 1 | 9
hostname | Sets or returns the hostname of the current URL | 4 | 1 | 9
href | Sets or returns the entire URL | 4 | 1 | 9
pathname | Sets or returns the path of the current URL | 4 | 1 | 9
port | Sets or returns the port number of the current URL | 4 | 1 | 9
protocol | Sets or returns the protocol of the current URL | 4 | 1 | 9
 | Sets or returns the URL from the question mark (?) | 4 | 1 | 9

Location Object Methods

Method | Description | IE | F | O
 | Loads a new document | 4 | 1 | 9
reload() | Reloads the current document | 4 | 1 | 9
replace() | Replaces the current document with a new one | 4 | 1 | 9


HTML DOM logicalXDPI Property

Definition and Usage

The logicalXDPI property returns the normal number of horizontal dots per inch of the display screen.

Syntax

screen.logicalXDPI

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>Logical XDPI: ")

document.write(screen.logicalXDPI + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos

Detect details about the client's screen


HTML DOM logicalYDPI Property

Definition and Usage

The logicalYDPI property returns the normal number of vertical dots per inch of the display screen.

Syntax

screen.logicalYDPI

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>Logical YDPI: ")

document.write(screen.logicalYDPI + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM longDesc Property

Definition and Usage

The longDesc property sets or returns a URL to a document that contains a description of the frame contents.

Tip: Use it for browsers that do not support frames.

Syntax

frameObject.longDesc=URL

Example

In our example we will first create an HTML document containing a frameset with two columns. Each column is set to 50% of the browser window:

<html>

<frameset cols="50%,50%">

  <frame id="leftFrame" src="frame_longdesc.htm"

  longdesc="frame_description.htm">

  <frame id="rightFrame" src="frame_a.htm">

</frameset>

</html>

The HTML document "frame_longdesc.htm" is put into the first column, and the HTML document "frame_a.htm" is put into the second column.

The source of "frame_longdesc.htm" is as follows:

<html>

<body>

<script type="text/javascript">

x=parent.document.getElementById("leftFrame");

document.write("Description for this frame: ");

document.write('<a href="' + x.longDesc

+ '">Description</a>');

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM longDesc Property

Definition and Usage

The longDesc property sets or returns a URL to a document that contains a description of the iframe contents.

Tip: Use it for browsers that do not support frames.

Syntax

iframeObject.longDesc=URL

Example

The following example creates a link to the description page:

<html>

<body>

<iframe src="frame_a.htm" id="frame1"

longdesc="frame_description.htm"></iframe>

<br />

<script type="text/javascript">

x=document.getElementById("frame1");

document.write("Description for frame contents: ");

document.write('<a href="' + x.longDesc + '">Description</a>');

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM longDesc Property

Definition and Usage

The longDesc property sets or returns a URL to a document containing a description of the image.

This description is a supplement to the "alt" attribute, and it can be useful for non-visual user agents.

Syntax

imageObject.longDesc=URL

Example

The following example creates a link to the description of the image:

<html>

<body>

<img id="compman" src="compman.gif"

longdesc="compman_description.htm" alt="Computerman" />

<br />

<script type="text/javascript">

var x=document.getElementById("compman");

document.write("Description for image: ");

document.write('<a href="' + x.longDesc + '">Description</a>');

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM margin Property

Definition and Usage

The margin property sets the margins of an element.

This property can take from one to four values:

· If you specify one value, like: div {margin: 50px} - all four margins will be 50px
· If you specify two values, like: div {margin: 50px 10px} - the top and bottom margins will be 50px, left and right margins will be 10px
· If you specify three values, like: div {margin: 50px 10px 20px}- the top margin will be 50px, left and right margin will be 10px, bottom margin will be 20px
· If you specify four values, like: div {margin: 50px 10px 20px 30px} - the top margin will be 50px, right margin will be 10px, bottom margin will be 20px, left margin will be 30px

Syntax

Object.style.margin=margin

Possible Values

Value | Description
margin | Sets the margins. The value(s) can be defined in % (defines a margin in % of the total height/width of the document), length (defines a fixed margin), and auto (the browser sets a margin)

Example

The following example changes the margins of a paragraph:

<html>

<head>

<script type="text/javascript">

function changeMargin()

{

document.getElementById("p1").style.margin="100px";

}

</script>

</head>

<body>

<input type="button" onclick="changeMargin()"

value="Change margins of a paragraph" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

margin - Change the margins of a paragraph


HTML DOM marginBottom Property

Definition and Usage

The marginBottom property sets the bottom margin of an element.

Syntax

Object.style.marginBottom=auto|length|%

Possible Values

Value | Description
auto | The browser sets a bottom margin
length | Defines a fixed bottom margin
% | Defines a bottom margin in % of the total height of the document

Example

The following example changes the bottom margin of a paragraph:

<html>

<head>

<script type="text/javascript">

function changeMargin()

{

document.getElementById("p1").style.marginBottom="32px";

}

</script>

</head>

<body>

<input type="button" onclick="changeMargin()"

value="Change the bottom margin of a paragraph" />

<p>This is a paragraph</p>

<p id="p1">This is a paragraph</p>

<p>This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

marginBottom - Change the bottom margin of an element


HTML DOM marginHeight Property

Definition and Usage

The marginHeight property sets or returns the top and bottom margins of a frame (in pixels).

Syntax

frameObject.marginHeight=pixels

Example

In our example we will first create an HTML document containing a frameset with two columns. Each column is set to 50% of the browser window:

<html>

<frameset cols="50%,50%">

  <frame id="leftFrame" marginheight="50"

  src="frame_marginheight.htm">

  <frame id="rightFrame" marginheight="100"

  src="frame_a.htm">

</frameset>

</html>

The HTML document "frame_marginheight.htm" is put into the first column, and the HTML document "frame_a.htm" is put into the second column.

The source of "frame_marginheight.htm" is as follows:

<html>

<body>

script type="text/javascript">

x=parent.document.getElementById("leftFrame");

y=parent.document.getElementById("rightFrame");

document.write("Top/Bottom margins for leftFrame: ");

document.write(x.marginHeight);

document.write("<br />Top/Bottom margins for rightFrame: ");

document.write(y.marginHeight);

</script>

</body>

</html>

Try-It-Yourself Demos

Return the top and bottom margins of frames


HTML DOM marginHeight Property

Definition and Usage

The marginHeight property sets or returns the top and bottom margins of a frame (in pixels).

Syntax

iframeObject.marginHeight=pixels

Example

The following example returns the top and bottom margins of the iframe:

<html>

<body>

<iframe src="frame_a.htm" id="frame1" marginheight="50"></iframe>

<br />

<script type="text/javascript">

x=document.getElementById("frame1");

document.write("Top and bottom margins of the iframe are: ");

document.write(x.marginHeight);

</script>

</body>

</html>

Try-It-Yourself Demos

Return the top and bottom margins of an iframe


HTML DOM marginLeft Property

Definition and Usage

The marginLeft property sets the left margin of an element.

Syntax

Object.style.marginLeft=auto|length|%

Possible Values

Value | Description
auto | The browser sets a left margin
length | Defines a fixed left margin
% | Defines a left margin in % of the total width of the document

Example

The following example changes the left margin of a paragraph:

<html>

<head>

<script type="text/javascript">

function changeMargin()

{

document.getElementById("p1").style.marginLeft="32px";

}

</script>

</head>

<body>

<input type="button" onclick="changeMargin()"

value="Change the left margin of a paragraph" />

<p>This is a paragraph</p>

<p id="p1">This is a paragraph</p>

<p>This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

marginLeft - Change the left margin of an element


HTML DOM marginRight Property

Definition and Usage

The marginRight property sets the right margin of an element.

Syntax

Object.style.marginRight=auto|length|%

Possible Values

Value | Description
auto | The browser sets a right margin
length | Defines a fixed right margin
% | Defines a right margin in % of the total width of the document

Example

The following example changes the right margin of a paragraph:

<html>

<head>

<style type="text/css">

p

{

text-align: right

}

</style>

<script type="text/javascript">

function changeMargin()

{

document.getElementById("p1").style.marginRight="32px";

}

</script>

</head>

<body>

<input type="button" onclick="changeMargin()"

value="Change the right margin of a paragraph" />

<p>This is a paragraph</p>

<p id="p1">This is a paragraph</p>

<p>This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

marginRight - Change the right margin of a paragraph


HTML DOM marginTop Property

Definition and Usage

The marginTop property sets the top margin of an element.

Syntax

Object.style.marginTop=auto|length|%

Possible Values

Value | Description
auto | The browser sets a top margin
length | Defines a fixed top margin
% | Defines a top margin in % of the total height of the document

Example

The following example changes the top margin of a paragraph:

<html>

<head>

<script type="text/javascript">

function changeMargin()

{

document.getElementById("p1").style.marginTop="32px";

}

</script>

</head>

<body>

<input type="button" onclick="changeMargin()"

value="Change the top margin of a paragraph" />

<p>This is a paragraph</p>

<p id="p1">This is a paragraph</p>

<p>This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

marginTop - Change the top margin of a paragraph


HTML DOM marginWidth Property

Definition and Usage

The marginWidth property sets or returns the left and right margins of a frame (in pixels).

Syntax

frameObject.marginWidth=pixels

Example

In our example we will first create an HTML document containing a frameset with two columns. Each column is set to 50% of the browser window:

<html>

<frameset cols="50%,50%">

  <frame id="leftFrame" marginwidth="50"

  src="frame_marginwidth.htm">

  <frame id="rightFrame" marginwidth="20"

  src="frame_a.htm">

</frameset>

</html>

The HTML document "frame_marginwidth.htm" is put into the first column, and the HTML document "frame_a.htm" is put into the second column.

The source of "frame_marginwidth.htm" is as follows:

<html>

<body>

script type="text/javascript">

x=parent.document.getElementById("leftFrame");

y=parent.document.getElementById("rightFrame");

document.write("Left/Right margins for leftFrame: ");

document.write(x.marginWidth);

document.write("<br />Left/Right margins for rightFrame: ");

document.write(y.marginWidth);

</script>

</body>

</html>

Try-It-Yourself Demos

Return the left and right margins of frames


HTML DOM marginWidth Property

Definition and Usage

The marginWidth property sets or returns the left and right margins of a frame (in pixels).

Syntax

iframeObject.marginWidth=pixels

Example

The following example returns the left and right margins of the iframe:

<html>

<body>

<iframe src="frame_a.htm" id="frame1" marginwidth="50"></iframe>

<br /><br />

<script type="text/javascript">

x=document.getElementById("frame1");

document.write("Left and right margins of the iframe are: ");

document.write(x.marginWidth);

</script>

</body>

</html>

Try-It-Yourself Demos

Return the left and right margins of an iframe


HTML DOM maxHeight Property

Definition and Usage

The maxHeight property sets the maximum height of an element.

Syntax

Object.style.maxHeight=length|%

Possible Values

Value | Description
length | Defines the height in px, cm, etc.
% | Defines the max height in % of the containing block

Example

The following example sets the maximum height of an element box:

<html>

<head>

<script type="text/javascript">

function setMaxHeight()

{

document.getElementById("p1").style.maxHeight="10px";

}

</script>

</head>

<body>

<p id="p1">This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.</p>

<input type="button" onclick="setMaxHeight()"

value="Set max height" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM maxLength Property

Definition and Usage

The maxLength property sets or returns the maximum number of characters allowed in a password field.

Syntax

passwordObject.maxLength=number_of_chars

Example

The following example alerts the maximum number of characters allowed in the specified password field:

<html>

<head>

<script type="text/javascript">

function alertLength()

{

alert(document.getElementById("password1").maxLength)

}

</script>

</head>

<body>

<form>

<input type="password" id="password1" maxLength="8" />

<input type="button" id="button1" onclick="alertLength()"

value="Alert maxLength" />

</form>

</body>

</html>

Try-It-Yourself Demos

Get the max number of characters allowed in the password field


HTML DOM maxLength Property

Definition and Usage

The maxLength property sets or returns the maximum number of characters in a text field.

Syntax

textObject.maxLength=number_of_char

Example

<html>

<head>

<script type="text/javascript">

function maxLen()

{

alert(document.getElementById("name").maxLength)

}

</script>

</head>

<body>

<form>

Name: <input type="text" id="name" value="Mickey Mouse" size="20"

maxlength="30" />

<br /><br />

<input type="button" onclick="maxLen()" value="Alert maxlength" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM maxWidth Property

Definition and Usage

The maxWidth property sets the maximum width of an element.

Syntax

Object.style.maxWidth=length|%

Possible Values

Value | Description
length | Defines the width in px, cm, etc.
% | Defines the max width in % of the containing block

Example

The following example sets the maximum width of an element box:

<html>

<head>

<script type="text/javascript">

function setMaxWidth()

{

document.getElementById("p1").style.maxWidth="10px";

}

</script>

</head>

<body>

<p id="p1">This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.</p>

<input type="button" onclick="setMaxWidth()"

value="Set max width" />

</body>

</html>

Try-It-Yourself Demos

maxWidth - Set max width of an element box


HTML DOM Meta Object

Meta Object

The Meta object represents an HTML <meta> element.

The <meta> element provides meta-information about a HTML document, such as descriptions and keywords for search engines and refresh rates.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Meta Object Properties

Property | Description | IE | F | O | W3C
content | Sets or returns the value of the content attribute of a <meta> element | 5 | 1 | 9 | Yes
 | Connects the content attribute to an HTTP header | 5 | 1 | 9 | Yes
name | Connects the content attribute to a name | 5 | 1 | 9 | Yes
scheme | Sets or returns the format to be used to interpret the value of the content attribute | 6 | 1 | 9 | Yes


HTML DOM method Property

Definition and Usage

The method property sets or returns the HTTP method for sending data to the server (the action URL).

Syntax

formObject.method=get|post

Example

The following example alerts the HTTP method for sending form data:

<html>

<head>

<script type="text/javascript">

function showMethod()

{

var x=document.getElementById("myForm")

alert(x.method)

}

</script>

</head>

<body>

<form id="myForm" method="post">

Name: <input type="text" size="20" value="Mickey Mouse" />

<input type="button" onclick="showMethod()" value="Show method" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM minHeight Property

Definition and Usage

The minHeight property sets the minimum height of an element.

Syntax

Object.style.minHeight=length|%

Possible Values

Value | Description
length | Defines the minimum height in px, cm, etc.
% | Defines the minimum height in % of the containing block

Example

The following example sets the minimum height of an element box:

<html>

<head>

<script type="text/javascript">

function setMinHeight()

{

document.getElementById("p1").style.minHeight="200px";

}

</script>

</head>

<body>

<p id="p1">This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.</p>

<input type="button" onclick="setMinHeight()"

value="Set min height" />

</body>

</html>

Try-It-Yourself Demos

minHeight - Set minimum height of an element box


HTML DOM minWidth Property

Definition and Usage

The minWidth property sets the minimum width of an element.

Syntax

Object.style.minWidth=length|%

Possible Values

Value | Description
length | Defines the minimum width in px, cm, etc.
% | Defines the minimum width in % of the containing block

Example

The following example sets the minimum width of an element box:

<html>

<head>

<script type="text/javascript">

function setMinWidth()

{

document.getElementById("p1").style.minWidth="1000px";

}

</script>

</head>

<body>

<p id="p1">This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.</p>

<input type="button" onclick="setMinWidth()"

value="Set min width" />

</body>

</html>

Try-It-Yourself Demos

minWidth - Set min width of an element box


HTML DOM moveBy() Method

Definition and Usage

The moveBy() method moves a window a specified number of pixels relative to its current coordinates.

Syntax

window.moveBy(x,y)

Example

The following example moves the new window with 50px relative to its current position:

<html>

<head>

<script type="text/javascript">

function moveWin()

{

myWindow.moveBy(50,50)

}

</script>

</head>

<body>

<script type="text/javascript">

myWindow=window.open('','','width=200,height=100')

myWindow.document.write("This is 'myWindow'")

</script>

<input type="button" value="Move 'myWindow'"

onclick="moveWin()" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM moveTo() Method

Definition and Usage

The moveTo() method moves a window's left and top edge to the specified coordinates.

Syntax

window.moveTo(x,y)

Example

The following example moves the new window to the specified coordinates:

<html>

<head>

<script type="text/javascript">

function moveWin()

{

myWindow.moveTo(50,50)

}

</script>

</head>

<body>

<script type="text/javascript">

myWindow=window.open('','','width=200,height=100')

myWindow.document.write("This is 'myWindow'")

</script>

<input type="button" value="Move 'myWindow'"

onclick="moveWin()" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM name Property

Definition and Usage

The name property sets or returns the name of a link.

Syntax

anchorObject.name=name

Example

The following example returns the name of a link:

<html>

<body>

<p><a id="myAnchor" name="myAnchor"

href="http://www.w3schools.com">Visit W3Schools.com</a></p>

<script type="text/javascript">

x=document.getElementById("myAnchor");

document.write(x.name);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM name Property

Definition and Usage

The name property sets or returns the name of a button.

Syntax

buttonObject.name=name

Example

The following example returns the name of a button:

<html>

<body>

<form>

<input type="button" id="button1"

name="button1" value="Click Me!" />

</form>

<p>The name of the button is:

<script type="text/javascript">

x=document.getElementById('button1');

document.write(x.name);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM name Property

Definition and Usage

The name property sets or returns the name of a checkbox.

Syntax

checkboxObject.name=name

Example

The following example prints the name of the checkbox:

<html>

<body>

<form>

<input type="checkbox" id="check1" name="check1" />

</form>

<p>The name of the checkbox is:

<script type="text/javascript">

document.write(document.getElementById("check1").name)

</script>

</p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM name Property

Definition and Usage

The length property sets or returns the name of a form.

Syntax

formObject.name=formname

Example

The following example returns the name of the form:

<html>

<body>

<form id="myForm" method="get" name="myForm">

Name: <input type="text" size="20" value="Peter Griffin" />

</form>

<script type="text/javascript">

document.write("Form name: ");

document.write(document.getElementById('myForm').name);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM name Property

Definition and Usage

The name property sets or returns the name of a frame.

Syntax

frameObject.name=name

Example

In our example we will first create an HTML document containing a frameset with two columns. Each column is set to 50% of the browser window:

<html>

<frameset cols="50%,50%">

  <frame id="leftFrame" name="toc" src="frame_name.htm">

  <frame id="rightFrame" name="main" src="frame_a.htm">

</frameset>

</html>

The HTML document "frame_name.htm" is put into the first column, and the HTML document "frame_a.htm" is put into the second column.

The source of "frame_name.htm" is as follows:

<html>

<body>

<script type="text/javascript">

x=parent.document.getElementById("leftFrame");

y=parent.document.getElementById("rightFrame");

document.write("The name of leftFrame is: ");

document.write(x.name);

document.write("<br />The name of rightFrame is: ");

document.write(y.name);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM name Property

Definition and Usage

The name property sets or returns the name of a hidden input field.

Syntax

hiddenObject.name=name

Example

The following example returns the name of the hidden field:

<html>

<body>

<form>

<input type="hidden" id="hidden1" name="hidden1" />

</form>

<p>The name of the hidden field is:

<script type="text/javascript">

alert(document.getElementById("hidden1").name)

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM name Property

Definition and Usage

The name property sets or returns the name of an iframe.

Syntax

iframeObject.name=name

Example

The following example returns the name of the iframe:

<html>

<body>

<iframe src="frame_a.htm" id="frame1" name="iframe">

</iframe><br />

<script type="text/javascript">

x=document.getElementById("frame1");

document.write("The iframe's name is: ");

document.write(x.name);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM name Property

Definition and Usage

The name property sets or returns the name of a <link> element.

Syntax

linkObject.name=name

Example

The following example outputs the name of a link element:

<html>

<head>

<link rel="stylesheet" type="text/css" name="stylesheet"

id="style1" href="try_dom_link.css" />

<script type="text/javascript">

function alertName()

{

alert(document.getElementById("style1").name);

}

</script>

</head>

<body>

<form>

<input type="button" onclick="alertName()"

value="Alert name attribute" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM name Property

Definition and Usage

The name property connects the content attribute to a name.

Syntax

metaObject.name=author|description|keywords|generator|

revised|others

Example

The following example has a <meta> tag that defines some keywords for search engines. The script below returns the name of the content attribute:

<html>

<head>

<meta name="keywords" content="HTML,DHTML,CSS,JavaScript" />

</head>

<body>

<script type="text/javascript">

x=document.getElementsByTagName("meta")[0];

document.write("Meta name: " + x.name);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM name Property

Definition and Usage

The name property sets or returns the name of the password field.

Syntax

passwordObject.name=name

Example

The following example gets the name of the password field:

<html>

<body>

<form id="form1">

<input type="password" id="password1" name="password1" />

</form>

<p>The name of the password field is:

<script type="text/javascript">

x=document.getElementById('password1');

document.write(x.name);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM name Property

Definition and Usage

The name property sets or returns the name of a button.

Syntax

buttonObject.name=name

Example

The following example returns the name of the button:

<html>

<body>

<button id="button1" name="button1">

Click Me!</button>

<p>The name of the button is:

<script type="text/javascript">

x=document.getElementById('button1');

document.write(x.name);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM name Property

Definition and Usage

The name property sets or returns the name of a radio button.

Syntax

radioObject.name=name

Example

The following example alerts the name of the radio button:

<html>

<body>

<form>

<input type="radio" id="radio1" name="radio1" />

</form>

<p>The name of the radio button is:

<script type="text/javascript">

x=document.getElementById('radio1');

document.write(x.name);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM name Property

Definition and Usage

The name property sets or returns the name of a reset button.

Syntax

resetObject.name=name

Example

The following example returns the name of a reset button:

<html>

<body>

<form>

<input type="reset" id="reset1" name="reset1" />

</form>

<p>The name of the reset button is:

<script type="text/javascript">

x=document.getElementById('reset1');

document.write(x.name);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM name Property

Definition and Usage

The name property sets or returns the name of a dropdown list.

Syntax

selectObject.name=name

Example

The following example alerts the name of a dropdown list:

<html>

<head>

<script type="text/javascript">

function getName()

{

alert(document.getElementById("mySelect").name)

}

</script>

</head>

<body>

<form>

<select name="mySelect" id="mySelect">

<option>Apple</option>

<option>Pear</option>

<option>Banana</option>

<option>Orange</option>

</select>

<input type="button" onclick="getName()"

value="Alert name">

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM name Property

Definition and Usage

The name property sets or returns the name of a submit button.

Syntax

submitObject.name=name

Example

The following example returns the name of a submit button:

<html>

<body>

<form>

<input type="submit" id="submit1" name="submit1" />

</form>

<p>The name of the submit button is:

<script type="text/javascript">

x=document.getElementById('submit1');

document.write(x.name);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM name Property

Definition and Usage

The name property sets or returns the name of a text area.

Syntax

textareaObject.name=text

Example

The following example gets the name of a text area:

<html>

<head>

<script type="text/javascript">

function alertName()

{

alert(document.getElementById('txt1').name);

}

</script>

</head>

<body>

<textarea id="txt1" name="textarea1">

Hello world....This is a text area

</textarea>

<br />

<input type="button" onclick="alertName()"

value="Alert name" />

</body>

</html>


HTML DOM name Property

Definition and Usage

The name property sets or returns the name of a text field.

Syntax

textObject.name=name

Example

The following example gets the name of the text field:

<html>

<body>

<form>

Email: <input type="text" id="email" name="email" />

</form>

<p>The name of the text field is:

<script type="text/javascript">

x=document.getElementById('text1');

document.write(x.name);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM name Property

Definition and Usage

The name property sets or returns the name of the window.

Syntax

window.name=name

Example

The following example returns the name of the new window:

<html>

<head>

<script type="text/javascript">

function checkWin()

{

document.write(myWindow.name)

}

</script>

</head>

<body>

<script type="text/javascript">

myWindow=window.open('','MyName','width=200,height=100')

myWindow.document.write("This is 'myWindow'")

</script>

<input type="button" value="What's the name of 'myWindow'?"

onclick="checkWin()">

</body>

</html>

Try-It-Yourself Demos


HTML DOM Navigator Object

Navigator Object

The Navigator object is actually a JavaScript object, not an HTML DOM object.

The Navigator object is automatically created by the JavaScript runtime engine and contains information about the client browser.

IE: Internet Explorer, F: Firefox, O: Opera.

Navigator Object Collections

Collection | Description | IE | F | O
plugins[] | Returns a reference to all embedded objects in the document | 4 | 1 | 9

Navigator Object Properties

Property | Description | IE | F | O
appCodeName | Returns the code name of the browser | 4 | 1 | 9
appMinorVersion | Returns the minor version of the browser | 4 | No | No
appName | Returns the name of the browser | 4 | 1 | 9
appVersion | Returns the platform and version of the browser | 4 | 1 | 9
browserLanguage | Returns the current browser language | 4 | No | 9
cookieEnabled | Returns a Boolean value that specifies whether cookies are enabled in the browser | 4 | 1 | 9
cpuClass | Returns the CPU class of the browser's system | 4 | No | No
onLine | Returns a Boolean value that specifies whether the system is in offline mode | 4 | No | No
 | Returns the operating system platform | 4 | 1 | 9
systemLanguage | Returns the default language used by the OS | 4 | No | No
userAgent | Returns the value of the user-agent header sent by the client to the server | 4 | 1 | 9
userLanguage | Returns the OS' natural language setting | 4 | No | 9

Navigator Object Methods

Method | Description | IE | F | O
javaEnabled() | Specifies whether or not the browser has Java enabled | 4 | 1 | 9
taintEnabled() | Specifies whether or not the browser has data tainting enabled | 4 | 1 | 9


HTML DOM Node Information

The nodeName, nodeValue, and nodeType properties contain information about nodes.

Node Information

Every node has some properties that contain some information about the node. The properties are:

· nodeName
· nodeValue
· nodeType

nodeName

The nodeName property contains the name of a node.

· The nodeName of an element node is the tag name
· The nodeName of an attribute node is the attribute name
· The name of a text node is always #text
· The name of the document node is always #document

Note: nodeName always contains the uppercase tag name of an HTML element.

nodeValue

On text nodes, the nodeValue property contains the text.

On attribute nodes, the nodeValue property contains the attribute value.

The nodeValue property is not available on document and element nodes.

nodeType

The nodeType property returns the type of node.

The most important node types are:

Element type | NodeType
Element | 1
Attribute | 2
Text | 3
Comment | 8
Document | 9


HTML DOM Node Tree

All the nodes in a node tree have relationships to each other.

Document Tree (Node Tree)

Look at the following HTML document:

<html>

<head>

  <title>DOM Tutorial</title>

</head>

<body>

  <h1>DOM Lesson one</h1>

  <p>Hello world!</p>

</body>

</html>

All the nodes above have relationships to each other.

Every node except for the document node has a parent node. E.g. the parent node of the <head> and <body> nodes are the <html> node, and the parent node of the "Hello world!" text node is the <p> node.

Most element nodes have child nodes. E.g. the <head> node has one child node: the <title> node. The <title> node also has one child node: the text node "DOM Tutorial".

Nodes are siblings when they share a parent. E.g. the <h1> and <p> nodes are siblings, because their parent is the <body> node.

Nodes can also have descendants. Descendants are all the nodes that are children of a node, or children of those children, and so on. E.g. all text nodes are descendants of the <html> node, while the first text node are descendant of the <head> node.

Nodes can also have ancestors. Ancestors are nodes that are parents of a node, or parents of this parent, and so on. E.g. all text nodes have the <html> node as an ancestor.


HTML DOM Nodes

Everything in an HTML document is a node.

Nodes

According to the DOM, everything in an HTML document is a node.

The DOM says that:

· The entire document is a document node
· Every HTML tag is an element node
· The texts contained in the HTML elements are text nodes
· Every HTML attribute is an attribute node
· Comments are comment nodes

Node Hierarchy

Nodes have a hierarchical relationship to each other.

All nodes in an HTML document form a document tree (or node tree). The tree starts at the document node and continues to branch out until it has reached all text nodes at the lowest level of the tree.

The following figure represents a document tree (node tree):


HTML DOM noHref Property

Definition and Usage

The noHref property sets or returns whether an area should be active or inactive.

Syntax

areaObject.noHref=true|false

Example

The following example returns the "noHref" status of the "Venus" area in the image-map:

<html>

<body>

<img src="planets.gif"

width="145" height="126"

usemap="#planetmap" />

<map name="planetmap">

<area id="venus" shape="circle"

coords="124,58,8"

alt="Venus"

href="venus.htm" />

</map>

<p>noHref status:

<script type="text/javascript">

x=document.getElementById('venus');

document.write(x.noHref);

</script>

</p>

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM noResize Property

Definition and Usage

The noResize property sets or returns whether or not a frame can be resized.

Syntax

frameObject.noResize=true|false

Example

In our example we will first create an HTML document containing a frameset with two columns. Each column is set to 50% of the browser window:

<html>

<frameset cols="50%,50%">

  <frame id="leftFrame" src="frame_noresize.htm">

  <frame id="rightFrame" src="frame_a.htm">

</frameset>

</html>

The HTML document "frame_noresize.htm" is put into the first column, and the HTML document "frame_a.htm" is put into the second column.

The source of "frame_noresize.htm" is as follows:

<html>

<head>

<script type="text/javascript">

function disableResize()

{

parent.document.getElementById("leftFrame").noResize=true

parent.document.getElementById("rightFrame").noResize=true

}

function enableResize()

{

parent.document.getElementById("leftFrame").noResize=false

parent.document.getElementById("rightFrame").noResize=false

}

</script>

</head>

<body>

<input type="button" onclick="disableResize()" value="No resize" />

<input type="button" onclick="enableResize()" value="Resize" />

</body>

</html>

Try-It-Yourself Demos

Resizable and not resizable frames


HTML DOM Object Object

Object Object

The Object object represents an HTML <object> element.

The <object> element is used to embed executable contents in a page.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Object Properties

Property | Description | IE | F | O | W3C
align | Sets or returns the alignment of the object according to the surrounding text | 5 | 1 | 9 | Yes
archive | Sets or returns a string that can be used to implement your own archive functionality for the object | 6 | 1 | 9 | Yes
border | Sets or returns the border around the object |  |  |  | Yes
code | Sets or returns the URL of the file that contains the compiled Java class | 5 | 1 | 9 | Yes
codeBase | Sets or returns the URL of the component | 5 | 1 | 9 | Yes
codeType |  |  |  |  | Yes
data |  |  | 1 | 9 | Yes
declare |  |  |  |  | Yes
form | Returns a reference to the object's parent form |  |  |  | Yes
height | Sets or returns the height of the object |  | 1 | 9 | Yes
hspace | Sets or returns the horizontal margin of the object | 5 | 1 | 9 | Yes
id | Sets or returns the id of the object | 4 | 1 | 9 | Yes
name | Sets or returns the name of the object | 5 | 1 | 9 | Yes
standby | Sets or returns a message when loading the object |  |  |  | Yes
tabIndex | Sets or returns the tab order for the object | 5 |  |  | Yes
type | Sets or returns the content type for data downloaded via the data attribute |  | 1 | 9 | Yes
useMap |  |  | 1 | 9 | Yes
vspace | Sets or returns the vertical margin of the object | 5 | 1 | 9 | Yes
width | Sets or returns the width of the object |  | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
 | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
 | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes


HTML DOM onLine Property

Definition and Usage

The onLine property returns a Boolean value that specifies whether the system is in offline mode.

Note: In IE 4+ the user can choose to work offline by selecting File/Work Offline in the browser. When Work Offline is selected, the system enters an offline state, and content is read from the cache.

Syntax

navigator.onLine

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>OnLine: ")

document.write(navigator.onLine + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos

More details about the visitor's browser

All details about the visitor's browser


HTML DOM open() Method

Definition and Usage

The open() method opens a stream to collect the output from any document.write or document.writeln methods.

Note: If a document already exists in the target, it will be cleared. If this method has no arguments, a new window with about:blank is displayed.

Syntax

document.open(mimetype,replace)

Parameter | Description
mimetype | Optional. Specifies the type of document you are writing to. Default value is "text/html"
replace | Optional. When set, it causes the history entry for the new document to inherit the history entry from the parent document

Example

<html>

<head>

<script type="text/javascript">

function createNewDoc()

{

var newDoc=document.open("text/html","replace");

var txt="<html><body>Learning about the DOM is FUN!</body></html>";

newDoc.write(txt);

newDoc.close();

}

</script>

</head>

<body>

<input type="button" value="Write to a new document"

onclick="createNewDoc()">

</body>

</html>

Try-It-Yourself Demos


HTML DOM open() Method

Definition and Usage

The open() method is used to open a new browser window.

Syntax

window.open(URL,name,specs,replace)

Parameter

Description

URL

Optional. Specifies the URL of the page to open. If no URL is specified, a new window with about:blank is opened

name

Optional. Specifies the target attribute or the name of the window. The following values are supported:

· _blank - URL is loaded into a new window. This is default
· _parent - URL is loaded into the parent frame
· _self - URL replaces the current page
· _top - URL replaces any framesets that may be loaded
· name - The name of the window

specs

Optional. A comma-separated list of items. The following values are supported:

channelmode=yes|no|1|0 | Whether or not to display the window in theater mode. Default is no
directories=yes|no|1|0 | Whether or not to add directory buttons. Default is yes
fullscreen=yes|no|1|0 | Whether or not to display the browser in full-screen mode. Default is no. A window in full-screen mode must also be in theater mode
height=pixels | The height of the window. Min. value is 100
left=pixels | The left position of the window
location=yes|no|1|0 | Whether or not to display the address field. Default is yes
menubar=yes|no|1|0 | Whether or not to display the menu bar. Default is yes
resizable=yes|no|1|0 | Whether or not the window is resizable. Default is yes
scrollbars=yes|no|1|0 | Whether or not to display scroll bars. Default is yes
status=yes|no|1|0 | Whether or not to add a status bar. Default is yes
titlebar=yes|no|1|0 | Whether or not to display the title bar. Ignored unless the calling application is an HTML Application or a trusted dialog box. Default is yes
toolbar=yes|no|1|0 | Whether or not to display the browser toolbar. Default is yes
top=pixels | The top position of the window
width=pixels | The width of the window. Min. value is 100

replace

Optional.Specifies whether the URL creates a new entry or replaces the current entry in the history list. The following values are supported:

· true - URL replaces the current document in the history list
· false - URL creates a new entry in the history list

Example

The following example opens www.w3schools.com in a new browser window:

<html>

<head>

<script type="text/javascript">

function open_win()

{

window.open("http://www.w3schools.com")

}

</script>

</head>

<body>

<input type=button value="Open Window" onclick="open_win()" />

</body>

</html>

Example

The following example opens an about:blank page in a new browser window:

<html>

<body>

<script type="text/javascript">

myWindow=window.open('','','width=200,height=100')

myWindow.document.write("This is 'myWindow'")

myWindow.focus()

</script>

</body>

</html>

Try-It-Yourself Demos

Open a new window when clicking on a button

Open a new window and control its appearance

Open multiple windows with one click


HTML DOM opener Property

Definition and Usage

The opener property returns a reference to the window that created the window.

Syntax

window.opener

Example

The following example writes some text to the opener window (parent window):

<html>

<body>

<script type="text/javascript">

myWindow=window.open('','MyName','width=200,height=100')

myWindow.document.write("This is 'myWindow'")

myWindow.focus()

myWindow.opener.document.write("This is the parent window")

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM Option Object

Option Object

The Option object represents an option in a dropdown list in an HTML form.

For each instance of an <option> tag in an HTML form, an Option object is created.

You can access an Option object by searching through the elements[] array of the form, or by using document.getElementById().

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Option Object Properties

Property | Description | IE | F | O | W3C
defaultSelected | Returns the default value of the selected attribute | 4 | 1 | 9 | Yes
disabled | Sets or returns whether or not an option should be disabled | 4 | 1 | 9 | Yes
form | Returns a reference to the form that contains an option | 4 | 1 | 9 | Yes
id | Sets or returns the id of an option | 4 | 1 | 9 | Yes
index | Returns the index position of an option in a dropdown list | 4 | 1 | 9 | Yes
label | Sets or returns a label for an option (only for option-groups) | 6 |  |  | Yes
selected | Sets or returns the value of the selected attribute | 4 | 1 | 9 | Yes
text | Sets or returns the text value of an option | 4 | 1 | 9 | Yes
value | Sets or returns the value to be sent to the server | 4 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
className | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
 | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes


HTML DOM options Collection

Definition and Usage

The option collection returns an array of all the options in a dropdown list.

Note: There is one element for each <option> tag - starting at 0.

Syntax

selectObject.options[]

Example

The following example outputs the text of all the options in the dropdown list:

<html>

<head>

<script type="text/javascript">

function getOptions()

{

var x=document.getElementById("mySelect");

for (i=0;i<x.length;i++)

  {

  document.write(x.options[i].text)

  document.write("<br />")

  }

}

</script>

</head>

<body>

<form>

Select your favorite fruit:

<select id="mySelect">

<option>Apple</option>

<option>Orange</option>

<option>Pineapple</option>

<option>Banana</option>

</select>

<br /><br />

<input type="button" onclick="getOptions()"

value="Output all options">

</form>

</body>

</html>

Try-It-Yourself Demos

Output the text of all options in a dropdown list

Return the text of a selected option in a dropdown list


HTML DOM outerheight Property

Definition and Usage

The outerheight property sets or returns the outer height of a window, including all interface elements.

Syntax

window.outerheight=pixels

Example

The following example sets the new window to be 100x100 pixels:

<html>

<body>

<script type="text/javascript">

myWindow=window.open('','')

myWindow.outerheight="100"

myWindow.outerwidth="100"

myWindow.document.write("This is 'myWindow'")

myWindow.focus()

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM outerwidth Property

Definition and Usage

The outerwidth property sets or returns the outer width of a window, including all interface elements.

Syntax

window.outerwidth=pixels

Example

The following example sets the new window to be 100x100 pixels:

<html>

<body>

<script type="text/javascript">

myWindow=window.open('','')

myWindow.outerheight="100"

myWindow.outerwidth="100"

myWindow.document.write("This is 'myWindow'")

myWindow.focus()

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM outline Property

Definition and Usage

The outline property sets all outline properties in one declaration.

Syntax

Object.style.outline=outlineWidth outlineStyle outlineColor

Possible Values

Value | Description | Values
outlineWidth | Sets the width of the outline | thin medium thick length
outlineStyle | Sets the style of the outline | none hidden dotted dashed solid double groove ridge inset outset
outlineColor | Sets the color of the outline | color-name color-rgb color-hex transparent

Example

The following example changes the outline around a paragraph:

<html>

<head>

<style type="text/css">

p

{

outline: thick solid #FF0000;

}

</style>

<script type="text/javascript">

function changeOutline()

{

document.getElementById("p1").style.outline="thin dotted #0000FF";

}

</script>

</head>

<body>

<input type="button" onclick="changeOutline()"

value="Change outline" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

outline - Change the outline around an element


HTML DOM outlineColor Property

Definition and Usage

The outlineColor property sets the color of the outline around an element.

Syntax

Object.style.outlineColor=color-name|color-rgb|color-hex

Example

The following example changes the color of the outline:

<html>

<head>

<style type="text/css">

p

{

outline: thick solid #FF0000;

}

</style>

<script type="text/javascript">

function changeOutlineColor()

{

document.getElementById("p1").style.outlineColor="#00FF00";

}

</script>

</head>

<body>

<input type="button" onclick="changeOutlineColor()"

value="Change outline color" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

outlineColor - Change the color of the outline around an element


HTML DOM outlineStyle Property

Definition and Usage

The outlineStyle property sets the style of the outline around an element.

Syntax

Object.style.outlineStyle=style

Possible Values

Value | Description
none | Defines no outlines
dotted | Defines a dotted outline
dashed | Defines a dashed outline
solid | Defines a solid outline
double | Defines two lines around the element. The width of the two lines are the same as the outline-width value
groove | Defines a 3D grooved outline. The effect depends on the outline-color value
ridge | Defines a 3D ridged outline. The effect depends on the outline-color value
inset | Defines a 3D inset outline. The effect depends on the outline-color value
outset | Defines a 3D outset outline. The effect depends on the outline-color value

Example

The following example changes the style of the outline:

<html>

<head>

<style type="text/css">

p

{

outline: thick solid #FF0000;

}

</style>

<script type="text/javascript">

function changeOutline()

{

document.getElementById("p1").style.outlineStyle="dotted";

}

</script>

</head>

<body>

<input type="button" onclick="changeOutline()"

value="Change outline style" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

outlineStyle - Change the style of the outline around an element


HTML DOM padding Property

Definition and Usage

The padding property sets the padding of an element.

The padding properties define the space between the element border and the element content.

This property can take from one to four values:

· If you specify one value, like: div {padding: 50px} - all four sides will have a padding of 50px
· If you specify two values, like: div {padding: 50px 10px} - the top and bottom padding will be 50px, left and right padding will be 10px
· If you specify three values, like: div {padding: 50px 10px 20px} - the top padding will be 50px, left and right padding will be 10px, bottom padding will be 20px
· If you specify four values, like: div {padding: 50px 10px 20px 30px} - the top padding will be 50px, right padding will be 10px, bottom padding will be 20px, left padding will be 30px

Syntax

Object.style.padding=padding

Possible Values

Value | Description
padding | Sets the padding. The value(s) can be defined in % (defines a padding in % of the width of the closest element) or length (defines a fixed padding)

Example

The following example changes the padding between a paragraph and its border:

<html>

<head>

<style type="text/css">

p

{

border: thin dotted #FF0000;

}

</style>

<script type="text/javascript">

function changePadding()

{

document.getElementById("p1").style.padding="2cm";

}

</script>

</head>

<body>

<input type="button" onclick="changePadding()"

value="Change padding" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

padding - Change the padding between a paragraph and its border


HTML DOM paddingBottom Property

Definition and Usage

The paddingBottom property sets the bottom padding of an element.

The padding properties define the space between the element border and the element content.

Syntax

Object.style.paddingBottom=length|%

Possible Values

Value | Description
length | Defines a fixed bottom padding
% | Defines a bottom padding in % of the total height of the document

Example

The following example changes the bottom padding between a paragraph and its border:

<html>

<head>

<style type="text/css">

p

{

border: thin dotted #FF0000;

}

</style>

<script type="text/javascript">

function changePadding()

{

document.getElementById("p1").style.paddingBottom="2cm";

}

</script>

</head>

<body>

<input type="button" onclick="changePadding()"

value="Change bottom padding" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

paddingBottom - Change the bottom padding between a paragraph and its border


HTML DOM paddingLeft Property

Definition and Usage

The paddingLeft property sets the left padding of an element.

The padding properties define the space between the element border and the element content.

Syntax

Object.style.paddingLeft=length|%

Possible Values

Value | Description
length | Defines a fixed left padding
% | Defines a left padding in % of the total width of the document

Example

The following example changes the left padding between a paragraph and its border:

<html>

<head>

<style type="text/css">

p

{

border: thin dotted #FF0000;

}

</style>

<script type="text/javascript">

function changePadding()

{

document.getElementById("p1").style.paddingLeft="2cm";

}

</script>

</head>

<body>

<input type="button" onclick="changePadding()"

value="Change left padding" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

paddingLeft - Change the left padding between a paragraph and its border


HTML DOM paddingRight Property

Definition and Usage

The paddingRight property sets the right padding of an element.

The padding properties define the space between the element border and the element content.

Syntax

Object.style.paddingRight=auto|length|%

Possible Values

Value | Description
length | Defines a fixed right padding
% | Defines a right padding in % of the total width of the document

Example

The following example changes the right padding between a paragraph and its border:

<html>

<head>

<style type="text/css">

p

{

border: thin dotted #FF0000;

}

</style>

<script type="text/javascript">

function changePadding()

{

document.getElementById("p1").style.paddingRight="2cm";

}

</script>

</head>

<body>

<input type="button" onclick="changePadding()"

value="Change right padding" />

<p id="p1">This is a paragraph. This is a paragraph.

This is a paragraph. This is a paragraph.

This is a paragraph. This is a paragraph.</p>

</body>

</html>

Try-It-Yourself Demos

paddingRight - Change the right padding between a paragraph and its border


HTML DOM paddingTop Property

Definition and Usage

The paddingTop property sets the top padding of an element.

The padding properties define the space between the element border and the element content.

Syntax

Object.style.paddingTop=length|%

Possible Values

Value | Description
length | Defines a fixed top padding
% | Defines a top padding in % of the total height of the document

Example

The following example changes the top padding between a paragraph and its border:

<html>

<head>

<style type="text/css">

p

{

border: thin dotted #FF0000;

}

</style>

<script type="text/javascript">

function changePadding()

{

document.getElementById("p1").style.paddingTop="2cm";

}

</script>

</head>

<body>

<input type="button" onclick="changePadding()"

value="Change top padding" />

<p id="p1">This is a paragraph</p>

</body>

</html>

Try-It-Yourself Demos

paddingTop - Change the top padding between a paragraph and its border


HTML DOM pageBreakAfter Property

Definition and Usage

The pageBreakAfter property sets the page-break behavior after an element.

Syntax

Object.style.pageBreakAfter=auto|always|avoid|left|right

Possible Values

Value | Description
auto | Insert a page break after the element if necessary
always | Insert a page break after the element
avoid | Avoid inserting a page break after the element
left | Insert page breaks after the element until it reaches a blank left page
right | Insert page breaks after the element until it reaches a blank right page

Tips and Notes

Note: You cannot use this property on absolutely positioned elements.

Note: Use the page-break properties as few times as possible and avoid page-breaking properties inside tables, floating elements, and block elements with borders.

Example

The following example always sets a page-break after the paragraph with id of p1:

<html>

<head>

<script type="text/javascript">

function setPageBreak()

{

document.getElementById("p1").style.pageBreakAfter="always";

}

</script>

</head>

<body>

<p id="p1">This is a test paragraph.</p>

<input type="button" onclick="setPageBreak()"

value="Set page-break" />

<p>This is also a test paragraph.</p>

</body>

</html>


HTML DOM pageBreakBefore Property

Definition and Usage

The pageBreakBefore property sets the page-break behavior before an element.

Syntax

Object.style.pageBreakBefore=auto|always|avoid|left|right

Possible Values

Value | Description
auto | Insert a page break before the element if necessary
always | Insert a page break before the element
avoid | Avoid inserting a page break before the element
left | Insert page breaks before the element until it reaches a blank left page
right | Insert page breaks before the element until it reaches a blank right page

Tips and Notes

Note: You cannot use this property on absolutely positioned elements.

Note: Use the page-break properties as few times as possible and avoid page-breaking properties inside tables, floating elements, and block elements with borders.

Example

The following example always sets a page-break before the paragraph with id of p2:

<html>

<head>

<script type="text/javascript">

function setPageBreak()

{

document.getElementById("p2").style.pageBreakBefore="always";

}

</script>

</head>

<body>

<p>This is a test paragraph.</p>

<input type="button" onclick="setPageBreak()"

value="Set page-break" />

<p id="p2">This is also a test paragraph.</p>

</body>

</html>


HTML DOM pageBreakInside Property

Definition and Usage

The pageBreakInside property sets the page-break behavior inside an element.

Syntax

Object.style.pageBreakInside=auto|avoid

Possible Values

Value | Description
auto | Insert a page break inside the element if necessary
avoid | Avoid inserting a page break inside the element

Tips and Notes

Note: You cannot use this property on absolutely positioned elements.

Note: Use the page-break properties as few times as possible and avoid page-breaking properties inside tables, floating elements, and block elements with borders.

Example

The following example avoids a page-break in the middle of the paragraph with id of p2:

<html>

<head>

<script type="text/javascript">

function setPageBreak()

{

document.getElementById("p2").style.pageBreakInside="avoid";

}

</script>

</head>

<body>

<p>This is a test paragraph.</p>

<input type="button" onclick="setPageBreak()"

value="Set page to not break inside the second paragraph" />

<p id="p2">This is also a test paragraph. We need some

more text here. This is just filler text.</p>

</body>

</html>


HTML DOM Password Object

Password Object

The Password object represents a password field in an HTML form.

For each instance of an HTML <input type="password"> tag on a form, a Password object is created.

You can access a password field by searching through the elements[] array of the form, or by using document.getElementById().

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Password Object Properties

Property | Description | IE | F | O | W3C
accessKey | Sets or returns the keyboard key to access a password field | 4 | 1 | 9 | Yes
alt | Sets or returns an alternate text to display if a browser does not support password fields | 5 | 1 | 9 | Yes
defaultValue | Sets or returns the default value of a password field | 4 | 1 | 9 | Yes
disabled | Sets or returns whether or not a password field should be disabled | 5 | 1 | 9 | Yes
form | Returns a reference to the form that contains the password field | 4 | 1 | 9 | Yes
id | Sets or returns the id of a password field | 4 | 1 | 9 | Yes
maxLength | Sets or returns the maximum number of characters in a password field | 4 | 1 | 9 | Yes
 | Sets or returns the name of a password field | 4 | 1 | 9 | Yes
readOnly | Sets or returns whether or not a password field should be read-only | 4 | 1 | 9 | Yes
size | Sets or returns the size of a password field | 4 | 1 | 9 | Yes
 | Sets or returns the tab order for a password field | 4 | 1 | 9 | Yes
type | Returns the type of form element a password field is | 4 | 1 | 9 | Yes
value | Sets or returns the value of the value attribute of the password field | 4 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
className | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
title | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes

Password Object Methods

Method | Description | IE | F | O | W3C
 | Removes focus from a password field | 4 | 1 | 9 | Yes
focus() | Sets focus on a password field | 4 | 1 | 9 | Yes
select() | Selects the text in a password field | 4 | 1 | 9 | Yes


HTML DOM pathname Property

Definition and Usage

The pathname property sets or returns the pathname of the link-URL in an area.

Syntax

areaObject.pathname=pathname

Example

The following example returns the pathname of the link-URL in the "Venus" area:

<html>

<body>

<img src="planets.gif"

width="145" height="126"

usemap="#planetmap" />

<map name="planetmap">

<area id="venus" shape="circle"

coords="124,58,8"

alt="Venus"

href="venus.htm" />

</map>

<p>Venus' pathname:

<script type="text/javascript">

x=document.getElementById('venus');

document.write(x.pathname);

</script>

</p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM pathname Property

Definition and Usage

The pathname property sets or returns the path of the current URL.

Syntax

location.pathname=path

Example

Assume that the current URL is: http://example.com/test/test.htm#part2:

<html>

<body>

<script type="text/javascript">

document.write(location.pathname);

</script>

</body>

</html>

Output:

/test/test.htm

Try-It-Yourself Demos


HTML DOM pixelDepth Property

Definition and Usage

The pixelDepth property returns the color resolution (in bits per pixel) of the display screen.

Syntax

screen.pixelDepth

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>Pixel Depth: ")

document.write(screen.pixelDepth + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM platform Property

Definition and Usage

The platform property returns the operating system platform.

Syntax

navigator.platform

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>Platform: ")

document.write(navigator.platform + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos

Detect the visitor's browser and browser version

More details about the visitor's browser

All details about the visitor's browser


HTML DOM port Property

Definition and Usage

The port property sets or returns the port number of the current URL.

Note: If the port number is the default of 80, it is not specified.

Syntax

location.port=portnumber

Example

<html>

<body>

<script type="text/javascript">

document.write(location.port);

</script>

</body>

</html>

Output could be:

21

Try-It-Yourself Demos


HTML DOM position Property

Definition and Usage

The position property places an element in a static, relative, absolute or fixed position.

Syntax

Object.style.position=static|relative|absolute|fixed

Possible Values

Value | Description
static | Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations)
relative | An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position
absolute | An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties
fixed | An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling. Works in IE 7 (strict mode)

Example

The following example changes an element position from relative to absolute:

<html>

<head>

<style type="text/css">

input

{

position:relative;

}

</style>

<script type="text/javascript">

function setPositionAbsolute()

{

document.getElementById("b1").style.position="absolute";

document.getElementById("b1").style.top="10px";

}

</script>

</head>

<body>

<p>This is an example paragraph</p>

<p>This is an example paragraph</p>

<input type="button" id="b1" onclick="setPositionAbsolute()"

value="Set button position to be absolute" />

</body>

</html>

Try-It-Yourself Demos

position - Change an element position


HTML DOM print() Method

Definition and Usage

The print() method is used to print the contents of the current window.

Syntax

window.print()

Example

<html>

<head>

<script type="text/javascript">

function printpage()

{

window.print()

}

</script>

</head>

<body>

<input type="button" value="Print this page"

onclick="printpage()" />

</body>

</html>

Try-It-Yourself Demos

Print a page


HTML DOM prompt() Method

Definition and Usage

The prompt() method is used to display a dialog box that prompts the user for input.

Syntax

prompt(text,defaultText)

Parameter | Description
text | Optional. The message to display in the dialog box. Default is ""
defaultText | Optional. The default input text

Example

The following example displays a prompt box:

<html>

<head>

<script type="text/javascript">

function disp_prompt()

{

var name=prompt("Please enter your name","")

if (name!=null && name!="")

  {

  document.write("Hello " + name + "!")

  }

}

</script>

</head>

<body>

<input type="button" onclick="disp_prompt()"

value="Display a prompt box" />

</body>

</html>

Try-It-Yourself Demos

Display a prompt box


HTML DOM protocol Property

Definition and Usage

The protocol property sets or returns the protocol of the link-URL in an area.

Syntax

areaObject.protocol=protocol

Example

The following example returns the protocol of the link-URL in the "Venus" area:

<html>

<body>

<img src="planets.gif"

width="145" height="126"

usemap="#planetmap" />

<map name="planetmap">

<area id="venus" shape="circle"

coords="124,58,8"

alt="Venus"

href="venus.htm" />

</map>

<p>Venus' protocol:

<script type="text/javascript">

x=document.getElementById('venus');

document.write(x.protocol);

</script>

</p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM protocol Property

Definition and Usage

The protocol property sets or returns the protocol of the current URL.

Syntax

location.protocol=path

Example

Assume that the current URL is: http://example.com/test/test.htm#part2:

<html>

<body>

<script type="text/javascript">

document.write(location.protocol);

</script>

</body>

</html>

Output:

http:

Try-It-Yourself Demos


HTML DOM Radio Object

Radio Object

The Radio object represents a radio button in an HTML form.

For each instance of an <input type="radio"> tag in an HTML form, a Radio object is created.

You can access a radio object by searching through the elements[] array of the form, or by using document.getElementById().

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Radio Object Properties

Property | Description | IE | F | O | W3C
 | Sets or returns the keyboard key to access a radio button | 4 | 1 | 9 | Yes
alt | Sets or returns an alternate text to display if a browser does not support radio buttons | 5 | 1 | 9 | Yes
checked | Sets or returns the state of a radio button | 4 | 1 | 9 | Yes
defaultChecked | Returns the default state of a radio button | 4 | 1 | 9 | Yes
disabled | Sets or returns whether or not a radio button should be disabled | 5 | 1 | 9 | Yes
form | Returns a reference to the form that contains the radio button | 4 | 1 | 9 | Yes
 | Sets or returns the id of a radio button | 4 | 1 | 9 | Yes
name | Sets or returns the name of a radio button | 4 | 1 | 9 | Yes
tabIndex | Sets or returns the tab order for a radio button | 4 | 1 | 9 | Yes
type | Returns the type of form element a radio button is | 4 | 1 | 9 | Yes
 | Sets or returns the value of the value attribute of the radio button | 4 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
className | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
 | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
title | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes

Radio Object Methods

Method | Description | IE | F | O | W3C
blur() | Removes focus from a radio button | No | 1 | 9 | Yes
click() | Simulates a mouse-click on a radio button | No | 2 | 9 | Yes
focus() | Sets focus on a radio button | No | 1 | 9 | Yes


HTML DOM readOnly Property

Definition and Usage

The readOnly property sets or returns whether or not a password field should be read-only.

Syntax

passwordObject.readOnly=true|false

Example

The following example makes a password field read-only:

<html>

<head>

<script type="text/javascript">

function makeReadOnly()

{

document.getElementById("password1").readOnly=true

}

</script>

</head>

<body>

<form>

<input type="password" id="password1" value="thgrt456" />

<input type="button" onclick="makeReadOnly()"

value="Make read-only" />

</form>

</body>

</html>

Try-It-Yourself Demos

Make a password field read-only


HTML DOM readOnly Property

Definition and Usage

The readOnly property sets or returns whether or not a text area should be read only.

Syntax

textareaObject.readOnly=true|false

Example

The following example sets the text area to be read-only:

<html>

<head>

<script type="text/javascript">

function setReadOnly()

{

document.getElementById('txt1').readOnly=true;

}

</script>

</head>

<body>

<textarea id="txt1">

Hello world....This is a text area

</textarea>

<br />

<input type="button" onclick="setReadOnly()"

value="Make read-only" />

</body>

</html>


HTML DOM readOnly Property

Definition and Usage

The readOnly property sets or returns whether or not a text field should be read-only.

Syntax

textObject.readOnly=true|false

Example

The following example makes a text field read-only:

<html>

<head>

<script type="text/javascript">

function makeReadOnly()

{

document.getElementById("text1").readOnly=true

}

</script>

</head>

<body>

<form>

<input type="text" id="text1" value="Hello World!" />

<input type="button" onclick="makeReadOnly()" value="Make read-only" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM Reference

JavaScript Objects

Follow the links to learn more about the objects and their collections, properties, methods and events. Contain lots of examples!

Object | Description
 | The top level object in the JavaScript hierarchy. The Window object represents a browser window. A Window object is created automatically with every instance of a <body> or <frameset> tag
Navigator | Contains information about the client's browser
Screen | Contains information about the client's display screen
History | Contains the visited URLs in the browser window
Location | Contains information about the current URL

HTML DOM Objects

Follow the links to learn more about the objects and their collections, properties, methods and events. Contain lots of examples!

Object | Description
Document | Represents the entire HTML document and can be used to access all elements in a page
Anchor | Represents an <a> element
Area | Represents an <area> element inside an image-map
Base | Represents a <base> element
Body | Represents the <body> element
Button | Represents a <button> element
Event | Represents the state of an event
 | Represents a <form> element
Frame | Represents a <frame> element
Frameset | Represents a <frameset> element
Iframe | Represents an <iframe> element
Image | Represents an <img> element
Input button | Represents a button in an HTML form
 | Represents a checkbox in an HTML form
 | Represents a fileupload in an HTML form
Input hidden | Represents a hidden field in an HTML form
Input password | Represents a password field in an HTML form
Input radio | Represents a radio button in an HTML form
Input reset | Represents a reset button in an HTML form
Input submit | Represents a submit button in an HTML form
Input text | Represents a text-input field in an HTML form
Link | Represents a <link> element
Meta | Represents a <meta> element
Option | Represents an <option> element
Select | Represents a selection list in an HTML form
Style | Represents an individual style statement
Table | Represents a <table> element
TableData | Represents a <td> element
TableRow | Represents a <tr> element
Textarea | Represents a <textarea> element


HTML DOM referrer Property

Definition and Usage

The referrer property returns the URL of the document that loaded the current document.

Syntax

document.referrer

Example

<html>

<body>

The referrer of this document is:

<script type="text/javascript">

document.write(document.referrer)

</script>

</body>

</html>

Try-It-Yourself Demos

Return the referrer of the current document


HTML DOM rel Property

Definition and Usage

The rel property sets or returns the relationship to a forward link.

The rel and rev properties work together.

The rel (relationship) property specifies a relationship to the target. The rev (reverse) property specifies a reverse link from the target document to the current document.

These properties are used by search engines to provide a linked navigation menu.

Syntax

anchorObject.rel=relationship

Both properties can have one of the following values:

Value | Description
appendix | Link to the appendix page of a document
alternate | Link to an alternative source
bookmark | Link to a bookmark. Often used for "permalink" in web blogs
chapter | Link to a chapter from the current documents
contents | Link to the table of contents in the current document
copyright | Link to copyright or policy page of the current document
glossary | Link to glossary page of the document
index | Link to the index page of the current document
next | Link to next page from the current document
prev | Link to the previous page from the current document
section | Link to a section in a list of documents
start | Link to the first page of the current documents. Used by search engines to show the first page
subsection | Link to a sub-section in a list of current documents. ( Note that a section can have multiple sub-sections)

Example

The following example returns the relationship of the link:

<html>

<body>

<p><a id="myAnchor" rel="index"

href="http://www.w3schools.com">Visit W3Schools.com</a></p>

<script type="text/javascript">

x=document.getElementById("myAnchor");

document.write(x.rel);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM rel Property

Definition and Usage

The rel property sets or returns the relationship between the current document and the target URL.

The rel and rev properties work together. Those two properties are used by search engines to provide a linked navigation menu.

Syntax

linkObject.rel=relationship

The rel property can have one of the following values:

Value | Description
appendix | Link to the appendix page of the document
alternate | Link to an alternative source of the document
bookmark | Link to a bookmark
chapter | Link to a chapter
contents | Link to the table of contents of the document
copyright | Link to copyright or the policy of the document
glossary | Link to the glossary page of the document
index | Link to the index page of the document
next | Link to the next page
prev | Link to the previous page
section | Link to a section in a list of documents
start | Link to the first page (used by search engines to show the first page)
stylesheet | Link to the style sheet of the document.
subsection | Link to a sub-section in a list of current documents

Example

The following example returns the relationship between the current document and the target URL:

<html>

<head>

<link rel="stylesheet" type="text/css"

id="style1" href="try_dom_link.css" />

</head>

<body>

<script type="text/javascript">

x=document.getElementById("style1");

document.write("Relationship: " + x.rel);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM reload() Method

Definition and Usage

The reload() method is used to reload the current document.

Syntax

location.reload()

Example

<html>

<head>

<script type="text/javascript">

function reloadPage()

{

window.location.reload()

}

</script>

</head>

<body>

<input type="button" value="Reload page"

onclick="reloadPage()" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM remove() Method

Definition and Usage

The remove() method is used to remove an option from a dropdown list.

Syntax

selectObject.remove(index)

Parameter | Description
index | Required. Specifies the index of the option to remove

Example

The following example removes the selected option from the drop down list:

<html>

<head>

<script type="text/javascript">

function removeOption()

{

var x=document.getElementById("mySelect")

x.remove(x.selectedIndex)

}

</script>

</head>

<body>

<form>

<select id="mySelect">

<option>Apple</option>

<option>Pear</option>

<option>Banana</option>

<option>Orange</option>

</select>

<input type="button" onclick="removeOption()"

value="Remove option">

</form>

</body>

</html>

Try-It-Yourself Demos

Remove the selected option from a dropdown list

Remove the last option from a dropdown list


HTML DOM replace() Method

Definition and Usage

The replace() method replaces the current document with a new one.

Syntax

location.replace(newURL)

Example

The following example uses the replace() method to replace the current document:

<html>

<head>

<script type="text/javascript">

function replaceDoc()

{

window.location.replace("http://www.w3schools.com")

}

</script>

</head>

<body>

<input type="button" value="Replace document"

onclick="replaceDoc()" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM Reset Object

Reset Object

The Reset object represents a reset button in an HTML form.

For each instance of an <input type="reset"> tag in an HTML form, a Reset object is created.

You can access a reset button by searching through the elements[] array of the form, or by using document.getElementById().

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Reset Object Properties

Property | Description | IE | F | O | W3C
accesskey | Sets or returns the keyboard key to access a reset button | 4 | 1 | 9 | Yes
alt | Sets or returns an alternate text to display if a browser does not support reset buttons | 5 | 1 | 9 | Yes
disabled | Sets or returns whether or not a reset button should be disabled | 5 | 1 | 9 | Yes
form | Returns a reference to the form that contains the reset button | 4 | 1 | 9 | Yes
 | Sets or returns the id of a reset button | 4 | 1 | 9 | Yes
name | Sets or returns the name of a reset button | 4 | 1 | 9 | Yes
tabIndex | Sets or returns the tab order for a reset button | 4 | 1 | 9 | Yes
type | Returns the type of form element a reset button is | 4 | 1 | 9 | Yes
 | Sets or returns the text that is displayed on a reset button | 4 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
 | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
 | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes

Reset Object Methods

Method | Description | IE | F | O | W3C
blur() | Removes focus from a reset button | 4 | 1 | 9 | Yes
click() | Simulates a mouse-click on a reset button | 4 | 1 | 9 | Yes
focus() | Sets focus on a reset button | 4 | 1 | 9 | Yes


HTML DOM reset() Method

Definition and Usage

The reset() method resets the values of all elements in a form (the same as clicking the Reset button).

Syntax

formObject.reset()

Example

<html>

<head>

<script type="text/javascript">

function formReset()

{

document.getElementById("myForm").reset()

}

</script>

</head>

<form id="myForm">

Name: <input type="text" size="20"><br />

Age: <input type="text" size="20"><br />

<br />

<input type="button" onclick="formReset()" value="Reset">

</form>

</body>

</html>

Try-It-Yourself Demos

Reset a form


HTML DOM resizeBy() Method

Definition and Usage

The resizeBy() method is used to resize a window by the specified pixels.

Syntax

resizeBy(width,height)

Parameter | Description
width | Required. How many pixels to resize the width by. Can be a positive or a negative number
height | Optional. How many pixels to resize the height by. Can be a positive or a negative number

Example

The following example resizes the window with 100px each way:

<html>

<head>

<script type="text/javascript">

function resizeWindow()

{

window.resizeBy(-100,-100)

}

</script>

</head>

<body>

<input type="button" onclick="resizeWindow()"

value="Resize window">

</body>

</html>

Try-It-Yourself Demos

Resize a window


HTML DOM resizeTo() Method

Definition and Usage

The resizeTo() method is used to resize the window to the specified width and height.

Syntax

resizeTo(width,height)

Parameter | Description
width | Required. The width of the window (in pixels)
height | Optional. The height of the window (in pixels)

Example

<html>

<head>

<script type="text/javascript">

function resizeWindow()

{

window.resizeTo(500,300)

}

</script>

</head>

<body>

<input type="button" onclick="resizeWindow()"

value="Resize window">

</body>

</html>

Try-It-Yourself Demos

Resize a window to a specified size


HTML DOM rev Property

Definition and Usage

The rev property sets or returns the reverse relationship of a link.

The rel and rev properties work together.

The rel (relationship) property specifies a relationship to the target. The rev (reverse) property specifies a reverse link from the target document to the current document.

These properties are used by search engines to provide a linked navigation menu.

Syntax

anchorObject.rev=relationship

Both properties can have one of the following values:

Value | Description
appendix | Link to the appendix page of the document
alternate | Link to a alternative source
bookmark | Link to a bookmark. Often used for "permalink" in web blogs
chapter | Link to a chapter from the current listed documents
contents | Link to the table of contents in the current document
copyright | Link to copyright or the policy of the current document
glossary | Link to glossary page of the document
index | Link to the index page of the current document
next | Link to next page from the current document
prev | Link to the previous page from the current document
section | Link to a section in a list of documents
start | Link to the first page of the current documents. Used by search engines to show the first page
subsection | Link to a sub-section in a list of current documents. ( Note that a section can have multiple sub-sections)

Example

The following example returns the reverse relationship of the link:

<html>

<body>

<p><a id="myAnchor" rev="subsection"

href="/htmldom/prop_anchor_rev.asp">

HTML DOM rev Property</a></p>

<script type="text/javascript">

x=document.getElementById("myAnchor");

document.write(x.rev);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM rev Property

Definition and Usage

The rev property sets or returns the relationship between the target URL and the current document.

The rel and rev properties work together. Those two properties are used by search engines to provide a linked navigation menu.

Syntax

linkObject.rev=relationship

The rel property can have one of the following values:

Value | Description
appendix | Link to the appendix page of the document
alternate | Link to an alternative source of the document
bookmark | Link to a bookmark
chapter | Link to a chapter
contents | Link to the table of contents of the document
copyright | Link to copyright or the policy of the document
glossary | Link to the glossary page of the document
index | Link to the index page of the document
next | Link to the next page
prev | Link to the previous page
section | Link to a section in a list of documents
start | Link to the first page (used by search engines to show the first page)
stylesheet | Link to the style sheet of the document.
subsection | Link to a sub-section in a list of current documents

Example

The following example returns the relationship between the target URL and the current document:

<html>

<head>

<link rev="subsection" id="link1"

href="/htmldom/prop_link_rev.asp" />

</head>

<body>

<script type="text/javascript">

x=document.getElementById("link1");

document.write("Reverse relationship: " + x.rev);

document.write("<br />This page is a subsection of: ");

document.write(x.href);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM right Property

Definition and Usage

The right property sets how far the right edge of an element is to the left/right of the right edge of the parent element.

Syntax

Object.style.right=auto|%|length

Possible Values

Value | Description
auto | Lets the browser calculate the right position
% | Sets the right position in % from the right edge of the parent element
length | Sets the right position in px, cm, etc. from the right edge of the parent element. Negative values are allowed

Tips and Notes

Note: If the "position" property has a value of "static", the "right" property has no effect.

Example

The following example sets the right edge of an element:

<html>

<head>

<style type="text/css">

input

{

position:absolute;

}

</style>

<script type="text/javascript">

function setRightEdge()

{

document.getElementById("b1").style.right="100px";

}

</script>

</head>

<body>

<input type="button" id="b1" onclick="setRightEdge()"

value="Set right edge to 100 px" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM rowIndex Property

Definition and Usage

The rowIndex property returns the position of a row in the table's rows collection.

Syntax

tablerowObject.rowIndex

Example

The following example returns the position of a row in the table's rows collection:

<html>

<head>

<script type="text/javascript">

function alertRowIndex()

{

alert(document.getElementById("tr1").rowIndex);

}

</script>

</head>

<body>

<table border="1">

<tr id="tr1">

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr id="tr2">

<td>Peter</td>

<td>Griffin</td>

</tr>

</table>

<br />

<input type="button" onclick="alertRowIndex()"

value="Alert row index" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM rows Collection

Definition and Usage

The rows collection returns an array containing each row in a table.

Syntax

tableObject.rows[]

Example

The following example uses the rows collection to alert the content of the first row:

<html>

<head>

<script type="text/javascript">

function showRow()

{

alert(document.getElementById('myTable').rows[0].innerHTML)

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

<td>Row1 cell1</td>

<td>Row1 cell2</td>

</tr>

<tr>

<td>Row2 cell1</td>

<td>Row2 cell2</td>

</tr>

</table>

<br />

<input type="button" onclick="showRow()" value="Show innerHTML">

</body>

</html>

Try-It-Yourself Demos

InnerHTML of a row

Align the cell content in a table row

Vertical align the cell content in a table row

Vertical align the cell content in a single cell

Change the content of a table cell

Change the colspan of a table row


HTML DOM rows Property

Definition and Usage

The rows property sets or returns the number and size of rows in a frameset.

The comma-separated list of pixels and/or percentages defines the number and width of the rows.

Syntax

framesetObject.rows=row1,row2,row3....

Example

In our example we will first create an HTML document containing a frameset with two rows. Each row is set to 50% of the browser window:

<html>

<frameset rows="50%,50%">

<frame src="frame_rows.htm">

<frame src="frame_a.htm">

</frameset>

</html>

The HTML document "frame_rows.htm" is put into the first row, and the HTML document "frame_a.htm" is put into the second row.

The source of "frame_rows.htm" is as follows:

<html>

<head>

<script type="text/javascript">

function changeRows()

{

parent.document.getElementById("main").rows="30%,70%"

}

function restoreRows()

{

parent.document.getElementById("main").rows="50%,50%"

}

</script>

</head>

<body>

<form>

<input type="button" onclick="changeRows()"

value="Change row size" />

<input type="button" onclick="restoreRows()"

value="Restore row size" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM rows Property

Definition and Usage

The rows property sets or returns the height of a text area.

Syntax

textareaObject.rows=number_of rows

Example

The following example changes the height of a text area:

<html>

<head>

<script type="text/javascript">

function changeRows()

{

document.getElementById('txt1').rows="15";

}

</script>

</head>

<body>

<textarea id="txt1">

Hello world....This is a text area

</textarea>

<br />

<input type="button" onclick="changeRows()" value="Change height" />

</body>

</html>


HTML DOM rowSpan Property

Definition and Usage

The rowSpan property sets or returns the number of rows a table cell should span.

Syntax

tabledataObject.rowSpan=number_of_rows

Example

The following example changes the number of rows a table cell should span:

<html>

<head>

<script type="text/javascript">

function changeRowSpan()

{

document.getElementById("td2").rowSpan="2";

}

</script>

</head>

<body>

<table border="1">

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td id="td1">Peter</td>

<td id="td2">Griffin</td>

</tr>

<tr>

<td id="td3">Harry</td>

<td id="td4">Potter</td>

</tr>

</table>

<br />

<input type="button" onclick=changeRowSpan()

value="Change rowspan" />

</body>

</html>

Try-It-Yourself Demos

Change the number of rows a table cell should span


HTML DOM rules Property

Definition and Usage

The rules property sets or returns the inner-borders of a table.

Syntax

tableObject.frame=none|groups|rows|cols|all

Example

The following example sets two different inner borders of a table:

<html>

<head>

<script type="text/javascript">

function rowRules()

{

document.getElementById('myTable').rules="rows"

}

function colRules()

{

document.getElementById('myTable').rules="cols"

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

<td>Row1 cell1</td>

<td>Row1 cell2</td>

</tr>

<tr>

<td>Row2 cell1</td>

<td>Row2 cell2</td>

</tr>

<tr>

<td>Row3 cell1</td>

<td>Row3 cell2</td>

</tr>

</table>

<br />

<input type="button" onclick="rowRules()"

value="Show only row borders">

<input type="button" onclick="colRules()"

value="Show only col borders">

</body>

</html>

Try-It-Yourself Demos


HTML DOM Screen Object

Screen Object

The Screen object is actually a JavaScript object, not an HTML DOM object..

The Screen object is automatically created by the JavaScript runtime engine and contains information about the client's display screen.

IE: Internet Explorer, F: Firefox, O: Opera.

Screen Object Properties

Property | Description | IE | F | O
availHeight | Returns the height of the display screen (excluding the Windows Taskbar) | 4 | 1 | 9
availWidth | Returns the width of the display screen (excluding the Windows Taskbar) | 4 | 1 | 9
 | Sets or returns the bit depth of the color palette in the off-screen bitmap buffer | 4 | No | No
colorDepth | Returns the bit depth of the color palette on the destination device or buffer | 4 | 1 | 9
deviceXDPI | Returns the number of horizontal dots per inch of the display screen | 6 | No | No
deviceYDPI | Returns the number of vertical dots per inch of the display screen | 6 | No | No
fontSmoothingEnabled | Returns whether the user has enabled font smoothing in the display control panel | 4 | No | No
height | The height of the display screen | 4 | 1 | 9
logicalXDPI | Returns the normal number of horizontal dots per inch of the display screen | 6 | No | No
logicalYDPI | Returns the normal number of vertical dots per inch of the display screen | 6 | No | No
pixelDepth | Returns the color resolution (in bits per pixel) of the display screen | No | 1 | 9
updateInterval | Sets or returns the update interval for the screen | 4 | No | No
width | Returns width of the display screen | 4 | 1 | 9


HTML DOM scrollbar3dLightColor Property

Definition and Usage

The scrollbar3dLightColor property sets the color of the left and top sides of the arrows and scroll boxes.

Syntax

Object.style.scrollbar3dLightColor=color

Possible Values

Value | Description
color | The color value can be a color name (red), an rgb value (rgb(255,0,0)), or a hex number (#ff0000)

Example

The following example sets the color of the left and top sides of the arrows and scroll boxes:

<html>

<head>

<script type="text/javascript">

function setScrollbar3dLightColor()

{

document.body.style.scrollbar3dLightColor="blue";

}

</script>

</head>

<body>

<input type="button" onclick="setScrollbar3dLightColor()"

value="Set Scrollbar3dLightColor" />

</body>

</html>

Try-It-Yourself Demos

scrollbar3dLightColor


HTML DOM scrollbarArrowColor Property

Definition and Usage

The scrollbarArrowColor property sets the color of the arrows in a scroll bar.

Syntax

Object.style.scrollbarArrowColor=color

Possible Values

Value | Description
color | The color value can be a color name (red), an rgb value (rgb(255,0,0)), or a hex number (#ff0000)

Example

The following example sets the color of the arrows in the scroll bar:

<html>

<head>

<script type="text/javascript">

function setScrollbarArrowColor()

{

document.body.style.scrollbarArrowColor="green";

}

</script>

</head>

<body>

<input type="button" onclick="setScrollbarArrowColor()"

value="Set ScrollbarArrowColor" />

</body>

</html>

Try-It-Yourself Demos

scrollbarArrowColor


HTML DOM scrollbarBaseColor Property

Definition and Usage

The scrollbarBaseColor property sets the base color for the entire scroll bar.

Syntax

Object.style.scrollbarBaseColor=color

Possible Values

Value | Description
color | The color value can be a color name (red), an rgb value (rgb(255,0,0)), or a hex number (#ff0000)

Example

The following example changes the color of the scroll bar:

<html>

<head>

<script type="text/javascript">

function setScrollbarColor()

{

document.body.style.scrollbarBaseColor="green";

}

</script>

</head>

<body>

<input type="button" onclick="setScrollbarColor()"

value="Set ScrollbarColor" />

</body>

</html>

Try-It-Yourself Demos

scrollbarColor


HTML DOM scrollbarDarkShadowColor Property

Definition and Usage

The scrollbarDarkShadowColor property sets the color of the right and bottom sides of the arrows and scroll boxes.

Tip: This function can be used together with the scrollbarShadowColor to set shadow effects on a scroll bar.

Syntax

Object.style.scrollbarDarkShadowColor=color

Possible Values

Value | Description
color | The color value can be a color name (red), an rgb value (rgb(255,0,0)), or a hex number (#ff0000)

Example

The following example sets the color of the right and bottom sides of the arrows and scroll boxes:

<html>

<head>

<script type="text/javascript">

function setScrollbarDarkShadowColor()

{

document.body.style.scrollbarDarkShadowColor="darkred";

}

</script>

</head>

<body>

<input type="button" onclick="setScrollbarDarkShadowColor()"

value="Set ScrollbarDarkShadowColor" />

</body>

</html>

Try-It-Yourself Demos

scrollbarDarkShadowColor


HTML DOM scrollbarHighlightColor Property

Definition and Usage

The scrollbarHighlightColor property sets the color of the left and top sides of the arrows and scroll boxes, and the background of a scroll bar.

Syntax

Object.style.scrollbarHighlightColor=color

Possible Values

Value | Description
color | The color value can be a color name (red), an rgb value (rgb(255,0,0)), or a hex number (#ff0000)

Example

The following example sets the color of the left and top sides of the arrows and scroll boxes, and the background of a scroll bar:

<html>

<head>

<script type="text/javascript">

function setScrollbarHighlightColor()

{

document.body.style.scrollbarHighlightColor="purple";

}

</script>

</head>

<body>

<input type="button" onclick="setScrollbarHighlightColor()"

value="Set ScrollbarHighlightColor" />

</body>

</html>

Try-It-Yourself Demos

scrollbarHighlightColor


HTML DOM scrollbarShadowColor Property

Definition and Usage

The scrollbarShadowColor property sets the color of the right and bottom sides of the arrows and scroll boxes.

Tip: This function can be used together with the scrollbarDarkShadowColor to set shadow effects on a scroll bar.

Syntax

Object.style.scrollbarShadowColor=color

Possible Values

Value | Description
color | The color value can be a color name (red), an rgb value (rgb(255,0,0)), or a hex number (#ff0000)

Example

The following example sets the color of the right and bottom sides of the arrows and scroll boxes:

<html>

<head>

<script type="text/javascript">

function setScrollbarShadowColor()

{

document.body.style.scrollbarShadowColor="pink";

}

</script>

</head>

<body>

<input type="button" onclick="setScrollbarShadowColor()"

value="Set ScrollbarShadowColor" />

</body>

</html>

Try-It-Yourself Demos

scrollbarShadowColor

scrollbarDarkShadowColor and scrollbarShadowColor


HTML DOM scrollbarTrackColor Property

Definition and Usage

The scrollbarTrackColor property sets the background color of a scroll bar.

Syntax

Object.style.scrollbarTrackColor=color

Possible Values

Value | Description
color | The color value can be a color name (red), an rgb value (rgb(255,0,0)), or a hex number (#ff0000)

Example

The following example sets the background color of the scroll bar:

<html>

<head>

<script type="text/javascript">

function setScrollbarTrackColor()

{

document.body.style.scrollbarTrackColor="pink";

}

</script>

</head>

<body>

<input type="button" onclick="setScrollbarTrackColor()"

value="Set ScrollbarTrackColor" />

</body>

</html>

Try-It-Yourself Demos

scrollbarTrackColor


HTML DOM scrollBy() Method

Definition and Usage

The scrollBy() method is used to scroll the content by the specified number of pixels.

Note: The visible property of the window's scrollbar must be set to true if using this method!

Syntax

scrollBy(xnum,ynum)

Parameter | Description
xnum | Required. How many pixels to scroll by, along the x-axis
ynum | Required. How many pixels to scroll by, along the y-axis

Example

The following example scrolls the content by 100 pixels:

<html>

<head>

<script type="text/javascript">

function scrollWindow()

{

window.scrollBy(100,100)

}

</script>

</head>

<body>

<input type="button" onclick="scrollWindow()" value="Scroll" />

<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>

</body>

</html>

Try-It-Yourself Demos

Scroll the window with scrollBy()


HTML DOM scrolling Property

Definition and Usage

The scrolling property sets or returns whether or not a frame should have scrollbars.

Syntax

frameObject.scrolling=yes|no

Example

In our example we will first create an HTML document containing a frameset with two columns. Each column is set to 50% of the browser window:

<html>

<frameset cols="50%,50%">

  <frame id="leftFrame" src="frame_scroll.htm">

  <frame id="rightFrame" src="frame_a.htm">

</frameset>

</html>

The HTML document "frame_scroll.htm" is put into the first column, and the HTML document "frame_a.htm" is put into the second column.

The source of "frame_scroll.htm" is as follows:

<html>

<head>

<script type="text/javascript">

function enableScrolling()

{

parent.document.getElementById("leftFrame").scrolling="yes"

parent.document.getElementById("rightFrame").scrolling="yes"

}

function disableScrolling()

{

parent.document.getElementById("leftFrame").scrolling="no"

parent.document.getElementById("rightFrame").scrolling="no"

}

</script>

</head>

<body>

<input type="button" onclick="enableScrolling()"

value="Scroll bars" />

<input type="button" onclick="disableScrolling()"

value="No scroll bars" />

</body>

</html>

Try-It-Yourself Demos

Frames with and without scrollbars


HTML DOM scrolling Property

Definition and Usage

The scrolling property sets or returns whether or not an iframe should have scrollbars.

Syntax

iframeObject.scrolling=yes|no

Example

The following example adds and removes scrollbars from the iframe:

<html>

<head>

<script type="text/javascript">

function addScrollbars()

{

document.getElementById("frame1").scrolling="yes";

}

function removeScrollbars()

{

document.getElementById("frame1").scrolling="no";

}

</script>

</head>

<body>

<iframe src="frame_a.htm" id="frame1" ></iframe><br />

<input type="button" onclick="addScrollbars()"

value="Add Scrollbars" />

<input type="button" onclick="removeScrollbars()"

value="Remove Scrollbars" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM scrollTo() Method

Definition and Usage

The scrollTo() method scrolls the content to the specified coordinates.

Syntax

scrollTo(xpos,ypos)

Parameter | Description
xpos | Required. The position to scroll to, along the x-axis
ypos | Required. The position to scroll to, along the y-axis

Example

The following example scrolls the content to position 100,500:

<html>

<head>

<script type="text/javascript">

function scrollWindow()

{

window.scrollTo(100,500)

}

</script>

</head>

<body>

<input type="button" onclick="scrollWindow()" value="Scroll" />

<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>

</body>

</html>

Try-It-Yourself Demos

Scroll the window to a specified position with scrollTo()


HTML DOM search Property

Definition and Usage

The search property sets or returns the query string part of the link-URL in an area.

Syntax

areaObject.search=querystring

Example

The following example returns the query string part of the link-URL in "Venus":

<html>

<body>

<img src="planets.gif"

width="145" height="126"

usemap="#planetmap" />

<map name="planetmap">

<area id="venus" shape="circle"

coords="124,58,8"

alt="Venus"

href="venus.htm?id=venus" />

</map>

<p>Query string part of Venus' link-URL:

<script type="text/javascript">

x=document.getElementById('venus')

document.write(x.search)

</script>

</p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM search Property

Definition and Usage

The search property sets or returns the URL from the question mark (?).

Syntax

location.search=path_from_questionmark

Example

Assume that the current URL is: http://w3schools.com/js/tryit.asp?filename=try_loc_search

<html>

<body>

<script type="text/javascript">

document.write(location.search);

</script>

</body>

</html>

Output:

?filename=try_loc_search

Try-It-Yourself Demos


HTML DOM Select Object

Select Object

The Select object represents a dropdown list in an HTML form.

For each instance of an HTML <select> tag in a form, a Select object is created.

You can access a Select object by searching through the elements[] array of the form, or by using document.getElementById().

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Select Object Collections

Collection | Description | IE | F | O | W3C
 | Returns an array of all the options in a dropdown list | 4 | 1 | 9 | Yes

Select Object Properties

Property | Description | IE | F | O | W3C
disabled | Sets or returns whether or not a dropdown list should be disabled | 5 | 1 | 9 | Yes
form | Returns a reference to the form that contains the dropdown list | 4 | 1 | 9 | Yes
id | Sets or returns the id of a dropdown list | 4 | 1 | 9 | Yes
length | Returns the number of options in a dropdown list | 4 | 1 | 9 | Yes
 | Sets or returns whether or not multiple items can be selected | 4 | 1 | 9 | Yes
name | Sets or returns the name of a dropdown list | 4 | 1 | 9 | Yes
selectedIndex | Sets or returns the index of the selected option in a dropdown list | 4 | 1 | 9 | Yes
size | Sets or returns the number of visible rows in a dropdown list | 4 | 1 | 9 | Yes
tabIndex | Sets or returns the tab order for a dropdown list | 5 | 1 | 9 | Yes
type | Returns the type of form element a dropdown list is | 4 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
className | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
title | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes

Select Object Methods

Method | Description | IE | F | O | W3C
add() | Adds an option to a dropdown list | 4 | 1 | 9 | Yes
blur() | Removes focus from a dropdown list | 4 | 1 | 9 | Yes
focus() | Sets focus on a dropdown list | 4 | 1 | 9 | Yes
remove() | Removes an option from a dropdown list | 4 | 1 | 9 | Yes


HTML DOM select() Method

Definition and Usage

The select() method is used to select the text in a password field.

Syntax

passwordObject.select()

Example

The following example selects the text in a password field:

<html>

<head>

<script type="text/javascript">

function selText()

{

document.getElementById('password1').select()

}

</script>

</head>

<body>

<form>

<input type="password" id="password1" value="thgrt456" />

<input type="button" onclick="selText()" value="Select text" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM select() Method

Definition and Usage

The select() method is used to select the content of a text field.

Syntax

textObject.select()

Example

The following example selects the content of a text field:

<html>

<head>

<script type="text/javascript">

function selText()

{

document.getElementById("myText").select()

}

</script>

</head>

<body>

<form>

<input size="25" type="text" id="myText"

value="A cat played with a ball">

<input type="button" value="Select text" onclick="selText()">

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM selected Property

Definition and Usage

The selected property sets or returns the value of the selected attribute of an option.

Syntax

optionObject.selected=true|false

Example

The following example changes the selected option in a dropdown list:

<html>

<head>

<script type="text/javascript">

function selectOrange()

{

document.getElementById("orange").selected=true;

}

</script>

</head>

<body>

<form>

Select your favorite fruit:

<select>

<option id="apple">Apple</option>

<option id="orange">Orange</option>

<option id="pineapple" selected="selected">Pineapple</option>

<option id="banana">Banana</option>

</select>

<br /><br />

<input type="button" onclick="selectOrange()" value="Select Orange">

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM selectedIndex Property

Definition and Usage

The selectedIndex property sets or returns the index of the selected option in a dropdown list.

Note: If the dropdown list allows multiple selections it will only return the index of the first option selected.

Syntax

selectObject.selectedIndex=number

Example

The following example alerts the index of the selected option:

<html>

<head>

<script type="text/javascript">

function getIndex()

{

var x=document.getElementById("mySelect")

alert(x.selectedIndex)

}

</script>

</head>

<body>

<form>

Select your favorite fruit:

<select id="mySelect">

<option>Apple</option>

<option>Orange</option>

<option>Pineapple</option>

<option>Banana</option>

</select>

<br /><br />

<input type="button" onclick="getIndex()"

value="Alert index of selected option">

</form>

</body>

</html>

Try-It-Yourself Demos

Set the text of a selected option in a dropdown list

Remove options from a dropdown list


HTML DOM self Property

Definition and Usage

The self property returns a reference to the current window.

Syntax

window.self

Example

The following example checks whether or not the window is in a frame - if it is, it breaks out of the frame:

<html>

<head>

<script type="text/javascript">

function breakout()

{

if (window.top!=window.self)

  {

  window.top.location="tryjs_breakout.htm"

  }

}

</script>

</head>

<body>

<input type="button" onclick="breakout()"

value="Break out of frame!">

</body>

</html>

Try-It-Yourself Demos

Break out of a frame


HTML DOM setInterval() Method

Definition and Usage

The setInterval() method calls a function / evaluates an expression at specified intervals (in milliseconds).

The setInterval() method will continue calling the function until clearInterval() is called or the window is closed. The ID value returned by setInterval() is used as the parameter for the clearInterval() method.

Syntax

setInterval(code,millisec[,"lang"])

Parameter | Description
code | Required. A pointer to a function or the code to be executed
millisec | Required. The number of milliseconds
lang | Optional. JScript | VBScript | JavaScript

Example

The following example calls the clock() function every 50 millisecond. It also have a button to stop the clock:

<html>

<body>

<input type="text" id="clock" size="35" />

<script language=javascript>

var int=self.setInterval("clock()",50)

function clock()

{

var t=new Date()

document.getElementById("clock").value=t

}

</script>

</form>

<button onclick="int=window.clearInterval(int)">

Stop interval</button>

</body>

</html>

Try-It-Yourself Demos


HTML DOM setTimeout() Method

Definition and Usage

The setTimeout() method is used to call a function or evaluate an expression after a specified number of milliseconds.

Syntax

setTimeout(code,millisec,lang)

Parameter | Description
code | Required. A pointer to a function or the code to be executed
millisec | Required. The number of milliseconds to wait before executing the code
lang | Optional. The scripting language: JScript | VBScript | JavaScript

Example

<html>

<head>

<script type="text/javascript">

function timedMsg()

{

var t=setTimeout("alert('5 seconds!')",5000)

}

</script>

</head>

<body>

<form>

<input type="button" value="Display timed alertbox!"

onClick="timedMsg()">

</form>

<p>Click on the button above. An alert box will be

displayed after 5 seconds.</p>

</body>

</html>

Try-It-Yourself Demos

Simple timing

Timing event in an infinite loop

Timing event in an infinite loop - with a Stop button


HTML DOM shape Property

Definition and Usage

The shape property sets or returns the shape of a link in an image-map.

Syntax

anchorObject.shape=RECT|CIRCLE|POLY|DEFAULT

Example

The following example returns the shape of a link in an image-map:

<html>

<body>

<img src="planets.gif"

width="145" height="126"

usemap="#planetmap" />

<map name="planetmap">

<area id="venus" shape="circle"

coords="124,58,8"

alt="Venus"

href="venus.htm" />

</map>

<p>Shape of Venus-link:

<script type="text/javascript">

x=document.getElementById("venus");

document.write(x.shape);

</script>

</p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM shape Property

Definition and Usage

The shape property sets or returns the shape of an area in an image-map.

Syntax

areaObject.shape=RECT|CIRCLE|POLY|DEFAULT

Example

The following example returns the shape of the "Venus" area in the image-map:

<html>

<body>

<img src="planets.gif"

width="145" height="126"

usemap="#planetmap" />

<map name="planetmap">

<area id="venus" shape="circle"

coords="124,58,8"

alt="Venus"

href="venus.htm" />

</map>

<p>Venus shape:

<script type="text/javascript">

x=document.getElementById("venus");

document.write(x.shape);

</script>

</p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM size Property

Definition and Usage

The size property sets or returns the size of the password field (in number of characters).

Syntax

passwordObject.size=number_of_chars

Example

The following example changes the size of the password field:

<html>

<head>

<script type="text/javascript">

function changeSize()

{

document.getElementById("password1").size=40

}

</script>

</head>

<body>

<form>

<input type="password" id="password1" />

<input type="button" id="button1" onclick="changeSize()"

value="Change size of the password field" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM size Property

Definition and Usage

The size property sets or returns the number of visible rows in a dropdown list.

Note: Opera 9 cannot set this property in a script (only return it).

Syntax

selectObject.size=number

Example

<html>

<head>

<script type="text/javascript">

function changeSize()

{

document.getElementById("mySelect").size=4

}

</script>

</head>

<body>

<form>

<select id="mySelect">

<option>Apple</option>

<option>Banana</option>

<option>Orange</option>

<option>Melon</option>

</select>

<input type="button" onclick="changeSize()"

value="Change size">

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM size Property

Definition and Usage

The size property sets or returns the size of a text field (in number of characters).

Syntax

textObject.size=number_of_char

Example

The following example alerts the size of the text field:

<html>

<head>

<script type="text/javascript">

function fieldSize()

{

alert(document.getElementById("name").size)

}

</script>

</head>

<body>

<form>

Name: <input type="text" id="name" value="Mickey Mouse" size="20"

maxlength="30" />

<br /><br />

<input type="button" onclick="fieldSize()" value="Alert size" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM src Property

Definition and Usage

The src property sets or returns the URL of the document that should be loaded into the frame.

Syntax

frameObject.src=URL

Example

In our example we will first create an HTML document containing a frameset with two columns. Each column is set to 50% of the browser window:

<html>

<frameset cols="50%,50%">

  <frame id="lFrame" src="frame_src.htm">

  <frame id="rFrame" src="frame_a.htm">

</frameset>

</html>

The HTML document "frame_src.htm" is put into the first column, and the HTML document "frame_a.htm" is put into the second column.

The source of "frame_src.htm" is as follows:

<html>

<head>

<script type="text/javascript">

function newSrc()

{

parent.document.getElementById("lFrame").src="http://w3schools.com"

parent.document.getElementById("rFrame").src="http://google.com"

}

</script>

</head>

<body>

<form>

<input type="button" onclick="newSrc()"

value="Change frame source" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM src Property

Definition and Usage

The src property sets or returns the URL of the document that should be loaded into an iframe.

Syntax

iframeObject.src=URL

Example

The following example changes the source of two iframes:

<html>

<head>

<script type="text/javascript">

function changeSource()

{

document.getElementById("frame1").src="frame_c.htm"

document.getElementById("frame2").src="frame_d.htm"

}

</script>

</head>

<body>

<iframe src="frame_a.htm" id="frame1"></iframe>

<iframe src="frame_b.htm" id="frame2"></iframe>

<br /><br />

<input type="button" onclick="changeSource()"

value="Change source of the two iframes" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM status Property

Definition and Usage

The status property sets or returns the text in the statusbar of a window.

Syntax

window.status=sometext

Example

The following example sets the text in the status bar:

<html>

<body>

<script type="text/javascript">

window.status="Some text in the status bar!!"

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM Style Object

Style object

The Style object represents an individual style statement. The Style object can be accessed from the document or from the elements to which that style is applied.

Syntax for using the Style object properties:

document.getElementById("id").style.property="value"

The Style object property categories:

· Background
· Border and Margin
· Layout
· List
·

· Positioning
· Printing
· Scrollbar
· Table
· Text
· Standard

IE: Internet Explorer, M: Mac IE only, W: Windows IE only, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Background properties

Property | Description | IE | F | O | W3C
background | Sets all background properties in one | 4 | 1 | 9 | Yes
backgroundAttachment | Sets whether a background-image is fixed or scrolls with the page | 4 | 1 | 9 | Yes
 | Sets the background-color of an element | 4 | 1 | 9 | Yes
backgroundImage | Sets the background-image of an element | 4 | 1 | 9 | Yes
backgroundPosition | Sets the starting position of a background-image | 4 | No | No | Yes
backgroundPositionX | Sets the x-coordinates of the backgroundPosition property | 4 | No | No | No
backgroundPositionY | Sets the y-coordinates of the backgroundPosition property | 4 | No | No | No
backgroundRepeat | Sets if/how a background-image will be repeated | 4 | 1 | 9 | Yes

Border and Margin properties

Property | Description | IE | F | O | W3C
border | Sets all properties for the four borders in one | 4 | 1 | 9 | Yes
borderBottom | Sets all properties for the bottom border in one | 4 | 1 | 9 | Yes
 | Sets the color of the bottom border | 4 | 1 | 9 | Yes
borderBottomStyle | Sets the style of the bottom border | 4 | 1 | 9 | Yes
borderBottomWidth | Sets the width of the bottom border | 4 | 1 | 9 | Yes
 | Sets the color of all four borders (can have up to four colors) | 4 | 1 | 9 | Yes
borderLeft | Sets all properties for the left border in one | 4 | 1 | 9 | Yes
 | Sets the color of the left border | 4 | 1 | 9 | Yes
borderLeftStyle | Sets the style of the left border | 4 | 1 | 9 | Yes
 | Sets the width of the left border | 4 | 1 | 9 | Yes
borderRight | Sets all properties for the right border in one | 4 | 1 | 9 | Yes
borderRightColor | Sets the color of the right border | 4 | 1 | 9 | Yes
borderRightStyle | Sets the style of the right border | 4 | 1 | 9 | Yes
borderRightWidth | Sets the width of the right border | 4 | 1 | 9 | Yes
borderStyle | Sets the style of all four borders (can have up to four styles) | 4 | 1 | 9 | Yes
borderTop | Sets all properties for the top border in one | 4 | 1 | 9 | Yes
borderTopColor | Sets the color of the top border | 4 | 1 | 9 | Yes
 | Sets the style of the top border | 4 | 1 | 9 | Yes
 | Sets the width of the top border | 4 | 1 | 9 | Yes
borderWidth | Sets the width of all four borders (can have up to four widths) | 4 | 1 | 9 | Yes
margin | Sets the margins of an element (can have up to four values) | 4 | 1 | 9 | Yes
marginBottom | Sets the bottom margin of an element | 4 | 1 | 9 | Yes
marginLeft | Sets the left margin of an element | 4 | 1 | 9 | Yes
 | Sets the right margin of an element | 4 | 1 | 9 | Yes
marginTop | Sets the top margin of an element | 4 | 1 | 9 | Yes
outline | Sets all outline properties in one | 5M | 1 | 9 | Yes
outlineColor | Sets the color of the outline around an element | 5M | 1 | 9 | Yes
outlineStyle | Sets the style of the outline around an element | 5M | 1 | 9 | Yes
outlineWidth | Sets the width of the outline around an element | 5M | 1 | 9 | Yes
padding | Sets the padding of an element (can have up to four values) | 4 | 1 | 9 | Yes
paddingBottom | Sets the bottom padding of an element | 4 | 1 | 9 | Yes
paddingLeft | Sets the left padding of an element | 4 | 1 | 9 | Yes
paddingRight | Sets the right padding of an element | 4 | 1 | 9 | Yes
 | Sets the top padding of an element | 4 | 1 | 9 | Yes

Layout properties

Property | Description | IE | F | O | W3C
 | Sets on which sides of an element other floating elements are not allowed | 4 | 1 | 9 | Yes
clip | Sets the shape of an element | 4 | 1 | 9 | Yes
content | Sets meta-information | 5M | 1 |  | Yes
counterIncrement | Sets a list of counter names, followed by an integer. The integer indicates by how much the counter is incremented for every occurrence of the element. The default is 1 | 5M | 1 |  | Yes
counterReset | Sets a list of counter names, followed by an integer. The integer gives the value that the counter is set to on each occurrence of the element. The default is 0 | 5M | 1 |  | Yes
cssFloat | Sets where an image or a text will appear (float) in another element | 5M | 1 | 9 | Yes
cursor | Sets the type of cursor to be displayed | 4 | 1 | 9 | Yes
direction | Sets the text direction of an element | 5 | 1 | 9 | Yes
display | Sets how an element will be displayed | 4 | 1 | 9 | Yes
height | Sets the height of an element | 4 | 1 | 9 | Yes
markerOffset | Sets the distance between the nearest border edges of a marker box and its principal box | 5M | 1 |  | Yes
marks | Sets whether cross marks or crop marks should be rendered just outside the page box edge | 5M | 1 |  | Yes
maxHeight | Sets the maximum height of an element | 5M | 1 | 9 | Yes
maxWidth | Sets the maximum width of an element | 5M | 1 | 9 | Yes
minHeight | Sets the minimum height of an element | 5M | 1 | 9 | Yes
minWidth | Sets the minimum width of an element | 5M | 1 | 9 | Yes
overflow | Specifies what to do with content that does not fit in an element box | 4 | 1 | 9 | Yes
verticalAlign | Sets the vertical alignment of content in an element | 4 | 1 | No | Yes
 | Sets whether or not an element should be visible | 4 | 1 | 9 | Yes
width | Sets the width of an element | 4 | 1 | 9 | Yes

List properties

Property | Description | IE | F | O | W3C
listStyle | Sets all the properties for a list in one | 4 | 1 | 9 | Yes
listStyleImage | Sets an image as the list-item marker | 4 | 1 | No | Yes
listStylePosition | Positions the list-item marker | 4 | 1 | 9 | Yes
listStyleType | Sets the list-item marker type | 4 | 1 | 9 | Yes

Misc properties

Property | Description | IE | F | O | W3C
cssText |  | 4 | 1 |  |

Positioning properties

Property | Description | IE | F | O | W3C
bottom | Sets how far the bottom edge of an element is above/below the bottom edge of the parent element | 5 | 1 | 9 | Yes
left | Sets how far the left edge of an element is to the right/left of the left edge of the parent element | 4 | 1 | 9 | Yes
position | Places an element in a static, relative, absolute or fixed position | 4 | 1 | 9 | Yes
right | Sets how far the right edge of an element is to the left/right of the right edge of the parent element | 5 | 1 | 9 | Yes
top | Sets how far the top edge of an element is above/below the top edge of the parent element | 4 | 1 | 9 | Yes
zIndex | Sets the stack order of an element | 4 | 1 | 9 | Yes

Printing properties

Property | Description | IE | F | O | W3C
orphans | Sets the minimum number of lines for a paragraph that must be left at the bottom of a page | 5M | 1 | 9 | Yes
page | Sets a page type to use when displaying an element | 5M | 1 | 9 | Yes
pageBreakAfter | Sets the page-breaking behavior after an element | 4 | 1 | 9 | Yes
pageBreakBefore | Sets the page-breaking behavior before an element | 4 | 1 | 9 | Yes
pageBreakInside | Sets the page-breaking behavior inside an element | 5M | 1 | 9 | Yes
size | Sets the orientation and size of a page |  | 1 | 9 | Yes
widows | Sets the minimum number of lines for a paragraph that must be left at the top of a page | 5M | 1 | 9 | Yes

Scrollbar properties (IE-only)

Property | Description | IE | F | O | W3C
scrollbar3dLightColor | Sets the color of the left and top sides of the arrows and scroll boxes | 5W | No | No | No
scrollbarArrowColor | Sets the color of the arrows on a scroll bar | 5W | No | No | No
scrollbarBaseColor | Sets the base color of the scroll bar | 5W | No | No | No
scrollbarDarkShadowColor | Sets the color of the right and bottom sides of the arrows and scroll boxes | 5W | No | No | No
scrollbarFaceColor | Sets the front color of the scroll bar | 5W | No | No | No
scrollbarHighlightColor | Sets the color of the left and top sides of the arrows and scroll boxes, and the background of a scroll bar | 5W | No | No | No
scrollbarShadowColor | Sets the color of the right and bottom sides of the arrows and scroll boxes | 5W | No | No | No
scrollbarTrackColor | Sets the background color of a scroll bar | 5W | No | No | No

Table properties

Property | Description | IE | F | O | W3C
 | Sets whether the table border are collapsed into a single border or detached as in standard HTML | 5 | 1 | 9 | Yes
borderSpacing | Sets the distance that separates cell borders | 5M | 1 | 9 | Yes
captionSide | Sets the position of the table caption | 5M | No | No | Yes
 | Sets whether or not to show empty cells in a table | 5M | 1 | 9 | Yes
 | Sets the algorithm used to display the table cells, rows, and columns | 5 | No | No | Yes

Text properties

Property | Description | IE | F | O | W3C
color | Sets the color of the text | 4 | 1 | 9 | Yes
 | Sets all font properties in one | 4 | 1 | 9 | Yes
 | Sets the font of an element | 4 | 1 | 9 | Yes
fontSize | Sets the font-size of an element | 4 | 1 | 9 | Yes
fontSizeAdjust | Sets/adjusts the size of a text | 5M | 1 | No | Yes
fontStretch | Sets how to condense or stretch a font | 5M | No | No | Yes
fontStyle | Sets the font-style of an element | 4 | 1 | 9 | Yes
fontVariant | Displays text in a small-caps font | 4 | 1 | 9 | Yes
 | Sets the boldness of the font | 4 | 1 | 9 | Yes
letterSpacing | Sets the space between characters | 4 | 1 | 9 | Yes
lineHeight | Sets the distance between lines | 4 | 1 | 9 | Yes
quotes | Sets which quotation marks to use in a text | 5M | 1 |  | Yes
 | Aligns the text | 4 | 1 | 9 | Yes
textDecoration | Sets the decoration of a text | 4 | 1 | 9 | Yes
textIndent | Indents the first line of text | 4 | 1 | 9 | Yes
textShadow | Sets the shadow effect of a text | 5M | 1 |  | Yes
textTransform | Sets capitalization effect on a text | 4 | 1 | 9 | Yes
unicodeBidi |  | 5 | 1 |  | Yes
whiteSpace | Sets how to handle line-breaks and white-space in a text | 4 | 1 | 9 | Yes
wordSpacing | Sets the space between words in a text | 6 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
title | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes


HTML DOM Submit Object

Submit Object

The Submit object represents a submit button in an HTML form.

For each instance of an <input type="submit"> tag in an HTML form, a Submit object is created.

Example: Form validation

You can access a submit button by searching through the elements[] array of the form, or by using document.getElementById().

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Submit Object Properties

Property | Description | IE | F | O | W3C
 | Sets or returns the keyboard key to access a submit button | 4 | 1 | 9 | Yes
alt | Sets or returns an alternate text to display if a browser does not support submit buttons | 5 | 1 | 9 | Yes
disabled | Sets or returns whether or not a submit button should be disabled | 5 | 1 | 9 | Yes
form | Returns a reference to the form that contains the submit button | 4 | 1 | 9 | Yes
id | Sets or returns the id of a submit button | 4 | 1 | 9 | Yes
name | Sets or returns the name of a submit button | 4 | 1 | 9 | Yes
 | Sets or returns the tab order for a submit button | 4 | 1 | 9 | Yes
type | Returns the type of form element a submit button is | 4 | 1 | 9 | Yes
value | Sets or returns the text that is displayed on a submit button | 4 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
className | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
title | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes

Submit Object Methods

Method | Description | IE | F | O | W3C
blur() | Removes focus from a submit button | 4 | 1 | 9 | Yes
click() | Simulates a mouse-click on a submit button | 4 | 1 | 9 | Yes
focus() | Sets focus on a submit button | 4 | 1 | 9 | Yes


HTML DOM submit() Method

Definition and Usage

The submit() method submits the form (same as clicking the Submit button).

Syntax

formObject.submit()

Example

<html>

<head>

<script type="text/javascript">

function formSubmit()

{

document.getElementById("myForm").submit()

}

</script>

</head>

<body>

<form id="myForm" action="js_form_action.asp" method="get">

Firstname: <input type="text" name="firstname" size="20"><br />

Lastname: <input type="text" name="lastname" size="20"><br />

<br />

<input type="button" onclick="formSubmit()" value="Submit">

</form>

</body>

</html>

Try-It-Yourself Demos

Submit a form


HTML DOM Summary

You Have Learned HTML DOM, Now What?

 Top Previous Next

HTML DOM Summary

This tutorial has taught you how to use the HTML DOM to make your web site more dynamic and interactive.

You have learned how manipulate HTML elements in response of different scenarios.

For more information on HTML DOM, please look at our HTML DOM examples and our .

Now You Know HTML DOM, What's Next?

The next step is to learn about ASP.

While scripts in an HTML file are executed on the client (in the browser), scripts in an ASP file are executed on the server.

With ASP you can dynamically edit, change or add any content of a Web page, respond to 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.

Since ASP files are returned as plain HTML, they can be viewed in any browser.

If you want to learn more about ASP, please visit our ASP tutorial.


HTML DOM summary Property

Definition and Usage

The summary property sets or returns the summary of a table.

The summary property specifies a summary of the table for speech-synthesizing/non-visual browsers.

Syntax

tableObject.summary=text

Example

The following example returns the summary of a table:

<html>

<head>

<script type="text/javascript">

function alertSummary()

{

alert(document.getElementById("table1").summary);

}

</script>

</head>

<body>

<table id="table1" border="1"

summary="Example table of employees">

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

</table>

<br />

<input type="button" onclick=alertSummary()

value="Alert table summary" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM systemLanguage Property

Definition and Usage

The systemLanguage property returns the default language used by the operating system.

Syntax

navigator.systemLanguage

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>SystemLanguage: ")

document.write(navigator.systemLanguage + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos

Detect the visitor's browser and browser version

More details about the visitor's browser

All details about the visitor's browser

Alert user, depending on browser


HTML DOM tabIndex Property

Definition and Usage

The tabIndex property sets or returns the tab order for a link

Syntax

anchorObject.tabIndex=tabIndex

Example

The following example changes the tab order for three links:

<html>

<head>

<script type="text/javascript">

function changeTabIndex()

{

document.getElementById('1').tabIndex="3"

document.getElementById('2').tabIndex="2"

document.getElementById('3').tabIndex="1"

}

</script>

</head>

<body>

<p><a id="1" href="http://www.w3schools.com">1</a></p>

<p><a id="2" href="http://www.w3schools.com">2</a></p>

<p><a id="3" href="http://www.w3schools.com">3</a></p>

<input type="button" onclick="changeTabIndex()"

value="Change TabIndex" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM tabIndex Property

Definition and Usage

The tabIndex property sets or returns the tab order for an area in an image-map.

Syntax

areaObject.tabIndex=tabIndex

Example

The following example shows the tab order of the areas in the image-map:

<html>

<head>

<script type="text/javascript">

function showTabIndex()

{

var sun=document.getElementById('sun').tabIndex;

var mercury=document.getElementById('mercury').tabIndex;

var venus=document.getElementById('venus').tabIndex;

document.write("Tab index of Sun: " + sun);

document.write("<br />");

document.write("Tab index of Mercury: " + mercury);

document.write("<br />");

document.write("Tab index of Venus: " + venus);

}

</script>

</head>

<body>

<img src ="planets.gif"

width="145" height="126"

alt="Planets"

usemap ="#planetmap" />

<map name="planetmap">

<area shape ="rect" coords ="0,0,82,126"

href ="sun.htm" id="sun" tabIndex="1" />

<area shape ="circle" coords ="90,58,3"

href ="mercur.htm" id="mercury" tabIndex="2" />

<area shape ="circle" coords ="124,58,8"

href ="venus.htm" id="venus" tabIndex="3" />

</map>

<input type="button" onclick="showTabIndex()"

value="Show tabIndex" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM tabIndex Property

Definition and Usage

The tabIndex property sets or returns the tab order for a button.

The tab order is the order the button appear if you navigate the page using the "tab" button on the keyboard.

Syntax

buttonObject.tabIndex=tabIndex

Example

The following example shows the tab order for the buttons:

<html>

<head>

<script type="text/javascript">

function showTabIndex()

{

var b1=document.getElementById('b1').tabIndex;

var b2=document.getElementById('b2').tabIndex;

var b3=document.getElementById('b3').tabIndex;

document.write("Tab index of Button 1: " + b1);

document.write("<br />");

document.write("Tab index of Button 2: " + b2);

document.write("<br />");

document.write("Tab index of Button 3: " + b3);

}

</script>

</head>

<body>

<form>

<input type="button" id="b1" tabIndex="1" value="Button 1" />

<br />

<input type="button" id="b2" tabIndex="2" value="Button 2" />

<br />

<input type="button" id="b3" tabIndex="3" value="Button 3" />

<br />

<input type="button" onclick="showTabIndex()"

value="Show tabIndex" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM tabIndex Property

Definition and Usage

The tabIndex property sets or returns the tab order for a checkbox.

The tab order is the order the elements appear if you navigate the page using the "tab" button on the keyboard.

Syntax

checkboxObject.tabIndex=number

Example

The following example changes the tab index of the checkboxes:

<html>

<head>

<script type="text/javascript">

function changeTabIndex()

{

document.getElementById('check3').tabIndex="1"

document.getElementById('check1').tabIndex="3"

}

</script>

</head>

<body>

<form>

<input type="checkbox" id="check1" tabIndex="1" /><br />

<input type="checkbox" id="check2" tabIndex="2" /><br />

<input type="checkbox" id="check3" tabIndex="3" /><br />

<input type="button" onclick="changeTabIndex()"

value="Change tabIndex" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM tabIndex Property

Definition and Usage

The tabIndex property sets or returns the tab order for a password field.

The tab order is the order the password field appear if you navigate the page using the "tab" button on the keyboard.

Syntax

passwordObject.tabIndex=number

Example

The following example shows the tab order for the form elements:

<html>

<head>

<script type="text/javascript">

function showTabIndex()

{

var email=document.getElementById('email').tabIndex;

var pwd=document.getElementById('pwd').tabIndex;

document.write("Tab index of email field: " + email);

document.write("<br />");

document.write("Tab index of password field: " + pwd);

}

</script>

</head>

<body>

<form>

Email: <input type="text" id="email" tabindex="1" />

<br />

Password: <input type="password" id="pwd" tabindex="2" />

<br />

<input type="button" onclick="showTabIndex()"

value="Show tabIndex" />

</form>

</body>

</html>

Try-It-Yourself Demos

Show the tab order of form elements


HTML DOM tabIndex Property

Definition and Usage

The tabIndex property sets or returns the tab order for a button.

The tab order is the order the button appear if you navigate the page using the "tab" button on the keyboard.

Syntax

buttonObject.tabIndex=tabIndex

Example

The following example shows the tab order for the buttons:

<html>

<head>

<script type="text/javascript">

function showTabIndex()

{

var b1=document.getElementById('b1').tabIndex;

var b2=document.getElementById('b2').tabIndex;

var b3=document.getElementById('b3').tabIndex;

document.write("Tab index of Button 1: " + b1);

document.write("<br />");

document.write("Tab index of Button 2: " + b2);

document.write("<br />");

document.write("Tab index of Button 3: " + b3);

}

</script>

</head>

<body>

<button id="b1" tabIndex="1">Button 1</button><br />

<button id="b2" tabIndex="2">Button 2</button><br />

<button id="b3" tabIndex="3">Button 3</button><br />

<br />

<input type="button" onclick="showTabIndex()"

value="Show tabIndex" />

</body>

</html>

Try-It-Yourself Demos

Return the tab order for buttons


HTML DOM tabIndex Property

Definition and Usage

The tabIndex property sets or returns the tab order for a radio button.

The tab order is the order the radio button appear if you navigate the page using the "tab" button on the keyboard.

Syntax

radioObject.tabIndex=number

Example

The following example shows the tab order for the radio buttons:

<html>

<head>

<script type="text/javascript">

function showTabIndex()

{

var r1=document.getElementById('radio1').tabIndex;

var r2=document.getElementById('radio2').tabIndex;

var r3=document.getElementById('radio3').tabIndex;

document.write("Tab index of radio button 1: " + r1);

document.write("<br />");

document.write("Tab index of radio button 2: " + r2);

document.write("<br />");

document.write("Tab index of radio button 3: " + r3);

}

</script>

</head>

<body>

<form>

<input type="radio" id="radio1" tabindex="1" /><br />

<input type="radio" id="radio2" tabindex="2" /><br />

<input type="radio" id="radio3" tabindex="3" /><br />

<input type="button" onclick="showTabIndex()"

value="Show tabIndex" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM tabIndex Property

Definition and Usage

The tabIndex property sets or returns the tab order for a reset button.

The tab order is the order the reset button appear if you navigate the page using the "tab" button on the keyboard.

Syntax

resetObject.tabIndex=tabIndex

Example

The following example shows the tab order for the form elements:

<html>

<head>

<script type="text/javascript">

function showTabIndex()

{

var email=document.getElementById('email').tabIndex;

var r1=document.getElementById('reset1').tabIndex;

document.write("Tab index of email: " + email);

document.write("<br />");

document.write("Tab index of reset button: " + r1);

}

</script>

</head>

<body>

<form>

Email: <input type="text" id="email" tabindex="1"

size="25" value="someone@example.com" />

<br />

<input type="reset" id="reset1" tabindex="2" />

<br /><br />

<input type="button" onclick="showTabIndex()"

value="Show tabIndex" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM tabIndex Property

Definition and Usage

The tabIndex property sets or returns the tab order for a dropdown list.

The tab order is the order the dropdown list appear if you navigate the page using the "tab" button on the keyboard.

Syntax

selectObject.tabIndex=number

Example

The following example displays the tab index of a text field and a dropdown list:

<html>

<head>

<script type="text/javascript">

function showTabIndex()

{

var email=document.getElementById('email').tabIndex;

var sex=document.getElementById('sex').tabIndex;

document.write("Tab index of email field: " + email);

document.write("<br />");

document.write("Tab index of dropdown list: " + sex);

}

</script>

</head>

<body>

<form>

Email: <input type="text" id="email" tabindex="1" />

<br />

Sex:

<select id="sex" tabindex="2">

<option>Male</option>

<option>Female</option>

</select>

<br /><br />

<input type="button" onclick="showTabIndex()"

value="Show tabIndex" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM tabIndex Property

Definition and Usage

The tabIndex property sets or returns the tab order for a submit button.

The tab order is the order the submit button appear if you navigate the page using the "tab" button on the keyboard.

Syntax

submitObject.tabIndex=tabIndex

Example

The following example shows the tab order for the form elements:

<html>

<head>

<script type="text/javascript">

function showTabIndex()

{

var email=document.getElementById('email').tabIndex;

var r1=document.getElementById('submit1').tabIndex;

document.write("Tab index of email: " + email);

document.write("<br />");

document.write("Tab index of submit button: " + r1);

}

</script>

</head>

<body>

<form>

Email: <input type="text" id="email" tabIndex="1"

size="25" value="someone@example.com" />

<br />

<input type="submit" id="submit1" tabIndex="2" />

<br /><br />

<input type="button" onclick="showTabIndex()"

value="Show tabIndex" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM Table Object

Table Object

The Table object represents an HTML table.

For each instance of a <table> tag in an HTML document, a Table object is created.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Table Object Collections

Collection | Description | IE | F | O | W3C
cells[] | Returns an array containing each cell in a table | 5 | No | 1 | No
rows[] | Returns an array containing each row in a table | 4 | 1 | 9 | Yes
tBodies[] | Returns an array containing each tbody in a table | 4 |  |  | Yes

Table Object Properties

Property | Description | IE | F | O | W3C
border | Sets or returns the width of the table border | 4 | 1 | 9 | Yes
caption | Sets or returns the caption of a table | 4 | 1 | 9 | Yes
cellPadding | Sets or returns the amount of space between the cell border and cell content | 4 | 1 | 9 | Yes
 | Sets or returns the amount of space between the cells in a table | 4 | 1 | 9 | Yes
frame | Sets or returns the outer-borders of a table | 4 | 1 | 9 | Yes
id | Sets or returns the id of a table | 4 | 1 | 9 | Yes
rules | Sets or returns the inner-borders of a table | 4 | 1 | 9 | Yes
summary | Sets or returns a description of a table | 6 | 1 | 9 | Yes
tFoot | Returns the TFoot object of a table | 4 | 1 | 9 | Yes
tHead | Returns the THead object of a table | 4 | 1 | 9 | Yes
width | Sets or returns the width of a table | 4 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
className | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
title | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes

Table Object Methods

Method | Description | IE | F | O | W3C
createCaption() | Creates a caption element for a table | 4 | 1 | 9 | Yes
createTFoot() | Creates an empty tFoot element in a table | 4 | 1 | 9 | Yes
createTHead() | Creates an empty tHead element in a table | 4 | 1 | 9 | Yes
deleteCaption() | Deletes the caption element and its content from a table | 4 | 1 | 9 | Yes
 | Deletes a row from a table | 4 | 1 | 9 | Yes
deleteTFoot() | Deletes the tFoot element and its content from a table | 4 | 1 | 9 | Yes
deleteTHead() | Deletes the tHead element and its content from a table | 4 | 1 | 9 | Yes
insertRow() | Inserts a new row in a table | 4 | 1 | 9 | Yes


HTML DOM TableCell Object

TableCell Object

The TableCell object represents an HTML table cell.

For each instance of a <td> tag in an HTML document, a TableCell object is created.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

TableCell Object Properties

Property | Description | IE | F | O | W3C
 | Sets or returns an abbreviated version of the content in a table cell | 6 | 1 | 9 | Yes
align | Sets or returns the horizontal alignment of data within a table cell | 4 | 1 | 9 | Yes
axis | Sets or returns a comma-delimited list of related table cells | 6 | 1 | 9 | Yes
 | Returns the position of a cell in the cells collection of a row | 4 | 1 | 9 | Yes
ch | Sets or returns the alignment character for a table cell |  |  |  | Yes
chOff | Sets or returns the offset of alignment character for a table cell |  |  |  | Yes
colSpan | Sets or returns the number of columns a table cell should span | 4 | 1 | 9 | Yes
headers | Sets or returns a list of space-separated header-cell ids |  |  |  | Yes
id | Sets or returns the id of a table cell | 4 | 1 | 9 | Yes
innerHTML | Sets or returns the HTML between the start and end tags of a table cell | 4 | 1 | 9 | No
rowSpan | Sets or returns the number of rows a table cell should span | 4 | 1 | 9 | Yes
scope | Sets or returns if this cell provides header information |  |  |  | Yes
 | Sets or returns the vertical alignment of data within a table cell | 4 | 1 | 9 | Yes
width | Sets or returns the width of a table cell | 4 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
className | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
title | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes


HTML DOM tableLayout Property

Definition and Usage

The tableLayout property sets the algorithm used to display the table cells, rows, and columns

Fixed table layout:

· The fixed table layout is allows the browser to lay out the table faster than the automatic table layout
· In a fixed table layout, the horizontal layout only depends on the table's width, the width of the columns, and not the content of the cells
· By using the "fixed" table layout, the user agent can begin to display the table once the entire first row has been received

Automatic table layout:

· In an automatic table layout, the column width is set by the widest unbreakable content in the column cells
· This algorithm is sometimes slow since it needs to access all the content in the table before determining the final layout

Syntax

Object.style.tableLayout=automatic|fixed

Possible Values

Value | Description
automatic | Default. Column width is set by cell content content
fixed | Column width is set by table width and the width of the columns

Example

The following example sets a table to a fixed layout:

<html>

<head>

<script type="text/javascript">

function setFixedTableLayout()

{

document.getElementById('myTable').style.tableLayout="fixed";

}

</script>

</head>

<body>

<table id="myTable" border="1" width="100%">

<col width="20%"><col width="40%"><col width="40%">

<tr>

<td>1000000000000000000000000000</td>

<td>10000000</td>

<td>100</td>

</tr>

</table>

<input type="button" onclick="setFixedTableLayout()"

value="Set fixed table layout">

</body>

</html>

Try-It-Yourself Demos

Change the layout of a table (tableLayout)


HTML DOM TableRow Object

TableRow Object

The TableRow object represents an HTML table row.

For each instance of a <tr> tag in an HTML document, a TableRow object is created.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

TableRow Object Collections

Collection | Description | IE | F | O | W3C
cells[] | Returns an array containing each cell in the table row | 4 | 1 | 9 | Yes

TableRow Object Properties

Property | Description | IE | F | O | W3C
align | Sets or returns the horizontal alignment of data within a table row | 4 | 1 | 9 | Yes
ch | Sets or returns the alignment character for cells in a table row |  |  |  | Yes
chOff | Sets or returns the offset of alignment character for the cells in a table row |  |  |  | Yes
id | Sets or returns the id of a table row | 4 | 1 | 9 | Yes
innerHTML | Sets or returns the HTML between the start and end tags of a table row | 5 | 1 | 9 | No
rowIndex | Returns the position of a row in the table's rows collection | 4 | 1 | 9 | Yes
sectionRowIndex | Returns the position of a row in the tBody, tHead, or tFoot rows collection |  |  |  | Yes
vAlign | Sets or returns the vertically alignment of data within a table row | 4 | 1 | 9 | Yes

TableRow Object Methods

Method | Description | IE | F | O | W3C
deleteCell() | Deletes a cell in a table row | 4 | 1 | 9 | Yes
insertCell() | Inserts a cell in a table row | 4 | 1 | 9 | Yes


HTML DOM taintEnabled() Method

Definition and Usage

The taintEnabled() method returns a Boolean value that specifies whether the browser has data tainting enabled.

Syntax

navigator.taintEnabled()

Example

The following example returns whether the browser has data tainting enabled:

<html>

<body>

<script type="text/javascript">

alert(navigator.taintEnabled())

</script>

</body>

</html>

Output:

false

Try-It-Yourself Demos


HTML DOM target Property

Definition and Usage

The target property sets or returns where to open a link.

Syntax

anchorObject.target=_blank|_parent|_self|_top
· _blank - the target URL will open in a new window
· _self - the target URL will open in the same frame as it was clicked
· _parent - the target URL will open in the parent frameset
· _top - the target URL will open in the full body of the window

Example

The following example changes the text, URL, and target of a link:

<html>

<head>

<script type="text/javascript">

function changeLink()

{

document.getElementById('myAnchor').innerHTML="W3Schools";

document.getElementById('myAnchor').href="http://www.w3schools.com";

document.getElementById('myAnchor').target="_blank";

}

</script>

</head>

<body>

<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>

<input type="button" onclick="changeLink()" value="Change link">

</body>

</html>

Try-It-Yourself Demos


HTML DOM target Property

Definition and Usage

The target property sets or returns where to open the link-URL in an area.

Syntax

areaObject.target=_blank|_parent|_self|_top
· _blank - the target URL will open in a new window
· _self - the target URL will open in the same frame as it was clicked
· _parent - the target URL will open in the parent frameset
· _top - the target URL will open in the full body of the window

Example

The following example changes the target of the link in the image-map:

<html>

<head>

<script type="text/javascript">

function changeTarget()

{

document.getElementById('venus').target="_blank"

}

</script>

</head>

<body>

<img src ="planets.gif"

width="145" height="126"

alt="Planets"

usemap ="#planetmap" />

<map name ="planetmap">

<area shape ="circle" coords ="124,58,8"

href ="venus.htm" id="venus" />

</map>

<br />

<input type="button" onclick="changeTarget()"

value="Change target" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM target Property

Definition and Usage

The target property sets or returns the default target frame for all the links in a page.

Syntax

baseObject.target=target

Example

The following example returns the default link target:

<html>

<head>

<base id="myBaseId" target="_blank"

href="http://www.w3schools.com/htmldom/" />

</head>

<body>

<p>Base target:

<script type="text/javascript">

x=document.getElementById('myBaseId');

document.write(x.target);

</script>

</body>

</html>

Output:

Base target: _blank

Try-It-Yourself Demos


HTML DOM target Property

Definition and Usage

The target property sets or returns where to open the action-URL in a form.

Syntax

formObject.target=_blank|_parent|_self|_top
· _blank - the action URL will open in a new window
· _self - the action URL will open in the same frame as it was clicked
· _parent - the action URL will open in the parent frameset
· _top - the action URL will open in the full body of the window

Example

The following example sets the action-URL to open in a new window:

<html>

<head>

<script type="text/javascript">

function submitForm()

{

var x=document.getElementById("myForm");

x.target="_blank";

x.submit();

}

</script>

</head>

<body>

<form id="myForm" action="default.asp">

Name: <input type="text" value="Mickey Mouse" />

<input type="button" onclick="submitForm()"

value="Submit" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM Text Object

Text Object

The Text object represents a text-input field in an HTML form.

For each instance of an <input type="text"> tag in an HTML form, a Text object is created.

You can access a text-input field by searching through the elements[] array of the form, or by using document.getElementById().

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Text Object Properties

Property | Description | IE | F | O | W3C
accessKey | Sets or returns the keyboard key to access a text field | 4 | 1 | 9 | Yes
alt | Sets or returns an alternate text to display if a browser does not support text fields | 5 | 1 | 9 | Yes
 | Sets or returns the default value of a text field | 4 | 1 | 9 | Yes
disabled | Sets or returns whether or not a text field should be disabled | 5 | 1 | 9 | Yes
form | Returns a reference to the form that contains the text field | 4 | 1 | 9 | Yes
 | Sets or returns the id of a text field | 4 | 1 | 9 | Yes
 | Sets or returns the maximum number of characters in a text field | 4 | 1 | 9 | Yes
 | Sets or returns the name of a text field | 4 | 1 | 9 | Yes
readOnly | Sets or returns whether or not a text field should be read-only | 4 | 1 | 9 | Yes
size | Sets or returns the size of a text field | 4 | 1 | 9 | Yes
tabIndex | Sets or returns the tab order for a text field | 4 | 1 | 9 | Yes
 | Returns the type of form element a text field is | 4 | 1 | 9 | Yes
value | Sets or returns the value of the value attribute of a text field | 4 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
className | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
 | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes

Text Object Methods

Method | Description | IE | F | O | W3C
blur() | Removes focus from a text field | 4 | 1 | 9 | Yes
focus() | Sets focus on a text field | 4 | 1 | 9 | Yes
select() | Selects the content of a text field | 4 | 1 | 9 | Yes


HTML DOM text Property

Definition and Usage

The text property sets or returns the text value of an option.

Syntax

optionObject.text=sometext

Example

The following example returns the text of the selected option:

<html>

<head>

<script type="text/javascript">

function getOption()

{

var x=document.getElementById("mySelect")

alert(x.options[x.selectedIndex].text)

}

</script>

</head>

<body>

<form>

Select your favorite fruit:

<select id="mySelect">

<option>Apple</option>

<option>Orange</option>

<option>Pineapple</option>

<option>Banana</option>

</select>

<br /><br />

<input type="button" onclick="getOption()"

value="Alert text of selected option">

</form>

</body>

</html>

Try-It-Yourself Demos

Return the text of a selected option in a dropdown list


HTML DOM textAlign Property

Definition and Usage

The textAlign property aligns the text in an element.

Syntax

Object.style.textAlign=left|right|center|justify

Possible Values

Value | Description
left | Aligns the text to the left
right | Aligns the text to the right
center | Centers the text
justify | Aligns the text according to the textJustify property

Example

The following example aligns a text:

<html>

<head>

<script type="text/javascript">

function setTextAlign()

{

document.getElementById("p1").style.textAlign="right";

}

</script>

</head>

<body>

<p id="p1">This is an example paragraph.</p>

<input type="button" onclick="setTextAlign()"

value="Align text" />

</body>

</html>

Try-It-Yourself Demos

textAlign - Align a text


HTML DOM Textarea Object

Textarea Object

The Textarea object represents a text-area in an HTML form. For each instance of an HTML <textarea> tag in a form, a Textarea object is created.

You can access a Textarea object by indexing the elements array (by number or name) of the corresponding form or by using getElementById().

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Textarea Object Properties

Property | Description | IE | F | O | W3C
accessKey | Sets or returns the keyboard key to access a textarea | 4 | 1 | 9 | Yes
cols | Sets or returns the width of a textarea | 4 | 1 | 9 | Yes
defaultValue | Sets or returns the default text in a textarea | 4 | 1 | 9 | Yes
disabled | Sets or returns whether or not a textarea should be disabled | 5 | 1 | 9 | Yes
form | Returns a reference to the form that contains the textarea | 4 | 1 | 9 | Yes
id | Sets or returns the id of a textarea | 4 | 1 | 9 | Yes
name | Sets or returns the name of a textarea | 4 | 1 | 9 | Yes
 | Sets or returns whether or not a textarea should be read-only | 4 | 1 | 9 | Yes
rows | Sets or returns the height of a textarea | 4 | 1 | 9 | Yes
 | Sets or returns the tab order for the textarea | 4 | 1 | 9 | Yes
type | Returns the type of the form element | 4 | 1 | 9 | Yes
 | Sets or returns the text in a textarea | 4 | 1 | 9 | Yes

Standard Properties

Property | Description | IE | F | O | W3C
className | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes
dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes
lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes
title | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes

Textarea Object Methods

Method | Description | IE | F | O | W3C
 | Removes focus from a textarea | 4 | 1 | 9 | Yes
 | Sets focus on a textarea | 4 | 1 | 9 | Yes
select() | Selects the text in a textarea | 4 | 1 | 9 | Yes


HTML DOM textDecoration Property

Definition and Usage

The textDecoration property sets the decoration of a text.

Syntax

Object.style.textDecoration=none|underline

|overline|line-through|blink

Possible Values

Value | Description
none | Defines a normal text
underline | Defines a line under the text
overline | Defines a line over the text
line-through | Defines a line through the text
blink | Defines a blinking text (does not work in IE and Opera)

Example

The following example sets underline to a text:

<html>

<head>

<script type="text/javascript">

function setTextDecoration()

{

document.getElementById("p1").style.textDecoration="overline";

}

</script>

</head>

<body>

<p id="p1">This is an example paragraph.</p>

<input type="button" onclick="setTextDecoration()"

value="Set text-decoration" />

</body>

</html>

Try-It-Yourself Demos

textDecoration - Decorate a text


HTML DOM textIndent Property

Definition and Usage

The textIndent property indents the first line of text in an element.

Syntax

Object.style.textIndent=length|%

Possible Values

Value | Description
length | Defines a fixed indentation
% | Defines an indentation in % of the width of the parent element

Example

The following example indents a text:

<html>

<head>

<script type="text/javascript">

function setTextIndent()

{

document.getElementById("div1").style.textIndent="50px";

}

</script>

</head>

<body>

<div id="div1">

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

</div>

<br />

<input type="button" onclick="setTextIndent()"

value="Indent first line of text" />

</body>

</html>

Try-It-Yourself Demos

textIndent - Indent a text


HTML DOM textTransform Property

Definition and Usage

The textTransform property sets capitalization effect on a text.

Syntax

Object.style.textTransform=none|capitalize|uppercase|lowercase

Possible Values

Value | Description
none | Default. No characters are converted
capitalize | The first character of each word is converted to uppercase
uppercase | All characters are converted to uppercase
lowercase | All characters are converted to lowercase

Example

The following example converts first letter of each word to uppercase:

<html>

<head>

<script type="text/javascript">

function changeText()

{

document.getElementById("p1").style.textTransform="capitalize";

}

</script>

</head>

<body>

<p id="p1">This is an example paragraph.</p>

<input type="button" onclick="changeText()"

value="Convert first letter of each word" />

</body>

</html>

Try-It-Yourself Demos

textTransform - Convert text


HTML DOM title Property

Definition and Usage

The title property sets or returns the element's advisory title.

Syntax

bodyObject.title=title

Example

The following example shows two methods on how to get the title attribute of the <body> element:

<html>

<body id="myid" title="mytitle">

<script type="text/javascript">

x=document.getElementsByTagName('body')[0];

document.write("Body title: " + x.title);

document.write("<br />");

document.write("An alternate way: ");

document.write(document.getElementById('myid').title);

</script>

</body>

</html>

Output:

Body title: mytitle

An alternate way: mytitle

Try-It-Yourself Demos


HTML DOM title Property

Definition and Usage

The title property returns the title of the current document (the text inside the HTML title element).

Syntax

document.title

Example

<html>

<head>

<title>My title</title>

</head>

<body>

The title of the document is:

<script type="text/javascript">

document.write(document.title)

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM top Property

Definition and Usage

The top property sets how far the top edge of an element is above/below the top edge of the parent element.

Syntax

Object.style.top=auto|%|length

Possible Values

Value | Description
auto | Lets the browser calculate the top position
% | Sets the top position in % from the top edge of the parent element
length | Sets the top position in px, cm, etc. from the top edge of the parent element. Negative values are allowed

Tips and Notes

Note: If the "position" property has a value of "static", the "top" property has no effect.

Example

The following example sets the top edge of an element:

<html>

<head>

<style type="text/css">

input

{

position:absolute;

}

</style>

<script type="text/javascript">

function setTopEdge()

{

document.getElementById("b1").style.top="100px";

}

</script>

</head>

<body>

<input type="button" id="b1" onclick="setTopEdge()"

value="Set top edge to 100 px" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM top Property

Definition and Usage

The top property returns the topmost ancestor window.

Syntax

window.top

Example

The following example checks whether the window is in a frame, and if it is - it breaks out of the frame:

<html>

<head>

<script type="text/javascript">

function breakout()

{

if (window.top!=window.self)

{

window.top.location="tryjs_breakout.htm"

}

}

</script>

</head>

<body>

<form>

Click the button to break out of the frame:

<input type="button" onclick="breakout()" value="Break out!">

</form>

</body>

</html>

Try-It-Yourself Demos

Break out of a frame

Resize a window to a specified size


HTML DOM Tutorial

HTML DOM Tutorial

The HTML Document Object Model (HTML DOM) defines a standard way for accessing and manipulating HTML documents.

The DOM presents an HTML document as a tree-structure (a node tree), with elements, attributes, and text.

Start learning the HTML DOM now!

HTML DOM Examples

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

HTML DOM Reference

At W3Schools you will find a complete HTML DOM reference with lots of examples.

HTML DOM Reference


HTML DOM type Property

Definition and Usage

The type property sets or returns the MIME type for the linked resource.

Syntax

anchorObject.type=type

Example

The following example returns the MIME type for the linked resource:

<html>

<body>

<p><a id="myAnchor" type="text/html"

href="http://www.w3schools.com">W3Schools.com</a></p>

<script type="text/javascript">

x=document.getElementById("myAnchor");

document.write(x.type);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM type Property

Definition and Usage

The type property returns the type of form element. For a Button object this will always be "button".

Syntax

buttonObject.type

Example

The following example returns which type of form element the button is:

<html>

<head>

<script type="text/javascript">

function alertType()

{

alert(document.getElementById("myButton").type)

}

</script>

</head>

<body>

<form>

<input type="button" value="Click me!" id="myButton"

onclick="alertType()" />

</form>

</body>

</html>

Try-It-Yourself Demos

Alert id, type, and value of a Button + disable button


HTML DOM type Property

Definition and Usage

The type property returns the type of form element. For a checkbox object this will always be "checkbox".

Syntax

checkboxObject.type

Example

The following example returns which type of form element the checkbox is:

<html>

<body>

<form>

<input type="checkbox" id="check1" />

</form>

<script type="text/javascript">

x=document.getElementById("check1");

document.write("Form element type is: ");

document.write(x.type);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM type Property

Definition and Usage

The type property returns the type of form element. For a hidden object this will always be "hidden".

Syntax

hiddenObject.type

Example

The following example returns which type of form element the hidden field is:

<html>

<body>

<form>

<input type="hidden" id="hidden1" />

</form>

<script type="text/javascript">

x=document.getElementById("hidden1");

document.write("Form element type is: ");

document.write(x.type);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM type Property

Definition and Usage

The type property sets or returns the MIME type of the target URL (like "text/css", "text/javascript", "image/gif", etc.).

Syntax

linkObject.type=MIME_type

Example

The following example returns the MIME type of the target URL:

<html>

<head>

<link rel="stylesheet" type="text/css"

id="style1" href="try_dom_link.css" />

</head>

<body>

<script type="text/javascript">

x=document.getElementById("style1");

document.write("MIME type: " + x.type);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM type Property

Definition and Usage

The type property returns the type of form element. For a password field this will always be "password".

Syntax

passwordObject.type

Example

The following example returns which type of form element the password field is:

<html>

<body>

<form>

<input type="password" id="password1" />

</form>

<script type="text/javascript">

x=document.getElementById("password1");

document.write("Form element type is: ");

document.write(x.type);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM type Property

Definition and Usage

The type property returns the type of form element. For a Button object this will always be "button".

Syntax

buttonObject.type

Example

<html>

<head>

<script type="text/javascript">

function alertType()

{

alert(document.getElementById("myButton").type)

}

</script>

</head>

<body>

<form>

<button id="myButton" onClick="alertType()">

Click Me!</button>

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM type Property

Definition and Usage

The type property returns the type of form element. For a radio button object this will always be "radio".

Syntax

radioObject.type

Example

The following example returns which type of form element the radio button is:

<html>

<body>

<form>

<input type="radio" id="radio1" />

</form>

<script type="text/javascript">

x=document.getElementById("radio1");

document.write("Form element type is: ");

document.write(x.type);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM type Property

Definition and Usage

The type property returns the type of form element. For a reset button object this will always be "reset".

Syntax

resetObject.type

Example

The following example returns which type of form element the reset button is:

<html>

<head>

<script type="text/javascript">

function alertType()

{

alert(document.getElementById("reset1").type)

}

</script>

</head>

<body>

<form>

<input type="reset" id="reset1" onclick="alertType()" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM type Property

Definition and Usage

The type property returns the type of form element a dropdown list is. For a dropdown list it will be "select-one" or "select-multiple".

Syntax

selectObject.type

Example

The following example returns the type:

<html>

<head>

<script type="text/javascript">

function getType()

{

alert(document.getElementById("mySelect").type)

}

</script>

</head>

<body>

<form>

<select id="mySelect">

<option>Apple</option>

<option>Pear</option>

<option>Banana</option>

<option>Orange</option>

</select>

<input type="button" onclick="getType()"

value="Alert type of dropdown list">

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM type Property

Definition and Usage

The type property returns the type of form element. For a submit button object this will always be "submit".

Syntax

submitObject.type

Example

The following example returns which type of form element the submit button is:

<html>

<head>

<script type="text/javascript">

function alertType()

{

alert(document.getElementById("submit1").type)

}

</script>

</head>

<body>

<form>

<input type="submit" id="submit1" onclick="alertType()" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM type Property

Definition and Usage

The type property returns the type of form element. For a text field this will always be "text".

Syntax

textObject.type

Example

The following example returns which type of form element the text field is:

<html>

<body>

<form>

<input type="text" id="text1" />

</form>

<script type="text/javascript">

x=document.getElementById("text1");

document.write("Form element type is: ");

document.write(x.type);

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM updateInterval Property

Definition and Usage

The updateInterval property sets or returns the update interval for the screen.

Syntax

screen.updateInterval=number

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>Update Interval: ")

document.write(screen.updateInterval + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM URL Property

Definition and Usage

The URL property returns the URL of the current document.

Syntax

document.URL

Example

<html>

<body>

The URL of this document is:

<script type="text/javascript">

document.write(document.URL)

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM useMap Property

Definition and Usage

The useMap property sets or returns the value of the usemap attribute of an image.

Syntax

imageObject.useMap=URL

Example

The following example prints the value of the usemap attribute of a client-side image map:

<html>

<body>

<img id="planets" src="planets.gif"

width="145" height="126"

usemap="#planetmap" />

<map name="planetmap">

<area id="venus" shape="circle"

coords="124,58,8"

alt="The planet Venus"

href="venus.htm" />

</map>

<p>The value of the usemap attribute=

<script type="text/javascript">

x=document.getElementById('planets');

document.write(x.useMap);

</script>

</p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM userAgent Property

Definition and Usage

The userAgent property returns the value of the user-agent header sent by the client to the server.

Syntax

navigator.userAgent

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>UserAgent: ")

document.write(navigator.userAgent + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos

Detect the visitor's browser and browser version

More details about the visitor's browser

All details about the visitor's browser


HTML DOM userLanguage Property

Definition and Usage

The userLanguage property returns the operating system's natural language settings.

Syntax

navigator.userLanguage

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>UserLanguage: ")

document.write(navigator.userLanguage + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos

Detect the visitor's browser and browser version

More details about the visitor's browser

All details about the visitor's browser


HTML DOM vAlign Property

Definition and Usage

The vAlign property sets or returns the vertical alignment of data within a table cell.

Syntax

tabledataObject.vAlign=top|middle|bottom|baseline

Example

The following example changes the vertical alignment of the data within the table cells:

<html>

<head>

<script type="text/javascript">

function topAlign()

{

document.getElementById('td1').vAlign="top";

document.getElementById('td2').vAlign="top";

document.getElementById('td3').vAlign="top";

}

</script>

</head>

<body>

<table width="50%" border="1">

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Text</th>

</tr>

<tr>

<td id="td1">Peter</td>

<td id="td2">Griffin</td>

<td id="td3">Hello my name is Peter Griffin.

I need a long text for this example.

I need a long text for this example.</td>

</tr>

</table>

<br />

<input type="button" onclick="topAlign()"

value="Top-align table cells" />

</body>

</html>

Try-It-Yourself Demos

Change the vertical alignment of table cells


HTML DOM vAlign Property

Definition and Usage

The vAlign property sets or returns the vertical alignment of data within a table row.

Syntax

tablerowObject.vAlign=top|bottom|middle|baseline

Example

The following example changes the vertical alignment of the data in a table row:

<html>

<head>

<script type="text/javascript">

function topAlign()

{

document.getElementById('tr2').vAlign="top";

}

</script>

</head>

<body>

<table width="50%" border="1">

<tr id="tr1">

<th>Firstname</th>

<th>Lastname</th>

<th>Text</th>

</tr>

<tr id="tr2">

<td>Peter</td>

<td>Griffin</td>

<td>Hello my name is Peter Griffin.

I need a long text for this example.

I need a long text for this example.</td>

</tr>

</table>

<br />

<input type="button" onclick="topAlign()"

value="Top-align table row" />

</body>

</html>

Try-It-Yourself Demos

Vertical align the cell content of a table row


HTML DOM value Property

Definition and Usage

The value property sets or returns the text that is displayed on the button.

Syntax

buttonObject.value=sometext

Example

<html>

<head>

<script type="text/javascript">

function alertValue()

{

alert(document.getElementById("myButton").value)

}

</script>

</head>

<body>

<form>

<input type="button" value="Click me!" id="myButton"

onclick="alertValue()" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM value Property

Definition and Usage

The value property sets or returns the value of the value attribute of the hidden input field.

The value attribute defines the default value of the hidden field.

Syntax

hiddenObject.value

Example

The following example gets the value of the hidden field:

<html>

<head>

<script type="text/javascript">

function alertValue()

{

alert(document.getElementById("hidden1").value)

}

</script>

</head>

<body>

<form>

<input type="hidden" id="hidden1" value="W3Schools" />

<input type="button" id="button1" onclick="alertValue()"

value="Show value of the hidden field" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM value Property

Definition and Usage

The value property sets or returns the value of the option (the value to be sent to the server).

Syntax

optionObject.value=somevalue

Example

The following example returns the value of the selected option in a dropdown list:

<html>

<head>

<script type="text/javascript">

function alertValue()

{

var x=document.getElementById("mySelect").selectedIndex;

alert(document.getElementsByTagName("option")[x].value);

}

</script>

</head>

<body>

<form>

Select your favorite fruit:

<select id="mySelect">

<option value="apple">Apple</option>

<option value="orange">Orange</option>

<option value="pineapple">Pineapple</option>

<option value="banana">Banana</option>

</select>

<br /><br />

<input type="button" onclick="alertValue()"

value="Alert selected value">

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM value Property

Definition and Usage

The value property sets or returns the default value of a password field.

Syntax

passwordObject.value=text

Example

The following example gets the default value of the password field:

<html>

<head>

<script type="text/javascript">

function alertValue()

{

alert(document.getElementById("password1").value)

}

</script>

</head>

<body>

<form>

<input type="password" id="password1" value="thgrt456" />

<input type="button" id="button1" onclick="alertValue()"

value="Show default value" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM value Property

Definition and Usage

The value property sets or returns the text that is displayed on the button.

Syntax

buttonObject.value=value

Example

The following example returns the text displayed on the button:

<html>

<body>

<input type="button" id="button1"

name="button1" value="Click Me!" />

<p>The text on the button is:

<script type="text/javascript">

x=document.getElementById('button1');

document.write(x.value);

</script></p>

</body>

</html>

Try-It-Yourself Demos


HTML DOM value Property

Definition and Usage

The value property sets or returns the value of the value attribute of the radio button.

Syntax

radioObject.value=sometext

Example

<html>

<head>

<script type="text/javascript">

function check(browser)

{

document.getElementById("answer").value=browser

}

</script>

</head>

<body>

<p>What's your favorite browser:</p>

<form>

<input type="radio" name="browser" onclick="check(this.value)"

value="Internet Explorer">Internet Explorer<br />

<input type="radio" name="browser" onclick="check(this.value)"

value="Firefox">Firefox<br />

<input type="radio" name="browser" onclick="check(this.value)"

value="Netscape">Netscape<br />

<input type="radio" name="browser" onclick="check(this.value)"

value="Opera">Opera<br />

<br />

Your favorite browser is: <input type="text" id="answer" size="20">

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM value Property

Definition and Usage

The value property sets or returns the text that is displayed on the reset button.

Syntax

resetObject.value=sometext

Example

<html>

<head>

<script type="text/javascript">

function alertValue()

{

alert(document.getElementById("reset1").value)

}

</script>

</head>

<body>

<form>

<input type="reset" value="Reset values" id="reset1"

onclick="alertValue()" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM value Property

Definition and Usage

The value property sets or returns the text that is displayed on the submit button.

Syntax

submitObject.value=sometext

Example

<html>

<head>

<script type="text/javascript">

function alertValue()

{

alert(document.getElementById("submit1").value)

}

</script>

</head>

<body>

<form>

<input type="submit" value="submit values" id="submit1"

onclick="alertValue()" />

</form>

</body>

</html>

Try-It-Yourself Demos


HTML DOM value Property

Definition and Usage

The value property sets or returns the value of a text field.

Syntax

textObject.value=text

Example

The following example gets the value of the text field:

<html>

<head>

<script type="text/javascript">

function alertValue()

{

alert(document.getElementById("text1").value)

}

</script>

</head>

<body>

<form>

<input type="text" id="text1" value="Hello world!" />

<input type="button" id="button1" onclick="alertValue()"

value="Show default value" />

</form>

</body>

</html>

Try-It-Yourself Demos

Alert the

Form validation

Radio buttons in a form

Checkboxes in a form

Dropdown list in a form

Another dropdown list


HTML DOM visibility Property

Definition and Usage

The visibility property sets whether or not an element should be visible.

Syntax

Object.style.visibility=visible|hidden|collapse

Possible Values

Value | Description
visible | Default. The element box is visible
hidden | The element box is not visible, but still affects layout.
collapse | When used on a row or column, the element will not be visible. The space of the invisible element is used by the row or column for other content. Note: collapse is identical to hidden if not used on rows or columns

Example

The following example hides a text:

<html>

<head>

<script type="text/javascript">

function changeVisibility()

{

document.getElementById("p1").style.visibility="hidden";

}

</script>

</head>

<body>

<p id="p1">This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.</p>

<form>

<input type="button" onclick="changeVisibility()"

value="Hide paragraph" />

</form>

</body>

</html>

Try-It-Yourself Demos

visibility - Hide a text


HTML DOM vspace Property

Definition and Usage

The vspace property sets or returns the white space on the left and right side of an image.

The hspace and vspace properties can be used with align to set the distance between the image and the surrounding text.

Syntax

imageObject.vspace=pixels

Example

The following example sets the hspace and vspace properties of an image:

<html>

<head>

<script type="text/javascript">

function setSpace()

{

document.getElementById("compman").hspace="50"

document.getElementById("compman").vspace="50"

}

</script>

</head>

<body>

<img id="compman" src="compman.gif" alt="Computerman" align="right" />

<p>Some text. Some text. Some text. Some text.</p>

<input type="button" onclick="setSpace()"

value="Set hspace and vspace">

</body>

</html>

Try-It-Yourself Demos

Set the horizontal and vertical placement of an image


HTML DOM whiteSpace Property

Definition and Usage

The whiteSpace property sets how to handle line breaks and white-space in a text.

Syntax

Object.style.whiteSpace=normal|nowrap|pre

Possible Values

Value | Description
normal | Default. Lines of text break automatically when it exceeds the width of the containing element
nowrap | Do not let the text wrap (no line breaks are allowed)
pre | Line breaks and other whitespace are preserved

Example

The following example does not allow line breaks in the text:

<html>

<head>

<script type="text/javascript">

function removeWrapping()

{

document.getElementById("div1").style.whiteSpace="nowrap";

}

</script>

</head>

<body>

<div id="div1">

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

</div>

<br />

<input type="button" onclick="removeWrapping()"

value="Do not let the text wrap" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM width Property

Definition and Usage

The width property sets or returns the width of an iframe (in pixels).

Syntax

iframeObject.width=pixels

Example

The following example changes the width of the iframe:

<html>

<head>

<script type="text/javascript">

function changeWidth()

{

document.getElementById("frame1").width="100";

}

</script>

</head>

<body>

<iframe src="frame_a.htm" id="frame1" width="200"></iframe>

<br /><br />

<input type="button" onclick="changeWidth()"

value="Change size" />

</body>

</html>

Try-It-Yourself Demos

Change the height and width of an iframe


HTML DOM width Property

Definition and Usage

The width property sets or returns the width of an image.

Syntax

imageObject.width=pixels

Example

<html>

<head>

<script type="text/javascript">

function changeSize()

{

document.getElementById("compman").height="250"

document.getElementById("compman").width="300"

}

</script>

</head>

<body>

<img id="compman" src="compman.gif" width="107" height="98" />

<br /><br />

<input type="button" onclick="changeSize()"

value="Change size of image">

</body>

</html>

Try-It-Yourself Demos

Change the height and width of an image


HTML DOM width Property

Definition and Usage

The width property returns the width of the client's display screen.

Syntax

screen.width

Example

<html>

<body>

<script type="text/javascript">

document.write("<p>Width: ")

document.write(screen.width + "</p>")

</script>

</body>

</html>

Try-It-Yourself Demos

Detect details about the client's screen


HTML DOM width Property

Definition and Usage

The width property sets the width of an element.

Syntax

Object.style.width=auto|length|%

Possible Values

Value | Description
auto | The browser calculates the actual width
length | Defines the width in px, cm, etc.
% | Defines the width in % of the containing block

Example

The following example sets the width of a button:

<html>

<head>

<script type="text/javascript">

function setWidth()

{

document.getElementById("b1").style.width="300px";

}

</script>

</head>

<body>

<input type="button" id="b1" onclick="setWidth()"

value="Change width to 300 px" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM width Property

Definition and Usage

The width property sets or returns the width of a table cell.

Note: The entire column will be affected.

Syntax

tabledataObject.width=percent|pixels

Example

The following example changes the width of a table cell:

<html>

<head>

<script type="text/javascript">

function changeWidth()

{

document.getElementById("td1").width="200px";

}

</script>

</head>

<body>

<table border="1">

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td id="td1">Peter</td>

<td id="td2">Griffin</td>

</tr>

</table>

<br />

<input type="button" onclick=changeWidth() value="Change width" />

</body>

</html>

Try-It-Yourself Demos

Change the width of a table cell


HTML DOM width Property

Definition and Usage

The width property sets or returns the width of a table.

Syntax

tableObject.width=percent|pixels

Example

The following example changes the width of a table:

<html>

<head>

<script type="text/javascript">

function changeWidth()

{

document.getElementById("table1").width="100%";

}

</script>

</head>

<body>

<table id="table1" border="1">

<thead>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

</table>

<br />

<input type="button" onclick=changeWidth()

value="Change table width" />

</body>

</html>

Try-It-Yourself Demos


HTML DOM Window Object

Window Object

The Window object is the top level object in the JavaScript hierarchy.

The Window object represents a browser window.

A Window object is created automatically with every instance of a <body> or <frameset> tag.

IE: Internet Explorer, F: Firefox, O: Opera.

Window Object Collections

Collection | Description | IE | F | O
frames[] | Returns all named frames in the window | 4 | 1 | 9

Window Object Properties

Property | Description | IE | F | O
closed | Returns whether or not a window has been closed | 4 | 1 | 9
 | Sets or returns the default text in the statusbar of the window | 4 | No | 9
document | See Document object | 4 | 1 | 9
history | See History object | 4 | 1 | 9
length | Sets or returns the number of frames in the window | 4 | 1 | 9
location | See Location object | 4 | 1 | 9
name | Sets or returns the name of the window | 4 | 1 | 9
opener | Returns a reference to the window that created the window | 4 | 1 | 9
 | Sets or returns the outer height of a window | No | No | No
outerwidth | Sets or returns the outer width of a window | No | No | No
pageXOffset | Sets or returns the X position of the current page in relation to the upper left corner of a window's display area | No | No | No
pageYOffset | Sets or returns the Y position of the current page in relation to the upper left corner of a window's display area | No | No | No
parent | Returns the parent window | 4 | 1 | 9
personalbar | Sets whether or not the browser's personal bar (or directories bar) should be visible |  |  |
scrollbars | Sets whether or not the scrollbars should be visible |  |  |
self | Returns a reference to the current window | 4 | 1 | 9
status | Sets the text in the statusbar of a window | 4 | No | 9
statusbar | Sets whether or not the browser's statusbar should be visible |  |  |
toolbar | Sets whether or not the browser's tool bar is visible or not (can only be set before the window is opened and you must have UniversalBrowserWrite privilege) |  |  |
 | Returns the topmost ancestor window | 4 | 1 | 9

Window Object Methods

Method | Description | IE | F | O
alert() | Displays an alert box with a message and an OK button | 4 | 1 | 9
blur() | Removes focus from the current window | 4 | 1 | 9
clearInterval() | Cancels a timeout set with setInterval() | 4 | 1 | 9
 | Cancels a timeout set with setTimeout() | 4 | 1 | 9
close() | Closes the current window | 4 | 1 | 9
confirm() | Displays a dialog box with a message and an OK and a Cancel button | 4 | 1 | 9
createPopup() | Creates a pop-up window | 4 | No | No
focus() | Sets focus to the current window | 4 | 1 | 9
moveBy() | Moves a window relative to its current position | 4 | 1 | 9
 | Moves a window to the specified position | 4 | 1 | 9
 | Opens a new browser window | 4 | 1 | 9
print() | Prints the contents of the current window | 5 | 1 | 9
prompt() | Displays a dialog box that prompts the user for input | 4 | 1 | 9
resizeBy() | Resizes a window by the specified pixels | 4 | 1 | 9
resizeTo() | Resizes a window to the specified width and height | 4 | 1.5 | 9
 | Scrolls the content by the specified number of pixels | 4 | 1 | 9
scrollTo() | Scrolls the content to the specified coordinates | 4 | 1 | 9
 | Evaluates an expression at specified intervals | 4 | 1 | 9
 | Evaluates an expression after a specified number of milliseconds | 4 | 1 | 9


HTML DOM wordSpacing Property

Definition and Usage

The wordSpacing property sets the space between words in a text.

Syntax

Object.style.wordSpacing=normal|length

Possible Values

Value | Description
normal | Defines normal space between words
length | Sets a fixed space between words in px, cm, etc. Negative values are allowed

Example

The following example changes the space between words:

<html>

<head>

<script type="text/javascript">

function changeWordSpacing()

{

document.getElementById("p1").style.wordSpacing="10px";

}

</script>

</head>

<body>

<p id="p1">This is an example paragraph</p>

<input type="button" onclick="changeWordSpacing()"

value="Change space between words" />

</body>

</html>

Try-It-Yourself Demos

wordSpacing - Change the space between the words in a text


HTML DOM write() Method

Definition and Usage

The write() method writes HTML expressions or JavaScript code to a document.

Note: Multiple arguments (exp1,exp2,exp3,...) can be listed and they will be appended to the document in order of occurrence.

Syntax

document.write(exp1,exp2,exp3,....)

Example

<html>

<body>

<script type="text/javascript">

document.write("Hello World!")

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM writeln() Method

Definition and Usage

The writeln() method is identical to the write() method, with the addition of writing a new line character after each expression.

Syntax

document.writeln(exp1,exp2,exp3,....)

Example

<html>

<body>

<script type="text/javascript">

document.writeln("Hello World!")

</script>

</body>

</html>

Try-It-Yourself Demos


HTML DOM zIndex Property

Definition and Usage

The zIndex property sets the stack order of an element.

An element with greater stack order is always in front of another element with lower stack order.

Syntax

Object.style.zIndex=auto|number

Possible Values

Value | Description
auto | The stack order is equal to its parents
number | A number that defines the stack order of the element

Tips and Notes

Tip: Elements can have negative stack orders.

Note: zIndex only works on elements that have been positioned, like position:absolute;

Example

The following example changes the stack order of an element:

<html>

<head>

<style type="text/css">

#img1

{

position:absolute;

left:0px;

top:0px;

z-index:-1

}

</style>

<script type="text/javascript">

function changeStackOrder()

{

document.getElementById("img1").style.zIndex="1";

}

</script>

</head>

<body>

<h1>This is a Heading</h1>

<img id="img1" src="bulbon.gif" width="100" height="180">

<p>Default z-index is 0. Z-index -1 has lower priority.</p>

<input type="button" onclick="changeStackOrder()"

value="Change stack order" />

</body>

</html>

Try-It-Yourself Demos


metaKey Event Attribute

Definition and Usage

The metaKey event attribute returns a Boolean value that indicates whether or not the "meta" key was pressed when an event was triggered.

Syntax

event.metaKey

Example

The following example alerts whether or not the "meta" key was pressed when a mouse button was clicked:

<html>

<head>

<script type="text/javascript">

function isKeyPressed(event)

{

if (event.metaKey==1)

  {

  alert("The meta key was pressed!")

  }

else

  {

  alert("The meta key was NOT pressed!")

  }

}

</script>

</head>

<body onmousedown="isKeyPressed(event)">

<p>Click somewhere in the document.

An alert box will tell you if you

pressed the meta key or not.</p>

</body>

</html>

Try-It-Yourself Demos

metaKey - Check whether or not the meta key is pressed


onabort Event

Definition and Usage

The onabort event occurs when loading of an image is aborted.

Syntax

onabort="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<img>

Supported by the following JavaScript objects:

image

Example 1

In this example an alert box will be displayed if the loading of the image is aborted:

<img src="image_w3default.gif"

onabort="alert('Error: Loading of the image was aborted')">

Example 2

In this example we will call a function if the loading of the image is aborted:

<html>

<head>

<script type="text/javascript">

function abortImage()

{

alert('Error: Loading of the image was aborted')

}

</script>

</head>

<body>

<img src="image_w3default.gif"

onabort="abortImage()">

</body>

</html>


onblur Event

Definition and Usage

The onblur event occurs when an object loses focus.

Syntax

onblur="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

button, checkbox, fileUpload, layer, frame, password, radio, reset, submit, text, textarea, window

Example

In this example we will execute some JavaScript code when a user leaves an input field:

<html>

<head>

<script type="text/javascript">

function upperCase()

{

var x=document.getElementById("fname").value

document.getElementById("fname").value=x.toUpperCase()

}

</script>

</head>

<body>

Enter your name:

<input type="text" id="fname" onblur="upperCase()">

</body>

</html>

The output of the code above will be:

Enter your name: [TEditFormControlObj]

Try-It-Yourself Demos

onblur

How to use the onblur event to execute some JavaScript code when a user leaves an input field.


onchange Event

Definition and Usage

The onchange event occurs when the content of a field changes.

Syntax

onchange="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<input type="text">, <select>, <textarea>

Supported by the following JavaScript objects:

fileUpload, select, text, textarea

Example

In this example we will execute some JavaScript code when a user changes the content of an input field:

<html>

<head>

<script type="text/javascript">

function upperCase(x)

{

var y=document.getElementById(x).value

document.getElementById(x).value=y.toUpperCase()

}

</script>

</head>

<body>

Enter your name:

<input type="text" id="fname"

onchange="upperCase(this.id)">

</body>

</html>

The output of the code above will be:

Enter your name: [TEditFormControlObj]

Try-It-Yourself Demos

onchange

How to use the onchange event to execute some JavaScript code when a user changes the content of an input field.


onclick Event

Definition and Usage

The onclick event occurs when an object gets clicked.

Syntax

onclick="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

button, document, checkbox, link, radio, reset, submit

Example

In this example the text in the first input field will be copied to the second input field when a button is clicked:

<html>

<body>

Field1: <input type="text" id="field1" value="Hello World!">

<br />

Field2: <input type="text" id="field2">

<br /><br />

Click the button below to copy the content of Field1 to Field2.

<br />

<button onclick="document.getElementById('field2').value=

document.getElementById('field1').value">Copy Text</button>

</body>

</html>

The output of the code above will be:

Field1: [TEditFormControlObj]

Field2: [TEditFormControlObj]

Click the button below to copy the content of Field1 to Field2.

Copy Text

Try-It-Yourself Demos

onclick

How to use onclick.


ondblclick Event

Definition and Usage

The ondblclick event occurs when an object gets double-clicked.

Syntax

ondblclick="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

document, link

Example

In this example the second field changes according to the first field when you double-click on the button:

<html>

<body>

Field1: <input type="text" id="field1" value="Hello World!">

<br />

Field2: <input type="text" id="field2">

<br /><br />

Click the button below to copy the content of Field1 to Field2.

<br />

<button ondblclick="document.getElementById('field2').value=

document.getElementById('field1').value">Copy Text</button>

</body>

</html>

The output of the code above will be:

Field1: [TEditFormControlObj]

Field2: [TEditFormControlObj]

Double-click the button below to copy the content of Field1 to Field2.

Copy Text

Try-It-Yourself Demos

ondblclick

How to use ondblclick.


onerror Event

Definition and Usage

The onerror event is triggered when an error occurs loading a document or an image.

Syntax

onerror="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<img>, <object>, <style>

Supported by the following JavaScript objects:

window, image

Example

In this example an alert box will be displayed if an error occurs when loading an image:

<img src="image.gif"

onerror="alert('The image could not be loaded.')">

Try-It-Yourself Demos

onerror

How to use onerror.


onfocus Event

Definition and Usage

The onfocus event occurs when an object gets focus.

Syntax

onfocus="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

button, checkbox, fileUpload, layer, frame, password, radio, reset, select, submit, text, textarea, window

Example

In this example the background color of the input fields change when they get focus:

<html>

<head>

<script type="text/javascript">

function setStyle(x)

{

document.getElementById(x).style.background="yellow"

}

</script>

</head>

<body>

First name: <input type="text"

onfocus="setStyle(this.id)" id="fname">

<br />

Last name: <input type="text"

onfocus="setStyle(this.id)" id="lname">

</body>

</html>

The output of the code above will be:

First name: [TEditFormControlObj]

Last name: [TEditFormControlObj]

Try-It-Yourself Demos

onfocus

How to use onfocus.


onkeydown Event

Definition and Usage

The onkeydown event occurs when a keyboard key is pressed.

Syntax

onkeydown="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

document, image, link, textarea

Tips and Notes

Browser differences: Internet Explorer uses event.keyCode to retrieve the character that was pressed and Netscape/Firefox/Opera uses event.which.

Example

In this example the user cannot type numbers into the input field:

<html>

<body>

<script type="text/javascript">

function noNumbers(e)

{

var keynum

var keychar

var numcheck

if(window.event) // IE

{

keynum = e.keyCode

}

else if(e.which) // Netscape/Firefox/Opera

{

keynum = e.which

}

keychar = String.fromCharCode(keynum)

numcheck = /\d/

return !numcheck.test(keychar)

}

</script>

<form>

<input type="text" onkeydown="return noNumbers(event)" />

</form>

</html>

The output of the code above will be:

[TEditFormControlObj]

Try-It-Yourself Demos

onkeydown

How to use onkeydown.


onkeypress Event

Definition and Usage

The onkeydown event occurs when a keyboard key is pressed or held down.

Syntax

onkeypress="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

document, image, link, textarea

Tips and Notes

Browser differences: Internet Explorer uses event.keyCode to retrieve the character that was pressed and Netscape/Firefox/Opera uses event.which.

Example

In this example the user cannot type numbers into the input field:

<html>

<body>

<script type="text/javascript">

function noNumbers(e)

{

var keynum

var keychar

var numcheck

if(window.event) // IE

{

keynum = e.keyCode

}

else if(e.which) // Netscape/Firefox/Opera

{

keynum = e.which

}

keychar = String.fromCharCode(keynum)

numcheck = /\d/

return !numcheck.test(keychar)

}

</script>

<form>

<input type="text" onkeypress="return noNumbers(event)" />

</form>

</html>

The output of the code above will be:

[TEditFormControlObj]

Try-It-Yourself Demos

onkeypress

How to use onkeypress.


onKeyUp Event

Definition and Usage

The onkeyup event occurs when a keyboard key is released.

Syntax

onkeyup="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

document, image, link, textarea

Example

When typing letters in the input field in the following example, the letters will change to uppercase (one by one):

<html>

<head>

<script type="text/javascript">

function upperCase(x)

{

var y=document.getElementById(x).value

document.getElementById(x).value=y.toUpperCase()

}

</script>

</head>

<body>

Enter your name: <input type="text"

id="fname" onkeyup="upperCase(this.id)">

</body>

</html>

The output of the code above will be:

Enter your name: [TEditFormControlObj]

Try-It-Yourself Demos

onkeyup

How to use onkeyup.


onload Event

Definition and Usage

The onload event occurs immediately after a page or an image is loaded.

Syntax

onload="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

Supported by the following JavaScript objects:

image, layer, window

Example

In this example the text "Page is loaded" will be displayed in the status bar:

<html>

<head>

<script type="text/javascript">

function load()

{

window.status="Page is loaded"

}

</script>

</head>

<body onload="load()">

</body>

</html>

Try-It-Yourself Demos

How to use onload to display a text in the status bar when the page is finished loading.


onmousedown Event

Definition and Usage

The onmousedown event occurs when a mouse button is clicked.

Syntax

onmousedown="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

button, document, link

Example 1

In this example an alert box is displayed when clicking on the picture:

<img src="image_w3default.gif"

onmousedown="alert('You clicked the picture!')">

The output of the code above will be (click on the picture):

Example 2

In this example an alert box will alert the tag name of the element you clicked on:

<html>

<head>

<script type="text/javascript">

function whichElement(e)

{

var targ

if (!e) var e = window.event

if (e.target) targ = e.target

else if (e.srcElement) targ = e.srcElement

if (targ.nodeType == 3) // defeat Safari bug

targ = targ.parentNode

var tname

tname=targ.tagName

alert("You clicked on a " + tname + " element.")

}

</script>

</head>

<body onmousedown="whichElement(event)">

<h2>This is a header</h2>

<p>This is a paragraph</p>

<img border="0" src="ball16.gif" alt="Ball">

</body>

</html>

Try-It-Yourself Demos

onmousedown

How to use onmousedown to display an alert box when an image is clicked.

onmousedown 2

How to use onmousedown to alert the tag name of the element you clicked on.


onmousemove Event

Definition and Usage

The onmousemove event occurs when the mouse pointer is moved.

Syntax

onmousemove="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

onmousemove is, by default, not an event of any object, because mouse movement happens very frequently.

Tips and Notes

Note: Each time a user moves the mouse one pixel, a mousemove event occurs. It takes system resources to process all mousemove events. Use this event carefully!

Example

In the following example we will display an alert box when the user moves the mouse pointer over the image:

<img src="image_w3default.gif" alt="W3Schools"

onmousemove="alert('Visit W3Schools!')" />

The output of the code above will be:

Try-It-Yourself Demos

How to use onmousemove.


onmouseout Event

Definition and Usage

The onmouseout event occurs when the mouse pointer moves away from a specified object.

Syntax

onmouseout="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

layer, link

Example 1

In the following example we will display an alert box when the user moves the mouse pointer away from the image:

<img src="image_w3default.gif" alt="W3Schools"

onmouseout="alert('Visit W3Schools!')" />

The output of the code above will be:

Example 2

In the following example we will add an image that should act as a link button on a web page. We will then add an onMouseOver event and an onMouseOut event that will run two JavaScript functions that will change between two images:

<html>

<head>

<script type="text/javascript">

function mouseOver()

{

document.b1.src ="b_blue.gif"

}

function mouseOut()

{

document.b1.src ="b_pink.gif"

}

</script>

</head>

<body>

<a href="http://www.w3schools.com" target="_blank"

onmouseover="mouseOver()"

onmouseout="mouseOut()">

<img border="0" alt="Visit W3Schools!"

src="b_pink.gif" name="b1" /></a>

</body>

</html>

The output of the code above will be:

Try-It-Yourself Demos

onmouseout

How to use onmouseout.


onmouseover Event

Definition and Usage

The onmouseover event occurs when the mouse pointer moves over a specified object.

Syntax

onmouseover="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

layer, link

Example 1

In the following example we will display an alert box when the user moves the mouse pointer over the image:

<img src="image_w3default.gif" alt="W3Schools"

onmouseover="alert('Visit W3Schools!')" />

The output of the code above will be:

Example 2

In the following example we will add an image that should act as a link button on a web page. We will then add an onMouseOver event and an onMouseOut event that will run two JavaScript functions that will change between two images:

<html>

<head>

<script type="text/javascript">

function mouseOver()

{

document.b1.src ="b_blue.gif"

}

function mouseOut()

{

document.b1.src ="b_pink.gif"

}

</script>

</head>

<body>

<a href="http://www.w3schools.com" target="_blank"

onmouseover="mouseOver()"

onmouseout="mouseOut()">

<img border="0" alt="Visit W3Schools!"

src="b_pink.gif" name="b1" /></a>

</body>

</html>

The output of the code above will be:

Try-It-Yourself Demos

onmouseover

How to use onmouseover.


onmouseup Event

Definition and Usage

The onmouseup event occurs when a mouse button is released.

Syntax

onmouseup="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

button, document, link

Example 1

In this example an alert box is displayed when the mouse button is released after clicking the picture:

<img src="image_w3default.gif"

onmouseup="alert('You clicked the picture!')">

The output of the code above will be (click on the picture):

Example 2

In this example an alert box will alert the tag name of the element you clicked on:

<html>

<head>

<script type="text/javascript">

function whichElement(e)

{

var targ

if (!e) var e = window.event

if (e.target) targ = e.target

else if (e.srcElement) targ = e.srcElement

if (targ.nodeType == 3) // defeat Safari bug

targ = targ.parentNode

var tname

tname=targ.tagName

alert("You clicked on a " + tname + " element.")

}

</script>

</head>

<body onmouseup="whichElement(event)">

<h2>This is a header</h2>

<p>This is a paragraph</p>

<img border="0" src="ball16.gif" alt="Ball">

</body>

</html>

Try-It-Yourself Demos

onmouseup

How to use onmouseup to display an alert box when an image is clicked.

onmouseup 2

How to use onmouseup to alert the tag name of the element you clicked on.


onreset Event

Definition and Usage

The onreset event occurs when the reset button in a form is clicked.

Syntax

onreset="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<form>

Supported by the following JavaScript objects:

form

Example

In this example the form changes back to the default values and displays an alert box when the reset button is clicked:

<form onreset="alert('The form will be reset')">

Firstname: <input type="text" name="fname" value="John" />

<br />

Lastname: <input type="text" name="lname" />

<br /><br />

<input type="reset" value="Reset">

</form>

The output of the code above will be:

Firstname: [TEditFormControlObj]

Lastname: [TEditFormControlObj]

Try-It-Yourself Demos

onreset

How to use onreset to display an alert when a reset event occurs.


onresize Event

Definition and Usage

The onresize event occurs when a window or frame is resized.

Syntax

onresize="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <address>, <b>, <big>, <blockquote>, <body>, <button>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <textarea>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

window

Example

In this example an alert box will be displayed when a user tries to resize the window:

<body onresize="alert('You have changed the size of the window')">

</body>

Try-It-Yourself Demos

How to use onresize to display a alert box when a page is resized.


onselect event

Definition and Usage

The onselect event occurs when text is selected in a text or textarea field.

Syntax

onselect="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<input type="text">, <textarea>

Supported by the following JavaScript objects:

text, textarea

Example

In this example an alert box will be displayed if some of the text is selected:

<form>

Select text: <input type="text" value="Hello world!"

onselect="alert('You have selected some of the text.')">

<br /><br />

Select text: <textarea cols="20" rows="5"

onselect="alert('You have selected some of the text.')">

Hello world!</textarea>

</form>

The output of the code above will be:

Select text: [TEditFormControlObj]

Select text: [TTextAreaFormControlObj]

Try-It-Yourself Demos

onselect

How to use onselect.


onsubmit event

Definition and Usage

The onsubmit event occurs when the submit button in a form is clicked.

Syntax

onsubmit="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<form>

Supported by the following JavaScript objects:

form

Example

In this example an alert box displays when a submit box is used:

<form name="testform" action="jsref_onsubmit.asp"

onsubmit="alert('Hello ' + testform.fname.value +'!')">

What is your name?<br />

<input type="text" name="fname" />

<input type="submit" value="Submit" />

</form>

The output of the code above will be:

What is your name?

[TEditFormControlObj]

Try-It-Yourself Demos

onsubmit

How to use onsubmit.


onunload Event

Definition and Usage

The onunload event occurs when a user exits a page.

Syntax

onunload="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<body>, <frameset>

Supported by the following JavaScript objects:

window

Example

In this example an alert box will be displayed when the page is closed:

<body onunload="alert('The onunload event was triggered')">

</body>

Try-It-Yourself Demos

onunload

How to use onunload.


relatedTarget Event Attribute

Definition and Usage

The relatedTarget event attribute returns the element related to the element that triggered the event.

This attribute can be used with the mouseover event to indicate the element the cursor just exited, or with the mouseout event to indicate the element the cursor just entered.

Syntax

event.relatedTarget

Example

The following example returns the element the cursor just exited:

<html>

<head>

<script type="text/javascript">

function getRelElement(event)

{

var txt="The cursor just exited the ";

txt=txt + event.relatedTarget.tagName + " element.";

alert(txt);

}

</script>

</head>

<body>

<p onmouseover="getRelElement(event)">

Mouse over this paragraph.</p>

</body>

</html>

Try-It-Yourself Demos

relatedTarget - Return the element the cursor just exited


screenX Event Attribute

Definition and Usage

The screenX event attribute returns the horizontal coordinate (according to the users computer screen) of the mouse pointer when an event was triggered.

Syntax

event.screenX

Example

The following example alerts the coordinates of the mouse pointer when the mouse button was clicked:

<html>

<head>

<script type="text/javascript">

function show_coords(event)

{

x=event.screenX

y=event.screenY

alert("X coords: " + x + ", Y coords: " + y)

}

</script>

</head>

<body onmousedown="show_coords(event)">

<p>Click in the document. An alert box will alert

the x and y coordinates of the cursor.</p>

</body>

</html>

Try-It-Yourself Demos


screenY Event Attribute

Definition and Usage

The screenY event attribute returns the vertical coordinate (according to the users computer screen) of the mouse pointer when an event was triggered.

Syntax

event.screenY

Example

The following example alerts the coordinates of the mouse pointer when the mouse button was clicked:

<html>

<head>

<script type="text/javascript">

function show_coords(event)

{

x=event.screenX

y=event.screenY

alert("X coords: " + x + ", Y coords: " + y)

}

</script>

</head>

<body onmousedown="show_coords(event)">

<p>Click in the document. An alert box will alert

the x and y coordinates of the cursor.</p>

</body>

</html>

Try-It-Yourself Demos


shiftKey Event Attribute

Definition and Usage

The shiftKey event attribute returns a Boolean value that indicates whether or not the "SHIFT" key was pressed when an event was triggered.

Syntax

event.shiftKey=true|false|1|0

Example

The following example alerts whether or not the "SHIFT" key was pressed when a mouse button is clicked:

<html>

<head>

<script type="text/javascript">

function isKeyPressed(event)

{

if (event.shiftKey==1)

  {

  alert("The shift key was pressed!")

  }

else

  {

  alert("The shift key was NOT pressed!")

  }

}

</script>

</head>

<body onmousedown="isKeyPressed(event)">

<p>Click somewhere in the document.

An alert box will tell you if you

pressed the shift key or not.</p>

</body>

</html>

Try-It-Yourself Demos

shiftKey - Check whether or not the SHIFT key was pressed


target Event Attribute

Definition and Usage

The target event attribute returns the element that triggered the event.

Syntax

event.target

Example

The following example gets the element that triggered the event:

<html>

<head>

<script type="text/javascript">

function getEventTrigger(event)

{

x=event.target;

alert("The id of the triggered element: "

+ x.id);

}

</script>

</head>

<body >

<p id="p1" onmousedown="getEventTrigger(event)">

Click on this paragraph. An alert box will

show which element triggered the event.</p>

</body>

</html>

Try-It-Yourself Demos


timeStamp Event Attribute

Definition and Usage

The timeStamp event attribute returns the time stamp, in milliseconds, from the epoch.

The epoch is a time reference point. In this case it is when the clients computer started up.

Not all systems provide this information, therefore, timeStamp may be not available for all systems/events.

Syntax

event.timeStamp

Example

The following example gets the timestamp from the system start:

<html>

<head>

<script type="text/javascript">

function showTimestamp(event)

{

var minutes = 1000*60

x=event.timeStamp;

alert(x/minutes)

}

</script>

</head>

<body onmousedown="showTimestamp(event)">

<p>Click in the document. An alert

box will alert the timestamp.</p>

</body>

</html>

Try-It-Yourself Demos


type Event Attribute

Definition and Usage

The type event attribute returns the type of the triggered event.

Syntax

event.type

Example

The following example returns the type of event that was triggered:

<html>

<head>

<script type="text/javascript">

function getEventType(event)

{

alert(event.type);

}

</script>

</head>

<body onmousedown="getEventType(event)">

<p>Click somewhere in the document.

An alert box will tell what event

type you triggered.</p>

</body>

</html>

Try-It-Yourself Demos


JavaScript Introduction

Introduction to JavaScript

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, such as Internet Explorer, Mozilla, Firefox, Netscape, and Opera.

What You Should Already Know

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

· HTML / XHTML

If you want to study these subjects first, find the tutorials on our Home .

What is JavaScript?

· JavaScript was designed to add interactivity to HTML pages
· JavaScript is a scripting language (a scripting language is a lightweight programming language)
· A JavaScript consists of lines of executable computer code
· A JavaScript is usually embedded directly into HTML pages
· JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
· Everyone can use JavaScript without purchasing a license

Are Java and JavaScript the Same?

NO!

Java and JavaScript are two completely different languages in both concept and design!

Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++.

What can a JavaScript Do?

· 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
· JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser
· JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer


anchors.html

Right-click in this window and select "View source" to see the HTML source!

Anchor 0

· BMW
· Volvo
· Saab

Anchor 1

· Red
· Green
· Blue

Anchor 2

· Jazz
· Rock
· Pop

Anchor 3

· Norway
· Italy
· Spain


compman_description.html

An image of a man typing on a computer.

Used as an example image on www.w3schools.com.


JavaScript Tutorial

JavaScript Tutorial

javascript5

JavaScript is the scripting language of the Web!

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.

JavaScript is easy to learn! You will enjoy it!

Start learning JavaScript now!

JavaScript Examples

Learn by 100 examples! With our editor, you can edit the source code, and click on a test button to view the result.

· JavaScript Examples
·
·

JavaScript Quiz Test

Test your JavaScript skills at W3Schools!

Start JavaScript Quiz!

JavaScript References

At W3Schools you will find complete references of all JavaScript objects and the HTML DOM objects.

· Complete reference of all JavaScript objects. With examples!
· Complete reference of all HTML DOM objects. With examples!


JavaScript Tutorial

JavaScript Tutorial

javascript5

JavaScript is the scripting language of the Web!

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.

JavaScript is easy to learn! You will enjoy it!

Start learning JavaScript now!

JavaScript Examples

Learn by 100 examples! With our editor, you can edit the source code, and click on a test button to view the result.

· JavaScript Examples
· JavaScript Object Examples
· JavaScript DOM Examples

JavaScript Quiz Test

Test your JavaScript skills at W3Schools!

Start JavaScript Quiz!

JavaScript References

At W3Schools you will find complete references of all JavaScript objects and the HTML DOM objects.

· Complete reference of all JavaScript objects. With examples!
· Complete reference of all HTML DOM objects. With examples!


frame_a.html

Frame A


frame_b.html

Frame B


frame_c.html

Frame C


frame_cdoc.html


frame_cols.html


frame_d.html

Frame D


frame_description.html

This page contains a description of the frame content... :-)


frame_frameset_id.html


frame_noresize.html

Try to resize the frames.


frame_rows.html


frame_scroll.html


frame_src.html


JavaScript Animation

With JavaScript we can create animated images.

Examples

JavaScript Animation

It is possible to use JavaScript to create animated images.

The trick is to let a JavaScript change between different images on different events.

In the following example we will add an image that should act as a link button on a web page. We will then add an onMouseOver event and an onMouseOut event that will run two JavaScript functions that will change between the images.

The HTML Code

The HTML code looks like this:

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

<img border="0" alt="Visit W3Schools!"

src="b_pink.gif" name="b1"

onmouseOver="mouseOver()"

onmouseOut="mouseOut()" />

</a>

Note that we have given the image a name to make it possible for JavaScript to address it later.

The onMouseOver event tells the browser that once a mouse is rolled over the image, the browser should execute a function that will replace the image with another image.

The onMouseOut event tells the browser that once a mouse is rolled away from the image, another JavaScript function should be executed. This function will insert the original image again.

The JavaScript Code

The changing between the images is done with the following JavaScript:

<script type="text/javascript">

function mouseOver()

{

document.b1.src ="b_blue.gif"

}

function mouseOut()

{

document.b1.src ="b_pink.gif"

}

</script>

The function mouseOver() causes the image to shift to "b_blue.gif".

The function mouseOut() causes the image to shift to "b_pink.gif".

The Entire Code

<html>

<head>

<script type="text/javascript">

function mouseOver()

{

document.b1.src ="b_blue.gif"

}

function mouseOut()

{

document.b1.src ="b_pink.gif"

}

</script>

</head>

<body>

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

<img border="0" alt="Visit W3Schools!"

src="b_pink.gif" name="b1"

onmouseOver="mouseOver()"

onmouseOut="mouseOut()" />

</a>

</body>

</html>


JavaScript Break and Continue Statements

JavaScript Break and Continue

There are two special statements that can be used inside loops: break and continue.

Examples

Break statement

Use the break statement to break the loop.

Continue statement

Use the continue statement to break the current loop and continue with the next value.

JavaScript break and continue Statements

There are two special statements that can be used inside loops: break and continue.

Break

The break command will break the loop and continue executing the code that follows after the loop (if any).

Example

<html>

<body>

<script type="text/javascript">

var i=0

for (i=0;i<=10;i++)

{

if (i==3){break}

document.write("The number is " + i)

document.write("<br />")

}

</script>

</body>

</html>

Result

The number is 0

The number is 1

The number is 2

Continue

The continue command will break the current loop and continue with the next value.

Example

<html>

<body>

<script type="text/javascript">

var i=0

for (i=0;i<=10;i++)

{

if (i==3){continue}

document.write("The number is " + i)

document.write("<br />")

}

</script>

</body>

</html>

Result

The number is 0

The number is 1

The number is 2

The number is 4

The number is 5

The number is 6

The number is 7

The number is 8

The number is 9

The number is 10


JavaScript Browser Detection

The JavaScript Navigator object contains information about the visitor's browser.

Examples

More details about the visitor's browser

All details about the visitor's browser

Alert user, depending on browser

Browser Detection

Almost everything in this tutorial works on all JavaScript-enabled browsers. However, there are some things that just don't work on certain browsers - specially on older browsers.

So, sometimes it can be very useful to detect the visitor's browser type and version, and then serve up the appropriate information.

The best way to do this is to make your web pages smart enough to look one way to some browsers and another way to other browsers.

JavaScript includes an object called the Navigator object, that can be used for this purpose.

The Navigator object contains information about the visitor's browser name, browser version, and more.

The Navigator Object

The JavaScript Navigator object contains all information about the visitor's browser. We are going to look at two properties of the Navigator object:

· appName - holds the name of the browser
· appVersion - holds, among other things, the version of the browser

Example

<html>

<body>

<script type="text/javascript">

var browser=navigator.appName

var b_version=navigator.appVersion

var version=parseFloat(b_version)

document.write("Browser name: "+ browser)

document.write("<br />")

document.write("Browser version: "+ version)

</script>

</body>

</html>

The variable browser in the example above holds the name of the browser, i.e. "Netscape" or "Microsoft Internet Explorer".

The appVersion property in the example above returns a string that contains much more information than just the version number, but for now we are only interested in the version number. To pull the version number out of the string we are using a function called parseFloat(), which pulls the first thing that looks like a decimal number out of a string and returns it.

IMPORTANT! The version number is WRONG in IE 5.0 or later! Microsoft starts the appVersion string with the number 4.0. in IE 5.0 and IE 6.0!!! Why did they do that??? However, JavaScript is the same in IE6, IE5 and IE4, so for most scripts it is ok.

Example

The script below displays a different alert, depending on the visitor's browser:

<html>

<head>

<script type="text/javascript">

function detectBrowser()

{

var browser=navigator.appName

var b_version=navigator.appVersion

var version=parseFloat(b_version)

if ((browser=="Netscape"||browser=="Microsoft Internet Explorer")

&& (version>=4))

{alert("Your browser is good enough!")}

else

{alert("It's time to upgrade your browser!")}

}

</script>

</head>

<body onload="detectBrowser()">

</body>

</html>


DELETED

JavaScript Conditional Statements

Conditional statements in JavaScript are used to perform different actions based on different conditions.

Examples

How to write an If statement. Use this statement if you want to execute a set of code if a specified condition is true.

If...else statement

How to write an If...Else statement. Use this statement if you want to execute one set of code if the condition is true and another set of code if the condition is false.

How to write an if..else if...else statement.

Random link

This example demonstrates a link, when you click on the link it will take you to W3Schools.com OR to RefsnesData.no. There is a 50% chance for each of them.

How to write a switch statement. Use this statement if you want to select one of many blocks of code to execute.

Conditional Statements

Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this.

In JavaScript we have three conditional statements:

· if statement - use this statement if you want to execute a set of code when a condition is true
· if...else statement - use this statement if you want to select one of two sets of lines to execute
· if...else if....else statement - use this statement if you want to select one of many sets of lines to execute
· switch statement - use this statement if you want to select one of many sets of lines to execute

If and If...else Statement

You should use the if statement if you want to execute some code if a condition is true.

Syntax

if (condition)

{

code to be executed if condition is true

}

Example

<script type="text/javascript">

//If the time on your browser is less than 10,

//you will get a "Good morning" greeting.

var d=new Date()

var time=d.getHours()

if (time<10)

{

document.write("<b>Good morning</b>")

}

</script>

Notice that there is no ..else.. in this syntax. You just tell the code to execute some code if the condition is true.

If you want to execute some code if a condition is true and another code if a condition is false, use the if....else statement.

Syntax

if (condition)

{

code to be executed if condition is true

}

else

{

code to be executed if condition is false

}

Example

<script type="text/javascript">

//If the time on your browser is less than 10,

//you will get a "Good morning" greeting.

//Otherwise you will get a "Good day" greeting.

var d = new Date()

var time = d.getHours()

if (time < 10)

{

document.write("Good morning!")

}

else

{

document.write("Good day!")

}

</script>

If...else if...else Statement

You should use the if....else if...else statement if you want to select one of many sets of lines to execute.

Syntax

if (condition1)

{

code to be executed if condition1 is true

}

else if (condition2)

{

code to be executed if condition2 is true

}

else

{

code to be executed if condition1 and

condition2 are false

}

Example

<script type="text/javascript">

var d = new Date()

var time = d.getHours()

if (time<10)

{

document.write("<b>Good morning</b>")

}

else if (time>10 & time<16)

{

document.write("<b>Good day</b>")

}

else

{

document.write("<b>Hello World!</b>")

}

</script>

Switch Statement

You should use the Switch statement if you want to select one of many blocks of code to be executed.

Syntax

switch (expression)

{

case label1:

code to be executed if expression = label1

break

case label2:

code to be executed if expression = label2

break

default:

code to be executed

if expression is different

from both label1 and label2

}

This is how it works: First we have a single expression (most often a variable), that is evaluated once. The value of the expression is then compared with the values for each case in the structure. If there is a match, the block of code associated with that case is executed. Use break to prevent the code from running into the next case automatically.

Example

<script type="text/javascript">

//You will receive a different greeting based

//on what day it is. Note that Sunday=0,

//Monday=1, Tuesday=2, etc.

var d=new Date()

theDay=d.getDay()

switch (theDay)

{

case 5:

document.write("Finally Friday")

break

case 6:

document.write("Super Saturday")

break

case 0:

document.write("Sleepy Sunday")

break

default:

document.write("I'm looking forward to this weekend!")

}

</script>

Conditional Operator

JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.

Syntax

variablename=(condition)?value1:value2

Example

greeting=(visitor=="PRES")?"Dear President ":"Dear "

If the variable visitor is equal to PRES, then put the string "Dear President " in the variable named greeting. If the variable visitor is not equal to PRES, then put the string "Dear " into the variable named greeting.


JavaScript Cookies

A cookie is often used to identify a user.

Examples

Create a welcome cookie

What is a Cookie?

A cookie is a variable that is stored on the visitor's computer. Each time the same computer requests a page with a browser, it will send the cookie too. With JavaScript, you can both create and retrieve cookie values.

Examples of cookies:

· Name cookie - The first time a visitor arrives to your web page, he or she must fill in her/his name. The name is then stored in a cookie. Next time the visitor arrives at your page, he or she could get a welcome message like "Welcome John Doe!" The name is retrieved from the stored cookie
· Password cookie - The first time a visitor arrives to your web page, he or she must fill in a password. The password is then stored in a cookie. Next time the visitor arrives at your page, the password is retrieved from the cookie
· Date cookie - The first time a visitor arrives to your web page, the current date is stored in a cookie. Next time the visitor arrives at your page, he or she could get a message like "Your last visit was on Tuesday August 11, 2005!" The date is retrieved from the stored cookie

Create and Store a Cookie

In this example we will create a cookie that stores the name of a visitor. The first time a visitor arrives to the web page, he or she will be asked to fill in her/his name. The name is then stored in a cookie. The next time the visitor arrives at the same page, he or she will get welcome message.

First, we create a function that stores the name of the visitor in a cookie variable:

function setCookie(c_name,value,expiredays)

{

var exdate=new Date()

exdate.setDate(exdate.getDate()+expiredays)

document.cookie=c_name+ "=" +escape(value)+

((expiredays==null) ? "" : ";expires="+exdate.toGMTString())

}

The parameters of the function above hold the name of the cookie, the value of the cookie, and the number of days until the cookie expires.

In the function above we first convert the number of days to a valid date, then we add the number of days until the cookie should expire. After that we store the cookie name, cookie value and the expiration date in the document.cookie object.

Then, we create another function that checks if the cookie has been set:

function getCookie(c_name)

{

if (document.cookie.length>0)

{

c_start=document.cookie.indexOf(c_name + "=")

if (c_start!=-1)

  {

  c_start=c_start + c_name.length+1

  c_end=document.cookie.indexOf(";",c_start)

  if (c_end==-1) c_end=document.cookie.length

  return unescape(document.cookie.substring(c_start,c_end))

  }

}

return ""

}

The function above first checks if a cookie is stored at all in the document.cookie object. If the document.cookie object holds some cookies, then check to see if our specific cookie is stored. If our cookie is found, then return the value, if not - return an empty string.

Last, we create the function that displays a welcome message if the cookie is set, and if the cookie is not set it will display a prompt box, asking for the name of the user:

function checkCookie()

{

username=getCookie('username')

if (username!=null && username!="")

{alert('Welcome again '+username+'!')}

else

{

username=prompt('Please enter your name:',"")

if (username!=null && username!="")

  {

  setCookie('username',username,365)

  }

}

}

All together now:

<html>

<head>

<script type="text/javascript">

function getCookie(c_name)

{

if (document.cookie.length>0)

{

c_start=document.cookie.indexOf(c_name + "=")

if (c_start!=-1)

  {

  c_start=c_start + c_name.length+1

  c_end=document.cookie.indexOf(";",c_start)

  if (c_end==-1) c_end=document.cookie.length

  return unescape(document.cookie.substring(c_start,c_end))

  }

}

return ""

}

function setCookie(c_name,value,expiredays)

{

var exdate=new Date()

exdate.setDate(exdate.getDate()+expiredays)

document.cookie=c_name+ "=" +escape(value)+

((expiredays==null) ? "" : ";expires="+exdate.toGMTString())

}

function checkCookie()

{

username=getCookie('username')

if (username!=null && username!="")

{alert('Welcome again '+username+'!')}

else

{

username=prompt('Please enter your name:',"")

if (username!=null && username!="")

  {

  setCookie('username',username,365)

  }

}

}

</script>

</head>

<body onLoad="checkCookie()">

</body>

</html>

The example above runs the checkCookie() function when the page loads.


JavaScript Events

Events are actions that can be detected by JavaScript.

Events

By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaScript.

Every element on a web page has certain events which can trigger JavaScript functions. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.

Examples of events:

· A mouse click
· A web page or an image loading
· Mousing over a hot spot on the web page
· Selecting an input box in an HTML form
· Submitting an HTML form
· A keystroke

Note: Events are normally used in combination with functions, and the function will not be executed before the event occurs!

For a complete reference of the events recognized by JavaScript, go to our complete Event reference.

onload and onUnload

The onload and onUnload events are triggered when the user enters or leaves the page.

The onload event is often used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information.

Both the onload and onUnload events are also often used to deal with cookies that should be set when a user enters or leaves a page. For example, you could have a popup asking for the user's name upon his first arrival to your page. The name is then stored in a cookie. Next time the visitor arrives at your page, you could have another popup saying something like: "Welcome John Doe!".

onFocus, onBlur and onChange

The onFocus, onBlur and onChange events are often used in combination with validation of form fields.

Below is an example of how to use the onChange event. The checkEmail() function will be called whenever the user changes the content of the field:

<input type="text" size="30"

id="email" onchange="checkEmail()">;

onSubmit

The onSubmit event is used to validate ALL form fields before submitting it.

Below is an example of how to use the onSubmit event. The checkForm() function will be called when the user clicks the submit button in the form. If the field values are not accepted, the submit should be cancelled. The function checkForm() returns either true or false. If it returns true the form will be submitted, otherwise the submit will be cancelled:

<form method="post" action="xxx.htm"

onsubmit="return checkForm()">

onMouseOver and onMouseOut

onMouseOver and onMouseOut are often used to create "animated" buttons.

Below is an example of an onMouseOver event. An alert box appears when an onMouseOver event is detected:

<a href="http://www.w3schools.com"

onmouseover="alert('An onMouseOver event');return false">

<img src="w3schools.gif" width="100" height="30">

</a>


JavaScript Examples

Basic JavaScript Examples

Write text with JavaScript

Format text with HTML tags

JavaScript in the head section

JavaScript in the body section

An external JavaScript

If statement

If...else statement

Random link

Switch statement

Alert box

Prompt box

Call a function

Function with an argument 2

Function that returns a value

Function with arguments, that returns a value

For loop

Looping through HTML headers

While loop

Do While loop

Break a loop

Use a for...in statement to loop through the elements of an array

The try...catch statement with a confirm box

Advanced JavaScript Examples

All details about the visitor's browser

Alert user, depending on browser

Create a welcome cookie

Button animation

Image map with added JavaScript

Simple timing

Another simple timing

Timing event in an infinite loop

Timing event in an infinite loop - with a Stop button

A clock created with a timing event

Create a direct instance of an object

Create a template for an object


JavaScript Examples

JavaScript Objects Examples

Examples of using the built-in JavaScript objects.

String Object

Return the length of a string

Style strings

Return the position of the first occurrence of a text in a string - indexOf()

Search for a text in a string and return the text if found - match()

More String object examples in our .

Date Object

Use getTime() to calculate the years since 1970

Use toUTCString() to convert today's date (according to UTC) to a string

Use getDay() and an array to write a weekday, and not just a number

Display a clock

More Date object examples in our .

Array Object

Use a for...in statement to loop through the elements of an array

Join two arrays - concat()

Put array elements into a string - join()

Literal array - sort()

Numeric array - sort()

More Array object examples in our .

Boolean Object

Check Boolean value

More Boolean object examples in our JavaScript reference.

Math Object

Use round() to round a number

Use random() to return a random number between 0 and 1

Use max() to return the number with the highest value of two specified numbers

Convert Celsius to Fahrenheit

More Math object examples in our .


JavaScript Examples

JavaScript DOM Examples

Examples of using JavaScript to access and manipulate the HTML DOM objects.

Anchor Object

Change text, URL, and target attribute of a link

Using focus() and blur()

Add an accessKey to a link

Document Object

Write text to the output

Write text with formatting to the output

Return the title of a document

Return the URL of a document

Return the referrer of a document

Return the domain name of the document's server

Use getElementById()

Use getElementsByName()

Open a new document, specify MIME type and add some text

Return the number of anchors in a document

Return the innerHTML of the first anchor in a document

Count the number of forms in a document

Access an item in a collection

Count the number of images in a document

Event Object

Which mouse button was clicked?

What are the coordinates of the cursor?

Was the shift key pressed?

Which element was clicked?

Which eventype occured?

Form and Form Input Objects

View and change the action URL of a form

View the method that is to be used when sending form data

Alert id, type, and value of a Button object + disable button

Checkboxes in a form

Checkbox - If the user clicks in a checkbox, the content of the text fields are converted to uppercase.

Radio buttons

Submit a form

Form validation

Set focus to an input field when the page loads

Select the content of an input field

Dropdown list in a form

Another dropdown list

A dropdown menu

Jump to the next field when the current field's maxlength has been reached

Add accessKeys to form fields

Frame, Frameset, and IFrame Objects

Resizable and not resizable frames

Frames with and without scrollbars

Break out of a frame

Update two iframes

Image Object

Change the height and width of an image

Location Object

Send the client to a new location / URL

Break out of a frame

Anchors array - This example opens two windows. The first window contains four buttons and the second window defines four anchors from 0 to 3. When a button is clicked in the first window, the onclick event handler goes to the specified anchor in the second window.

Navigator Object

Detect the visitor's browser and browser version

More details about the visitor's browser

Alert user, depending on browser

Option and Select Objects

Disable and enable a dropdown list

Get the number of options in the dropdown list

Turn the dropdown list into a multiline list

Select multiple options in a dropdown list

Alert the selected option in a dropdown list

Alert the index of the selected option in a dropdown list

Change the text of the selected option

Remove options from a dropdown list

Screen Object

Detect details about the client's screen

Table, TableHeader, TableRow, TableData Objects

Change the width of a table border

Change the cellPadding and cellSpacing of a table

Specify rules for a table

InnerHTML of a row

InnerHTML of a cell

Create a caption for a table

Delete rows in a table

Add rows to a table

Add cells to a table row

Align the cell content in a table row

Vertical align the cell content in a table row

Align the cell content in a single cell

Vertical align the cell content in a single cell

Change the content of a table cell

Change the colspan of a table row

Window Object

Display an alert box

Alert box with line-breaks

Display a prompt box

Open multiple windows with one click

Reload a page

Print a page

Break out of a frame

Scroll the window

Scroll the window to a specified position

Simple timing

Another simple timing

Timing event in an infinite loop - with a Stop button

A clock created with a timing event

Create a pop-up


JavaScript Form Validation

JavaScript can be used to validate input data in HTML forms before sending off the content to a server.

JavaScript Form Validation

JavaScript can be used to validate input data in HTML forms before sending off the content to a server.

Form data that typically are checked by a JavaScript could be:

· has the user left required fields empty?
· has the user entered a valid e-mail address?
· has the user entered a valid date?
· has the user entered text in a numeric field?

Required Fields

The function below checks if a required field has been left empty. If the required field is blank, an alert box alerts a message and the function returns false. If a value is entered, the function returns true (means that data is OK):

function validate_required(field,alerttxt)

{

with (field)

{

if (value==null||value=="")

{alert(alerttxt);return false}

else {return true}

}

}

The entire script, with the HTML form could look something like this:

<html>

<head>

<script type="text/javascript">

function validate_required(field,alerttxt)

{

with (field)

{

if (value==null||value=="")

{alert(alerttxt);return false}

else {return true}

}

}

function validate_form(thisform)

{

with (thisform)

{

if (validate_required(email,"Email must be filled out!")==false)

{email.focus();return false}

}

}

</script>

</head>

<body>

<form action="submitpage.htm"

onsubmit="return validate_form(this)"

method="post">

Email: <input type="text" name="email" size="30">

<input type="submit" value="Submit">

</form>

</body>

</html>

E-mail Validation

The function below checks if the content has the general syntax of an email.

This means that the input data must contain at least an @ sign and a dot (.). Also, the @ must not be the first character of the email address, and the last dot must at least be one character after the @ sign:

function validate_email(field,alerttxt)

{

with (field)

{

apos=value.indexOf("@")

dotpos=value.lastIndexOf(".")

if (apos<1||dotpos-apos<2)

{alert(alerttxt);return false}

else {return true}

}

}

The entire script, with the HTML form could look something like this:

<html>

<head>

<script type="text/javascript">

function validate_email(field,alerttxt)

{

with (field)

{

apos=value.indexOf("@")

dotpos=value.lastIndexOf(".")

if (apos<1||dotpos-apos<2)

{alert(alerttxt);return false}

else {return true}

}

}

function validate_form(thisform)

{

with (thisform)

{

if (validate_email(email,"Not a valid e-mail address!")==false)

{email.focus();return false}

}

}

</script>

</head>

<body>

<form action="submitpage.htm"

onsubmit="return validate_form(this);"

method="post">

Email: <input type="text" name="email" size="30">

<input type="submit" value="Submit">

</form>

</body>

</html>


JavaScript Functions

A function is a reusable code-block that will be executed by an event, or when the function is called.

Examples

Function

How to call a function.

Function with arguments

How to pass a variable to a function, and use the variable in the function.

Function with arguments 2

How to pass variables to a function, and use these variables in the function.

Function that returns a value

How to let the function return a value.

A function with arguments, that returns a value

How to let the function find the product of 2 arguments and return the result.

JavaScript Functions

To keep the browser from executing a script as soon as the page is loaded, you can write your script as a function.

A function contains some code that will be executed only by an event or by a call to that function.

You may call a function from anywhere within the page (or even from other pages if the function is embedded in an external .js file).

Functions are defined at the beginning of a page, in the <head> section.

Example

<html>

<head>

<script type="text/javascript">

function displaymessage()

{

alert("Hello World!")

}

</script>

</head>

<body>

<form>

<input type="button" value="Click me!"

onclick="displaymessage()" >

</form>

</body>

</html>

If the line: alert("Hello world!!"), in the example above had not been written within a function, it would have been executed as soon as the line was loaded. Now, the script is not executed before the user hits the button. We have added an onClick event to the button that will execute the function displaymessage() when the button is clicked.

You will learn more about JavaScript events in the JS Events chapter.

How to Define a Function

The syntax for creating a function is:

function functionname(var1,var2,...,varX)

{

some code

}

var1, var2, etc are variables or values passed into the function. The { and the } defines the start and end of the function.

Note: A function with no parameters must include the parentheses () after the function name:

function functionname()

{

some code

}

Note: Do not forget about the importance of capitals in JavaScript! The word function must be written in lowercase letters, otherwise a JavaScript error occurs! Also note that you must call a function with the exact same capitals as in the function name.

The return Statement

The return statement is used to specify the value that is returned from the function.

So, functions that are going to return a value must use the return statement.

Example

The function below should return the product of two numbers (a and b):

function prod(a,b)

{

x=a*b

return x

}

When you call the function above, you must pass along two parameters:

product=prod(2,3)

The returned value from the prod() function is 6, and it will be stored in the variable called product.


JavaScript Guidelines

Some other important things to know when scripting with JavaScript.

JavaScript is Case Sensitive

A function named "myfunction" is not the same as "myFunction" and a variable named "myVar" is not the same as "myvar".

JavaScript is case sensitive - therefore watch your capitalization closely when you create or call variables, objects and functions.

White Space

JavaScript ignores extra spaces. You can add white space to your script to make it more readable. The following lines are equivalent:

name="Hege"

name = "Hege"

Break up a Code Line

You can break up a code line within a text string with a backslash. The example below will be displayed properly:

document.write("Hello \

World!")

However, you cannot break up a code line like this:

document.write \

("Hello World!")

Comments

You can add comments to your script by using two slashes //:

//this is a comment

document.write("Hello World!")

or by using /* and */ (this creates a multi-line comment block):

/* This is a comment

block. It contains

several lines */

document.write("Hello World!")


JavaScript How To ...

The HTML <script> tag is used to insert a JavaScript into an HTML page.

Examples

How to write text on a page.

Write text with formatting

How to format the text on your page with HTML tags.

How to Put 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 on an HTML page:

Hello World!

Example Explained

To insert a JavaScript into an HTML page, we use the <script> tag (also use the type attribute to define the scripting language).

So, the <script type="text/javascript"> and </script> tells where the JavaScript starts and ends:

<html>

<body>

<script type="text/javascript">

...

</script>

</body>

</html>

The word document.write is a standard JavaScript command for writing output to a page.

By entering the document.write command between the <script type="text/javascript"> and </script> tags, the browser will recognize it as a JavaScript command and execute the code line. In this case the browser will write Hello World! to the page:

<html>

<body>

<script type="text/javascript">

document.write("Hello World!")

</script>

</body>

</html>

Note: If we had not entered the <script> tag, the browser would have treated the document.write("Hello World!") command as pure text, and just write the entire line on the page.

Ending Statements With a Semicolon?

With traditional programming languages, like C++ and Java, each code statement has to end with a semicolon.

Many programmers continue this habit when writing JavaScript, but in general, semicolons are optional! However, semicolons are required if you want to put more than one statement on a single line.

How to Handle Older Browsers

Browsers that do not support JavaScript will display the script as page content. To prevent them from doing this, we may use the HTML comment tag:

<script type="text/javascript">

<!--

document.write("Hello World!")

//-->

</script>

The two forward slashes at the end of comment line (//) are a JavaScript comment symbol. This prevents the JavaScript compiler from compiling the line.


JavaScript If...Else Statements

Conditional statements in JavaScript are used to perform different actions based on different conditions.

Examples

If statement

How to write an if statement.

If...else statement

How to write an if...else statement.

If..else if...else statement

How to write an if..else if...else statement.

Random link

This example demonstrates a link, when you click on the link it will take you to W3Schools.com OR to RefsnesData.no. There is a 50% chance for each of them.

Conditional Statements

Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this.

In JavaScript we have the following conditional statements:

· if statement - use this statement if you want to execute some code only if a specified condition is true
· if...else statement - use this statement if you want to execute some code if the condition is true and another code if the condition is false
· if...else if....else statement - use this statement if you want to select one of many blocks of code to be executed
· switch statement - use this statement if you want to select one of many blocks of code to be executed

If Statement

You should use the if statement if you want to execute some code only if a specified condition is true.

Syntax

if (condition)

{

code to be executed if condition is true

}

Note that if is written in lowercase letters. Using uppercase letters (IF) will generate a JavaScript error!

Example 1

<script type="text/javascript">

//Write a "Good morning" greeting if

//the time is less than 10

var d=new Date()

var time=d.getHours()

if (time<10)

{

document.write("<b>Good morning</b>")

}

</script>

Example 2

<script type="text/javascript">

//Write "Lunch-time!" if the time is 11

var d=new Date()

var time=d.getHours()

if (time==11)

{

document.write("<b>Lunch-time!</b>")

}

</script>

Note: When comparing variables you must always use two equals signs next to each other (==)!

Notice that there is no ..else.. in this syntax. You just tell the code to execute some code only if the specified condition is true.

If...else Statement

If you want to execute some code if a condition is true and another code if the condition is not true, use the if....else statement.

Syntax

if (condition)

{

code to be executed if condition is true

}

else

{

code to be executed if condition is not true

}

Example

<script type="text/javascript">

//If the time is less than 10,

//you will get a "Good morning" greeting.

//Otherwise you will get a "Good day" greeting.

var d = new Date()

var time = d.getHours()

if (time < 10)

{

document.write("Good morning!")

}

else

{

document.write("Good day!")

}

</script>

If...else if...else Statement

You should use the if....else if...else statement if you want to select one of many sets of lines to execute.

Syntax

if (condition1)

{

code to be executed if condition1 is true

}

else if (condition2)

{

code to be executed if condition2 is true

}

else

{

code to be executed if condition1 and

condition2 are not true

}

Example

<script type="text/javascript">

var d = new Date()

var time = d.getHours()

if (time<10)

{

document.write("<b>Good morning</b>")

}

else if (time>10 && time<16)

{

document.write("<b>Good day</b>")

}

else

{

document.write("<b>Hello World!</b>")

}

</script>


JavaScript Image Maps

An image-map is an image with clickable regions.

Examples

Simple HTML Image map

Image map with added JavaScript

HTML Image Maps

From our HTML tutorial we have learned that an image-map is an image with clickable regions. Normally, each region has an associated hyperlink. Clicking on one of the regions takes you to the associated link.

Example

The example below demonstrates how to create an HTML image map, with clickable regions. Each of the regions is a hyperlink:

<img src ="planets.gif"

width ="145" height ="126"

alt="Planets"

usemap ="#planetmap" />

<map id ="planetmap"

name="planetmap">

<area shape ="rect" coords ="0,0,82,126"

href ="sun.htm" target ="_blank"

alt="Sun" />

<area shape ="circle" coords ="90,58,3"

href ="mercur.htm" target ="_blank"

alt="Mercury" />

<area shape ="circle" coords ="124,58,8"

href ="venus.htm" target ="_blank"

alt="Venus" />

</map>

Result

Adding some JavaScript

We can add events (that can call a JavaScript) to the <area> tags inside the image map. The <area> tag supports the onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp, onFocus, and onBlur events.

Here's the above example, with some JavaScript added:

<html>

<head>

<script type="text/javascript">

function writeText(txt)

{

document.getElementById("desc").innerHTML=txt

}

</script>

</head>

<body>

<img src="planets.gif" width="145" height="126"

alt="Planets" usemap="#planetmap" />

<map id ="planetmap" name="planetmap">

<area shape ="rect" coords ="0,0,82,126"

onMouseOver="writeText('The Sun and the gas giant

planets like Jupiter are by far the largest objects

in our Solar System.')"

href ="sun.htm" target ="_blank" alt="Sun" />

<area shape ="circle" coords ="90,58,3"

onMouseOver="writeText('The planet Mercury is very

difficult to study from the Earth because it is

always so close to the Sun.')"

href ="mercur.htm" target ="_blank" alt="Mercury" />

<area shape ="circle" coords ="124,58,8"

onMouseOver="writeText('Until the 1960s, Venus was

often considered a twin sister to the Earth because

Venus is the nearest planet to us, and because the

two planets seem to share many characteristics.')"

href ="venus.htm" target ="_blank" alt="Venus" />

</map>

<p id="desc"></p>

</body>

</html>


JavaScript Loops

Loops in JavaScript are used to execute the same block of code a specified number of times or while a specified condition is true.

Examples

For loop

How to write a for loop. Use a For loop to run the same block of code a specified number of times.

Looping through HTML headers

How to use the for loop to loop through the different HTML headers.

How to write a while loop. Use a while loop to run the same block of code while a specified condition is true.

Do while loop

How to write a do...while loop. Use a do...while loop to run the same block of code while a specified condition is true. This loop will always be executed once, even if the condition is false, because the statements are executed before the condition is tested.

JavaScript Loops

Very often when you write code, you want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script we can use loops to perform a task like this.

In JavaScript there is two different kind of loops:

· for - loops through a block of code a specified number of times
· while - loops through a block of code while a specified condition is true

The for Loop

The for loop is used when you know in advance how many times the script should run.

Syntax

for (var=startvalue;var<=endvalue;var=var+increment)

{

  code to be executed

}

Example

Explanation: The example below defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 10. i will increase by 1 each time the loop runs.

Note: The increment parameter could also be negative, and the <= could be any comparing statement.

<html>

<body>

<script type="text/javascript">

var i=0

for (i=0;i<=10;i++)

{

document.write("The number is " + i)

document.write("<br />")

}

</script>

</table>

</body>

</html>

Result

The number is 0

The number is 1

The number is 2

The number is 3

The number is 4

The number is 5

The number is 6

The number is 7

The number is 8

The number is 9

The number is 10

The while loop

The while loop is used when you want the loop to execute and continue executing while the specified condition is true.

while (var<=endvalue)

{

  code to be executed

}

Note: The <= could be any comparing statement.

Example

Explanation: The example below defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 10. i will increase by 1 each time the loop runs.

<html>

<body>

<script type="text/javascript">

var i=0

while (i<=10)

{

document.write("The number is " + i)

document.write("<br />")

i=i+1

}

</script>

</table>

</body>

</html>

Result

The number is 0

The number is 1

The number is 2

The number is 3

The number is 4

The number is 5

The number is 6

The number is 7

The number is 8

The number is 9

The number is 10

The do...while Loop

The do...while loop is a variant of the while loop. This loop will always execute a block of code ONCE, and then it will repeat the loop as long as the specified condition is true. This loop will always be executed once, even if the condition is false, because the code are executed before the condition is tested.

do

{

  code to be executed

}

while (var<=endvalue)

Example

<html>

<body>

<script type="text/javascript">

var i=0

do

{

document.write("The number is " + i)

document.write("<br />")

i=i+1

}

while (i<0)

</script>

</table>

</body>

</html>

Result

The number is 0


JavaScript For Loop

Loops in JavaScript are used to execute the same block of code a specified number of times or while a specified condition is true.

Examples

How to write a for loop. Use a For loop to run the same block of code a specified number of times.

Looping through HTML headers

How to use the for loop to loop through the different HTML headers.

JavaScript Loops

Very often when you write code, you want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script we can use loops to perform a task like this.

In JavaScript there are two different kind of loops:

· for - loops through a block of code a specified number of times
· while - loops through a block of code while a specified condition is true

The for Loop

The for loop is used when you know in advance how many times the script should run.

Syntax

for (var=startvalue;var<=endvalue;var=var+increment)

{

  code to be executed

}

Example

Explanation: The example below defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 10. i will increase by 1 each time the loop runs.

Note: The increment parameter could also be negative, and the <= could be any comparing statement.

<html>

<body>

<script type="text/javascript">

var i=0

for (i=0;i<=10;i++)

{

document.write("The number is " + i)

document.write("<br />")

}

</script>

</body>

</html>

Result

The number is 0

The number is 1

The number is 2

The number is 3

The number is 4

The number is 5

The number is 6

The number is 7

The number is 8

The number is 9

The number is 10

The while loop

The while loop will be explained in the next chapter.


JavaScript For...In Statement

The for...in statement is used to loop (iterate) through the elements of an array or through the properties of an object.

Examples

How to use a for...in statement to loop through the elements of an array.

JavaScript For...In Statement

The for...in statement is used to loop (iterate) through the elements of an array or through the properties of an object.

The code in the body of the for ... in loop is executed once for each element/property.

Syntax

for (variable in object)

{

  code to be executed

}

The variable argument can be a named variable, an array element, or a property of an object.

Example

Using for...in to loop through an array:

<html>

<body>

<script type="text/javascript">

var x

var mycars = new Array()

mycars[0] = "Saab"

mycars[1] = "Volvo"

mycars[2] = "BMW"

for (x in mycars)

{

document.write(mycars[x] + "<br />")

}

</script>

</body>

</html>


JavaScript While Loop

Loops in JavaScript are used to execute the same block of code a specified number of times or while a specified condition is true.

Examples

While loop

How to write a while loop. Use a while loop to run the same block of code while a specified condition is true.

Do while loop

How to write a do...while loop. Use a do...while loop to run the same block of code while a specified condition is true. This loop will always be executed at least once, even if the condition is false, because the statements are executed before the condition is tested.

The while loop

The while loop is used when you want the loop to execute and continue executing while the specified condition is true.

while (var<=endvalue)

{

  code to be executed

}

Note: The <= could be any comparing statement.

Example

Explanation: The example below defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 10. i will increase by 1 each time the loop runs.

<html>

<body>

<script type="text/javascript">

var i=0

while (i<=10)

{

document.write("The number is " + i)

document.write("<br />")

i=i+1

}

</script>

</body>

</html>

Result

The number is 0

The number is 1

The number is 2

The number is 3

The number is 4

The number is 5

The number is 6

The number is 7

The number is 8

The number is 9

The number is 10

The do...while Loop

The do...while loop is a variant of the while loop. This loop will always execute a block of code ONCE, and then it will repeat the loop as long as the specified condition is true. This loop will always be executed at least once, even if the condition is false, because the code is executed before the condition is tested.

do

{

  code to be executed

}

while (var<=endvalue)

Example

<html>

<body>

<script type="text/javascript">

var i=0

do

{

document.write("The number is " + i)

document.write("<br />")

i=i+1

}

while (i<0)

</script>

</body>

</html>

Result

The number is 0


JavaScript Create Your Own Objects

Objects are useful to organize information.

Examples

Create a template for an object

JavaScript Objects

Earlier in this tutorial we have seen that JavaScript has several built-in objects, like String, Date, Array, and more. In addition to these built-in objects, you can also create your own.

An object is just a special kind of data, with a collection of properties and methods.

Let's illustrate with an example: A person is an object. Properties are the values associated with the object. The persons' properties include name, height, weight, age, skin tone, eye color, etc. All persons have these properties, but the values of those properties will differ from person to person. Objects also have methods. Methods are the actions that can be performed on objects. The persons' methods could be eat(), sleep(), work(), play(), etc.

Properties

The syntax for accessing a property of an object is:

objName.propName

You can add properties to an object by simply giving it a value. Assume that the personObj already exists - you can give it properties named firstname, lastname, age, and eyecolor as follows:

personObj.firstname="John"

personObj.lastname="Doe"

personObj.age=30

personObj.eyecolor="blue"

document.write(personObj.firstname)

The code above will generate the following output:

John

Methods

An object can also contain methods.

You can call a method with the following syntax:

objName.methodName()

Note: Parameters required for the method can be passed between the parentheses.

To call a method called sleep() for the personObj:

personObj.sleep()

Creating Your Own Objects

There are different ways to create a new object:

1. Create a direct instance of an object

The following code creates an instance of an object and adds four properties to it:

personObj=new Object()

personObj.firstname="John"

personObj.lastname="Doe"

personObj.age=50

personObj.eyecolor="blue"

Adding a method to the personObj is also simple. The following code adds a method called eat() to the personObj:

personObj.eat=eat

2. Create a template of an object

The template defines the structure of an object:

function person(firstname,lastname,age,eyecolor)

{

this.firstname=firstname

this.lastname=lastname

this.age=age

this.eyecolor=eyecolor

}

Notice that the template is just a function. Inside the function you need to assign things to this.propertyName. The reason for all the "this" stuff in is that you're going to have more than one person at a time (which person you're dealing with must be clear). That's what "this" is: the instance of the object at hand.

Once you have the template, you can create new instances of the object, like this:

myFather=new person("John","Doe",50,"blue")

myMother=new person("Sally","Rally",48,"green")

You can also add some methods to the person object. This is also done inside the template:

function person(firstname,lastname,age,eyecolor)

{

this.firstname=firstname

this.lastname=lastname

this.age=age

this.eyecolor=eyecolor

this.newlastname=newlastname

}

Note that methods are just functions attached to objects. Then we will have to write the newlastname() function:

function newlastname(new_lastname)

{

this.lastname=new_lastname

}

The newlastname() function defines the person's new last name and assigns that to the person. JavaScript knows which person you're talking about by using "this.". So, now you can write: myMother.newlastname("Doe").


JavaScript Array Object

The Array object is used to store a set of values in a single variable name.

Examples

Create an array

Create an array, assign values to it, and write the values to the output.

Statement

How to use a for...in statement to loop through the elements of an array.

Join two arrays - concat()

How to use the concat() method to join two arrays.

elements into a string - join()

How to use the join() method to put all the elements of an array into a string.

- sort()

How to use the sort() method to sort a literal array.

- sort()

How to use the sort() method to sort a numeric array.

Complete Array Object Reference

For a complete reference of all the properties and methods that can be used with the Array object, go to our complete Array object reference.

The reference contains a brief description and examples of use for each property and method!

Defining Arrays

The Array object is used to store a set of values in a single variable name.

We define an Array object with the new keyword. The following code line defines an Array object called myArray:

var myArray=new Array()

There are two ways of adding values to an array (you can add as many values as you need to define as many variables you require).

1:

var mycars=new Array()

mycars[0]="Saab"

mycars[1]="Volvo"

mycars[2]="BMW"

You could also pass an integer argument to control the array's size:

var mycars=new Array(3)

mycars[0]="Saab"

mycars[1]="Volvo"

mycars[2]="BMW"

2:

var mycars=new Array("Saab","Volvo","BMW")

Note: If you specify numbers or true/false values inside the array then the type of variables will be numeric or Boolean instead of string.

Accessing Arrays

You can refer to a particular element in an array by referring to the name of the array and the index number. The index number starts at 0.

The following code line:

document.write(mycars[0])

will result in the following output:

Saab

Modify Values in Existing Arrays

To modify a value in an existing array, just add a new value to the array with a specified index number:

mycars[0]="Opel"

Now, the following code line:

document.write(mycars[0])

will result in the following output:

Opel


JavaScript Boolean Object

The Boolean object is used to convert a non-Boolean value to a Boolean value (true or false).

Examples

Check if a Boolean object is true or false.

Complete Boolean Object Reference

For a complete reference of all the properties and methods that can be used with the Boolean object, go to our complete Boolean object reference.

The reference contains a brief description and examples of use for each property and method!

Boolean Object

The Boolean object is an object wrapper for a Boolean value.

The Boolean object is used to convert a non-Boolean value to a Boolean value (true or false).

We define a Boolean object with the new keyword. The following code line defines a Boolean object called myBoolean:

var myBoolean=new Boolean()

Note: If the Boolean object has no initial value or if it is 0, -0, null, "", false, undefined, or NaN, the object is set to false. Otherwise it is true (even with the string "false")!

All the following lines of code create Boolean objects with an initial value of false:

var myBoolean=new Boolean()

var myBoolean=new Boolean(0)

var myBoolean=new Boolean(null)

var myBoolean=new Boolean("")

var myBoolean=new Boolean(false)

var myBoolean=new Boolean(NaN)

And all the following lines of code create Boolean objects with an initial value of true:

var myBoolean=new Boolean(true)

var myBoolean=new Boolean("true")

var myBoolean=new Boolean("false")

var myBoolean=new Boolean("Richard")


JavaScript Date Object

The Date object is used to work with dates and times.

Examples

How to use the Date() method to get today's date.

Use getTime() to calculate the years since 1970.

setFullYear()

How to use setFullYear() to set a specific date.

toUTCString()

How to use toUTCString() to convert today's date (according to UTC) to a string.

getDay()

Use getDay() and an array to write a weekday, and not just a number.

Display a clock

How to display a clock on your web page.

Complete Date Object Reference

For a complete reference of all the properties and methods that can be used with the Date object, go to our complete Date object reference.

The reference contains a brief description and examples of use for each property and method!

Defining Dates

The Date object is used to work with dates and times.

We define a Date object with the new keyword. The following code line defines a Date object called myDate:

var myDate=new Date()

Note: The Date object will automatically hold the current date and time as its initial value!

Manipulate Dates

We can easily manipulate the date by using the methods available for the Date object.

In the example below we set a Date object to a specific date (14th January 2010):

var myDate=new Date()

myDate.setFullYear(2010,0,14)

And in the following example we set a Date object to be 5 days into the future:

var myDate=new Date()

myDate.setDate(myDate.getDate()+5)

Note: If adding five days to a date shifts the month or year, the changes are handled automatically by the Date object itself!

Comparing Dates

The Date object is also used to compare two dates.

The following example compares today's date with the 14th January 2010:

var myDate=new Date()

myDate.setFullYear(2010,0,14)

var today = new Date()

if (myDate>today)

alert("Today is before 14th January 2010")

else

alert("Today is after 14th January 2010")


Javascript DOM objects

JavaScript HTML DOM Objects

In addition to the built-in JavaScript objects, you can also access and manipulate all of the HTML DOM objects with JavaScript.

More JavaScript Objects

Follow the links to learn more about the objects and their collections, properties, methods and events.

Object | Description
Window | The top level object in the JavaScript hierarchy. The Window object represents a browser window. A Window object is created automatically with every instance of a <body> or <frameset> tag
Navigator | Contains information about the client's browser
Screen | Contains information about the client's display screen
History | Contains the visited URLs in the browser window
Location | Contains information about the current URL

The HTML DOM

The HTML DOM is a W3C standard and it is an abbreviation for the Document Object Model for HTML.

The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate HTML documents.

All HTML elements, along with their containing text and attributes, can be accessed through the DOM. The contents can be modified or deleted, and new elements can be created.

The HTML DOM is platform and language independent. It can be used by any programming language like Java, JavaScript, and VBScript.

Follow the links below to learn more about how to access and manipulate each DOM object with JavaScript:

Object | Description
Document | Represents the entire HTML document and can be used to access all elements in a page
Anchor | Represents an <a> element
Area | Represents an <area> element inside an image-map
Base | Represents a <base> element
Body | Represents the <body> element
Button | Represents a <button> element
Event | Represents the state of an event
Form | Represents a <form> element
Frame | Represents a <frame> element
Frameset | Represents a <frameset> element
 | Represents an <iframe> element
 | Represents an <img> element
Input button | Represents a button in an HTML form
 | Represents a checkbox in an HTML form
Input file | Represents a fileupload in an HTML form
Input hidden | Represents a hidden field in an HTML form
Input password | Represents a password field in an HTML form
Input radio | Represents a radio button in an HTML form
 | Represents a reset button in an HTML form
Input submit | Represents a submit button in an HTML form
Input text | Represents a text-input field in an HTML form
Link | Represents a <link> element
Meta | Represents a <meta> element
Option | Represents an <option> element
 | Represents a selection list in an HTML form
Style | Represents an individual style statement
Table | Represents a <table> element
TableData | Represents a <td> element
TableRow | Represents a <tr> element
 | Represents a <textarea> element


JavaScript Objects Introduction

JavaScript is an Object Oriented Programming (OOP) language.

An OOP language allows you to define your own objects and make your own variable types.

Object Oriented Programming

JavaScript is an Object Oriented Programming (OOP) language. An OOP language allows you to define your own objects and make your own variable types.

However, creating your own objects will be explained later, in the Advanced JavaScript section. We will start by looking at the built-in JavaScript objects, and how they are used. The next pages will explain each built-in JavaScript object in detail.

Note that an object is just a special kind of data. An object has properties and methods.

Properties

Properties are the values associated with an object.

In the following example we are using the length property of the String object to return the number of characters in a string:

<script type="text/javascript">

var txt="Hello World!"

document.write(txt.length)

</script>

The output of the code above will be:

12

Methods

Methods are the actions that can be performed on objects.

In the following example we are using the toUpperCase() method of the String object to display a text in uppercase letters:

<script type="text/javascript">

var str="Hello world!"

document.write(str.toUpperCase())

</script>

The output of the code above will be:

HELLO WORLD!


JavaScript Math Object

The Math object allows you to perform common mathematical tasks.

Examples

round()

How to use round().

random()

How to use random() to return a random number between 0 and 1.

How to use max() to return the number with the highest value of two specified numbers.

min()

How to use min() to return the number with the lowest value of two specified numbers.

Complete Math Object Reference

For a complete reference of all the properties and methods that can be used with the Math object, go to our complete Math object reference.

The reference contains a brief description and examples of use for each property and method!

Math Object

The Math object allows you to perform common mathematical tasks.

The Math object includes several mathematical values and functions. You do not need to define the Math object before using it.

Mathematical Values

JavaScript provides eight mathematical values (constants) that can be accessed from the Math object. These are: E, PI, square root of 2, square root of 1/2, natural log of 2, natural log of 10, base-2 log of E, and base-10 log of E.

You may reference these values from your JavaScript like this:

Math.E

Math.PI

Math.SQRT2

Math.SQRT1_2

Math.LN2

Math.LN10

Math.LOG2E

Math.LOG10E

Mathematical Methods

In addition to the mathematical values that can be accessed from the Math object there are also several functions (methods) available.

Examples of functions (methods):

The following example uses the round() method of the Math object to round a number to the nearest integer:

document.write(Math.round(4.7))

The code above will result in the following output:

5

The following example uses the random() method of the Math object to return a random number between 0 and 1:

document.write(Math.random())

The code above can result in the following output:

The following example uses the floor() and random() methods of the Math object to return a random number between 0 and 10:

document.write(Math.floor(Math.random()*11))

The code above can result in the following output:


JavaScript String Object

The String object is used to manipulate a stored piece of text.

Examples

Return the length of a string

How to use the length property to find the length of a string.

Style strings

How to style strings.

The indexOf() method

How to use the indexOf() method to return the position of the first occurrence of a specified string value in a string.

The match() method

How to use the match() method to search for a specified string value within a string and return the string value if found

How to use the replace() method to replace some characters with some other characters in a string.

Complete String Object Reference

For a complete reference of all the properties and methods that can be used with the String object, go to our .

The reference contains a brief description and examples of use for each property and method!

String object

The String object is used to manipulate a stored piece of text.

Examples of use:

The following example uses the length property of the String object to find the length of a string:

var txt="Hello world!"

document.write(txt.length)

The code above will result in the following output:

12

The following example uses the toUpperCase() method of the String object to convert a string to uppercase letters:

var txt="Hello world!"

document.write(txt.toUpperCase())

The code above will result in the following output:

HELLO WORLD!


JavaScript onerror Event

JavaScript The onerror Event

Using the onerror event is the old standard solution to catch errors in a web page.

Examples

The onerror event (an example with an error)

How to use the onerror event to catch errors in a web page.

The onerror Event

We have just explained how to use the try...catch statement to catch errors in a web page. Now we are going to explain how to use the onerror event for the same purpose.

The onerror event is fired whenever there is a script error in the page.

To use the onerror event, you must create a function to handle the errors. Then you call the function with the onerror event handler. The event handler is called with three arguments: msg (error message), url (the url of the page that caused the error) and line (the line where the error occurred).

Syntax

onerror=handleErr

function handleErr(msg,url,l)

{

//Handle the error here

return true or false

}

The value returned by onerror determines whether the browser displays a standard error message. If you return false, the browser displays the standard error message in the JavaScript console. If you return true, the browser does not display the standard error message.

Example

The following example shows how to catch the error with the onerror event:

<html>

<head>

<script type="text/javascript">

onerror=handleErr

var txt=""

function handleErr(msg,url,l)

{

txt="There was an error on this page.\n\n"

txt+="Error: " + msg + "\n"

txt+="URL: " + url + "\n"

txt+="Line: " + l + "\n\n"

txt+="Click OK to continue.\n\n"

alert(txt)

return true

}

function message()

{

adddlert("Welcome guest!")

}

</script>

</head>

<body>

<input type="button" value="View message" onclick="message()" />

</body>

</html>


JavaScript Operators

Arithmetic Operators

Operator | Description | Example | Result
+ | Addition | x=2 y=2 x+y | 4
- | Subtraction | x=5 y=2 x-y | 3
* | Multiplication | x=5 y=4 x*y | 20
/ | Division | 15/5 5/2 | 3 2.5
% | Modulus (division remainder) | 5%2 10%8 10%2 | 1 2 0
++ | Increment | x=5 x++ | x=6
-- | Decrement | x=5 x-- | x=4

Assignment Operators

Operator | Example | Is The Same As
= | x=y | x=y
+= | x+=y | x=x+y
-= | x-=y | x=x-y
*= | x*=y | x=x*y
/= | x/=y | x=x/y
%= | x%=y | x=x%y

Comparison Operators

Operator | Description | Example
== | is equal to | 5==8 returns false
=== | is equal to (checks for both value and type) | x=5 y="5" x==y returns true x===y returns false
!= | is not equal | 5!=8 returns true
> | is greater than | 5>8 returns false
< | is less than | 5<8 returns true
>= | is greater than or equal to | 5>=8 returns false
<= | is less than or equal to | 5<=8 returns true

Logical Operators

Operator | Description | Example
&& | and | x=6 y=3 (x < 10 && y > 1) returns true
|| | or | x=6 y=3 (x==5 || y==5) returns false
! | not | x=6 y=3 !(x==y) returns true

String Operator

A string is most often text, for example "Hello World!". To stick two or more string variables together, use the + operator.

txt1="What a very"

txt2="nice day!"

txt3=txt1+txt2

The variable txt3 now contains "What a verynice day!".

To add a space between two string variables, insert a space into the expression, OR in one of the strings.

txt1="What a very"

txt2="nice day!"

txt3=txt1+" "+txt2

or

txt1="What a very "

txt2="nice day!"

txt3=txt1+txt2

The variable txt3 now contains "What a very nice day!".

Conditional Operator

JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.

Syntax

variablename=(condition)?value1:value2

Example

greeting=(visitor=="PRES")?"Dear President ":"Dear "

If the variable visitor is equal to PRES, then put the string "Dear President " in the variable named greeting. If the variable visitor is not equal to PRES, then put the string "Dear " into the variable named greeting.


JavaScript Popup Boxes

In JavaScript we can create three kinds of popup boxes: Alert box, Confirm box, and Prompt box.

Examples

Alert box

Alert box with line breaks

Prompt box

Alert Box

An alert box is often used if you want to make sure information comes through to the user.

When an alert box pops up, the user will have to click "OK" to proceed.

Syntax:

alert("sometext")

Confirm Box

A confirm box is often used if you want the user to verify or accept something.

When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.

If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.

Syntax:

confirm("sometext")

Prompt Box

A prompt box is often used if you want the user to input a value before entering a page.

When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.

If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.

Syntax:

prompt("sometext","defaultvalue")


JavaScript Quiz

JavaScript Quiz Test

You can test your JavaScript skills with W3Schools' Quiz.

The Test

The test contains 20 questions and there is no time limit.

The test is not official, it's just a nice way to see how much you know, or don't know, about JavaScript.

Your Score Will be Counted

You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 20 points.

Good luck! Start the


JavaScript Special Characters

In JavaScript you can add special characters to a text string by using the backslash sign.

Insert Special Characters

The backslash (\) is used to insert apostrophes, new lines, quotes, and other special characters into a text string.

Look at the following JavaScript code:

var txt="We are the so-called "Vikings" from the north."

document.write(txt)

In JavaScript, a string is started and stopped with either single or double quotes. This means that the string above will be chopped to: We are the so-called

To solve this problem, you must place a backslash (\) before each double quote in "Viking". This turns each double quote into a string literal:

var txt="We are the so-called \"Vikings\" from the north."

document.write(txt)

JavasScript will now output the proper text string: We are the so-called "Vikings" from the north.

Here is another example:

document.write ("You \& me are singing!")

The example above will produce the following output:

You & me are singing!

The table below lists other special characters that can be added to a text string with the backslash sign:

Code | Outputs
\' | single quote
\" | double quote
\& | ampersand
\\ | backslash
\n | new line
\r | carriage return
\t | tab
\b | backspace
\f | form feed


JavaScript Summary

You Have Learned JavaScript, Now What?

 Top Previous Next

JavaScript Summary

This tutorial has taught you how to add JavaScript to your HTML pages, to make your web site more dynamic and interactive.

You have learned how to create responses to events, validate forms and how to make different scripts run in response to different scenarios.

You have also learned how to create and use objects, and how to use JavaScript's built-in objects.

For more information on JavaScript, please look at our JavaScript examples and our JavaScript reference.

Now You Know JavaScript, What's Next?

The next step is to learn about the HTML DOM and DHTML.

If you want to learn about server-side scripting, the next step is to learn ASP.

HTML DOM

The HTML DOM defines a standard way for accessing and manipulating HTML documents.

The HTML DOM is platform and language independent and can be used by any programming language like Java, JavaScript, and VBScript.

If you want to learn more about the DOM, please visit our .

DHTML

DHTML is a combination of HTML, CSS, and JavaScript. DHTML is used to create dynamic and interactive Web sites.

W3C once said: "Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated."

If you want to learn more about DHTML, please visit our DHTML tutorial.

ASP

While scripts in an HTML file are executed on the client (in the browser), scripts in an ASP file are executed on the server.

With ASP you can dynamically edit, change or add any content of a Web page, respond to 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.

Since ASP files are returned as plain HTML, they can be viewed in any browser.

If you want to learn more about ASP, please visit our ASP tutorial.


JavaScript Switch Statement

Conditional statements in JavaScript are used to perform different actions based on different conditions.

Examples

Switch statement

How to write a switch statement.

The JavaScript Switch Statement

You should use the switch statement if you want to select one of many blocks of code to be executed.

Syntax

switch(n)

{

case 1:

execute code block 1

break

case 2:

execute code block 2

break

default:

code to be executed if n is

different from case 1 and 2

}

This is how it works: First we have a single expression n (most often a variable), that is evaluated once. The value of the expression is then compared with the values for each case in the structure. If there is a match, the block of code associated with that case is executed. Use break to prevent the code from running into the next case automatically.

Example

<script type="text/javascript">

//You will receive a different greeting based

//on what day it is. Note that Sunday=0,

//Monday=1, Tuesday=2, etc.

var d=new Date()

theDay=d.getDay()

switch (theDay)

{

case 5:

document.write("Finally Friday")

break

case 6:

document.write("Super Saturday")

break

case 0:

document.write("Sleepy Sunday")

break

default:

document.write("I'm looking forward to this weekend!")

}

</script>


JavaScript Timing Events

With JavaScript, it is possible to execute some code NOT immediately after a function is called, but after a specified time interval. This is called timing events.

Examples

Simple timing

Another simple timing

Timing event in an infinite loop

Timing event in an infinite loop - with a Stop button

A clock created with a timing event

JavaScript Timing Events

With JavaScript, it is possible to execute some code NOT immediately after a function is called, but after a specified time interval. This is called timing events.

It's very easy to time events in JavaScript. The two key methods that are used are:

· setTimeout() - executes a code some time in the future
· clearTimeout() - cancels the setTimeout()

Note: The setTimeout() and clearTimeout() are both methods of the HTML DOM Window object.

setTimeout()

Syntax

var t=setTimeout("javascript statement",milliseconds)

The setTimeout() method returns a value - In the statement above, the value is stored in a variable called t. If you want to cancel this setTimeout(), you can refer to it using the variable name.

The first parameter of setTimeout() is a string that contains a JavaScript statement. This statement could be a statement like "alert('5 seconds!')" or a call to a function, like "alertMsg()".

The second parameter indicates how many milliseconds from now you want to execute the first parameter.

Note: There are 1000 milliseconds in one second.

Example

When the button is clicked in the example below, an alert box will be displayed after 5 seconds.

<html>

<head>

<script type="text/javascript">

function timedMsg()

{

var t=setTimeout("alert('5 seconds!')",5000)

}

</script>

</head>

<body>

<form>

<input type="button" value="Display timed alertbox!"

onClick="timedMsg()">

</form>

</body>

</html>

Example - Infinite Loop

To get a timer to work in an infinite loop, we must write a function that calls itself. In the example below, when the button is clicked, the input field will start to count (for ever), starting at 0:

<html>

<head>

<script type="text/javascript">

var c=0

var t

function timedCount()

{

document.getElementById('txt').value=c

c=c+1

t=setTimeout("timedCount()",1000)

}

</script>

</head>

<body>

<form>

<input type="button" value="Start count!"

onClick="timedCount()">

<input type="text" id="txt">

</form>

</body>

</html>

clearTimeout()

Syntax

clearTimeout(setTimeout_variable)

Example

The example below is the same as the "Infinite Loop" example above. The only difference is that we have now added a "Stop Count!" button that stops the timer:

<html>

<head>

<script type="text/javascript">

var c=0

var t

function timedCount()

{

document.getElementById('txt').value=c

c=c+1

t=setTimeout("timedCount()",1000)

}

function stopCount()

{

clearTimeout(t)

}

</script>

</head>

<body>

<form>

<input type="button" value="Start count!"

onClick="timedCount()">

<input type="text" id="txt">

<input type="button" value="Stop count!"

onClick="stopCount()">

</form>

</body>

</html>


JavaScript Try...Catch Statement

The try...catch statement allows you to test a block of code for errors.

Examples

The try...catch statement

How to write a try...catch statement.

The try...catch

Another example of how to write a try...catch statement.

JavaScript - Catching Errors

When browsing Web pages on the internet, we all have seen a JavaScript alert box telling us there is a runtime error and asking "Do you wish to debug?". Error message like this may be useful for developers but not for users. When users see errors, they often leave the Web page.

This chapter will teach you how to trap and handle JavaScript error messages, so you don't lose your audience.

There are two ways of catching errors in a Web page:

· By using the try...catch statement (available in IE5+, Mozilla 1.0, and Netscape 6)
· By using the onerror event. This is the old standard solution to catch errors (available since Netscape 3)

Try...Catch Statement

The try...catch statement allows you to test a block of code for errors. The try block contains the code to be run, and the catch block contains the code to be executed if an error occurs.

Syntax

try

{

//Run some code here

}

catch(err)

{

//Handle errors here

}

Note that try...catch is written in lowercase letters. Using uppercase letters will generate a JavaScript error!

Example 1

The example below contains a script that is supposed to display the message "Welcome guest!" when you click on a button. However, there's a typo in the message() function. alert() is misspelled as adddlert(). A JavaScript error occurs:

<html>

<head>

<script type="text/javascript">

function message()

{

adddlert("Welcome guest!")

}

</script>

</head>

<body>

<input type="button" value="View message" onclick="message()" />

</body>

</html>

To take more appropriate action when an error occurs, you can add a try...catch statement.

The example below contains the "Welcome guest!" example rewritten to use the try...catch statement. Since alert() is misspelled, a JavaScript error occurs. However, this time, the catch block catches the error and executes a custom code to handle it. The code displays a custom error message informing the user what happened:

<html>

<head>

<script type="text/javascript">

var txt=""

function message()

{

try

{

adddlert("Welcome guest!")

}

catch(err)

{

txt="There was an error on this page.\n\n"

txt+="Error description: " + err.description + "\n\n"

txt+="Click OK to continue.\n\n"

alert(txt)

}

}

</script>

</head>

<body>

<input type="button" value="View message" onclick="message()" />

</body>

</html>

Example 2

The next example uses a confirm box to display a custom message telling users they can click OK to continue viewing the page or click Cancel to go to the homepage. If the confirm method returns false, the user clicked Cancel, and the code redirects the user. If the confirm method returns true, the code does nothing:

<html>

<head>

<script type="text/javascript">

var txt=""

function message()

{

try

{

adddlert("Welcome guest!")

}

catch(err)

{

txt="There was an error on this page.\n\n"

txt+="Click OK to continue viewing this page,\n"

txt+="or Cancel to return to the home page.\n\n"

if(!confirm(txt))

  {

  document.location.href="http://www.w3schools.com/"

  }

}

}

</script>

</head>

<body>

<input type="button" value="View message" onclick="message()" />

</body>

</html>

The onerror Event

The onerror event will be explained soon, but first you will learn how to use the throw statement to create an exception. The throw statement can be used together with the try...catch statement.


JavaScript Variables

A variable is a "container" for information you want to store.

Examples

Variable

Variables are used to store data. This example will show you how.

Variables

A variable is a "container" for information you want to store. A variable's value can change during the script. You can refer to a variable by name to see its value or to change its value.

Rules for variable names:

· Variable names are case sensitive
· They must begin with a letter or the underscore character

IMPORTANT! JavaScript is case-sensitive! A variable named strname is not the same as a variable named STRNAME!

Declare a Variable

You can create a variable with the var statement:

var strname = some value

You can also create a variable without the var statement:

strname = some value

Assign a Value to a Variable

You can assign a value to a variable like this:

var strname = "Hege"

Or like this:

strname = "Hege"

The variable name is on the left side of the expression and the value you want to assign to the variable is on the right. Now the variable "strname" has the value "Hege".

Lifetime of Variables

When you declare a variable within a function, the variable can only be accessed within that function. When you exit the function, the variable is destroyed. These variables are called local variables. You can have local variables with the same name in different functions, because each is recognized only by the function in which it is declared.

If you declare a variable outside a function, all the functions on your page can access it. The lifetime of these variables starts when they are declared, and ends when the page is closed.


JavaScript Where To ...

JavaScripts in the body section will be executed WHILE the page loads.

JavaScripts in the head section will be executed when CALLED.

Examples

Head section

Scripts that contain functions go in the head section of the document. Then we can be sure that the script is loaded before the function is called.

Body section

Execute a script that is placed in the body section.

External script

How to access an external script.

Where to Put the JavaScript

JavaScripts in a page will be executed immediately while the page loads into the browser. This is not always what we want. Sometimes we want to execute a script when a page loads, other times when a user triggers an event.

Scripts in the head section: Scripts to be executed when they are called, or when an event is triggered, go in the head section. When you place a script in the head section, you will ensure that the script is loaded before anyone uses it.

<html>

<head>

<script type="text/javascript">

....

</script>

</head>

Scripts in the body section: Scripts to be executed when the page loads go in the body section. When you place a script in the body section it generates the content of the page.

<html>

<head>

</head>

<body>

<script type="text/javascript">

....

</script>

</body>

Scripts in both the body and the head section: You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section.

<html>

<head>

<script type="text/javascript">

....

</script>

</head>

<body>

<script type="text/javascript">

....

</script>

</body>

Using an External JavaScript

Sometimes you might want to run the same JavaScript on several pages, without having to write the same script on every page.

To simplify this, you can write a JavaScript in an external file. Save the external JavaScript file with a .js file extension.

Note: The external script cannot contain the <script> tag!

To use the external script, point to the .js file in the "src" attribute of the <script> tag:

<html>

<head>

<script src="xxx.js"></script>

</head>

<body>

</body>

</html>

Note: Remember to place the script exactly where you normally would write the script!


mercur.html

merglobe


My title

The title of the document is:


sun.html


tryit_view002f.html

[TEditFormControlObj]


tryit_view0041.html

[TEditFormControlObj]


tryit_view016c.html

This is a paragraph


tryit_view01c4.html

100 | 200
300 | 400


tryit_view0208.html


tryit_view0235.html

This is a paragraph


tryit_view0273.html

Links and Anchors

Click on a button to display that anchor in a second window!


tryit_view035f.html


tryit_view04b3.html

This is an example paragraph.


tryit_view05fa.html


tryit_view068c.html

Number of links in this document:


tryit_view069f.html

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.


tryit_view0724.html

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.


tryit_view0786.html

Click somewhere in the document. An alert box will tell you if you pressed the CTRL key or not.


tryit_view0805.html


tryit_view08f6.html


tryit_view0976.html

Venus' pathname:


tryit_view0ac4.html

Name (max 10 chararcters): [TEditFormControlObj]

Age (from 1 to 100): [TEditFormControlObj]

E-mail: [TEditFormControlObj]


tryit_view0b2e.html


tryit_view0b8e.html

100 | 200
300 |


tryit_view0bd5.html

This is a paragraph


tryit_view0dc6.html

Click somewhere in the document. An alert box will tell if the event is a bubbling event.


tryit_view0e0a.html

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.


tryit_view0e2e.html

Click Me!

The name of the button is:


tryit_view0e6c.html

This is an example paragraph.


tryit_view1018.html

This is an example paragraph.


tryit_view1035.html


tryit_view1061.html

"Venus" area id =


tryit_view10f8.html


tryit_view10ff.html

[TRadioButtonFormControlObj]


tryit_view1176.html

Male: [TRadioButtonFormControlObj]

Female: [TRadioButtonFormControlObj]


tryit_view1198.html

[TEditFormControlObj]


tryit_view120e.html

Note: Make sure the right frame has focus when trying this example!

Press a key on your keyboard. An alert box will alert the unicode of the key pressed.


tryit_view13d0.html

This is an example paragraph.

This is another example paragraph.


tryit_view1427.html

This is a paragraph


tryit_view1437.html

This is a paragraph


tryit_view1485.html


tryit_view14a5.html

This is an example paragraph.

This is another example paragraph.


tryit_view14aa.html

This is a paragraph


tryit_view1666.html

The cookies associated with this document is:


tryit_view16f7.html


tryit_view17a9.html

AccessKey for the reset button is:


tryit_view1848.html

Explanation: The loop will break when i=3.


tryit_view1912.html

Row1 cell1 | Row1 cell2
Row2 cell1 | Row2 cell2


tryit_view1968.html

This is a paragraph


tryit_view1a0e.html

[TEditFormControlObj]

[TEditFormControlObj]

[TEditFormControlObj]


tryit_view1a5d.html

[TEditFormControlObj]


tryit_view1ad4.html

The referrer property returns the URL of the document that loaded this document.

The referrer of this document is:


tryit_view1b9d.html

Firstname | Lastname
Peter | Griffin


tryit_view1c82.html

· Coffee
· Tea
· Water
· Soda


tryit_view1d2c.html

· Coffee
· Tea
· Water
· Soda


tryit_view1dd4.html

This is a paragraph


tryit_view202a.html

Click somewhere in the document. An alert box will tell you if you pressed the ALT key or not.


tryit_view20f4.html

Click somewhere in the document. An alert box will alert the tag name of the element you clicked on.

This is a header

This is a paragraph


tryit_view213e.html

cell 1 |  |  |  | cell 2
cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10


tryit_view21f8.html

Name: [TEditFormControlObj]


tryit_view226f.html

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph


tryit_view235c.html

The URL of this document is:


tryit_view237c.html


tryit_view2486.html

planets


tryit_view24f3.html


tryit_view257c.html

[TEditFormControlObj]

The name of the password field is:


tryit_view2631.html


tryit_view265f.html


tryit_view268d.html

Firstname | Lastname
Peter | Griffin


tryit_view26d1.html

Click on this document!


tryit_view2739.html

By pressing the button, a function with an argument will be called. The function will alert this argument.


tryit_view27c2.html

1000000000000000000000000000

10000000

100


tryit_view27dc.html


tryit_view28ea.html

This document was last modified on:


tryit_view28ec.html

This is a paragraph


tryit_view2944.html


tryit_view2977.html

Firstname | Lastname
Peter | Griffin


tryit_view2a0f.html

Firstname | Lastname
Peter | Griffin


tryit_view2a7e.html


tryit_view2ac1.html


tryit_view2af7.html

[TEditFormControlObj]

Click on the "Start count!" button above to start the timer. The input field will count forever, starting at 0. Click on the "Stop count!" button to stop the counting.


tryit_view2c4d.html

Select your favorite fruit: [TComboFormControlObj]


tryit_view2d21.html

The alt text for the hidden field is:


tryit_view2d5d.html

Click somewhere in the document. An alert box will tell you if you pressed the meta key or not.


tryit_view2e23.html

Select your favorite fruit: [TComboFormControlObj]


tryit_view2ed1.html


tryit_view2ef2.html

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.


tryit_view2f5f.html

[TRadioButtonFormControlObj]


tryit_view2f7f.html


tryit_view2f90.html

The access key for the button is:


tryit_view30ce.html


tryit_view30d3.html


tryit_view31fd.html

Click somewhere in the document. An alert box will alert the tag name of the element you clicked on.

This is a header

This is a paragraph


tryit_view3230.html


tryit_view328e.html

Note: We have used the top element instead of the window element, to represent the top frame. If you do not use frames, use the window element instead.


tryit_view32d2.html


tryit_view3350.html

Row 1

Row 2

Row 3


tryit_view337a.html

Click in the document. An alert box will alert which mouse button you clicked.


tryit_view33df.html

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph


tryit_view33ea.html

The id of the hidden field is:


tryit_view3443.html


tryit_view344f.html


tryit_view3534.html

The hostname and port for the "Venus" area are:


tryit_view3560.html

Row1 cell1 | Row1 cell2
Row2 cell1 | Row2 cell2
Row3 cell1 | Row3 cell2


tryit_view357e.html


tryit_view35ea.html


tryit_view367d.html


tryit_view3702.html

Enter some text in the text fields below, and then press the "Submit" button to submit the form.

Firstname: [TEditFormControlObj]

Lastname: [TEditFormControlObj]


tryit_view379e.html

The actual script is in an external script file called "xxx.js".


tryit_view3830.html

My table caption

Firstname | Lastname
Peter | Griffin


tryit_view38d8.html

Male: [TRadioButtonFormControlObj]

Female: [TRadioButtonFormControlObj]

The access key for the radio buttons are:


tryit_view39ac.html


tryit_view39c8.html

[TComboFormControlObj]


tryit_view39d3.html

First anchor

Second anchor

Third anchor

Number of anchors in this document:


tryit_view3a04.html


tryit_view3a6c.html

· Coffee
· Tea
· Water
· Soda


tryit_view3b4f.html

Firstname | Lastname
Peter | Griffin


tryit_view3b6b.html

Firstname | Lastname
Peter | Griffin


tryit_view3c5d.html

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.


tryit_view3c91.html

[TComboFormControlObj]


tryit_view3cc7.html

This is a paragraph


tryit_view3d59.html

This is a caption

100 | 200
300 | 400


tryit_view3e20.html

This is an example paragraph.


tryit_view3f0c.html

Firstname: [TEditFormControlObj] Lastname: [TEditFormControlObj]

Get the value of all the elements in the form:


tryit_view3f3f.html

100 | 200
300 | 400


tryit_view3f53.html

planets


tryit_view3fa4.html

Some text. Some text. Some text. Some text.


tryit_view3fbe.html


tryit_view4044.html

Select your favorite fruit: [TComboFormControlObj]


tryit_view4054.html

[TComboFormControlObj]


tryit_view40a8.html

AccessKey for the submit button is:


tryit_view4112.html

[TRadioButtonFormControlObj]

[TRadioButtonFormControlObj]

[TRadioButtonFormControlObj]


tryit_view4251.html

[TCheckBoxFormControlObj]

The access key for the checkbox is:


tryit_view426f.html


tryit_view43bb.html

I have a bike: [TCheckBoxFormControlObj]

I have a car: [TCheckBoxFormControlObj]

The alt text for the checkboxes are:


tryit_view43be.html

Firstname | Lastname
Peter | Griffin


tryit_view4438.html


tryit_view4506.html

[TEditFormControlObj]


tryit_view4593.html

This is an example paragraph.

This is another example paragraph.


tryit_view4610.html

Row1 cell1 | Row1 cell2
Row2 cell1 | Row2 cell2
Row3 cell1 | Row3 cell2


tryit_view4691.html

[TEditFormControlObj]


tryit_view4712.html


tryit_view475a.html

Email: [TEditFormControlObj]


tryit_view4771.html


tryit_view47ac.html

This is a paragraph


tryit_view47b4.html


tryit_view4872.html

The script in the body section calls a function with two parameters (4 and 3).

The function will return the product of these two parameters.


tryit_view492b.html

Select numbers:

[TComboFormControlObj] [TEditFormControlObj]


tryit_view492d.html

This is a table caption

Firstname | Lastname
Peter | Griffin


tryit_view493f.html

This is a paragraph


tryit_view4b1e.html

Firstname | Lastname
Peter | Griffin


tryit_view4b3c.html


tryit_view4b4c.html

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.


tryit_view4b5c.html

[TComboFormControlObj]

The id of the form is:


tryit_view4bf1.html

This is an example paragraph.


tryit_view4c5c.html

Click Me!


tryit_view4c60.html

Some text. Some text. Some text. Some text.


tryit_view4cf6.html

Click me!

AccessKey for button is:


tryit_view4d08.html

Select your favorite fruit: [TComboFormControlObj]


tryit_view4d21.html


tryit_view4d21-2.html

[TComboFormControlObj]


tryit_view4d92.html


tryit_view4d9d.html

compman


tryit_view4def.html

The id of the form containing the reset button is:


tryit_view4e34.html

This is a paragraph

This is a paragraph

This is a paragraph


tryit_view4efd.html

Note: We have used the top element instead of the window element, to represent the top frame. If you do not use frames, use the window element instead.


tryit_view4fb8.html


tryit_view5041.html


tryit_view5113.html

This is an example paragraph.


tryit_view511b.html

Row1 cell1 | Row1 cell2
Row2 cell1 | Row2 cell2
Row3 cell1 | Row3 cell2


tryit_view5138.html


tryit_view52c3.html

noHref status:


tryit_view538c.html

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph


tryit_view5414.html

100 | 200
300 | 400


tryit_view5524.html

Email: [TEditFormControlObj]

Sex: [TComboFormControlObj]


tryit_view5546.html

Name: [TEditFormControlObj]


tryit_view55f4.html

[TCheckBoxFormControlObj]

The name of the checkbox is:


tryit_view583c.html


tryit_view58dd.html


tryit_view5967.html

[TComboFormControlObj]


tryit_view5a77.html

This is a paragraph with a border


tryit_view5b53.html

Email: [TEditFormControlObj]

The alt text for the text field is:


tryit_view5bb3.html

Insert a number into one of the input fields below:

[TEditFormControlObj] degrees Celsius

equals

[TEditFormControlObj] degrees Fahrenheit

Note that the Math.round() method is used, so that the result will be returned as an integer.


tryit_view5cb6.html


tryit_view5cc4.html

[TEditFormControlObj]


tryit_view5d87.html


tryit_view5d95.html

Explanation:

i equal to 0.

The loop will run

i will increase by 1 each time the loop runs.

While i is less than , or equal to, 5, the loop will continue to run.


tryit_view5f2c.html


tryit_view5f7d.html


tryit_view5f81.html


tryit_view5f8b.html


tryit_view6077.html

This example declares a variable, assigns a value to it, and then displays the variable.

Then the variable is displayed one more time, only this time as a heading.


tryit_view6130.html

[TComboFormControlObj]


tryit_view6188.html

Visit W3Schools.com


tryit_view61bc.html

[TEditFormControlObj] Stop interval


tryit_view61ca.html

· Coffee
· Tea
· Water
· Soda


tryit_view61df.html

The id of the area is:


tryit_view6253.html

[TComboFormControlObj]


tryit_view63ca.html

The alt text for the submit button is:


tryit_view6401.html

Click on this paragraph. An alert box will show which element triggered the event.


tryit_view646f.html

Click somewhere in the document. An alert box will tell if the event is a cancelable event.


tryit_view6474.html


tryit_view647c.html

Firstname | Lastname | Text
Peter | Griffin | Hello my name is Peter Griffin. I need a long text for this example. I need a long text for this example.


tryit_view64d9.html


tryit_view64e9.html

[TEditFormControlObj]

The id of the form containing the password field is:


tryit_view6702.html

Name: [TEditFormControlObj]


tryit_view674b.html

Access key for "Venus" is:


tryit_view6846.html

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL


tryit_view697c.html

100 | 200
300 | 400


tryit_view6bd1.html

Human: [TRadioButtonFormControlObj]

Animal: [TRadioButtonFormControlObj]

Gnome: [TRadioButtonFormControlObj]


tryit_view6c33.html


tryit_view6c73.html

This is an example paragraph


tryit_view6cdf.html

[TEditFormControlObj]

The alt text for the password field is:


tryit_view6ebc.html


tryit_view70ed.html


tryit_view724c.html


tryit_view7329.html

This example demonstrates the If statement.

If the time on your browser is less than 10, you will get a "Good morning" greeting.


tryit_view7337.html


tryit_view7389.html

Click me!

The form containing the button is:


tryit_view73ae.html

This is a Heading

Default z-index is 0. Z-index -1 has lower priority.


tryit_view73eb.html


tryit_view741f.html

Name: [TEditFormControlObj]


tryit_view749e.html

Venus coordinates:


tryit_view75e2.html

Name: [TEditFormControlObj]


tryit_view75f4.html

Row1 cell1 | Row1 cell2
Row2 cell1 | Row2 cell2
Row3 cell1 | Row3 cell2


tryit_view763d.html

This is a paragraph


tryit_view7661.html


tryit_view76d3.html

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.


tryit_view781c.html

[TEditFormControlObj]


tryit_view78d4.html

compman


tryit_view78fc.html

compman


tryit_view791f.html

This is a paragraph

This is a paragraph

This is a paragraph

This is a paragraph

This is a paragraph

This is a paragraph

This is a paragraph

This is a paragraph

This is a paragraph

This is a paragraph

This is a paragraph

This is a paragraph

This is a paragraph

This is a paragraph


tryit_view7936.html

This is an example paragraph


tryit_view799d.html

The domain name for this document is:


tryit_view79f1.html


tryit_view7a7f.html

This is a paragraph


tryit_view7ace.html

[TEditFormControlObj] [TEditFormControlObj] [TEditFormControlObj]


tryit_view7b98.html


tryit_view7c9b.html

This example demonstrates the If...Else statement.

If the time on your browser is less than 10, you will get a "Good morning" greeting. Otherwise you will get a "Good day" greeting.


tryit_view7d21.html

Visit W3Schools.com


tryit_view7d92.html


tryit_view7ed6.html

compman


tryit_view7fca.html

[TEditFormControlObj]


tryit_view807c.html

This is an example paragraph.


tryit_view8108.html

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.


tryit_view8151.html

Firstname | Lastname
Peter | Griffin


tryit_view8198.html

First name: [TEditFormControlObj]

Last name: [TEditFormControlObj]

Convert to upper case [TCheckBoxFormControlObj]


tryit_view81c1.html

[TComboFormControlObj]


tryit_view81d5.html

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.


tryit_view8228.html

Firstname | Lastname
Peter | Griffin


tryit_view8259.html

Click on Venus:


tryit_view826e.html

Select your favorite browser: [TComboFormControlObj]

Your favorite browser is: [TEditFormControlObj]


tryit_view8272.html


tryit_view82a1.html

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph


tryit_view82af.html

This is a paragraph


tryit_view82cb.html

This is a paragraph


tryit_view82d9.html

Male: [TRadioButtonFormControlObj]

Female: [TRadioButtonFormControlObj]

The alt text for the radio buttons are:


tryit_view8412.html

planets


tryit_view84a6.html

Firstname | Lastname
Peter | Griffin


tryit_view8527.html

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.


tryit_view8597.html

Name: [TEditFormControlObj]


tryit_view85ed.html


tryit_view8612.html


tryit_view87d3.html

[TEditFormControlObj]


tryit_view87e0.html

compman


tryit_view8965.html

Click somewhere in the document. An alert box will alert the x and y coordinates of the cursor, relative to the screen.


tryit_view8a12.html


tryit_view8a94.html

Click somewhere in the document. An alert box will tell you if you pressed the shift key or not.


tryit_view8ce0.html


tryit_view8cee.html

Visit W3Schools.com


tryit_view8e16.html

Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.


tryit_view9092.html

Select your favorite fruit: [TComboFormControlObj]


tryit_view9150.html

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL


tryit_view9169.html

Firstname | Lastname | City
Harry | Potter | NY
Peter | Griffin | Las Vegas


tryit_view91a5.html

Look at the text in the statusbar.


tryit_view91e0.html


tryit_view9227.html

Click on the button above. An alert box will be displayed after 5 seconds.


tryit_view9295.html

100 | 200
300 | 400


tryit_view9305.html

[TComboFormControlObj]


tryit_view933c.html

Firstname | Lastname | Text
Peter | Griffin | Hello my name is Peter Griffin. I need a long text for this example. I need a long text for this example.


tryit_view94f8.html

Explanation: The loop will break the current loop and continue with the next value when i=3.


tryit_view9527.html

This is a paragraph


tryit_view952c.html

Firstname | Lastname
Peter | Griffin


tryit_view9568.html


tryit_view958b.html

W3Schools.com


tryit_view959e.html

This is a header

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.


tryit_view95be.html

Select your favorite fruit: [TComboFormControlObj]


tryit_view95bf.html

This is a paragraph

This is a paragraph

This is a paragraph


tryit_view9652.html

Click on this paragraph. An alert box will show which element triggered the event.


tryit_view96a0.html


tryit_view9782.html


tryit_view98d4.html

[TComboFormControlObj]


tryit_view98f2.html

Firstname | Lastname
Peter | Griffin


tryit_view9968.html

[TCheckBoxFormControlObj]


tryit_view99a9.html


tryit_view9ad4.html


tryit_view9ae6.html

Select your favorite fruit: [TComboFormControlObj]


tryit_view9bd7.html


tryit_view9bf5.html

Email: [TEditFormControlObj]

Password: [TEditFormControlObj]


tryit_view9c53.html


tryit_view9c71.html

[TComboFormControlObj]


tryit_view9cc4.html

[TEditFormControlObj]

Click on the button above. The input field will tell you when two, four, and six seconds have passed.


tryit_view9cee.html

This is a paragraph


tryit_view9e4b.html

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph


tryit_view9e93.html

W3Schools.com


tryit_view9eec.html

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.


tryit_viewa03a.html

[TListBoxFormControlObj]

Before you click on the "Select multiple" button, try to select more than one option (by holding down the Shift or Ctrl key). Then click on the "Select multiple" button and try again.


tryit_viewa0a5.html

Email: [TEditFormControlObj]


tryit_viewa1d4.html

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.


tryit_viewa2b1.html

This is an example paragraph.


tryit_viewa39e.html

By pressing the button, a function will be called. The function will alert a message.


tryit_viewa39f.html

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.


tryit_viewa59d.html

[TRadioButtonFormControlObj]

The form containing the radio button is:


tryit_viewa6e9.html

logocss


tryit_viewa743.html


tryit_viewa794.html


tryit_viewa921.html


tryit_viewa9d4.html


tryit_viewaa3f.html

Firstname | Lastname
Peter | Griffin


tryit_viewaa68.html


tryit_viewaaa0.html

HTML DOM rev Property


tryit_viewaaa3.html

W3Schools.com (Use Alt + w to give focus to the link)

HTML DOM (Use Alt + d to give focus to the link)


tryit_viewaad7.html

[TEditFormControlObj]

[TEditFormControlObj]

[TEditFormControlObj]


tryit_viewab57.html


tryit_viewab64.html

[TEditFormControlObj]


tryit_viewacae.html

This is a paragraph


tryit_viewb007.html

This is a paragraph


tryit_viewb1a9.html

Alternate text for "Venus" is:


tryit_viewb1cc.html


tryit_viewb204.html

cell 1 | cell 2
cell 3 | cell 4


tryit_viewb2b7.html

The alt text for the button is:


tryit_viewb343.html


tryit_viewb36e.html


tryit_viewb372.html


tryit_viewb47e.html

This is a paragraph


tryit_viewb4c3.html


tryit_viewb548.html

This is a paragraph


tryit_viewb5eb.html

The name of the submit button is:


tryit_viewb666.html

Enter some text in the text fields below, and then press the "Reset" button to reset the form.

Name: [TEditFormControlObj]

Age: [TEditFormControlObj]


tryit_viewb6c4.html

Firstname | Lastname
Peter | Griffin


tryit_viewb94b.html

[TEditFormControlObj]

The id of the form containing the text field is:


tryit_viewba4a.html

The name of the hidden field is:


tryit_viewbb23.html

First cell | Second cell
Third cell | Fourth cell


tryit_viewbbaa.html

Look at the text in the statusbar.


tryit_viewbc89.html

Name: [TEditFormControlObj]

Password: [TEditFormControlObj]


tryit_viewbcf3.html


tryit_viewbd98.html


tryit_viewbd9c.html

The script in the body section calls a function.

The function returns a text.


tryit_viewbea2.html

This is a paragraph

This is a paragraph

This is a paragraph


tryit_viewbee6.html

W3Schools.com


tryit_viewbf9e.html

Firstname | Lastname
Peter | Griffin
Harry | Potter


tryit_viewbfe3.html

Select your favorite fruit: [TComboFormControlObj]


tryit_viewc141.html

Is the image a server-side image map?


tryit_viewc151.html

Mouse over this paragraph.


tryit_viewc28c.html


tryit_viewc4aa.html


tryit_viewc501.html


tryit_viewc5ae.html

[TEditFormControlObj]


tryit_viewc635.html

This example demonstrates the if..else if...else statement.


tryit_viewc7f1.html


tryit_viewc82e.html


tryit_viewc9f0.html

Shape of Venus area:


tryit_viewcbcf.html


tryit_viewcc59.html

[TRadioButtonFormControlObj]


tryit_viewcc99.html

Text: [TEditFormControlObj]


tryit_viewccc0.html


tryit_viewccdc.html

How would you like your coffee?

[TCheckBoxFormControlObj]With cream

[TCheckBoxFormControlObj]With sugar

[TEditFormControlObj]


tryit_viewcee2.html

[TEditFormControlObj]

The id of the text field is:


tryit_viewcf48.html

[TComboFormControlObj]

The id of the dropdown list is:


tryit_viewcf8a.html

[TCheckBoxFormControlObj]


tryit_viewd020.html

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph


tryit_viewd0b8.html


tryit_viewd140.html


tryit_viewd1c7.html

This is a paragraph


tryit_viewd200.html

When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it.


tryit_viewd2b4.html

Email: [TEditFormControlObj]

The name of the text field is:


tryit_viewd410.html

Text: [TEditFormControlObj]


tryit_viewd44c.html


tryit_viewd4f9.html


tryit_viewd651.html


tryit_viewd664.html


tryit_viewd6c4.html

[TCheckBoxFormControlObj]


tryit_viewd765.html


tryit_viewd7dc.html

Some example text


tryit_viewd7e8.html

Explanation:

This for loop starts with i=0.

As long as i is less than, or equal to 5, the loop will continue to run.

i will increase by 1 each time the loop runs.


tryit_viewd80b.html


tryit_viewd83f.html

[TComboFormControlObj]

The id of the form is:


tryit_viewd8b3.html

The value of the usemap attribute=


tryit_viewd8d6.html

First anchor

Second anchor

Third anchor

InnerHTML of the first anchor in this document:


tryit_viewd921.html

[TEditFormControlObj]

Click on the button above. The input field will count for ever, starting at 0.


tryit_viewd9a6.html

This is a paragraph


tryit_viewda4e.html

The id of the form containing the button is:


tryit_viewdafe.html

This is a paragraph


tryit_viewdb02.html

The id of the form containing the submit button is:


tryit_viewdb27.html

Click in the document. An alert box will alert the x and y coordinates of the mouse pointer.


tryit_viewdbae.html

compman


tryit_viewdbbd.html


tryit_viewdbe5.html

This is a header

Click on the header to alert its value


tryit_viewdcf6.html

[TEditFormControlObj]


tryit_viewdcf7.html

Name: [TEditFormControlObj]

Text: [TEditFormControlObj]


tryit_viewdd92.html

This is a paragraph

This is a paragraph

This is a paragraph


tryit_viewddde.html

Venus' protocol:


tryit_viewde0e.html


tryit_viewdeb8.html

The name of the reset button is:


tryit_viewded6.html

[TCheckBoxFormControlObj]


tryit_viewdf03.html


tryit_viewdf75.html

[TCheckBoxFormControlObj]


tryit_viewdfa3.html

The id of the form containing the hidden element is:


tryit_viewe0a2.html

Visit W3Schools.com


tryit_viewe111.html

[TEditFormControlObj]

The id of the password field is:


tryit_viewe2fb.html

The text on the button is:


tryit_viewe34b.html


tryit_viewe3c8.html

[TComboFormControlObj]


tryit_viewe3de.html


tryit_viewe3ef.html

Query string part of Venus' link-URL:


tryit_viewe43e.html

[TCheckBoxFormControlObj]

The form containing the checkbox is:


tryit_viewe4d3.html


tryit_viewe54f.html

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.


tryit_viewe671.html

Explanation:

i is equal to 0.

While i is less than , or equal to, 5, the loop will continue to run.

i will increase by 1 each time the loop runs.


tryit_viewe697.html

[TEditFormControlObj]


tryit_viewe6ee.html

Your name: [TEditFormControlObj]

Your car: [TEditFormControlObj]

To access an item in a collection you can either use the number or the name of the item:


tryit_viewe6f2.html


tryit_viewe7b2.html

Visit Microsoft

In this example we change the text and the URL of a hyperlink. We also change the target attribute. The target attribute is by default set to "_self", which means that the link will open in the same window. By setting the target attribute to "_blank", the link will open in a new window.


tryit_viewe7f0.html


tryit_viewe83c.html

This is a paragraph


tryit_viewe8ee.html

[TRadioButtonFormControlObj]

The name of the radio button is:


tryit_viewe8f0.html

This is an example paragraph.

This is also an example paragraph.


tryit_viewe92f.html


tryit_vieweb79.html

Fistname | Lastname
Peter | Griffin


tryit_vieweb7e.html

Select your favorite fruit: [TComboFormControlObj]


tryit_viewec7b.html


tryit_viewecca.html


tryit_vieweda2.html

The alt text for the reset button is:


tryit_viewee46.html


tryit_viewef51.html

[TEditFormControlObj]

AccessKey for password field is:


tryit_viewef5b.html

Click in the document. An alert box will alert the timestamp.


tryit_viewef5f.html

compman


tryit_viewefb5.html


tryit_viewf00d.html

[TEditFormControlObj]


tryit_viewf00e.html

Try navigating the links on this page by using your "tab" button on you keyboard

[TCheckBoxFormControlObj]

[TCheckBoxFormControlObj]

[TCheckBoxFormControlObj]


tryit_viewf038.html

The name of the button is:


tryit_viewf0e1.html

Show pop-up!


tryit_viewf140.html

This is an example paragraph

This is an example paragraph

This is an example paragraph

This is an example paragraph

This is an example paragraph

This is an example paragraph

This is an example paragraph

This is an example paragraph

This is an example paragraph

This is an example paragraph

This is an example paragraph

This is an example paragraph

This is an example paragraph

This is an example paragraph


tryit_viewf156.html

[TCheckBoxFormControlObj]

The id of the checkbox is:


tryit_viewf158.html

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph


tryit_viewf1e7.html

We have moved! The new URL is: http://www.w3schools.com

You will be redirected to the new address in five seconds. If you see this message for more than 5 seconds, please click on the link above.


tryit_viewf1fa.html

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph


tryit_viewf20d.html


tryit_viewf23e.html


tryit_viewf28c.html


tryit_viewf393.html

Name: [TEditFormControlObj]

Password: [TEditFormControlObj]

Select your favorite browser:

[TRadioButtonFormControlObj]Internet Explorer

[TRadioButtonFormControlObj]Firefox

(Use Alt + accesskey to give focus to the different form fields.)


tryit_viewf3ba.html


tryit_viewf46c.html

This JavaScript will generate a different greeting based on what day it is. Note that Sunday=0, Monday=1, Tuesday=2, etc.


tryit_viewf4dd.html

This is a paragraph


tryit_viewf5ab.html

This is a paragraph


tryit_viewf61a.html


tryit_viewf639.html

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph

An example paragraph


tryit_viewf655.html

Male: [TRadioButtonFormControlObj]

Female: [TRadioButtonFormControlObj]


tryit_viewf743.html


tryit_viewf744.html


tryit_viewf750.html

Click somewhere in the document. An alert box will alert the x and y coordinates of the cursor.


tryit_viewf85a.html


tryit_viewf8ba.html

Button 1

Button 2

Button 3


tryit_viewfa77.html


tryit_viewfac0.html

What's your favorite browser?

[TRadioButtonFormControlObj]Internet Explorer

[TRadioButtonFormControlObj]Firefox

[TRadioButtonFormControlObj]Netscape

[TRadioButtonFormControlObj]Opera

Your favorite browser is: [TEditFormControlObj]


tryit_viewfb26.html

1

2

3

Try navigating the links by using the "Tab" button on you keyboard before and after pushing the "Change TabIndex" button.


tryit_viewfb66.html

[TEditFormControlObj]


tryit_viewfc33.html

This script automatically jumps to the next field when a field's maxlength has been reached:

[TEditFormControlObj] [TEditFormControlObj] [TEditFormControlObj]


tryit_viewfcea.html

Firstname | Lastname
Peter | Griffin


tryit_viewfd0c.html


tryit_viewfe3e.html

Click in the document. An alert box will tell what type of event that was triggered.


tryit_viewfe7f.html

compman


tryit_viewff43.html

Name: [TEditFormControlObj]

Age: [TEditFormControlObj]


tryit_viewff7e.html


tryjs_breakout.html


venus.html


venus2.html

The top of the page

The bottom of the page


venus8285.html


JavaScript Reference

javascript5

This section contains a complete reference of all the built-in JavaScript objects, along with their methods and properties.

This section also contains an event reference and a reference of the top-level properties and functions that can be used on all of the built-in JavaScript objects.

A reference to all of the HTML DOM objects are listed in the menu to the left.

JavaScript String Object

The String object is used to manipulate a stored piece of text.

For a complete reference of the properties and methods that can be used with the String object, go to our String object reference.

The reference contains a brief description and examples of use for each property and method!

JavaScript Date Object

The JavaScript Date object is used to work with dates and times.

For a complete reference of the properties and methods that can be used with the Date object, go to our Date object reference.

The reference contains a brief description and examples of use for each property and method!

JavaScript Array Object

The JavaScript Array object is used to store a set of values in a single variable name.

For a complete reference of the properties and methods that can be used with the Array object, go to our Array object reference.

The reference contains a brief description and examples of use for each property and method!

JavaScript Boolean Object

The JavaScript Boolean object is an object wrapper for a Boolean value.

For a complete reference of the properties and methods that can be used with the Boolean object, go to our Boolean object reference.

The reference contains a brief description and examples of use for each property and method!

JavaScript Math Object

The JavaScript Math object allows you to perform common mathematical tasks. It includes several mathematical constants and functions.

For a complete reference of the properties and methods that can be used with the Math object, go to our Math object reference.

The reference contains a brief description and examples of use for each property and method!

JavaScript Top-level Properties and Functions

The top-level properties and functions that can be used on all of the built-in JavaScript objects.

For a complete reference of the properties and functions that can be used with all the JavaScript objects, go to our .

The reference contains a brief description and examples of use for each property and function!

JavaScript Events

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.

For a complete reference of all the event attributes, go to our Event reference.

The reference contains a brief description and examples of use for each event!

HTML DOM Objects

In addition to the built-in JavaScript objects, you can also access and manipulate all of the HTML DOM objects with JavaScript.

The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate HTML documents.

For a complete reference of all the DOM objects, go to our DOM reference.


JavaScript abs() Method

Definition and Usage

The abs() method returns the absolute value of a number.

Syntax

Math.abs(x)

Parameter | Description
x | Required. Must be a numeric value

Example

In this example get the absolute values of positive and negative numbers:

<script type="text/javascript">

document.write(Math.abs(7.25) + "<br />")

document.write(Math.abs(-7.25) + "<br />")

document.write(Math.abs(7.25-10))

</script>

The output of the code above will be:

7.25

7.25

2.75

Try-It-Yourself Demos

abs()

How to use abs() get the absolute values of numbers.


JavaScript acos() Method

Definition and Usage

The acos() method returns the arccosine of a number as a numeric value value between 0 and PI radians.

Syntax

Math.acos(x)

Parameter | Description
x | Required. Must be a numeric value in the range -1 to 1

Tips and Notes

Note: If the parameter x is outside the range -1 to 1, the browser will return NaN.

Note: -1 will return the value of PI.

Example

In this example we will get the arccosine of different numbers:

<script type="text/javascript">

document.write(Math.acos(0.64) + "<br />")

document.write(Math.acos(0) + "<br />")

document.write(Math.acos(-1) + "<br />")

document.write(Math.acos(1) + "<br />")

document.write(Math.acos(2))

</script>

The output of the code above will be:

0.8762980611683406

1.5707963267948965

3.141592653589793

0

NaN

Try-It-Yourself Demos

acos()

How to use acos() to get the arccosine of different numbers.


JavaScript anchor() Method

Definition and Usage

The anchor() method is used to create an HTML anchor.

Syntax

stringObject.anchor(anchorname)

Parameter | Description
anchorname | Required. Defines a name for the anchor

Example

In this example we will add an anchor to a text:

<script type="text/javascript">

var txt="Hello world!"

document.write(txt.anchor("myanchor"))

</script>

The code above could be written in plain HTML, like this:

<a name="myanchor">Hello world!</a>

Try-It-Yourself Demos

anchor()

How to use anchor() create an HTML anchor.


JavaScript asin() Method

Definition and Usage

The asin() method returns the arcsine of a number as a numeric value between

-PI/2 and PI/2 radians.

Syntax

Math.asin(x)

Parameter | Description
x | Required. Must be a numeric value in the range -1 to 1

Tips and Notes

Note: If the parameter x is outside the range -1 to 1, the browser will return NaN.

Note: 1 will return the value of PI/2.

Example

In this example we will get the arcsine of different numbers:

<script type="text/javascript">

document.write(Math.asin(0.64) + "<br />")

document.write(Math.asin(0) + "<br />")

document.write(Math.asin(-1) + "<br />")

document.write(Math.asin(1) + "<br />")

document.write(Math.asin(2))

</script>

The output of the code above will be:

0.6944982656265559

0

-1.5707963267948965

1.5707963267948965

NaN

Try-It-Yourself Demos

asin()

How to use asin() to get the arcsine of different numbers.


JavaScript atan() and atan2() Methods

Definition and Usage

The atan() method returns the arctangent of a number as a numeric value between -PI/2 and PI/2 radians.

The atan2() method returns the angle theta of an (x,y) point as a numeric value between -PI and PI radians.

Syntax

Math.atan(x)

Math.atan2(x,y)

Parameter | Description
x | Required. A number
y | Required. A number

Example 1 - atan()

The following example returns the arctangent of different numbers with the atan() method:

<script type="text/javascript">

document.write(Math.atan(0.50) + "<br />")

document.write(Math.atan(-0.50) + "<br />")

document.write(Math.atan(5) + "<br />")

document.write(Math.atan(10) + "<br />")

document.write(Math.atan(-5) + "<br />")

document.write(Math.atan(-10))

</script>

The output of the code above will be:

0.4636476090008061

-0.4636476090008061

1.373400766945016

1.4711276743037347

-1.373400766945016

-1.4711276743037347

Example 2 - atan2()

The following example returns the angle theta of different (x,y) points with the atan2() method:

<script type="text/javascript">

document.write(Math.atan2(0.50,0.50) + "<br />")

document.write(Math.atan2(-0.50,-0.50) + "<br />")

document.write(Math.atan2(5,5) + "<br />")

document.write(Math.atan2(10,20) + "<br />")

document.write(Math.atan2(-5,-5) + "<br />")

document.write(Math.atan2(-10,10))

</script>

The output of the code above will be:

0.7853981633974483

-2.356194490192345

0.7853981633974483

0.4636476090008061

-2.356194490192345

-0.7853981633974483

Try-It-Yourself Demos

atan()

How to use atan() to return the arctangent of different numbers.

How to use atan2() to return the angle theta of different (x,y) points.


JavaScript big() Method

Definition and Usage

The big() method is used to display a string in a big font.

Syntax

stringObject.big()

Example

In this example "Hello world!" will be displayed in a big font:

<script type="text/javascript">

var str="Hello world!"

document.write(str.big())

</script>

Try-It-Yourself Demos

big()

How to use big() to display a string in a big font.


JavaScript blink() Method

Definition and Usage

The blink() method is used to display a blinking string.

Syntax

stringObject.blink()

Tips and Notes

Note: This method does not work in Internet Explorer.

Example

In this example "Hello world!" will be displayed as blinking text:

<script type="text/javascript">

var str="Hello world!"

document.write(str.blink())

</script>

Try-It-Yourself Demos

blink()

How to use blink() to display blinking text.


JavaScript bold() Method

Definition and Usage

The bold() method is used to display a string in bold.

Syntax

stringObject.bold()

Example

In this example "Hello world!" will be displayed in bold:

<script type="text/javascript">

var str="Hello world!"

document.write(str.bold())

</script>

Try-It-Yourself Demos

bold()

How to use bold() to display a string in bold.


JavaScript ceil() Method

Definition and Usage

The ceil() method returns the value of a number rounded UPWARDS to the nearest integer.

Syntax

Math.ceil(x)

Parameter | Description
x | Required. A number

Example

In the following example we will use the ceil() method on different numbers:

<script type="text/javascript">

document.write(Math.ceil(0.60) + "<br />")

document.write(Math.ceil(0.40) + "<br />")

document.write(Math.ceil(5) + "<br />")

document.write(Math.ceil(5.1) + "<br />")

document.write(Math.ceil(-5.1) + "<br />")

document.write(Math.ceil(-5.9))

</script>

The output of the code above will be:

1

1

5

6

-5

-5

Try-It-Yourself Demos

ceil()

How to use ceil().


JavaScript charAt() Method

Definition and Usage

The charAt() method returns the character at a specified position.

Syntax

stringObject.charAt(index)

Parameter | Description
index | Required. A number representing a position in the string

Tips and Notes

Note: The first character in the string is at position 0.

Example

In the string "Hello world!", we will return the character at position 1:

<script type="text/javascript">

var str="Hello world!"

document.write(str.charAt(1))

</script>

The output of the code above will be:

e

Try-It-Yourself Demos

How to use charAt() to get certain characters out of a string.


JavaScript charCodeAt() Method

Definition and Usage

The charCodeAt() method returns the Unicode of the character at a specified position.

Syntax

stringObject.charCodeAt(index)

Parameter | Description
index | Required. A number representing a position in the string

Tips and Notes

Note: The first character in the string is at position 0.

Example

In the string "Hello world!", we will return the Unicode of the character at position 1:

<script type="text/javascript">

var str="Hello world!"

document.write(str.charCodeAt(1))

</script>

The output of the code above will be:

101

Try-It-Yourself Demos

charCodeAt()

How to use charCodeAt() to get the Unicode for certain characters out of a string.


JavaScript concat() Method

Definition and Usage

The concat() method is used to join two or more arrays.

This method does not change the existing arrays, it only returns a copy of the joined arrays.

Syntax

arrayObject.concat(arrayX,arrayX,......,arrayX)

Parameter | Description
arrayX | Required. One or more array objects to be joined to an array

Example 1

Here we create two arrays and show them as one using concat():

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "Jani"

arr[1] = "Tove"

arr[2] = "Hege"

var arr2 = new Array(3)

arr2[0] = "John"

arr2[1] = "Andy"

arr2[2] = "Wendy"

document.write(arr.concat(arr2))

</script>

The output of the code above will be:

Jani,Tove,Hege,John,Andy,Wendy

Example 2

Here we create three arrays and show them as one using concat():

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "Jani"

arr[1] = "Tove"

arr[2] = "Hege"

var arr2 = new Array(3)

arr2[0] = "John"

arr2[1] = "Andy"

arr2[2] = "Wendy"

var arr3 = new Array(2)

arr3[0] = "Stale"

arr3[1] = "Borge"

document.write(arr.concat(arr2,arr3))

</script>

The output of the code above will be:

Jani,Tove,Hege,John,Andy,Wendy,Stale,Borge

Try-It-Yourself Demos

How to join two arrays with the concat() method

How to join three arrays with the concat() method


JavaScript concat() Method

Definition and Usage

The concat() method is used to join two or more strings.

Syntax

stringObject.concat(stringX,stringX,...,stringX)

Parameter | Description
stringX | Required. One or more string objects to be joined to a string

Example

In the following example we will create two strings and show them as one using concat():

<script type="text/javascript">

var str1="Hello "

var str2="world!"

document.write(str1.concat(str2))

</script>

The output of the code above will be:

Hello world!

Try-It-Yourself Demos

concat()

How to use concat() to join two strings.


JavaScript constructor Property

Definition and Usage

The constructor property is a reference to the function that created an object.

Syntax

object.constructor

Example 1

In this example we will show how to use the constructor property:

<script type="text/javascript">

var test=new Array()

if (test.constructor==Array)

{document.write("This is an Array")}

if (test.constructor==Boolean)

{document.write("This is a Boolean")}

if (test.constructor==Date)

{document.write("This is a Date")}

if (test.constructor==String)

{document.write("This is a String")}

</script>

The output of the code above will be:

This is an Array

Example 2

In this example we will show how to use the constructor property:

<script type="text/javascript">

function employee(name,jobtitle,born)

{

this.name=name

this.jobtitle=jobtitle

this.born=born

}

var fred=new employee("Fred Flintstone","Caveman",1970)

document.write(fred.constructor)

</script>

The output of the code above will be:

function employee(name, jobtitle, born)

{this.name = name; this.jobtitle = jobtitle; this.born = born;}

Try-It-Yourself Demos

- example 1

In this example we will show how to use the constructor property.

constructor - example 2

In this example we will show how to use the constructor property.


JavaScript constructor Property

Definition and Usage

The constructor property is a reference to the function that created an object.

Syntax

object.constructor

Example 1

In this example we will show how to use the constructor property:

<script type="text/javascript">

var test=new Boolean()

if (test.constructor==Array)

{document.write("This is an Array")}

if (test.constructor==Boolean)

{document.write("This is a Boolean")}

if (test.constructor==Date)

{document.write("This is a Date")}

if (test.constructor==String)

{document.write("This is a String")}

</script>

The output of the code above will be:

This is a Boolean

Example 2

In this example we will show how to use the constructor property:

<script type="text/javascript">

function employee(name,jobtitle,born)

{

this.name=name

this.jobtitle=jobtitle

this.born=born

}

var fred=new employee("Fred Flintstone","Caveman",1970)

document.write(fred.constructor)

</script>

The output of the code above will be:

function employee(name, jobtitle, born)

{this.name = name; this.jobtitle = jobtitle; this.born = born;}

Try-It-Yourself Demos

constructor

In this example we will show how to use the constructor property.

constructor - example 2

In this example we will show how to use the constructor property.


JavaScript constructor Property

Definition and Usage

The constructor property is a reference to the function that created an object.

Syntax

object.constructor

Example 1

In this example we will show how to use the constructor property:

<script type="text/javascript">

var test=new Date()

if (test.constructor==Array)

{document.write("This is an Array")}

if (test.constructor==Boolean)

{document.write("This is a Boolean")}

if (test.constructor==Date)

{document.write("This is a Date")}

if (test.constructor==String)

{document.write("This is a String")}

</script>

The output of the code above will be:

This is a Date

Example 2

In this example we will show how to use the constructor property:

<script type="text/javascript">

function employee(name,jobtitle,born)

{

this.name=name

this.jobtitle=jobtitle

this.born=born

}

var fred=new employee("Fred Flintstone","Caveman",1970)

document.write(fred.constructor)

</script>

The output of the code above will be:

function employee(name, jobtitle, born)

{this.name = name; this.jobtitle = jobtitle; this.born = born;}

Try-It-Yourself Demos

constructor - example 1

In this example we will show how to use the constructor property.

constructor - example 2

In this example we will show how to use the constructor property.


JavaScript constructor Property

Definition and Usage

The constructor property is a reference to the function that created an object.

Syntax

object.constructor

Example 1

In this example we will show how to use the constructor property:

<script type="text/javascript">

var test=new String()

if (test.constructor==Array)

{document.write("This is an Array")}

if (test.constructor==Boolean)

{document.write("This is a Boolean")}

if (test.constructor==Date)

{document.write("This is a Date")}

if (test.constructor==String)

{document.write("This is a String")}

</script>

The output of the code above will be:

This is a String

Example 2

In this example we will show how to use the constructor property:

<script type="text/javascript">

function employee(name,jobtitle,born)

{

this.name=name

this.jobtitle=jobtitle

this.born=born

}

var fred=new employee("Fred Flintstone","Caveman",1970)

document.write(fred.constructor)

</script>

The output of the code above will be:

function employee(name, jobtitle, born)

{this.name = name; this.jobtitle = jobtitle; this.born = born;}

Try-It-Yourself Demos

constructor - example 1

In this example we will show how to use the constructor property.

constructor - example 2

In this example we will show how to use the constructor property.


JavaScript cos() Method

Definition and Usage

The cos() method returns the cosine of a number.

Syntax

Math.cos(x)

Parameter | Description
x | Required. A number

Tips and Notes

Note: The cos() method returns a numeric value between -1 and 1, which represents the cosine of the angle.

Example

In the following example we will return the cosine of different numbers:

<script type="text/javascript">

document.write(Math.cos(3) + "<br />")

document.write(Math.cos(-3) + "<br />")

document.write(Math.cos(0) + "<br />")

document.write(Math.cos(Math.PI) + "<br />")

document.write(Math.cos(2*Math.PI))

</script>

The output of the code above will be:

-0.9899924966004454

-0.9899924966004454

1

-1

1

Try-It-Yourself Demos

How to use cos() to get the cosine of some numbers.


JavaScript Date() Method

Definition and Usage

The Date() method returns today's date and time.

Syntax

Date()

Example

In this example we will print today's date and time:

<script type="text/javascript">

document.write(Date())

</script>

The output of the code above will be:

Try-It-Yourself Demos

Date()

How to use Date() to get today's date.


JavaScript decodeURIComponent() Function

Definition and Usage

The decodeURIComponent() function decodes a URI encoded with the encodeURIComponent() function.

Syntax

decodeURIComponent(URIstring)

Parameter | Description
URIstring | Required. The URI to be decoded

Example

In this example we use decodeURIComponent() to decode a URI after encoding it:

<script type="text/javascript">

var test1="http://www.w3schools.com/My first/"

document.write(encodeURIComponent(test1)+ "<br />")

document.write(decodeURIComponent(test1))

</script>

The output of the code above will be:

http%3A%2F%2Fwww.w3schools.com%2FMy%20first%2F

http://www.w3schools.com/My first/

Try-It-Yourself Demos

decodeURIComponent()

How to use decodeURIComponent() to decode a URI after encoding it.


JavaScript decodeURI() Function

Definition and Usage

The decodeURI() function decodes a URI encoded with the encodeURI() function.

Syntax

decodeURI(URIstring)

Parameter | Description
URIstring | Required. The URI to be decoded

Example

In this example we use decodeURI() to decode a URI after encoding it:

<script type="text/javascript">

var test1="http://www.w3schools.com/My first/"

document.write(encodeURI(test1)+ "<br />")

document.write(decodeURI(test1))

</script>

The output of the code above will be:

http://www.w3schools.com/My%20first/

http://www.w3schools.com/My first/

Try-It-Yourself Demos

decodeURI()

How to use decodeURI() to decode a URI after encoding it.


JavaScript encodeURIComponent() Function

Definition and Usage

The encodeURI() function encodes a string as a component of a URI.

Syntax

encodeURIComponent(URIstring)

Parameter | Description
URIstring | Required. The URI to be encoded

Tips and Notes

Tip: Use the decodeURIComponent() function to decode URIs encoded with encodeURIComponent().

Example

In this example we use encodeURIComponent() to encode URIs:

<script type="text/javascript">

document.write(encodeURIComponent("http://www.w3schools.com"))

document.write("<br />")

document.write(encodeURIComponent("http://www.w3schools.com/p 1/"))

document.write("<br />")

document.write(encodeURIComponent(",/?:@&=+$#"))

</script>

The output of the code above will be:

http%3A%2F%2Fwww.w3schools.com

http%3A%2F%2Fwww.w3schools.com%2Fp%201%2F

%2C%2F%3F%3A%40%26%3D%2B%24%23

Try-It-Yourself Demos

encodeURIComponent()

How to use encodeURIComponent() to encode different URIs.


JavaScript encodeURI() Function

Definition and Usage

The encodeURI() function encodes a string as a URI.

Syntax

encodeURI(URIstring)

Parameter | Description
URIstring | Required. The URI to be encoded

Tips and Notes

Note: The encodeURI() function encodes special characters, with the exception of:

, / ? : @ & = + $ #. Use the encodeURIComponent() function to encode these characters.

Tip: Use the decodeURI() function to decode URIs encoded with encodeURI().

Example

In this example we use encodeURI() to encode URIs:

<script type="text/javascript">

document.write(encodeURI("http://www.w3schools.com")+ "<br />")

document.write(encodeURI("http://www.w3schools.com/My first/"))

document.write(encodeURI(",/?:@&=+$#"))

</script>

The output of the code above will be:

http://www.w3schools.com

http://www.w3schools.com/My%20first/

,/?:@&=+$#

Try-It-Yourself Demos

encodeURI()

How to use encodeURI() to encode different URIs.


JavaScript escape() Function

Definition and Usage

The escape() function encodes a string, so it can be read on all computers.

Syntax

escape(string)

Parameter | Description
string | Required. The string to be encoded

Tips and Notes

Note: The escape() function encodes special characters, with the exception of:

* @ - _ + . /

Tip: Use the unescape() function to decode strings encoded with escape().

Note: The escape() and unescape() functions should not be used to encode or decode URIs. Use encodeURI() and decodeURI() functions instead!

Example

In this example we use escape() to encode strings:

<script type="text/javascript">

document.write(escape("Visit W3Schools!") + "<br />")

document.write(escape("?!=()#%&"))

</script>

The output of the code above will be:

Try-It-Yourself Demos

escape()

How to use escape() to encode different strings.


JavaScript eval() Function

Definition and Usage

The eval() function evaluates a string and executes it as if it was script code.

Syntax

eval(string)

Parameter | Description
string | Required. The string to be evaluated

Example

In this example we use eval() on some strings and see what it returns:

<script type="text/javascript">

eval("x=10;y=20;document.write(x*y)")

document.write("<br />")

document.write(eval("2+2"))

document.write("<br />")

var x=10

document.write(eval(x+17))

document.write("<br />")

</script>

The output of the code above will be:

200

4

27

Try-It-Yourself Demos

eval()

How to use eval().


JavaScript Event Reference

Events are normally used in combination with functions, and the function will not be executed before the event occurs!

Event Handlers

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 the attributes that can be inserted into HTML tags to define event actions.

FF: Firefox, N: Netscape, IE: Internet Explorer

Attribute | The event occurs when... | FF | N | IE
onabort | Loading of an image is interrupted | 1 | 3 | 4
onblur | An element loses focus | 1 | 2 | 3
onchange | The user changes the content of a field | 1 | 2 | 3
onclick | Mouse clicks an object | 1 | 2 | 3
ondblclick | Mouse double-clicks an object | 1 | 4 | 4
 | An error occurs when loading a document or an image | 1 | 3 | 4
 | An element gets focus | 1 | 2 | 3
onkeydown | A keyboard key is pressed | 1 | 4 | 3
 | A keyboard key is pressed or held down | 1 | 4 | 3
onkeyup | A keyboard key is released | 1 | 4 | 3
onload | A page or an image is finished loading | 1 | 2 | 3
onmousedown | A mouse button is pressed | 1 | 4 | 4
onmousemove | The mouse is moved | 1 | 6 | 3
onmouseout | The mouse is moved off an element | 1 | 4 | 4
onmouseover | The mouse is moved over an element | 1 | 2 | 3
onmouseup | A mouse button is released | 1 | 4 | 4
onreset | The reset button is clicked | 1 | 3 | 4
onresize | A window or frame is resized | 1 | 4 | 4
onselect | Text is selected | 1 | 2 | 3
onsubmit | The submit button is clicked | 1 | 2 | 3
onunload | The user exits the page | 1 | 2 | 3


JavaScript exp() Method

Definition and Usage

The exp() method returns the value of Ex, where E is Euler's constant (approximately 2.7183) and x is the number passed to it.

Syntax

Math.exp(x)

Parameter | Description
x | Required. A number

Tips and Notes

Tip: E is the Euler's constant, which is the base of natural logarithms (approximately 2.7183).

Example

In the following example we will use the exp() method on different numbers:

<script type="text/javascript">

document.write(Math.exp(1) + "<br />")

document.write(Math.exp(-1) + "<br />")

document.write(Math.exp(5) + "<br />")

document.write(Math.exp(10) + "<br />")

</script>

The output of the code above will be:

2.718281828459045

0.36787944117144233

148.4131591025766

22026.465794806718

Try-It-Yourself Demos

exp()

How to use exp().


JavaScript fixed() Method

Definition and Usage

The fixed() method is used to display a string as teletype text.

Syntax

stringObject.fixed()

Example

In this example "Hello world!" will be displayed as teletype text:

<script type="text/javascript">

var str="Hello world!"

document.write(str.fixed())

</script>

Try-It-Yourself Demos

fixed()

How to use fixed() to display a string as teletype text.


JavaScript floor() Method

Definition and Usage

The floor() method returns the value of a number rounded DOWNWARDS to the nearest integer.

Syntax

Math.floor(x)

Parameter | Description
x | Required. A number

Example

In this example we will use the floor() method on different numbers:

<script type="text/javascript">

document.write(Math.floor(0.60) + "<br />")

document.write(Math.floor(0.40) + "<br />")

document.write(Math.floor(5) + "<br />")

document.write(Math.floor(5.1) + "<br />")

document.write(Math.floor(-5.1) + "<br />")

document.write(Math.floor(-5.9))

</script>

The output of the code above will be:

0

0

5

5

-6

-6

Try-It-Yourself Demos

floor()

How to use floor().


JavaScript fontcolor() Method

Definition and Usage

The fontcolor() method is used to display a string in a specified color.

Syntax

stringObject.fontcolor(color)

Parameter | Description
color | Required. Specifies a font-color for the string. The value can be a color name (red), an RGB value (rgb(255,0,0)), or a hex number (#FF0000)

Example

In this example "Hello world!" will be displayed in red:

<script type="text/javascript">

var str="Hello world!"

document.write(str.fontcolor("Red"))

</script>

Try-It-Yourself Demos

fontcolor()

How to use fontcolor() to display a string in red.


JavaScript fontsize() Method

Definition and Usage

The fontsize() method is used to display a string in a specified size.

Syntax

stringObject.fontsize(size)

Parameter | Description
size | Required. A number that specifies the font size

Tips and Notes

Note: The size parameter must be a number from 1 to 7.

Example

In this example "Hello world!" will be displayed in a large font-size:

<script type="text/javascript">

var str="Hello world!"

document.write(str.fontsize(7))

</script>

Try-It-Yourself Demos

fontsize()

How to use fontsize() to display a string in a large font size.


JavaScript fromCharCode() Method

Definition and Usage

The fromCharCode() takes the specified Unicode values and returns a string.

Syntax

String.fromCharCode(numX,numX,...,numX)

Parameter | Description
numX | Required. One or more Unicode values

Tips and Notes

Note: This method is a static method of String - it is not used as a method of a String object that you have created. The syntax is always String.fromCharCode() and not myStringObject.fromCharCode().

Example

In this example we will write "HELLO" and "ABC" from Unicode:

<script type="text/javascript">

document.write(String.fromCharCode(72,69,76,76,79))

document.write("<br />")

document.write(String.fromCharCode(65,66,67))

</script>

The output of the code above will be:

HELLO

ABC

Try-It-Yourself Demos

fromCharCode()

How to use fromCharCode() to display a string from Unicode values.


JavaScript getDate() Method

Definition and Usage

The getDate() method returns the day of the month.

Syntax

dateObject.getDate()

Tips and Notes

Note: The value returned by getDate() is a number between 1 and 31.

Note: This method is always used in conjunction with a Date object.

Example

In this example we print the day of the current month:

<script type="text/javascript">

var d = new Date()

document.write(d.getDate())

</script>

The output of the code above will be:

Example 2

Here we define a variable with a specific date and then print the day of the month in the variable:

<script type="text/javascript">

var birthday = new Date("July 21, 1983 01:15:00")

document.write(birthday.getDate())

</script>

The output of the code above will be:

21

Try-It-Yourself Demos

getDate()

How to use getDate() to get the day of the current month.

Display the current date in different formats

How to use getDate(), getMonth(), and getFullYear() to display the current date in different formats.


JavaScript getDay() Method

Definition and Usage

The getDay() method returns a number that represents the day of the week.

Syntax

dateObject.getDay()

Tips and Notes

Note: The value returned by getDay() is a number between 0 and 6. Sunday is 0, Monday is 1 and so on.

Note: This method is always used in conjunction with a Date object.

Example

In this example we get the current day (as a number) of the week:

<script type="text/javascript">

var d=new Date()

document.write(d.getDay())

</script>

The output of the code above will be:

Example 2

Now we will create an array to get our example to write a weekday, and not just a number:

<script type="text/javascript">

var d=new Date()

var weekday=new Array(7)

weekday[0]="Sunday"

weekday[1]="Monday"

weekday[2]="Tuesday"

weekday[3]="Wednesday"

weekday[4]="Thursday"

weekday[5]="Friday"

weekday[6]="Saturday"

document.write("Today it is " + weekday[d.getDay()])

</script>

The output of the code above will be:

Try-It-Yourself Demos

getDay()

Use getDay() and an array to write a weekday, and not just a number.


JavaScript getFullYear() Method

Definition and Usage

The getFullYear() method returns a four-digit number that represents a year.

Syntax

dateObject.getFullYear()

Tips and Notes

Note: This method is always used in conjunction with a Date object.

Example

In this example we get the current year and print it:

<script type="text/javascript">

var d = new Date()

document.write(d.getFullYear())

</script>

The output of the code above will be:

Example 2

Here we will extract the year out of the specific date:

<script type="text/javascript">

var born = new Date("July 21, 1983 01:15:00")

document.write("I was born in " + born.getFullYear())

</script>

The output of the code above will be:

I was born in 1983

Try-It-Yourself Demos

Display the current date in different formats

How to use getDate(), getMonth(), and getFullYear() to display the current date in different formats.


JavaScript getHours() Method

Definition and Usage

The getHours() method returns the hour of a time.

Syntax

dateObject.getHours()

Tips and Notes

Note: The value returned by getHours() is a two digit number. However, the return value is not always two digits, if the value is less than 10 it only returns one digit.

Note: This method is always used in conjunction with a Date object.

Example

In this example we get the hour of the current time:

<script type="text/javascript">

var d = new Date()

document.write(d.getHours())

</script>

The output of the code above will be:

Example 2

Here we will extract the hour from the specific date and time:

<script type="text/javascript">

var born = new Date("July 21, 1983 01:15:00")

document.write(born.getHours())

</script>

The output of the code above will be:

1

Try-It-Yourself Demos

Display the current time

How to use getHours(), getMinutes(), and getSeconds() to display the current time.

Display the current time with a function that checks for numbers less than 10

How to use getHours(), getMinutes(), and getSeconds() to display the current time.


JavaScript getMilliseconds() Method

Definition and Usage

The getMilliseconds() method returns the milliseconds of a time.

Syntax

dateObject.getMilliseconds()

Tips and Notes

Note: The value returned by getMilliseconds() is a three digit number. However, the return value is not always three digits, if the value is less than 100 it only returns two digits, and if the value is less than 10 it only returns one digit.

Note: This method is always used in conjunction with a Date object.

Example

In this example we get the milliseconds of the current time:

<script type="text/javascript">

var d = new Date()

document.write(d.getMilliseconds())

</script>

The output of the code above will be:

Example 2

Here we will extract the milliseconds from the specific date and time:

<script type="text/javascript">

var born = new Date("July 21, 1983 01:15:00")

document.write(born.getMilliseconds())

</script>

The output of the code above will be:

0

Note: The code above will set the milliseconds to 0, since no milliseconds was defined in the date.

Try-It-Yourself Demos

getMilliseconds()

How to use getMilliseconds() to get the current milliseconds.

current time

How to use getHours(), getMinutes(), getSeconds(), and getMilliseconds() to display the current time.

Display the current time with a function that checks for numbers less than 100

How to use getHours(), getMinutes(), getSeconds(), and getMilliseconds() to display the current time.


JavaScript getMinutes() Method

Definition and Usage

The getMinutes() method returns the minutes of a time.

Syntax

dateObject.getMinutes()

Tips and Notes

Note: The value returned by getMinutes() is a two digit number. However, the return value is not always two digits, if the value is less than 10 it only returns one digit.

Note: This method is always used in conjunction with a Date object.

Example

In this example we get the minutes of the current time:

<script type="text/javascript">

var d = new Date()

document.write(d.getMinutes())

</script>

The output of the code above will be:

Example 2

Here we will extract the minutes from the specific date and time:

<script type="text/javascript">

var born = new Date("July 21, 1983 01:15:00")

document.write(born.getMinutes())

</script>

The output of the code above will be:

15

Try-It-Yourself Demos

Display the current time

How to use getHours(), getMinutes(), and getSeconds() to display the current time.

Display the current time with a function that checks for numbers less than 10

How to use getHours(), getMinutes(), and getSeconds() to display the current time.


JavaScript getMonth() Method

Definition and Usage

The getMonth() method returns the month, as a number.

Syntax

dateObject.getMonth()

Tips and Notes

Note: The value returned by getMonth() is a number between 0 and 11. January is 0, February is 1 and so on.

Note: This method is always used in conjunction with a Date object.

Example

In this example we get the current month and print it:

<script type="text/javascript">

var d=new Date()

document.write(d.getMonth())

</script>

The output of the code above will be:

Example 2

Now we will create an array to get our example to write the name of the month, and not just a number:

<script type="text/javascript">

var d=new Date()

var month=new Array(12)

month[0]="January"

month[1]="February"

month[2]="March"

month[3]="April"

month[4]="May"

month[5]="June"

month[6]="July"

month[7]="August"

month[8]="September"

month[9]="October"

month[10]="November"

month[11]="December"

document.write("The month is " + month[d.getMonth()])

</script>

The output of the code above will be:

Try-It-Yourself Demos

getMonth()

How to use getMonth() to get the name of the current month.

Display the current date in different formats

How to use getDate(), getMonth(), and getFullYear() to display the current date in different formats.


JavaScript getSeconds() Method

Definition and Usage

The getSeconds() method returns the seconds of a time.

Syntax

dateObject.getSeconds()

Tips and Notes

Note: The value returned by getSeconds() is a two digit number. However, the return value is not always two digits, if the value is less than 10 it only returns one digit.

Note: This method is always used in conjunction with a Date object.

Example

In this example we get the seconds of the current time:

<script type="text/javascript">

var d = new Date()

document.write(d.getSeconds())

</script>

The output of the code above will be:

Example 2

Here we will extract the seconds from the specific date and time:

<script type="text/javascript">

var Birthday = new Date("July 21, 1983 01:15:00")

document.write(Birthday.getSeconds())

</script>

The output of the code above will be:

0

Try-It-Yourself Demos

Display the current time

How to use getHours(), getMinutes(), and getSeconds() to display the current time.

Display the current time with a function that checks for numbers less than 10

How to use getHours(), getMinutes(), and getSeconds() to display the current time.


JavaScript getTime() Method

Definition and Usage

The getTime() method returns the number of milliseconds since midnight of January 1, 1970.

Syntax

dateObject.getTime()

Tips and Notes

Note: This method is always used in conjunction with a Date object.

Example

In this example we will get how many milliseconds since 1970/01/01 and print it:

<script type="text/javascript">

var d = new Date()

document.write(d.getTime() + " milliseconds since 1970/01/01")

</script>

The output of the code above will be:

Example 2

In the following example we will calculate the number of years since 1970/01/01:

<script type="text/javascript">

var minutes = 1000*60

var hours = minutes*60

var days = hours*24

var years = days*365

var d = new Date()

var t = d.getTime()

var y = t/years

document.write("It's been: " + y + " years since 1970/01/01!")

</script>

The output of the code above will be:

Try-It-Yourself Demos

getTime()

Use getTime() to calculate the years since 1970.


JavaScript getTimezoneOffset() Method

Definition and Usage

The getTimezoneOffset() method returns the difference in minutes between local time and Greenwich Mean Time (GMT).

Syntax

dateObject.getTimezoneOffset()

Tips and Notes

Note: The returned value of this method is not a constant, because of the practice of using Daylight Saving Time.

Note: This method is always used in conjunction with a Date object.

Example

In the following example we get the difference in minutes between local time and Greenwich Mean Time (GMT):

<script type="text/javascript">

var d = new Date()

document.write(d.getTimezoneOffset())

</script>

The output of the code above will be:

Example 2

Now we will convert the example above into GMT +/- hours:

<script type="text/javascript">

var d = new Date()

var gmtHours = d.getTimezoneOffset()/60

document.write("The local time zone is: GMT " + gmtHours)

</script>

The output of the code above will be:

The local time zone is: GMT -2

Try-It-Yourself Demos

getTimezoneOffset()

How to use getTimezoneOffset() to get the local time zone according to GMT.


JavaScript getUTCDate() Method

Definition and Usage

The getUTCDate() method returns the day of the month according to the Universal Coordinated Time (UTC).

Syntax

dateObject.getUTCDate()

Tips and Notes

Note: The value returned by getUTCDate() is a number between 1 and 31.

Note: This method is always used in conjunction with a Date object.

Tip: The Universal Coordinated Time (UTC) is the time set by the World Time Standard.

Example

In this example we print the current day of the month according to UTC:

<script type="text/javascript">

var d = new Date()

document.write(d.getUTCDate())

</script>

The output of the code above will be:

Example 2

Here we define a variable with a specific date and then print the day of the month in the variable, according to UTC:

<script type="text/javascript">

var birthday = new Date("July 21, 1983 01:15:00")

document.write(birthday.getUTCDate())

</script>

The output of the code above will be:

21

Try-It-Yourself Demos

getUTCDate()

How to use getUTCDate() to get the day of the month (according to UTC).

Display the

How to use getUTCDate(), getUTCMonth(), and getUTCFullYear() to display the UTC date in different formats.


JavaScript getUTCDay() Method

Definition and Usage

The getUTCDay() method returns a number that represents the day of the week according to the Universal Coordinated Time (UTC).

Syntax

dateObject.getUTCDay()

Tips and Notes

Note: The value returned by getUTCDay() is a number between 0 and 6. Sunday is 0, Monday is 1 and so on.

Note: This method is always used in conjunction with a Date object.

Tip: The Universal Coordinated Time (UTC) is the time set by the World Time Standard.

Example

In this example we get the current UTC day (as a number) of the week:

<script type="text/javascript">

var d=new Date()

document.write(d.getUTCDay())

</script>

The output of the code above will be:

Example 2

Now we will create an array to get our example above to write a weekday, and not just a number:

<script type="text/javascript">

var d=new Date()

var weekday=new Array(7)

weekday[0]="Sunday"

weekday[1]="Monday"

weekday[2]="Tuesday"

weekday[3]="Wednesday"

weekday[4]="Thursday"

weekday[5]="Friday"

weekday[6]="Saturday"

document.write("Today it is " + weekday[d.getUTCDay()])

</script>

The output of the code above will be:

Try-It-Yourself Demos

getUTCDay()

Use getUTCDay() and an array to write a weekday, and not just a number.


JavaScript getUTCFullYear() Method

Definition and Usage

The getUTCFullYear() method returns a four-digit number that represents a year according to the Universal Coordinated Time (UTC).

Syntax

dateObject.getUTCFullYear()

Tips and Notes

Note: This method is always used in conjunction with a Date object.

Tip: The Universal Coordinated Time (UTC) is the time set by the World Time Standard.

Example

In this example we get the current year and print it:

<script type="text/javascript">

var d = new Date()

document.write(d.getUTCFullYear())

</script>

The output of the code above will be:

Example 2

Here we will extract the year out of the specific date:

<script type="text/javascript">

var born = new Date("July 21, 1983 01:15:00")

document.write("I was born in " + born.getUTCFullYear())

</script>

The output of the code above will be:

I was born in 1983

Try-It-Yourself Demos

Display the UTC date in different formats

How to use getUTCDate(), getUTCMonth(), and getUTCFullYear() to display the UTC date in different formats.


JavaScript getUTCHours() Method

Definition and Usage

The getUTCHours() method returns the hour of a time according to the Universal Coordinated Time (UTC).

Syntax

dateObject.getUTCHours()

Tips and Notes

Note: The value returned by getUTCHours() is a two digit number. However, the return value is not always two digits, if the value is less than 10 it only returns one digit.

Note: This method is always used in conjunction with a Date object.

Tip: The Universal Coordinated Time (UTC) is the time set by the World Time Standard.

Example

In this example we get the UTC hour of the current time:

<script type="text/javascript">

var d = new Date()

document.write(d.getUTCHours())

</script>

The output of the code above will be:

Example 2

Here we will extract the UTC hour from the specific date and time:

<script type="text/javascript">

var born = new Date("July 21, 1983 01:15:00")

document.write(born.getUTCHours())

</script>

The output of the code above will be:

23

Try-It-Yourself Demos

Display

How to use getUTCHours(), getUTCMinutes(), and getUTCSeconds() to display the current UTC time.

Display the current UTC time with a function that checks for numbers less than 10

How to use getUTCHours(), getUTCMinutes(), and getUTCSeconds() to display the current time.


JavaScript getUTCMilliseconds() Method

Definition and Usage

The getUTCMilliseconds() method returns the milliseconds of a time according to the Universal Coordinated Time (UTC).

Syntax

dateObject.getUTCMilliseconds()

Tips and Notes

Note: The value returned by getUTCMilliseconds() is a three digit number. However, the return value is not always three digits, if the value is less than 100 it only returns two digits, and if the value is less than 10 it only returns one digit.

Note: This method is always used in conjunction with a Date object.

Tip: The Universal Coordinated Time (UTC) is the time set by the World Time Standard.

Example

In this example we get the UTC milliseconds of the current time:

<script type="text/javascript">

var d = new Date()

document.write(d.getUTCMilliseconds())

</script>

The output of the code above will be:

Example 2

Here we will extract the UTC milliseconds from the specific date and time:

<script type="text/javascript">

var born = new Date("July 21, 1983 01:15:00")

document.write(born.getUTCMilliseconds())

</script>

The output of the code above will be:

0

Note: The code above will set the milliseconds to 0, since no milliseconds was defined in the date.

Try-It-Yourself Demos

getUTCMilliseconds()

How to use getUTCMilliseconds() to get the current UTC milliseconds.

Display the current UTC time

How to use getUTCHours(), getUTCMinutes(), getUTCSeconds(), and getUTCMilliseconds() to display the current UTC time.

Display the current UTC time with a function that checks for numbers less than 100

How to use getUTCHours(), getUTCMinutes(), getUTCSeconds(), and getUTCMilliseconds() to display the current UTC time.


JavaScript getUTCMinutes() Method

Definition and Usage

The getUTCMinutes() method returns the minutes of a time according to the Universal Coordinated Time (UTC).

Syntax

dateObject.getUTCMinutes()

Tips and Notes

Note: The value returned by getUTCMinutes() is a two digit number. However, the return value is not always two digits, if the value is less than 10 it only returns one digit.

Note: This method is always used in conjunction with a Date object.

Tip: The Universal Coordinated Time (UTC) is the time set by the World Time Standard.

Example

In this example we get the UTC minutes of the current time:

<script type="text/javascript">

var d = new Date()

document.write(d.getUTCMinutes())

</script>

The output of the code above will be:

Example 2

Here we will extract the UTC minutes from the specific date and time:

<script type="text/javascript">

var born = new Date("July 21, 1983 01:15:00")

document.write(born.getUTCMinutes())

</script>

The output of the code above will be:

15

Try-It-Yourself Demos

Display the current UTC time

How to use getUTCHours(), getUTCMinutes(), and getUTCSeconds() to display the current UTC time.

Display the current UTC time with a function that checks for numbers less than 10

How to use getUTCHours(), getUTCMinutes(), and getUTCSeconds() to display the current time.


JavaScript getUTCMonth() Method

Definition and Usage

The getUTCMonth() method returns a number that represents a month according to the Universal Coordinated Time (UTC).

Syntax

dateObject.getUTCMonth()

Tips and Notes

Note: The value returned by getUTCMonth() is a number between 0 and 11. January is 0, February is 1 and so on.

Note: This method is always used in conjunction with a Date object.

Tip: The Universal Coordinated Time (UTC) is the time set by the World Time Standard.

Example

In this example we get the current month and print it:

<script type="text/javascript">

var d=new Date()

document.write(d.getUTCMonth())

</script>

The output of the code above will be:

Example 2

Now we will create an array to get our example to write the name of the month, and not just a number:

<script type="text/javascript">

var d=new Date()

var month=new Array(12)

month[0]="January"

month[1]="February"

month[2]="March"

month[3]="April"

month[4]="May"

month[5]="June"

month[6]="July"

month[7]="August"

month[8]="September"

month[9]="October"

month[10]="November"

month[11]="December"

document.write("The month is " + month[d.getUTCMonth()])

</script>

The output of the code above will be:

Try-It-Yourself Demos

How to use getUTCMonth() to get the name of the current month.

Display the UTC date in different formats

How to use getUTCDate(), getUTCMonth(), and getUTCFullYear() to display the UTC date in different formats.


JavaScript getUTCSeconds() Method

Definition and Usage

The getUTCSeconds() method returns the seconds of a time according to the Universal Coordinated Time (UTC).

Syntax

dateObject.getUTCSeconds()

Tips and Notes

Note: The value returned by getUTCSeconds() is a two digit number. However, the return value is not always two digits, if the value is less than 10 it only returns one digit.

Note: This method is always used in conjunction with a Date object.

Tip: The Universal Coordinated Time (UTC) is the time set by the World Time Standard.

Example

In this example we get the UTC seconds of the current time:

<script type="text/javascript">

var d = new Date()

document.write(d.getUTCSeconds())

</script>

The output of the code above will be:

Example 2

Here we will extract the UTC seconds from the specific date and time:

<script type="text/javascript">

var Birthday = new Date("July 21, 1983 01:15:00")

document.write(Birthday.getUTCSeconds())

</script>

The output of the code above will be:

0

Try-It-Yourself Demos

Display the current UTC time

How to use getUTCHours(), getUTCMinutes(), and getUTCSeconds() to display the current UTC time.

Display the current UTC time with a function that checks for numbers less than 10

How to use getUTCHours(), getUTCMinutes(), and getUTCSeconds() to display the current time.


JavaScript getYear() Method

Definition and Usage

The getYear() method returns the year, as a two-digit OR a four-digit number.

Syntax

dateObject.getYear()

Tips and Notes

Note: The value returned by getYear() is not always 4 numbers! For years between 1900 and 1999 the getYear() method returns only two digits. For years before 1900 and after 1999 it returns four digits!

Note: This method is always used in conjunction with a Date object.

Important: The getYear() method should no longer be used. Use the getFullYear() method instead!!

Example

In this example we get the current year and print it:

<script type="text/javascript">

var d = new Date()

document.write(d.getYear())

</script>

The output of the code above will be:

Example 2

Here we will extract the year out of the specific date:

<script type="text/javascript">

var born = new Date("July 21, 1983 01:15:00")

document.write("I was born in " + born.getYear())

</script>

The output of the code above will be:

I was born in 83

Try-It-Yourself Demos

getYear()

How to use getYear() to get the current year.


JavaScript indexOf() Method

Definition and Usage

The indexOf() method returns the position of the first occurrence of a specified string value in a string.

Syntax

stringObject.indexOf(searchvalue,fromindex)

Parameter | Description
searchvalue | Required. Specifies a string value to search for
fromindex | Optional. Specifies where to start the search

Tips and Notes

Note: The indexOf() method is case sensitive!

Note: This method returns -1 if the string value to search for never occurs.

Example

In this example we will do different searches within a "Hello world!" string:

<script type="text/javascript">

var str="Hello world!"

document.write(str.indexOf("Hello") + "<br />")

document.write(str.indexOf("World") + "<br />")

document.write(str.indexOf("world"))

</script>

The output of the code above will be:

0

-1

6

Try-It-Yourself Demos

indexOf()

How to use indexOf() to search within a string.


JavaScript Infinity Property

Definition and Usage

The Infinity property is a numeric value that represents positive or negative infinity.

Infinity is displayed when a number is higher than 1.7976931348623157E+10308, and -Infinity is displayed when a number is lower than -1.7976931348623157E+10308.

Syntax

Infinity

Tips and Notes

Note: Anything divided by Infinity is 0 and anything multiplied by Infinity is Infinity.

Example

In this example we will show what happens if a number exceeds the infinity limit:

<script type="text/javascript">

var t1=1.7976931348623157E+10308

document.write(t1)

document.write("<br />")

var t2=-1.7976931348623157E+10308

document.write(t2)

</script>

The output of the code above will be:

Infinity

-Infinity

Try-It-Yourself Demos

Infinity

What happens if a number exceeds the infinity limit?


JavaScript isNaN() Function

Definition and Usage

The isNaN() function is used to check if a value is not a number.

Syntax

isNaN(number)

Parameter | Description
number | Required. The value to be tested

Example

In this example we use isNaN() to check some values:

<script type="text/javascript">

document.write(isNaN(123)+ "<br />")

document.write(isNaN(-1.23)+ "<br />")

document.write(isNaN(5-2)+ "<br />")

document.write(isNaN(0)+ "<br />")

document.write(isNaN("Hello")+ "<br />")

document.write(isNaN("2005/12/12")+ "<br />")

</script>

The output of the code above will be:

false

false

false

false

true

true

Try-It-Yourself Demos

isNaN()

How to use isNaN().


JavaScript italics() method

Definition and Usage

The italics() method is used to display a string in italic.

Syntax

stringObject.italics()

Example

In this example "Hello world!" will be displayed in italic:

<script type="text/javascript">

var str="Hello world!"

document.write(str.italics())

</script>

Try-It-Yourself Demos

italics()

How to use italics() to display a string in italic.


JavaScript join() Method

Definition and Usage

The join() method is used to put all the elements of an array into a string.

The elements will be separated by a specified separator.

Syntax

arrayObject.join(separator)

Parameter | Description
separator | Optional. Specifies the separator to be used

Tips and Notes

Note: Comma is the default separator for the join() method.

Example

In this example we will create an array, and then put all the elements in a string:

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "Jani"

arr[1] = "Hege"

arr[2] = "Stale"

document.write(arr.join() + "<br />")

document.write(arr.join("."))

</script>

The output of the code above will be:

Jani,Hege,Stale

Jani.Hege.Stale

Try-It-Yourself Demos

join()

How to use join() create a string from an array.


JavaScript lastIndexOf() Method

Definition and Usage

The lastIndexOf() method returns the position of the last occurrence of a specified string value, searching backwards from the specified position in a string.

Syntax

stringObject.lastIndexOf(searchvalue,fromindex)

Parameter | Description
search | Required. Specifies a string value to search for
fromindex | Optional. Specifies where to start the search. Starting backwards in the string

Tips and Notes

Note: The lastIndexOf() method is case sensitive!

Note: This method returns -1 if the string value to search for never occurs.

Example

In this example we will do different searches within a "Hello world!" string:

<script type="text/javascript">

var str="Hello world!"

document.write(str.lastIndexOf("Hello") + "<br />")

document.write(str.lastIndexOf("World") + "<br />")

document.write(str.lastIndexOf("world"))

</script>

The output of the code above will be:

0

-1

6

Try-It-Yourself Demos

lastIndexOf()

How to use lastIndexOf() to search within a string.


JavaScript length Property

Definition and Usage

The length property sets or returns the number of elements in an array.

Syntax

arrayObject.length

Example

In this example we will show how to use the length property to both return and set the length of an array:

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "John"

arr[1] = "Andy"

arr[2] = "Wendy"

document.write("Original length: " + arr.length)

document.write("<br />")

arr.length=5

document.write("New length: " + arr.length)

</script>

The output of the code above will be:

Original length: 3

New length: 5

Try-It-Yourself Demos

length

In this example we will show how to use the length property.


JavaScript length Property

Definition and Usage

The length property returns the number of characters in a string.

Syntax

stringObject.length

Example

In this example we will show how to use the length property to return the number of characters in a string:

<script type="text/javascript">

var txt="Hello World!"

document.write(txt.length)

</script>

The output of the code above will be:

12

Try-It-Yourself Demos

length

In this example we will show how to use the length property.


JavaScript link() Method

Definition and Usage

The link() method is used to display a string as a hyperlink.

Syntax

stringObject.link(url)

Parameter | Description
url | Required. Specifies the URL to link to

Example

In this example "Free Web Tutorials!" will be displayed as a hyperlink:

<script type="text/javascript">

var str="Free Web Tutorials!"

document.write(str.link("http://www.w3schools.com"))

</script>

Try-It-Yourself Demos

link()

How to use link() to display a string as a hyperlink.


JavaScript log() Method

Definition and Usage

The log() method returns the natural logarithm (base E) of a number.

Syntax

Math.log(x)

Parameter | Description
x | Required. A number

Tips and Notes

Note: If the parameter x is negative, NaN is returned.

Example

In the following example we will use the log() method on different numbers:

<script type="text/javascript">

document.write(Math.log(2.7183) + "<br />")

document.write(Math.log(2) + "<br />")

document.write(Math.log(1) + "<br />")

document.write(Math.log(0) + "<br />")

document.write(Math.log(-1))

</script>

The output of the code above will be:

1.0000066849139877

0.6931471805599453

0

-Infinity

NaN

Try-It-Yourself Demos

log()

How to use log().


JavaScript match() Method

Definition and Usage

The match() method searches for a specified value in a string.

This method is similar to indexOf() and lastIndexOf(), but it returns the specified value, instead of the position of the string.

Syntax

stringObject.match(searchvalue)

Parameter | Description
searchvalue | Required. Specifies a string value to search for

Tips and Notes

Note: The match() method is case sensitive!

Note: This method returns null if the string value to search for never occurs.

Example

In this example we will do different searches within a "Hello world!" string:

<script type="text/javascript">

var str="Hello world!"

document.write(str.match("world") + "<br />")

document.write(str.match("World") + "<br />")

document.write(str.match("worlld") + "<br />")

document.write(str.match("world!"))

</script>

The output of the code above will be:

world

null

null

world!

Try-It-Yourself Demos

match()

How to use match() to search within a string.


JavaScript max() Method

Definition and Usage

The max() method returns the number with the highest value of two specified numbers.

Syntax

Math.max(x,y)

Parameter | Description
x | Required. A number
y | Required. A number

Example

In this example we will show how to use max() to return the number with the highest value of two specified numbers:

<script type="text/javascript">

document.write(Math.max(5,7) + "<br />")

document.write(Math.max(-3,5) + "<br />")

document.write(Math.max(-3,-5) + "<br />")

document.write(Math.max(7.25,7.30))

</script>

The output of the code above will be:

7

5

-3

7.3

Try-It-Yourself Demos

max()

How to use max() to return the number with the highest value of two specified numbers.


JavaScript min() Method

Definition and Usage

The min() method returns the number with the lowest value of two specified numbers.

Syntax

Math.min(x,y)

Parameter | Description
x | Required. A number
y | Required. A number

Example

In this example we will show how to use min() to return the number with the lowest value of two specified numbers:

<script type="text/javascript">

document.write(Math.min(5,7) + "<br />")

document.write(Math.min(-3,5) + "<br />")

document.write(Math.min(-3,-5) + "<br />")

document.write(Math.min(7.25,7.30))

</script>

The output of the code above will be:

5

-3

-5

7.25

Try-It-Yourself Demos

min()

How to use min() to get the number with the lowest value of two specified numbers.


JavaScript NaN Property

Definition and Usage

The NaN property indicates that a value is "Not a Number".

Syntax

NaN

Tips and Notes

Tip: Use the isNan() function to test a value to see if it is NaN.

Example

In this example we will test two strings and find out if one of them is NaN:

<script type="text/javascript">

var test1="300"

var test2="Hello World!"

document.write(Number(test1)+ "<br />")

document.write(Number(test2)+ "<br />")

document.write(isNaN(test1)+ "<br />")

document.write(isNaN(test2))

</script>

The output of the code above will be:

Try-It-Yourself Demos

NaN

How to use NaN to evaluate a number.


JavaScript Number() Function

Definition and Usage

The Number() function converts the value of an object to a number.

Syntax

Number(object)

Parameter | Description
object | Required. A JavaScript object

Tips and Notes

Note: If the parameter is a Date object, the Number() function returns the number of milliseconds since midnight January 1, 1970 UTC.

Note: If the object's value cannot be converted to a number, the Number() function returns NaN.

Example

In this example we will try to convert different objects to numbers:

<script type="text/javascript">

var test1= new Boolean(true)

var test2= new Boolean(false)

var test3= new Date()

var test4= new String("999")

var test5= new String("999 888")

document.write(Number(test1)+ "<br />")

document.write(Number(test2)+ "<br />")

document.write(Number(test3)+ "<br />")

document.write(Number(test4)+ "<br />")

document.write(Number(test5)+ "<br />")

</script>

The output of the code above will be:

Try-It-Yourself Demos

Number()

How to use Number().


JavaScript Boolean Object Reference

Boolean Object Methods

FF: Firefox, N: Netscape, IE: Internet Explorer

Method | Description | FF | N | IE
toSource() | Represents the source code of an object | 1 | 4 | -
 | Converts a Boolean value to a string and returns the result | 1 | 4 | 4
valueOf() | Returns the primitive value of a Boolean object | 1 | 4 | 4

Boolean Object Properties

Property | Description | FF | N | IE
constructor | A reference to the function that created the object | 1 | 2 | 4
prototype | Allows you to add properties and methods to the object | 1 | 2 | 4


JavaScript Function Reference

The top-level properties and functions can be used on all of the built-in JavaScript objects.

Top-level Functions

FF: Firefox, N: Netscape, IE: Internet Explorer

Function | Description | FF | N | IE
decodeURI() | Decodes an encoded URI | 1 | 4 | 5.5
decodeURIComponent() | Decodes an encoded URI component | 1 | 4 | 5.5
 | Encodes a string as a URI | 1 | 4 | 5.5
 | Encodes a string as a URI component | 1 | 4 | 5.5
escape() | Encodes a string | 1 | - | 3
eval() | Evaluates a string and executes it as if it was script code | 1 | 2 | 3
isFinite() | Checks if a value is a finite number | 1 | 4 | 4
isNaN() | Checks if a value is not a number | 1 | 2 | 3
Number() | Converts an object's value to a number | 1 |  |
parseFloat() | Parses a string and returns a floating point number | 1 | 2 | 3
parseInt() | Parses a string and returns an integer | 1 | 2 | 3
String() | Converts an object's value to a string | 1 |  |
unescape() | Decodes a string encoded by escape() | 1 | - | 3

Top-level Properties

Property | Description | FF | N | IE
Infinity | A numeric value that represents positive or negative infinity | 1 | 4 | 4
NaN | Indicates that a value is "Not a Number" | 1 | 4 | 4
undefined | Indicates that a variable has not been assigned a value | 1 | 4 | 5.5


JavaScript Math Object Reference

Math Object Methods

FF: Firefox, N: Netscape, IE: Internet Explorer

Method | Description | FF | N | IE
abs(x) | Returns the absolute value of a number | 1 | 2 | 3
acos(x) | Returns the arccosine of a number | 1 | 2 | 3
asin(x) | Returns the arcsine of a number | 1 | 2 | 3
atan(x) | Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians | 1 | 2 | 3
atan2(y,x) | Returns the angle theta of an (x,y) point as a numeric value between -PI and PI radians | 1 | 2 | 3
ceil(x) | Returns the value of a number rounded upwards to the nearest integer | 1 | 2 | 3
cos(x) | Returns the cosine of a number | 1 | 2 | 3
exp(x) | Returns the value of Ex | 1 | 2 | 3
floor(x) | Returns the value of a number rounded downwards to the nearest integer | 1 | 2 | 3
log(x) | Returns the natural logarithm (base E) of a number | 1 | 2 | 3
max(x,y) | Returns the number with the highest value of x and y | 1 | 2 | 3
min(x,y) | Returns the number with the lowest value of x and y | 1 | 2 | 3
pow(x,y) | Returns the value of x to the power of y | 1 | 2 | 3
 | Returns a random number between 0 and 1 | 1 | 2 | 3
 | Rounds a number to the nearest integer | 1 | 2 | 3
sin(x) | Returns the sine of a number | 1 | 2 | 3
 | Returns the square root of a number | 1 | 2 | 3
tan(x) | Returns the tangent of an angle | 1 | 2 | 3
 | Represents the source code of an object | 1 | 4 | -
valueOf() | Returns the primitive value of a Math object | 1 | 2 | 4

Math Object Properties

Property | Description | FF | N | IE
constructor | A reference to the function that created the object | 1 | 2 | 4
E | Returns Euler's constant (approx. 2.718) | 1 | 2 | 3
LN2 | Returns the natural logarithm of 2 (approx. 0.693) | 1 | 2 | 3
LN10 | Returns the natural logarithm of 10 (approx. 2.302) | 1 | 2 | 3
LOG2E | Returns the base-2 logarithm of E (approx. 1.414) | 1 | 2 | 3
LOG10E | Returns the base-10 logarithm of E (approx. 0.434) | 1 | 2 | 3
PI | Returns PI (approx. 3.14159) | 1 | 2 | 3
 | Allows you to add properties and methods to the object | 1 | 2 | 4
SQRT1_2 | Returns the square root of 1/2 (approx. 0.707) | 1 | 2 | 3
SQRT2 | Returns the square root of 2 (approx. 1.414) | 1 | 2 | 3


JavaScript String Object Reference

String Object Methods

FF: Firefox, N: Netscape, IE: Internet Explorer

Method | Description | FF | N | IE
 | Creates an HTML anchor | 1 | 2 | 3
big() | Displays a string in a big font | 1 | 2 | 3
blink() | Displays a blinking string | 1 | 2 |
bold() | Displays a string in bold | 1 | 2 | 3
charAt() | Returns the character at a specified position | 1 | 2 | 3
charCodeAt() | Returns the Unicode of the character at a specified position | 1 | 4 | 4
concat() | Joins two or more strings | 1 | 4 | 4
fixed() | Displays a string as teletype text | 1 | 2 | 3
fontcolor() | Displays a string in a specified color | 1 | 2 | 3
 | Displays a string in a specified size | 1 | 2 | 3
fromCharCode() | Takes the specified Unicode values and returns a string | 1 | 4 | 4
 | Returns the position of the first occurrence of a specified string value in a string | 1 | 2 | 3
italics() | Displays a string in italic | 1 | 2 | 3
 | Returns the position of the last occurrence of a specified string value, searching backwards from the specified position in a string | 1 | 2 | 3
link() | Displays a string as a hyperlink | 1 | 2 | 3
match() | Searches for a specified value in a string | 1 | 4 | 4
replace() | Replaces some characters with some other characters in a string | 1 | 4 | 4
 | Searches a string for a specified value | 1 | 4 | 4
slice() | Extracts a part of a string and returns the extracted part in a new string | 1 | 4 | 4
small() | Displays a string in a small font | 1 | 2 | 3
split() | Splits a string into an array of strings | 1 | 4 | 4
strike() | Displays a string with a strikethrough | 1 | 2 | 3
sub() | Displays a string as subscript | 1 | 2 | 3
substr() | Extracts a specified number of characters in a string, from a start index | 1 | 4 | 4
substring() | Extracts the characters in a string between two specified indices | 1 | 2 | 3
sup() | Displays a string as superscript | 1 | 2 | 3
toLowerCase() | Displays a string in lowercase letters | 1 | 2 | 3
toUpperCase() | Displays a string in uppercase letters | 1 | 2 | 3
toSource() | Represents the source code of an object | 1 | 4 | -
 | Returns the primitive value of a String object | 1 | 2 | 4

String Object Properties

Property | Description | FF | N | IE
constructor | A reference to the function that created the object | 1 | 4 | 4
length | Returns the number of characters in a string | 1 | 2 | 3
prototype | Allows you to add properties and methods to the object | 1 | 2 | 4


JavaScript onabort Event

onabort Event

Definition and Usage

The onabort event occurs when loading of an image is aborted.

Syntax

onabort="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<img>

Supported by the following JavaScript objects:

image

Example 1

In this example an alert box will be displayed if the loading of the image is aborted:

<img src="image_w3default.gif"

onabort="alert('Error: Loading of the image was aborted')">

Example 2

In this example we will call a function if the loading of the image is aborted:

<html>

<head>

<script type="text/javascript">

function abortImage()

{

alert('Error: Loading of the image was aborted')

}

</script>

</head>

<body>

<img src="image_w3default.gif"

onabort="abortImage()">

</body>

</html>


JavaScript onblur Event

onblur Event

Definition and Usage

The onblur event occurs when an object loses focus.

Syntax

onblur="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

button, checkbox, fileUpload, layer, frame, password, radio, reset, submit, text, textarea, window

Example

In this example we will execute some JavaScript code when a user leaves an input field:

<html>

<head>

<script type="text/javascript">

function upperCase()

{

var x=document.getElementById("fname").value

document.getElementById("fname").value=x.toUpperCase()

}

</script>

</head>

<body>

Enter your name:

<input type="text" id="fname" onblur="upperCase()">

</body>

</html>

The output of the code above will be:

Enter your name: [TEditFormControlObj]

Try-It-Yourself Demos

onblur

How to use the onblur event to execute some JavaScript code when a user leaves an input field.


JavaScript onchange Event

Definition and Usage

The onchange event occurs when the content of a field changes.

Syntax

onchange="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<input type="text">, <select>, <textarea>

Supported by the following JavaScript objects:

fileUpload, select, text, textarea

Example

In this example we will execute some JavaScript code when a user changes the content of an input field:

<html>

<head>

<script type="text/javascript">

function upperCase(x)

{

var y=document.getElementById(x).value

document.getElementById(x).value=y.toUpperCase()

}

</script>

</head>

<body>

Enter your name:

<input type="text" id="fname"

onchange="upperCase(this.id)">

</body>

</html>

The output of the code above will be:

Enter your name: [TEditFormControlObj]

Try-It-Yourself Demos

onchange

How to use the onchange event to execute some JavaScript code when a user changes the content of an input field.


JavaScript onclick Event

Definition and Usage

The onclick event occurs when an object gets clicked.

Syntax

onclick="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

button, document, checkbox, link, radio, reset, submit

Example

In this example the text in the first input field will be copied to the second input field when a button is clicked:

<html>

<body>

Field1: <input type="text" id="field1" value="Hello World!">

<br />

Field2: <input type="text" id="field2">

<br /><br />

Click the button below to copy the content of Field1 to Field2.

<br />

<button onclick="document.getElementById('field2').value=

document.getElementById('field1').value">Copy Text</button>

</body>

</html>

The output of the code above will be:

Field1: [TEditFormControlObj]

Field2: [TEditFormControlObj]

Click the button below to copy the content of Field1 to Field2.

Copy Text

Try-It-Yourself Demos

How to use onclick.


JavaScript ondblclick Event

Definition and Usage

The ondblclick event occurs when an object gets double-clicked.

Syntax

ondblclick="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

document, link

Example

In this example the second field changes according to the first field when you double-click on the button:

<html>

<body>

Field1: <input type="text" id="field1" value="Hello World!">

<br />

Field2: <input type="text" id="field2">

<br /><br />

Click the button below to copy the content of Field1 to Field2.

<br />

<button ondblclick="document.getElementById('field2').value=

document.getElementById('field1').value">Copy Text</button>

</body>

</html>

The output of the code above will be:

Field1: [TEditFormControlObj]

Field2: [TEditFormControlObj]

Double-click the button below to copy the content of Field1 to Field2.

Copy Text

Try-It-Yourself Demos

ondblclick

How to use ondblclick.


JavaScript onerror Event

Definition and Usage

The onerror event is triggered when an error occurs loading a document or an image.

Syntax

onerror="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<img>, <object>, <style>

Supported by the following JavaScript objects:

window, image

Example

In this example an alert box will be displayed if an error occurs when loading an image:

<img src="image.gif"

onerror="alert('The image could not be loaded.')">

Try-It-Yourself Demos

onerror

How to use onerror.


JavaScript onfocus Event

Definition and Usage

The onfocus event occurs when an object gets focus.

Syntax

onfocus="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

button, checkbox, fileUpload, layer, frame, password, radio, reset, select, submit, text, textarea, window

Example

In this example the background color of the input fields change when they get focus:

<html>

<head>

<script type="text/javascript">

function setStyle(x)

{

document.getElementById(x).style.background="yellow"

}

</script>

</head>

<body>

First name: <input type="text"

onfocus="setStyle(this.id)" id="fname">

<br />

Last name: <input type="text"

onfocus="setStyle(this.id)" id="lname">

</body>

</html>

The output of the code above will be:

First name: [TEditFormControlObj]

Last name: [TEditFormControlObj]

Try-It-Yourself Demos

How to use onfocus.


JavaScript onkeydown Event

Definition and Usage

The onkeydown event occurs when a keyboard key is pressed.

Syntax

onkeydown="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

document, image, link, textarea

Tips and Notes

Browser differences: Internet Explorer uses event.keyCode to retrieve the character that was pressed and Netscape/Firefox/Opera uses event.which.

Example

In this example the user cannot type numbers into the input field:

<html>

<body>

<script type="text/javascript">

function noNumbers(e)

{

var keynum

var keychar

var numcheck

if(window.event) // IE

{

keynum = e.keyCode

}

else if(e.which) // Netscape/Firefox/Opera

{

keynum = e.which

}

keychar = String.fromCharCode(keynum)

numcheck = /\d/

return !numcheck.test(keychar)

}

</script>

<form>

<input type="text" onkeydown="return noNumbers(event)" />

</form>

</html>

The output of the code above will be:

[TEditFormControlObj]

Try-It-Yourself Demos

onkeydown

How to use onkeydown.


JavaScript onkeypress Event

Definition and Usage

The onkeydown event occurs when a keyboard key is pressed or held down.

Syntax

onkeypress="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

document, image, link, textarea

Tips and Notes

Browser differences: Internet Explorer uses event.keyCode to retrieve the character that was pressed and Netscape/Firefox/Opera uses event.which.

Example

In this example the user cannot type numbers into the input field:

<html>

<body>

<script type="text/javascript">

function noNumbers(e)

{

var keynum

var keychar

var numcheck

if(window.event) // IE

{

keynum = e.keyCode

}

else if(e.which) // Netscape/Firefox/Opera

{

keynum = e.which

}

keychar = String.fromCharCode(keynum)

numcheck = /\d/

return !numcheck.test(keychar)

}

</script>

<form>

<input type="text" onkeypress="return noNumbers(event)" />

</form>

</html>

The output of the code above will be:

[TEditFormControlObj]

Try-It-Yourself Demos

onkeypress

How to use onkeypress.


JavaScript onKeyUp Event

Definition and Usage

The onkeyup event occurs when a keyboard key is released.

Syntax

onkeyup="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

document, image, link, textarea

Example

When typing letters in the input field in the following example, the letters will change to uppercase (one by one):

<html>

<head>

<script type="text/javascript">

function upperCase(x)

{

var y=document.getElementById(x).value

document.getElementById(x).value=y.toUpperCase()

}

</script>

</head>

<body>

Enter your name: <input type="text"

id="fname" onkeyup="upperCase(this.id)">

</body>

</html>

The output of the code above will be:

Enter your name: [TEditFormControlObj]

Try-It-Yourself Demos

onkeyup

How to use onkeyup.


JavaScript onload Event

Definition and Usage

The onload event occurs immediately after a page or an image is loaded.

Syntax

onload="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

Supported by the following JavaScript objects:

image, layer, window

Example

In this example the text "Page is loaded" will be displayed in the status bar:

<html>

<head>

<script type="text/javascript">

function load()

{

window.status="Page is loaded"

}

</script>

</head>

<body onload="load()">

</body>

</html>

Try-It-Yourself Demos

How to use onload to display a text in the status bar when the page is finished loading.


JavaScript onmousedown Event

Definition and Usage

The onmousedown event occurs when a mouse button is clicked.

Syntax

onmousedown="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

button, document, link

Example 1

In this example an alert box is displayed when clicking on the picture:

<img src="image_w3default.gif"

onmousedown="alert('You clicked the picture!')">

The output of the code above will be (click on the picture):

Example 2

In this example an alert box will alert the tag name of the element you clicked on:

<html>

<head>

<script type="text/javascript">

function whichElement(e)

{

var targ

if (!e) var e = window.event

if (e.target) targ = e.target

else if (e.srcElement) targ = e.srcElement

if (targ.nodeType == 3) // defeat Safari bug

targ = targ.parentNode

var tname

tname=targ.tagName

alert("You clicked on a " + tname + " element.")

}

</script>

</head>

<body onmousedown="whichElement(event)">

<h2>This is a header</h2>

<p>This is a paragraph</p>

<img border="0" src="ball16.gif" alt="Ball">

</body>

</html>

Try-It-Yourself Demos

onmousedown

How to use onmousedown to display an alert box when an image is clicked.

How to use onmousedown to alert the tag name of the element you clicked on.


JavaScript onmousemove Event

Definition and Usage

The onmousemove event occurs when the mouse pointer is moved.

Syntax

onmousemove="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

onmousemove is, by default, not an event of any object, because mouse movement happens very frequently.

Tips and Notes

Note: Each time a user moves the mouse one pixel, a mousemove event occurs. It takes system resources to process all mousemove events. Use this event carefully!

Example

In the following example we will display an alert box when the user moves the mouse pointer over the image:

<img src="image_w3default.gif" alt="W3Schools"

onmousemove="alert('Visit W3Schools!')" />

The output of the code above will be:

Try-It-Yourself Demos

onmousemove

How to use onmousemove.


JavaScript onmouseout Event

Definition and Usage

The onmouseout event occurs when the mouse pointer moves away from a specified object.

Syntax

onmouseout="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

layer, link

Example 1

In the following example we will display an alert box when the user moves the mouse pointer away from the image:

<img src="image_w3default.gif" alt="W3Schools"

onmouseout="alert('Visit W3Schools!')" />

The output of the code above will be:

Example 2

In the following example we will add an image that should act as a link button on a web page. We will then add an onMouseOver event and an onMouseOut event that will run two JavaScript functions that will change between two images:

<html>

<head>

<script type="text/javascript">

function mouseOver()

{

document.b1.src ="b_blue.gif"

}

function mouseOut()

{

document.b1.src ="b_pink.gif"

}

</script>

</head>

<body>

<a href="http://www.w3schools.com" target="_blank"

onmouseover="mouseOver()"

onmouseout="mouseOut()">

<img border="0" alt="Visit W3Schools!"

src="b_pink.gif" name="b1" /></a>

</body>

</html>

The output of the code above will be:

Try-It-Yourself Demos

onmouseout

How to use onmouseout.


JavaScript onmouseover Event

Definition and Usage

The onmouseover event occurs when the mouse pointer moves over a specified object.

Syntax

onmouseover="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

layer, link

Example 1

In the following example we will display an alert box when the user moves the mouse pointer over the image:

<img src="image_w3default.gif" alt="W3Schools"

onmouseover="alert('Visit W3Schools!')" />

The output of the code above will be:

Example 2

In the following example we will add an image that should act as a link button on a web page. We will then add an onMouseOver event and an onMouseOut event that will run two JavaScript functions that will change between two images:

<html>

<head>

<script type="text/javascript">

function mouseOver()

{

document.b1.src ="b_blue.gif"

}

function mouseOut()

{

document.b1.src ="b_pink.gif"

}

</script>

</head>

<body>

<a href="http://www.w3schools.com" target="_blank"

onmouseover="mouseOver()"

onmouseout="mouseOut()">

<img border="0" alt="Visit W3Schools!"

src="b_pink.gif" name="b1" /></a>

</body>

</html>

The output of the code above will be:

Try-It-Yourself Demos

onmouseover

How to use onmouseover.


JavaScript onmouseup Event

Definition and Usage

The onmouseup event occurs when a mouse button is released.

Syntax

onmouseup="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

button, document, link

Example 1

In this example an alert box is displayed when the mouse button is released after clicking the picture:

<img src="image_w3default.gif"

onmouseup="alert('You clicked the picture!')">

The output of the code above will be (click on the picture):

Example 2

In this example an alert box will alert the tag name of the element you clicked on:

<html>

<head>

<script type="text/javascript">

function whichElement(e)

{

var targ

if (!e) var e = window.event

if (e.target) targ = e.target

else if (e.srcElement) targ = e.srcElement

if (targ.nodeType == 3) // defeat Safari bug

targ = targ.parentNode

var tname

tname=targ.tagName

alert("You clicked on a " + tname + " element.")

}

</script>

</head>

<body onmouseup="whichElement(event)">

<h2>This is a header</h2>

<p>This is a paragraph</p>

<img border="0" src="ball16.gif" alt="Ball">

</body>

</html>

Try-It-Yourself Demos

onmouseup

How to use onmouseup to display an alert box when an image is clicked.

onmouseup 2

How to use onmouseup to alert the tag name of the element you clicked on.


JavaScript onreset Event

Definition and Usage

The onreset event occurs when the reset button in a form is clicked.

Syntax

onreset="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<form>

Supported by the following JavaScript objects:

form

Example

In this example the form changes back to the default values and displays an alert box when the reset button is clicked:

<form onreset="alert('The form will be reset')">

Firstname: <input type="text" name="fname" value="John" />

<br />

Lastname: <input type="text" name="lname" />

<br /><br />

<input type="reset" value="Reset">

</form>

The output of the code above will be:

Firstname: [TEditFormControlObj]

Lastname: [TEditFormControlObj]

Try-It-Yourself Demos

onreset

How to use onreset to display an alert when a reset event occurs.


JavaScript onresize Event

Definition and Usage

The onresize event occurs when a window or frame is resized.

Syntax

onresize="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<a>, <address>, <b>, <big>, <blockquote>, <body>, <button>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <textarea>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

window

Example

In this example an alert box will be displayed when a user tries to resize the window:

<body onresize="alert('You have changed the size of the window')">

</body>

Try-It-Yourself Demos

onresize

How to use onresize to display a alert box when a page is resized.


JavaScript onselect Event

The onselect event

Definition and Usage

The onselect event occurs when text is selected in a text or textarea field.

Syntax

onselect="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<input type="text">, <textarea>

Supported by the following JavaScript objects:

text, textarea

Example

In this example an alert box will be displayed if some of the text is selected:

<form>

Select text: <input type="text" value="Hello world!"

onselect="alert('You have selected some of the text.')">

<br /><br />

Select text: <textarea cols="20" rows="5"

onselect="alert('You have selected some of the text.')">

Hello world!</textarea>

</form>

The output of the code above will be:

Select text: [TEditFormControlObj]

Select text: [TTextAreaFormControlObj]

Try-It-Yourself Demos

onselect

How to use onselect.


JavaScript onsubmit Event

The onsubmit event

Definition and Usage

The onsubmit event occurs when the submit button in a form is clicked.

Syntax

onsubmit="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<form>

Supported by the following JavaScript objects:

form

Example

In this example an alert box displays when a submit box is used:

<form name="testform" action="jsref_onsubmit.asp"

onsubmit="alert('Hello ' + testform.fname.value +'!')">

What is your name?<br />

<input type="text" name="fname" />

<input type="submit" value="Submit" />

</form>

The output of the code above will be:

What is your name?

[TEditFormControlObj]

Try-It-Yourself Demos

How to use onsubmit.


JavaScript onunload Event

Definition and Usage

The onunload event occurs when a user exits a page.

Syntax

onunload="SomeJavaScriptCode"

Parameter | Description
SomeJavaScriptCode | Required. Specifies a JavaScript to be executed when the event occurs.

Supported by the following HTML tags:

<body>, <frameset>

Supported by the following JavaScript objects:

window

Example

In this example an alert box will be displayed when the page is closed:

<body onunload="alert('The onunload event was triggered')">

</body>

Try-It-Yourself Demos

onunload

How to use onunload.


JavaScript parse() Method

Definition and Usage

The parse() method takes a date string and returns the number of milliseconds since midnight of January 1, 1970.

Syntax

Date.parse(datestring)

Parameter | Description
datestring | Required. A string representing a date

Example

In this example we will get how many milliseconds there are from 1970/01/01 to 2005/07/08:

<script type="text/javascript">

var d = Date.parse("Jul 8, 2005")

document.write(d)

</script>

The output of the code above will be:

1120773600000

Example 2

Now we will convert the output from the example above into years:

<script type="text/javascript">

var minutes = 1000 * 60

var hours = minutes * 60

var days = hours * 24

var years = days * 365

var t = Date.parse("Jul 8, 2005")

var y = t/years

document.write("It's been: " + y + " years from 1970/01/01")

document.write(" to 2005/07/08!")

</script>

The output of the code above will be:

It's been: 35.53949771689498 years from 1970/01/01 to 2005/07/08!

Try-It-Yourself Demos

Use parse() to print the milliseconds from 1970/01/01 to a specified date.


JavaScript parseFloat() Function

Definition and Usage

The parseFloat() function parses a string and returns a floating point number.

This function determines if the first character in the specified string is a number. If it is, it parses the string until it reaches the end of the number, and returns the number as a number, not as a string.

Syntax

parseFloat(string)

Parameter | Description
string | Required. The string to be parsed

Tips and Notes

Note: Only the first number in the string is returned!

Note: Leading and trailing spaces are allowed.

Note: If the first character cannot be converted to a number, parseFloat() returns NaN.

Example

In this example we will use parseFloat() to parse different strings:

<script type="text/javascript">

document.write(parseFloat("10") + "<br />")

document.write(parseFloat("10.00") + "<br />")

document.write(parseFloat("10.33") + "<br />")

document.write(parseFloat("34 45 66") + "<br />")

document.write(parseFloat(" 60 ") + "<br />")

document.write(parseFloat("40 years") + "<br />")

document.write(parseFloat("He was 40") + "<br />")

</script>

The output of the code above will be:

10

10

10.33

34

60

40

NaN

Try-It-Yourself Demos

How to use parseFloat() to parse different strings.


JavaScript parseInt() Function

Definition and Usage

The parseInt() function parses a string and returns an integer.

The radix parameter is used to specify which numeral system to be used, for example, a radix of 16 (hexadecimal) indicates that the number in the string should be parsed from a hexadecimal number to a decimal number.

If the radix parameter is omitted, JavaScript assumes the following:

· If the string begins with "0x", the radix is 16 (hexadecimal)
· If the string begins with "0", the radix is 8 (octal). This feature is deprecated
· If the string begins with any other value, the radix is 10 (decimal)

Syntax

parseInt(string, radix)

Parameter | Description
string | Required. The string to be parsed
radix | Optional. A number (from 2 to 36) that represents the numeral system to be used

Tips and Notes

Note: Only the first number in the string is returned!

Note: Leading and trailing spaces are allowed.

Note: If the first character cannot be converted to a number, parseInt() returns NaN.

Example

In this example we will use parseInt() to parse different strings:

<script type="text/javascript">

document.write(parseInt("10") + "<br />")

document.write(parseInt("10.00") + "<br />")

document.write(parseInt("10.33") + "<br />")

document.write(parseInt("34 45 66") + "<br />")

document.write(parseInt(" 60 ") + "<br />")

document.write(parseInt("40 years") + "<br />")

document.write(parseInt("He was 40") + "<br />")

document.write("<br />")

document.write(parseInt("10")+ "<br />")

document.write(parseInt("10",10)+ "<br />")

document.write(parseInt("010")+ "<br />")

document.write(parseInt("10",8)+ "<br />")

document.write(parseInt("0x10")+ "<br />")

document.write(parseInt("10",16)+ "<br />")

</script>

The output of the code above will be:

10

10

10

34

60

40

NaN

10

10

8

8

16

16

Try-It-Yourself Demos

parseInt()

How to use parseInt() to parse different strings.


JavaScript pop() Method

Definition and Usage

The pop() method is used to remove and return the last element of an array.

Syntax

arrayObject.pop()

Tips and Notes

Note: This method changes the length of the array.

Tip: To remove and return the first element of an array, use the shift() method.

Example

In this example we will create an array, and then remove the last element of the array. Note that this will also change the length of the array:

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "Jani"

arr[1] = "Hege"

arr[2] = "Stale"

document.write(arr + "<br />")

document.write(arr.pop() + "<br />")

document.write(arr)

</script>

The output of the code above will be:

Jani,Hege,Stale

Stale

Jani,Hege

Try-It-Yourself Demos

How to use pop() to remove and return the last element of an array.


JavaScript pow() Method

Definition and Usage

The pow() method returns the value of x to the power of y (xy).

Syntax

Math.pow(x,y)

Parameter | Description
x | Required. A number
y | Required. A number

Example

In the following example we will use the pow() method on different number combinations:

<script type="text/javascript">

document.write(Math.pow(0,0) + "<br />")

document.write(Math.pow(0,1) + "<br />")

document.write(Math.pow(1,1) + "<br />")

document.write(Math.pow(1,10) + "<br />")

document.write(Math.pow(2,3) + "<br />")

document.write(Math.pow(-2,3) + "<br />")

document.write(Math.pow(2,4) + "<br />")

document.write(Math.pow(-2,4) + "<br />")

</script>

The output of the code above will be:

1

0

1

1

8

-8

16

16

Try-It-Yourself Demos

How to use pow().


JavaScript prototype Property

Definition and Usage

The prototype property allows you to add properties and methods to an object.

Syntax

object.prototype.name=value

Example 1

In this example we will show how to use the prototype property to add a property to an object:

<script type="text/javascript">

function employee(name,jobtitle,born)

{

this.name=name

this.jobtitle=jobtitle

this.born=born

}

var fred=new employee("Fred Flintstone","Caveman",1970)

employee.prototype.salary=null

fred.salary=20000

document.write(fred.salary)

</script>

The output of the code above will be:

20000

Try-It-Yourself Demos

prototype

In this example we will show how to use the prototype property.


JavaScript prototype Property

Definition and Usage

The prototype property allows you to add properties and methods to an object.

Syntax

object.prototype.name=value

Example 1

In this example we will show how to use the prototype property to add a property to an object:

<script type="text/javascript">

function employee(name,jobtitle,born)

{

this.name=name

this.jobtitle=jobtitle

this.born=born

}

var fred=new employee("Fred Flintstone","Caveman",1970)

employee.prototype.salary=null

fred.salary=20000

document.write(fred.salary)

</script>

The output of the code above will be:

20000

Try-It-Yourself Demos

In this example we will show how to use the prototype property.


JavaScript push() Method

Definition and Usage

The push() method adds one or more elements to the end of an array and returns the new length.

Syntax

arrayObject.push(newelement1,newelement2,....,newelementX)

Parameter | Description
newelement1 | Required. The first element to add to the array
newelement2 | Optional. The second element to add to the array
newelementX | Optional. Several elements may be added

Tips and Notes

Note: This method changes the length of the array.

Tip: To add one or more elements to the beginning of an array, use the unshift() method.

Example

In this example we will create an array, and then change the length of it by adding a element:

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "Jani"

arr[1] = "Hege"

arr[2] = "Stale"

document.write(arr + "<br />")

document.write(arr.push("Kai Jim") + "<br />")

document.write(arr)

</script>

The output of the code above will be:

Jani,Hege,Stale

4

Jani,Hege,Stale,Kai Jim

Try-It-Yourself Demos

push()

How to use push() to change the length of an array.


JavaScript random() Method

Definition and Usage

The random() method returns a random number between 0 and 1.

Syntax

Math.random()

Example

In this example we will get a random number between 0 and 1:

<script type="text/javascript">

document.write(Math.random())

</script>

The output of the code above can be:

Try-It-Yourself Demos

How to use random() to get a random number.


JavaScript replace() Method

Definition and Usage

The replace() method is used to replace some characters with some other characters in a string.

Syntax

stringObject.replace(findstring,newstring)

Parameter | Description
findstring | Required. Specifies a string value to find. To perform a global search add a 'g' flag to this parameter and to perform a case-insensitive search add an 'i' flag
newstring | Required. Specifies the string to replace the found value from findstring

Tips and Notes

Note: The replace() method is case sensitive.

Example 1 - Standard Replace

In the following example we will replace the word Microsoft with W3Schools:

<script type="text/javascript">

var str="Visit Microsoft!"

document.write(str.replace(/Microsoft/, "W3Schools"))

</script>

The output of the code above will be:

Visit W3Schools!

Note: In the following example the word Microsoft will not be replaced (because the replace() method is case sensitive):

<script type="text/javascript">

var str="Visit Microsoft!"

document.write(str.replace(/microsoft/, "W3Schools"))

</script>

The output of the code above will be:

Visit Microsoft!

Example 2 - Case-insensitive Search

In the following example we will perform a case-insensitive search, and the word Microsoft will be replaced:

<script type="text/javascript">

var str="Visit Microsoft!"

document.write(str.replace(/microsoft/i, "W3Schools"))

</script>

The output of the code above will be:

Visit W3Schools!

Example 3 - Global Search

In the following example we will perform a global match, and the word Microsoft will be replaced each time it is found:

<script type="text/javascript">

var str="Welcome to Microsoft! "

str=str + "We are proud to announce that Microsoft has "

str=str + "one of the largest Web Developers sites in the world."

document.write(str.replace(/Microsoft/g, "W3Schools"))

</script>

The output of the code above will be:

Welcome to W3Schools! We are proud to announce that W3Schools

has one of the largest Web Developers sites in the world.

Example 4 - Global and Case-insensitive Search

In the following example we will perform a global and case-insensitive match, and the word Microsoft will be replaced each time it is found, independent of upper and lower case characters:

<script type="text/javascript">

var str="Welcome to Microsoft! "

str=str + "We are proud to announce that Microsoft has "

str=str + "one of the largest Web Developers sites in the world."

document.write(str.replace(/microsoft/gi, "W3Schools"))

</script>

The output of the code above will be:

Welcome to W3Schools! We are proud to announce that W3Schools

has one of the largest Web Developers sites in the world.

Try-It-Yourself Demos

replace()

How to use replace() to replace some characters in a string.

replace()

How to use replace() with the 'i' flag to replace some characters in a string.

replace() Global search

How to use replace() with the 'g' flag to replace some characters in a string.


JavaScript reverse() Method

Definition and Usage

The reverse() method is used to reverse the order of the elements in an array.

Syntax

arrayObject.reverse()

Tips and Notes

Note: The reverse() method changes the original array.

Example

In this example we will create an array, and then reverse the order of it:

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "Jani"

arr[1] = "Hege"

arr[2] = "Stale"

document.write(arr + "<br />")

document.write(arr.reverse())

</script>

The output of the code above will be:

Jani,Hege,Stale

Stale,Hege,Jani

Try-It-Yourself Demos

How to reverse the order of the elements in an array.


JavaScript round() Method

Definition and Usage

The round() method rounds a number to the nearest integer.

Syntax

Math.round(x)

Parameter | Description
x | Required. A number

Example

In this example we will round different numbers with the round() method:

<script type="text/javascript">

document.write(Math.round(0.60) + "<br />")

document.write(Math.round(0.50) + "<br />")

document.write(Math.round(0.49) + "<br />")

document.write(Math.round(-4.40) + "<br />")

document.write(Math.round(-4.60))

</script>

The output of the code above will be:

1

1

0

-4

-5

Try-It-Yourself Demos

round()

How to use round().


JavaScript search() Method

Definition and Usage

The search() method is used to search a string for a specified value.

Syntax

stringObject.search(searchstring)

Parameter | Description
searchstring | Required. The value to search for in a string. To perform a case-insensitive search add an 'i' flag

Tips and Notes

Note: search() is case sensitive.

Note: The search() method returns the position of the specified value in the string. If no match was found it returns -1.

Example 1 - Standard Search

In the following example we will search for the word "W3Schools":

<script type="text/javascript">

var str="Visit W3Schools!"

document.write(str.search(/W3Schools/))

</script>

The output of the code above will be:

6

Note: In the following example the word "w3schools" will not be found (because the search() method is case sensitive):

<script type="text/javascript">

var str="Visit W3Schools!"

document.write(str.search(/w3schools/))

</script>

The output of the code above will be:

-1

Example 2 - Case-insensitive Search

In the following example we will perform a case-insensitive search:

<script type="text/javascript">

var str="Visit W3Schools!"

document.write(str.search(/w3schools/i))

</script>

The output of the code above will be:

6

Try-It-Yourself Demos

How to use search() to search a string for a specified value.

search() Case-insensitive search

How to use search() to search a string for a specified value.


JavaScript setDate() Method

Definition and Usage

The setDate() method is used to set the day of the month.

Syntax

dateObject.setDate(day)

Parameter | Description
day | Required. A numeric value (from 1 to 31) that represents a day in a month

Tips and Notes

Note: This method is always used in conjunction with a Date object.

Example

In this example we set the day of the current month to 15 with the setDate() method:

<script type="text/javascript">

var d = new Date()

d.setDate(15)

document.write(d)

</script>

The output of the code above will be:

Try-It-Yourself Demos

setDate()

How to use setDate() to set the day of the current month.


JavaScript setFullYear() Method

Definition and Usage

The setFullYear() method is used to set the year.

Syntax

dateObject.setFullYear(year,month,day)

Parameter | Description
year | Required. A four-digit value representing the year
month | Optional. A numeric value between 0 and 11 representing the month
day | Optional. A numeric value between 1 and 31 representing the date

Tips and Notes

Note: This method is always used in conjunction with a Date object.

Example

In this example we set the year to 1992 with the setFullYear() method:

<script type="text/javascript">

var d = new Date()

d.setFullYear(1992)

document.write(d)

</script>

The output of the code above will be:

Example 2

In this example we set the date to November 3, 1992 with the setFullYear() method:

<script type="text/javascript">

var d = new Date()

d.setFullYear(1992,10,3)

document.write(d)

</script>

The output of the code above will be:

Try-It-Yourself Demos

setFullYear()

How to use setFullYear() to set a year.

Use setFullYear() to set a specific date

How to use setFullYear() to set a specific date.


JavaScript setHours() Method

Definition and Usage

The setHours() method is used to set the hour of a specified time.

Syntax

dateObject.setHours(hour,min,sec,millisec)

Parameter | Description
hour | Required. A numeric value between 0 and 23 representing the hour
min | Optional. A numeric value between 0 and 59 representing the minutes
sec | Optional. A numeric value between 0 and 59 representing the seconds
millisec | Optional. A numeric value between 0 and 999 representing the milliseconds

Tips and Notes

Note: If one of the parameters above is specified with a one-digit number, JavaScript adds one or two leading zeros in the result.

Note: This method is always used in conjunction with a Date object.

Example

In this example we set the hour of the current time to 15, with the setHours() method:

<script type="text/javascript">

var d = new Date()

d.setHours(15)

document.write(d)

</script>

The output of the code above will be:

Example

In this example we set the time to 15:35:01, with the setHours() method:

<script type="text/javascript">

var d = new Date()

d.setHours(15,35,1)

document.write(d)

</script>

The output of the code above will be:

Try-It-Yourself Demos

How to use setHours() to set the time.


JavaScript setMilliseconds() Method

Definition and Usage

The setMilliseconds() method is used to set the milliseconds of a specified time.

Syntax

dateObject.setMilliseconds(millisec)

Parameter | Description
millisec | Required. A numeric value between 0 and 999 representing the milliseconds

Tips and Notes

Note: If the parameter above is specified with a one-digit or two-digit number, JavaScript adds one or two leading zeros in the result.

Note: This method is always used in conjunction with a Date object.

Example

In this example we set the milliseconds of the current time to 001, with the setMilliseconds() method:

<script type="text/javascript">

var d = new Date()

d.setMilliseconds(1)

document.write(d)

</script>

The output of the code above will be:

Try-It-Yourself Demos

setMilliseconds()

How to use setMilliseconds() to change the current milliseconds.


JavaScript setMinutes() Method

Definition and Usage

The setMinutes() method is used to set the minutes of a specified time.

Syntax

dateObject.setMinutes(min,sec,millisec)

Parameter | Description
min | Required. A numeric value between 0 and 59 representing the minutes
sec | Optional. A numeric value between 0 and 59 representing the seconds
millisec | Optional. A numeric value between 0 and 999 representing the milliseconds

Tips and Notes

Note: If one of the parameters above is specified with a one-digit number, JavaScript adds one or two leading zeros in the result.

Note: This method is always used in conjunction with a Date object.

Example

In this example we set the minutes of the current time to 01, with the setMinutes() method:

<script type="text/javascript">

var d = new Date()

d.setMinutes(1)

document.write(d)

</script>

The output of the code above will be:

Try-It-Yourself Demos

setMinutes()

How to use setMinutes() to set the minutes of the current time.


JavaScript setMonth() Method

Definition and Usage

The setMonth() method is used to set the month.

Syntax

dateObject.setMonth(month,day)

Parameter | Description
month | Required. A numeric value between 0 and 11 representing the month
day | Optional. A numeric value between 1 and 31 representing the day

Tips and Notes

Note: The value set by setMonth() is a number between 0 and 11. January is 0, February is 1 and so on.

Note: This method is always used in conjunction with a Date object.

Example

In this example we set the month to 0 (January) with the setMonth() method:

<script type="text/javascript">

var d=new Date()

d.setMonth(0)

document.write(d)

</script>

The output of the code above will be:

Example 2

In this example we set the month to 0 (January) and the day to 20 with the setMonth() method:

<script type="text/javascript">

var d=new Date()

d.setMonth(0,20)

document.write(d)

</script>

The output of the code above will be:

Try-It-Yourself Demos

setMonth()

How to use setMonth() to set the month.


JavaScript setSeconds() Method

Definition and Usage

The setSeconds() method is used to set the seconds of a specified time.

Syntax

dateObject.setSeconds(sec,millisec)

Parameter | Description
sec | Required. A numeric value between 0 and 59 representing the seconds
millisec | Optional. A numeric value between 0 and 999 representing the milliseconds

Tips and Notes

Note: If one of the parameters above is specified with a one-digit number, JavaScript adds one or two leading zeros in the result.

Note: This method is always used in conjunction with a Date object.

Example

In this example we set the seconds of the current time to 01, with the setSeconds() method:

<script type="text/javascript">

var d = new Date()

d.setSeconds(1)

document.write(d)

</script>

The output of the code above will be:

Try-It-Yourself Demos

setSeconds()

How to use setSeconds() to set the seconds of the current time.


JavaScript setTime() Method

Definition and Usage

The setTime() method is used to calculate a date and time by adding or subtracting a specified number of milliseconds to/from midnight January 1, 1970.

Syntax

dateObject.setTime(millisec)

Parameter | Description
millisec | Required. A numeric value representing the milliseconds since midnight January 1, 1970. Can be a negative number

Tips and Notes

Note: This method is always used in conjunction with a Date object.

Example

In this example we will add 77771564221 milliseconds to 1970/01/01 and display the new date and time:

<script type="text/javascript">

var d = new Date()

d.setTime(77771564221)

document.write(d)

</script>

The output of the code above will be:

Mon Jun 19 05:12:44 UTC+0200 1972

Example

In this example we will subtract 77771564221 milliseconds from 1970/01/01 and display the new date and time:

<script type="text/javascript">

var d = new Date()

d.setTime(-77771564221)

document.write(d)

</script>

The output of the code above will be:

Sat Jul 15 22:47:15 UTC+0200 1967

Try-It-Yourself Demos

setTime()

Use setTime() to add milliseconds to 1970/01/01 and display the new date and time.


JavaScript setUTCDate() Method

Definition and Usage

The setUTCDate() method is used to set the day of the month according to Universal Coordinated Time (UTC).

Syntax

dateObject.setUTCDate(day)

Parameter | Description
day | Required. A numeric value (from 1 to 31) that represents a day in a month

Tips and Notes

Note: This method is always used in conjunction with a Date object.

Tip: The Universal Coordinated Time (UTC) is the time set by the World Time Standard.

Example

In this example we set the day of the current month to 15 with the setUTCDate() method:

<script type="text/javascript">

var d = new Date()

d.setUTCDate(15)

document.write(d)

</script>

The output of the code above will be:

Try-It-Yourself Demos

setUTCDate()

How to use setUTCDate() to set the day of the current month.


JavaScript setUTCFullYear() Method

Definition and Usage

The setUTCFullYear() method is used to set the year according to Universal Coordinated Time (UTC).

Syntax

dateObject.setUTCFullYear(year,month,day)

Parameter | Description
year | Required. A four-digit value representing the year
month | Optional. A numeric value between 0 and 11 representing the month
day | Optional. A numeric value between 1 and 31 representing the date

Tips and Notes

Note: This method is always used in conjunction with a Date object.

Tip: The Universal Coordinated Time (UTC) is the time set by the World Time Standard.

Example

In this example we set the year to 1992 with the setUTCFullYear() method:

<script type="text/javascript">

var d = new Date()

d.setUTCFullYear(1992)

document.write(d)

</script>

The output of the code above will be:

Example 2

In this example we set the date to November 3, 1992 with the setUTCFullYear() method:

<script type="text/javascript">

var d = new Date()

d.setUTCFullYear(1992,10,3)

document.write(d)

</script>

The output of the code above will be:

Try-It-Yourself Demos

setUTCFullYear()

How to use setUTCFullYear() to set a year.


JavaScript setUTCHours() Method

Definition and Usage

The setUTCHours() method is used to set the hour of a specified time according to Universal Coordinated Time (UTC).

Syntax

dateObject.setUTCHours(hour,min,sec,millisec)

Parameter | Description
hour | Required. A numeric value between 0 and 23 representing the hour
min | Optional. A numeric value between 0 and 59 representing the minutes
sec | Optional. A numeric value between 0 and 59 representing the seconds
millisec | Optional. A numeric value between 0 and 999 representing the milliseconds

Tips and Notes

Note: If one of the parameters above is specified with a one-digit number, JavaScript adds one or two leading zeros in the result.

Note: This method is always used in conjunction with a Date object.

Tip: The Universal Coordinated Time (UTC) is the time set by the World Time Standard.

Example

In this example we set the hour of the current time to 15, with the setUTCHours() method:

<script type="text/javascript">

var d = new Date()

d.setUTCHours(15)

document.write(d)

</script>

The output of the code above will be:

Example

In this example we set the time to 15:35:01, with the setUTCHours() method:

<script type="text/javascript">

var d = new Date()

d.setUTCHours(15,35,1)

document.write(d)

</script>

The output of the code above will be:

Try-It-Yourself Demos

setUTCHours()

How to use setUTCHours() to set the time.


JavaScript setUTCMilliseconds() Method

Definition and Usage

The setUTCMilliseconds() method is used to set the milliseconds of a specified time according to Universal Coordinated Time (UTC).

Syntax

dateObject.setUTCMilliseconds(millisec)

Parameter | Description
millisec | Required. A numeric value between 0 and 999 representing the milliseconds

Tips and Notes

Note: If the parameter above is specified with a one-digit or two-digit number, JavaScript adds one or two leading zeros in the result.

Note: This method is always used in conjunction with a Date object.

Tip: The Universal Coordinated Time (UTC) is the time set by the World Time Standard.

Example

In this example we set the milliseconds of the current time to 001, with the setUTCMilliseconds() method:

<script type="text/javascript">

var d = new Date()

d.setUTCMilliseconds(1)

document.write(d)

</script>

The output of the code above will be:

Try-It-Yourself Demos

How to use setUTCMilliseconds() to change the current milliseconds.


JavaScript setUTCMinutes() Method

Definition and Usage

The setUTCMinutes() method is used to set the minutes of a specified time according to Universal Coordinated Time (UTC).

Syntax

dateObject.setUTCMinutes(min,sec,millisec)

Parameter | Description
min | Required. A numeric value between 0 and 59 representing the minutes
sec | Optional. A numeric value between 0 and 59 representing the seconds
millisec | Optional. A numeric value between 0 and 999 representing the milliseconds

Tips and Notes

Note: If one of the parameters above is specified with a one-digit number, JavaScript adds one or two leading zeros in the result.

Note: This method is always used in conjunction with a Date object.

Tip: The Universal Coordinated Time (UTC) is the time set by the World Time Standard.

Example

In this example we set the minutes of the current time to 01, with the setUTCMinutes() method:

<script type="text/javascript">

var d = new Date()

d.setUTCMinutes(1)

document.write(d)

</script>

The output of the code above will be:

Try-It-Yourself Demos

setUTCMinutes()

How to use setUTCMinutes() to set the minutes of the current time.


JavaScript setUTCMonth() Method

Definition and Usage

The setUTCMonth() method is used to set the month according to Universal Coordinated Time (UTC).

Syntax

dateObject.setUTCMonth(month,day)

Parameter | Description
month | Required. A numeric value between 0 and 11 representing the month
dayn | Optional. A numeric value between 1 and 31 representing the day

Tips and Notes

Note: The value set by setUTCMonth() is a number between 0 and 11. January is 0, February is 1 and so on.

Tip: The Universal Coordinated Time (UTC) is the time set by the World Time Standard.

Example

In this example we set the month to 0 (January) with the setUTCMonth() method:

<script type="text/javascript">

var d=new Date()

d.setUTCMonth(0)

document.write(d)

</script>

The output of the code above will be:

Example 2

In this example we set the month to 0 (January) and the day to 20 with the setUTCMonth() method:

<script type="text/javascript">

var d=new Date()

d.setUTCMonth(0,20)

document.write(d)

</script>

The output of the code above will be:

Try-It-Yourself Demos

setUTCMonth()

How to use setUTCMonth() to set the month.


JavaScript setUTCSeconds() Method

Definition and Usage

The setUTCSeconds() method is used to set the seconds of a specified time according to Universal Coordinated Time (UTC).

Syntax

dateObject.setUTCSeconds(sec,millisec)

Parameter | Description
sec | Required. A numeric value between 0 and 59 representing the seconds
millisec | Optional. A numeric value between 0 and 999 representing the milliseconds

Tips and Notes

Note: If one of the parameters above is specified with a one-digit number, JavaScript adds one or two leading zeros in the result.

Note: This method is always used in conjunction with a Date object.

Tip: The Universal Coordinated Time (UTC) is the time set by the World Time Standard.

Example

In this example we set the seconds of the current time to 01, with the setUTCSeconds() method:

<script type="text/javascript">

var d = new Date()

d.setUTCSeconds(1)

document.write(d)

</script>

The output of the code above will be:

Try-It-Yourself Demos

How to use setUTCSeconds() to set the seconds of the current time.


JavaScript setYear() Method

Definition and Usage

The setYear() method is used to set the year.

Syntax

dateObject.setYear(year)

Parameter | Description
year | Required. A two or four digit number that indicates the year

Tips and Notes

Note: If the year parameter is a two-digit number, like setYear(91), it will be perceived as 1991. To specify a year before 1900 or after 1999, always use four digits!

Note: This method is always used in conjunction with a Date object.

Important: The setYear() method should no longer be used. Use the setFullYear() method instead!!

Example

In this example we set the year to 1891 with the setYear() method:

<script type="text/javascript">

var d = new Date()

d.setYear(1891)

document.write(d)

</script>

The output of the code above will be:

Try-It-Yourself Demos

setYear()

How to use setYear() to set the year.


JavaScript shift() Method

Definition and Usage

The shift() method is used to remove and return the first element of an array.

Syntax

arrayObject.shift()

Tips and Notes

Note: This method changes the length of the array.

Tip: To remove and return the last element of an array, use the pop() method.

Example

In this example we will create an array, and then remove the first element of the array. Note that this will also change the length of the array:

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "Jani"

arr[1] = "Hege"

arr[2] = "Stale"

document.write(arr + "<br />")

document.write(arr.shift() + "<br />")

document.write(arr)

</script>

The output of the code above will be:

Jani,Hege,Stale

Jani

Hege,Stale

Try-It-Yourself Demos

How to use shift() to remove and return the first element of an array.


JavaScript sin() Method

Definition and Usage

The sin() method returns the sine of a number.

Syntax

Math.sin(x)

Parameter | Description
x | Required. A number

Tips and Notes

Note: The sin() method returns a numeric value between -1 and 1, which represents the sine of the parameter x.

Example

In the following example we will return the sine of different numbers:

<script type="text/javascript">

document.write(Math.sin(3) + "<br />")

document.write(Math.sin(-3) + "<br />")

document.write(Math.sin(0) + "<br />")

document.write(Math.sin(Math.PI) + "<br />")

document.write(Math.sin(Math.PI/2))

</script>

The output of the code above will be:

0.1411200080598672

-0.1411200080598672

0

1.2246063538223772e-16

1

Try-It-Yourself Demos

sin()

How to use sin() to get the sine of some numbers.


JavaScript slice() Method

Definition and Usage

The slice() method returns selected elements from an existing array.

Syntax

arrayObject.slice(start,end)

Parameter | Description
start | Required. Specify where to start the selection. Must be a number
end | Optional. Specify where to end the selection. Must be a number

Tips and Notes

Tip: You can use negative numbers to select from the end of the array.

Note: If end is not specified, slice() selects all elements from the specified start position and to the end of the array.

Example

In this example we will create an array, and then display selected elements from it:

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "Jani"

arr[1] = "Hege"

arr[2] = "Stale"

document.write(arr + "<br />")

document.write(arr.slice(1) + "<br />")

document.write(arr)

</script>

The output of the code above will be:

Jani,Hege,Stale

Hege,Stale

Jani,Hege,Stale

Example

In this example we will create an array, and then display selected elements from it:

<script type="text/javascript">

var arr = new Array(6)

arr[0] = "Jani"

arr[1] = "Hege"

arr[2] = "Stale"

arr[3] = "Kai Jim"

arr[4] = "Borge"

arr[5] = "Tove"

document.write(arr + "<br />")

document.write(arr.slice(2,4) + "<br />")

document.write(arr)

</script>

The output of the code above will be:

Jani,Hege,Stale,Kai Jim,Borge,Tove

Stale,Kai Jim

Jani,Hege,Stale,Kai Jim,Borge,Tove

Try-It-Yourself Demos

slice()

How to use slice() to display selected elements from an existing array.


JavaScript slice() method

Definition and Usage

The slice() method extracts a part of a string and returns the extracted part in a new string.

Syntax

stringObject.slice(start,end)

Parameter | Description
start | Required. Specify where to start the selection. Must be a number
end | Optional. Specify where to end the selection. Must be a number

Tips and Notes

Tip: You can use negative index numbers to select from the end of the string.

Note: If end is not specified, slice() selects all characters from the specified start position and to the end of the string.

Example 1

In this example we will extract all characters from a string, starting at position 6:

<script type="text/javascript">

var str="Hello happy world!"

document.write(str.slice(6))

</script>

The output of the code above will be:

happy world!

Example 2

In this example we will extract all the characters from position 6 to position 11:

<script type="text/javascript">

var str="Hello happy world!"

document.write(str.slice(6,11))

</script>

The output of the code above will be:

happy

Try-It-Yourself Demos

slice()

How to use slice() to extract characters from a string.


JavaScript small() Method

Definition and Usage

The small() method is used to display a string in a small font.

Syntax

stringObject.small()

Example

In this example "Hello world!" will be displayed in a small font:

<script type="text/javascript">

var str="Hello world!"

document.write(str.small())

</script>

Try-It-Yourself Demos

small()

How to use small() to display a string in a small font.


JavaScript sort() Method

Definition and Usage

The sort() method is used to sort the elements of an array.

Syntax

arrayObject.sort(sortby)

Parameter | Description
sortby | Optional. Specifies the sort order. Must be a function

Tips and Notes

Note: The sort() method will sort the elements alphabetically by default. However, this means that numbers will not be sorted correctly (40 comes before 5). To sort numbers, you must create a function that compare numbers.

Note: After using the sort() method, the array is changed.

Example

In this example we will create an array and sort it alphabetically:

<script type="text/javascript">

var arr = new Array(6)

arr[0] = "Jani"

arr[1] = "Hege"

arr[2] = "Stale"

arr[3] = "Kai Jim"

arr[4] = "Borge"

arr[5] = "Tove"

document.write(arr + "<br />")

document.write(arr.sort())

</script>

The output of the code above will be:

Jani,Hege,Stale,Kai Jim,Borge,Tove

Borge,Hege,Jani,Kai Jim,Stale,Tove

Example

In this example we will create an array containing numbers and sort it:

<script type="text/javascript">

var arr = new Array(6)

arr[0] = "10"

arr[1] = "5"

arr[2] = "40"

arr[3] = "25"

arr[4] = "1000"

arr[5] = "1"

document.write(arr + "<br />")

document.write(arr.sort())

</script>

The output of the code above will be:

10,5,40,25,1000,1

1,10,1000,25,40,5

Note that the numbers above are NOT sorted correctly (by numeric value). To solve this problem, we must add a function that handles this problem:

<script type="text/javascript">

function sortNumber(a,b)

{

return a - b

}

var arr = new Array(6)

arr[0] = "10"

arr[1] = "5"

arr[2] = "40"

arr[3] = "25"

arr[4] = "1000"

arr[5] = "1"

document.write(arr + "<br />")

document.write(arr.sort(sortNumber))

</script>

The output of the code above will be:

10,5,40,25,1000,1

1,5,10,25,40,1000

Try-It-Yourself Demos

sort() alphabetically

How to use sort() to sort an array alphabetically.

sort() by number

How to use sort() to sort an array by number.


JavaScript splice() Method

Definition and Usage

The splice() method is used to remove and add new elements to an array.

Syntax

arrayObject.splice(index,howmany,element1,.....,elementX)

Parameter | Description
index | Required. Specify where to add/remove elements. Must be a number
howmany | Required Specify how many elements should be removed. Must be a number, but can be "0"
element1 | Optional. Specify a new element to add to the array
elementX | Optional. Several elements can be added

Example

In this example we will create an array and add an element to it:

<script type="text/javascript">

var arr = new Array(5)

arr[0] = "Jani"

arr[1] = "Hege"

arr[2] = "Stale"

arr[3] = "Kai Jim"

arr[4] = "Borge"

document.write(arr + "<br />")

arr.splice(2,0,"Lene")

document.write(arr + "<br />")

</script>

The output of the code above will be:

Jani,Hege,Stale,Kai Jim,Borge

Jani,Hege,Lene,Stale,Kai Jim,Borge

Example

In this example we will remove the element at index 2 ("Stale"), and add a new element ("Tove") there instead:

<script type="text/javascript">

var arr = new Array(5)

arr[0] = "Jani"

arr[1] = "Hege"

arr[2] = "Stale"

arr[3] = "Kai Jim"

arr[4] = "Borge"

document.write(arr + "<br />")

arr.splice(2,1,"Tove")

document.write(arr)

</script>

The output of the code above will be:

Jani,Hege,Stale,Kai Jim,Borge

Jani,Hege,Tove,Kai Jim,Borge

Example

In this example we will remove three elements starting at index 2 ("Stale"), and add a new element ("Tove") there instead:

<script type="text/javascript">

var arr = new Array(5)

arr[0] = "Jani"

arr[1] = "Hege"

arr[2] = "Stale"

arr[3] = "Kai Jim"

arr[4] = "Borge"

document.write(arr + "<br />")

arr.splice(2,3,"Tove")

document.write(arr)

</script>

The output of the code above will be:

Jani,Hege,Stale,Kai Jim,Borge

Jani,Hege,Tove

Try-It-Yourself Demos

How to use splice() to change an array.


JavaScript split() Method

Definition and Usage

The split() method is used to split a string into an array of strings.

Syntax

stringObject.split(separator, howmany)

Parameter | Description
separator | Required. Specifies the character, regular expression, or substring that is used to determine where to split the string
howmany | Optional. Specify how many times split should occur. Must be a numeric value

Tips and Notes

Note: If an empty string ("") is used as the separator, the string is split between each character.

Example

In this example we will split up a string in different ways:

<script type="text/javascript">

var str="How are you doing today?"

document.write(str.split(" ") + "<br />")

document.write(str.split("") + "<br />")

document.write(str.split(" ",3))

</script>

The output of the code above will be:

How,are,you,doing,today?

H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?

How,are,you

Try-It-Yourself Demos

How to use split() to split up a string.


JavaScript sqrt() Method

Definition and Usage

The sqrt() method returns the square root of a number.

Syntax

Math.sqrt(x)

Parameter | Description
x | Required. A number

Tips and Notes

Note: The sqrt() method will return NaN if the parameter x is a negative number.

Example

In this example we will get the square root of different numbers:

<script type="text/javascript">

document.write(Math.sqrt(0) + "<br />")

document.write(Math.sqrt(1) + "<br />")

document.write(Math.sqrt(9) + "<br />")

document.write(Math.sqrt(0.64) + "<br />")

document.write(Math.sqrt(-9))

</script>

The output of the code above will be:

0

1

3

0.8

NaN

Try-It-Yourself Demos

How to use sqrt() to get the square root of different numbers.


JavaScript strike() Method

Definition and Usage

The strike() method is used to display a string with a strikethrough.

Syntax

stringObject.strike()

Example

In this example "Hello world!" will be displayed with a line trough it:

<script type="text/javascript">

var str="Hello world!"

document.write(str.strike())

</script>

Try-It-Yourself Demos

strike()

How to use strike() to display a string with a strikethrough.


JavaScript String() Function

Definition and Usage

The String() function converts the value of an object to a string.

Syntax

String(object)

Parameter | Description
object | Required. A JavaScript object

Tips and Notes

Note: The String() function returns the same value as toString() of the individual objects.

Example

In this example we will try to convert different objects to strings:

<script type="text/javascript">

var test1= new Boolean(1)

var test2= new Boolean(0)

var test3= new Boolean(true)

var test4= new Boolean(false)

var test5= new Date()

var test6= new String("999 888")

var test7=12345

document.write(String(test1)+ "<br />")

document.write(String(test2)+ "<br />")

document.write(String(test3)+ "<br />")

document.write(String(test4)+ "<br />")

document.write(String(test5)+ "<br />")

document.write(String(test6)+ "<br />")

document.write(String(test7)+ "<br />")

</script>

The output of the code above will be:

Try-It-Yourself Demos

String()

How to use String() to convert different objects to strings.


JavaScript sub() Method

Definition and Usage

The sub() method is used to display a string as subscript.

Syntax

stringObject.sub()

Example

In this example "Hello world!" will be displayed in subscript:

<script type="text/javascript">

var str="Hello world!"

document.write(str.sub())

</script>

Try-It-Yourself Demos

sub()

How to use sub() to display a string in subscript.


JavaScript substr() Method

Definition and Usage

The substr() method extracts a specified number of characters in a string, from a start index.

Syntax

stringObject.substr(start,length)

Parameter | Description
start | Required.Where to start the extraction. Must be a numeric value
length | Optional. How many characters to extract. Must be a numeric value.

Tips and Notes

Note: To extract characters from the end of the string, use a negative start number.

Note: The start index starts at 0.

Note: If the length parameter is omitted, this method extracts to the end of the string.

Example

In this example we will use substr() to extract some characters from a string:

<script type="text/javascript">

var str="Hello world!"

document.write(str.substr(3))

</script>

The output of the code above will be:

lo world!

Example

In this example we will use substr() to extract some characters from a string:

<script type="text/javascript">

var str="Hello world!"

document.write(str.substr(3,7))

</script>

The output of the code above will be:

lo worl

Try-It-Yourself Demos

How to use substr() to extract some characters from a string.


JavaScript substring() Method

Definition and Usage

The substring() method extracts the characters in a string between two specified indices.

Syntax

stringObject.substring(start,stop)

Parameter | Description
start | Required. Where to start the extraction. Must be a numeric value
stop | Optional. Where to stop the extraction. Must be a numeric value

Tips and Notes

Note: To extract characters from the end of the string, use a negative start number.

Note: The start index starts at 0.

Note: If the stop parameter is omitted, this method extracts to the end of the string.

Example

In this example we will use substring() to extract some characters from a string:

<script type="text/javascript">

var str="Hello world!"

document.write(str.substring(3))

</script>

The output of the code above will be:

lo world!

Example

In this example we will use substring() to extract some characters from a string:

<script type="text/javascript">

var str="Hello world!"

document.write(str.substring(3,7))

</script>

The output of the code above will be:

lo w

Try-It-Yourself Demos

substring()

How to use substring() to extract some characters from a string.


JavaScript sup() Method

Definition and Usage

The sup() method is used to display a string as superscript.

Syntax

stringObject.sup()

Example

In this example "Hello world!" will be displayed in superscript:

<script type="text/javascript">

var str="Hello world!"

document.write(str.sup())

</script>

Try-It-Yourself Demos

sup()

How to use sup() to display a string in superscript.


JavaScript tan() Method

Definition and Usage

The tan() method returns a number that represents the tangent of an angle.

Syntax

Math.tan(x)

Parameter | Description
x | Required. A number

Example

In this example we will get the tangent of different numbers:

<script type="text/javascript">

document.write(Math.tan(0.50) + "<br />")

document.write(Math.tan(-0.50) + "<br />")

document.write(Math.tan(5) + "<br />")

document.write(Math.tan(10) + "<br />")

document.write(Math.tan(-5) + "<br />")

document.write(Math.tan(-10))

</script>

The output of the code above will be:

0.5463024898437905

-0.5463024898437905

-3.380515006246586

0.6483608274590866

3.380515006246586

-0.6483608274590866

Try-It-Yourself Demos

tan()

How to use tan() to get the tangent of different numbers.


JavaScript toGMTString() Method

Definition and Usage

The toGMTString() method converts a Date object, according to Greenwich Mean Time (GMT), to a string and returns the result.

Syntax

dateObject.toGMTString()

Tips and Notes

Note: This method should no longer be used! Use the toUTCString() method instead!!

Example

In the example below we will convert today's date (according to GMT) to a string:

<script type="text/javascript">

var d = new Date()

document.write (d.toGMTString())

</script>

The output of the code above will be:

Example 2

In the example below we will convert a specific date (according to GMT) to a string:

<script type="text/javascript">

var born = new Date("July 21, 1983 01:15:00")

document.write(born.toGMTString())

</script>

The output of the code above will be:

Try-It-Yourself Demos

toGMTString()

How to use toGMTString() to convert today's date (according to GMT) to a string.


JavaScript toLocaleString() Method

Definition and Usage

The toLocaleString() method converts a Date object, according to local time, to a string and returns the result.

Syntax

dateObject.toLocaleString()

Example

In the example below we will convert today's date (according to local time) to a string:

<script type="text/javascript">

var d = new Date()

document.write(d.toLocaleString())

</script>

The output of the code above will be:

Example 2

In the example below we will convert a specific date (according to local time) to a string:

<script type="text/javascript">

var born = new Date("July 21, 1983 01:15:00")

document.write(born.toLocaleString())

</script>

The output of the code above will be:

Try-It-Yourself Demos

toLocaleString()

How to use toLocaleString() to convert today's date (according to local time) to a string.


JavaScript toLowerCase() Method

Definition and Usage

The toLowerCase() method is used to display a string in lowercase letters.

Syntax

stringObject.toLowerCase()

Example

In this example "Hello world!" will be displayed in lower case letters:

<script type="text/javascript">

var str="Hello World!"

document.write(str.toLowerCase())

</script>

Try-It-Yourself Demos

toLowerCase()

How to use toLowerCase() to display a string in lower case letters.


JavaScript toSource() Method

Definition and Usage

The toSource() method represents the source code of an object.

Syntax

object.toSource()

Tips and Notes

Note: This method does not work in Internet Explorer!

Example

In this example we will show how to use the toSource() method:

<script type="text/javascript">

function employee(name,jobtitle,born)

{

this.name=name

this.jobtitle=jobtitle

this.born=born

}

var fred=new employee("Fred Flintstone","Caveman",1970)

document.write(fred.toSource())

</script>

The output of the code above will be:

({name:"Fred Flintstone", jobtitle:"Caveman", born:1970})

Try-It-Yourself Demos

toSource()

In this example we will show how to use the toSource() method.


JavaScript toString() Method

Definition and Usage

The toString() method converts an array to a string and returns the result.

Syntax

arrayObject.toString()

Tips and Notes

Note: The elements in the array will be separated with commas.

Example

In this example we will create an array and convert it to a string:

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "Jani"

arr[1] = "Hege"

arr[2] = "Stale"

document.write(arr.toString())

</script>

The output of the code above will be:

Jani,Hege,Stale

Try-It-Yourself Demos

toString()

How to use toString() to convert an array to a string.


JavaScript toString() Method

Definition and Usage

The toString() method converts a Boolean value to a string and returns the result.

Syntax

booleanObject.toString()

Tips and Notes

Note: This method is called by JavaScript automatically whenever a Boolean object is used in a situation requiring a string.

Example

In this example we will create a Boolean and then convert it to a string:

<script type="text/javascript">

var boo = new Boolean(true)

document.write(boo.toString())

</script>

The output of the code above will be:

true

Try-It-Yourself Demos

How to use toString() to convert a Boolean value to a string.


JavaScript toString() Method

Definition and Usage

The toString() method converts a Date object to a string and returns the result.

Syntax

dateObject.toString()

Example

In this example we will convert today's date to a string:

<script type="text/javascript">

var d = new Date()

document.write (d.toString())

</script>

The output of the code above will be:

Try-It-Yourself Demos

toString()

How to use toString() to convert today's date to a string.


JavaScript toUpperCase() Method

Definition and Usage

The toUpperCase() method is used to display a string in uppercase letters.

Syntax

stringObject.toUpperCase()

Example

In this example "Hello world!" will be displayed in upper case letters:

<script type="text/javascript">

var str="Hello world!"

document.write(str.toUpperCase())

</script>

Try-It-Yourself Demos

toUpperCase()

How to use toUpperCase() to display a string in upper case letters.


JavaScript toUTCString() Method

Definition and Usage

The toUTCString() method converts a Date object, according to Universal Coordinated Time (UTC), to a string and returns the result.

Syntax

dateObject.toUTCString()

Example

In the example below we will convert today's date (according to UTC) to a string:

<script type="text/javascript">

var d = new Date()

document.write (d.toUTCString())

</script>

The output of the code above will be:

Example 2

In the example below we will convert a specific date (according to UTC) to a string:

<script type="text/javascript">

var born = new Date("July 21, 1983 01:15:00")

document.write(born.toUTCString())

</script>

The output of the code above will be:

Try-It-Yourself Demos

toUTCString()

How to use toUTCString() to convert today's date (according to UTC) to a string.


JavaScript undefined Property

Definition and Usage

The undefined property indicates that a variable has not been assigned a value.

Syntax

undefined

Example

In this example we will test two variables to find out if one of them is undefined:

<script type="text/javascript">

var t1=""

var t2

if (t1==undefined) {document.write("t1 is undefined")}

if (t2==undefined) {document.write("t2 is undefined")}

</script>

The output of the code above will be:

t2 is undefined

Try-It-Yourself Demos

How to test if a variable is undefined.


JavaScript unescape() Function

Definition and Usage

The unescape() function decodes a string encoded with escape().

Syntax

unescape(string)

Parameter | Description
string | Required. The string to be decoded

Tips and Notes

Note: The escape() and unescape() functions should not be used to encode or decode URIs. Use encodeURI() and decodeURI() functions instead!

Example

In this example we first encode the strings with the escape() function, and then decode them with the unescape() function:

<script type="text/javascript">

var test1="Visit W3Schools!"

test1=escape(test1)

document.write (test1 + "<br />")

test1=unescape(test1)

document.write(test1 + "<br />")

</script>

The output of the code above will be:

Visit%20W3Schools%21

Visit W3Schools!


JavaScript unshift() Method

Definition and Usage

The unshift() method adds one or more elements to the beginning of an array and returns the new length.

Syntax

arrayObject.unshift(newelement1,newelement2,....,newelementX)

Parameter | Description
newelement1 | Required. The first element to add to the array
newelement2 | Optional. The second element to add to the array
newelementX | Optional. Several elements may be added

Tips and Notes

Note: This method changes the length of the array.

Note: The unshift() method does not work properly in Internet Explorer!

Tip: To add one or more elements to the end of an array, use the push() method.

Example

In this example we will create an array, add an element to the beginning of the array and then return the new length:

<script type="text/javascript">

var arr = new Array()

arr[0] = "Jani"

arr[1] = "Hege"

arr[2] = "Stale"

document.write(arr + "<br />")

document.write(arr.unshift("Kai Jim") + "<br />")

document.write(arr)

</script>

The output of the code above will be:

Jani,Hege,Stale

4

Kai Jim,Jani,Hege,Stale

Try-It-Yourself Demos

How to use unshift() to add an element to the beginning of an array and return the new length.


JavaScript UTC() Method

Definition and Usage

The UTC() method takes a date and returns the number of milliseconds since midnight of January 1, 1970 according to universal time.

Syntax

Date.UTC(year,month,day,hours,minutes,seconds,ms)

Parameter | Description
year | Required. A four digit number representing the year
month | Required. An integer between 0 and 11 representing the month
day | Required. An integer between 1 and 31 representing the date
hours | Optional. An integer between 0 and 23 representing the hour
minutes | Optional. An integer between 0 and 59 representing the minutes
seconds | Optional. An integer between 0 and 59 representing the seconds
ms | Optional. An integer between 0 and 999 representing the milliseconds

Example

In this example we will get how many milliseconds there are from 1970/01/01 to 2005/07/08 according to universal time:

<script type="text/javascript">

var d = Date.UTC(2005,7,8)

document.write(d)

</script>

The output of the code above will be:

1123459200000

Example 2

Now we will convert the output from the example above into years:

<script type="text/javascript">

var minutes = 1000 * 60

var hours = minutes * 60

var days = hours * 24

var years = days * 365

var t = Date.UTC(2005,7,8)

var y = t/years

document.write("It's been: " + y + " years from 1970/01/01")

document.write(" to 2005/07/08!")

</script>

The output of the code above will be:

It's been: 35.62465753424657 years from 1970/01/01 to 2005/07/08!

Try-It-Yourself Demos

UTC()

Use UTC() to print the milliseconds from 1970/01/01 to a specified date (according to universal time).


JavaScript valueOf() Method

Definition and Usage

The valueOf() method returns the primitive value of an Array object.

The primitive value is inherited by all objects descended from the Array object.

The valueOf() method is usually called automatically by JavaScript behind the scenes and not explicitly in code.

Syntax

arrayObject.valueOf()


JavaScript valueOf() Method

Definition and Usage

The valueOf() method returns the primitive value of a Boolean object.

Syntax

booleanObject.valueOf()

Example

In this example we will create a Boolean object and use valueOf() the get the primitive value of it:

<script type="text/javascript">

var boo = new Boolean(false)

document.write(boo.valueOf())

</script>

The output of the code above will be:

false

Try-It-Yourself Demos

valueOf()

How to use valueOf() find the primitive value of a Boolean object.


JavaScript valueOf() Method

Definition and Usage

The valueOf() method returns the primitive value of a Date object.

The primitive value is inherited by all objects descended from the Date object.

The valueOf() method is usually called automatically by JavaScript behind the scenes and not explicitly in code.

Syntax

dateObject.valueOf()


JavaScript valueOf() Method

Definition and Usage

The valueOf() method returns the primitive value of a String object.

The primitive value is inherited by all objects descended from the String object.

The valueOf() method is usually called automatically by JavaScript behind the scenes and not explicitly in code.

Syntax

stringObject.valueOf()


tryit_view0209.html

Enter your name: [TEditFormControlObj]

Enter your age: [TEditFormControlObj]


tryit_view036c.html


tryit_view03cb.html

Type some text (numbers not allowed): [TEditFormControlObj]


tryit_view04c3.html


tryit_view05a4.html


tryit_view05b2.html


tryit_view0608.html


tryit_view0779.html

Field1: [TEditFormControlObj]

Field2: [TEditFormControlObj]

Click the button below to copy the content of Field1 to Field2.

Copy Text


tryit_view07c7.html

Select text: [TEditFormControlObj]

Select text: [TTextAreaFormControlObj]


tryit_view09b3.html

Enter your name: [TEditFormControlObj]


tryit_view0ef3.html


tryit_view10c2.html


tryit_view11c7.html


tryit_view156c.html


tryit_view157e.html


tryit_view1580.html


tryit_view175c.html


tryit_view17d6.html


tryit_view1b85.html


tryit_view1cbb.html


tryit_view1d39.html


tryit_view1da0.html


tryit_view1f00.html


tryit_view2975.html


tryit_view29a4.html


tryit_view2a2b.html


tryit_view2dfc.html


tryit_view337d.html


tryit_view3389.html


tryit_view36f5.html


tryit_view3c21.html


tryit_view3c8a.html


tryit_view40a0.html


tryit_view42c8.html


tryit_view4a01.html


tryit_view4a3c.html


tryit_view52f3.html


tryit_view544c.html

Enter your name: [TEditFormControlObj]


tryit_view568d.html

Type some text (numbers not allowed): [TEditFormControlObj]


tryit_view5923.html


tryit_view5b0f.html


tryit_view5b1e.html


tryit_view5bb5.html


tryit_view606b.html


tryit_view6794.html


tryit_view6849.html


tryit_view6a76.html


tryit_view6ab9.html


tryit_view6b26.html


tryit_view6b9d.html


tryit_view6bf4.html


tryit_view6f40.html


tryit_view6fdc.html


tryit_view7078.html


tryit_view7213.html


tryit_view75c5.html


tryit_view7643.html


tryit_view77b5.html


tryit_view800c.html


tryit_view8267.html

In this example we refer to an image that does not exist, therefore we will get the alert box.


tryit_view828e.html


tryit_view830c.html


tryit_view8408.html


tryit_view8492.html


tryit_view85dc.html


tryit_view8612.html

Close the page to trigger the onunload event.


tryit_view87e3.html


tryit_view8809.html


tryit_view88c4.html

What is your name?

[TEditFormControlObj]


tryit_view8937.html


tryit_view8d82.html


tryit_view9109.html


tryit_view91b5.html


tryit_view91d0.html


tryit_view9391.html


tryit_view970c.html


tryit_view971d.html


tryit_view991c.html


tryit_view9ed3.html


tryit_viewa098.html


tryit_viewa251.html


tryit_viewa335.html

Try to resize the browser window.


tryit_viewa3e4.html


tryit_viewa5b5.html

Firstname: [TEditFormControlObj]

Lastname: [TEditFormControlObj]


tryit_viewa8f3.html


tryit_viewb26a.html


tryit_viewb568.html


tryit_viewb783.html


tryit_viewb8b2.html


tryit_viewbad3.html


tryit_viewbbcf.html


tryit_viewbe98.html


tryit_viewbf30.html

Click the picture


tryit_viewc0e5.html


tryit_viewc378.html


tryit_viewc3e0.html


tryit_viewc425.html


tryit_viewc4a5.html


tryit_viewc61a.html


tryit_viewc909.html


tryit_viewca0a.html


tryit_viewcb43.html


tryit_viewcd93.html


tryit_viewce88.html


tryit_viewd29d.html


tryit_viewd3af.html


tryit_viewda1c.html


tryit_viewdacc.html


tryit_viewdbd9.html


tryit_viewde51.html

When you move the mouse pointer over this paragraph, the image changes.


tryit_viewdff6.html


tryit_viewe07c.html


tryit_viewe11e.html


tryit_viewe1e6.html


tryit_viewe30b.html


tryit_viewe316.html


tryit_viewe58d.html


tryit_viewe644.html


tryit_viewe69f.html


tryit_viewe7d3.html

Click the picture


tryit_viewe829.html


tryit_vieweae4.html


tryit_viewed64.html


tryit_viewee30.html


tryit_viewee81.html


tryit_vieweeac.html


tryit_viewf015.html


tryit_viewf1cf.html


tryit_viewf292.html

First name: [TEditFormControlObj]

Last name: [TEditFormControlObj]


tryit_viewf5d8.html


tryit_viewf5f4.html


tryit_viewfa03.html


tryit_viewfe1c.html

Field1: [TEditFormControlObj]

Field2: [TEditFormControlObj]

Click the button below to copy the content of Field1 to Field2.

Copy Text


tryit_viewffb1.html


Web Multimedia Tutorial

movie

This tutorial will teach you how to add multimedia (sound and video) to your web pages.

Start learning Multimedia today!

Table of Contents

Introduction to Multimedia

This chapter describes what multimedia is and how multimedia can be handled by web browsers.

Sound Formats

This chapter describes the most common - or popular - sound formats.

Video Formats

This chapter describes the most common - or popular - video formats.

This chapter describes how to play sounds from a web page.

Browser Videos

This chapter describes how to play videos from a web page.

Windows Media Formats

This chapter describes the new Windows Media formats.

This chapter describes the object element.

This chapter describes how to play QuickTime movies with the object element.

This chapter describes how to play Real Audio and Real Video with the object element.

The HTML multimedia tag reference.

Player Reference

The Windows Media Player reference.


Introduction to Web Multimedia

Multimedia is pictures, sounds, music, animations and videos.

Modern web browsers have support for many multimedia formats.

What is Multimedia?

Multimedia is everything you can hear or see: texts, books, pictures, music, sounds, CDs, videos, DVDs, Records, Films, and more.

Multimedia comes in many different formats. On the Internet you will find many of these elements embedded in web pages, and today's web browsers have support for a number of multimedia formats.

In this tutorial you will learn about different multimedia formats and how to use them in your web pages.

Browser Support

The first Internet browsers had support for text only, and even the text support was limited to a single font in a single color, and little or nothing else.

Then came web browsers with support for colors, fonts and text styles, and the support for pictures was added.

The support for sounds, animations and videos is handled in different ways by different browsers. Some elements can be handled inline, some requires a plug-in and some requires an ActiveX control.

You will learn more about this in the next chapters.

Multimedia Formats

Multimedia elements (like sounds or videos) are stored in media files.

The most common way to discover the media type is to look at the file extension.

When a browser sees the file extensions .htm or .html, it will assume that the file is an HTML page. The .xml extension indicates an XML file, and the .css extension indicates a style sheet.

Picture formats are recognized by extensions like .gif and .jpg.

Multimedia elements also have their own file formats with different extensions.

You will learn more about media file extensions in the next chapters.


Multimedia MIME Reference

MIME Reference

MIME Types

MIME (Multipurpose Internet Mail Extensions) is an Internet standard for describes message content types.

MIME messages can contain text, images, audio, video, and other application-specific data.

Official MIME info is provided by the Internet Engineering Task Force (IETF) in the following documents:

· Standard for ARPA Internet text messages
· MIME Part 1: Format of Internet Message Bodies
· RFC-2046 MIME Part 2: Media Types
· RFC-2047 MIME Part 3: Header Extensions for Non-ASCII Text
· MIME Part 4: Registration Procedures
· RFC-2049 MIME Part 5: Conformance Criteria and Examples

Different applications support different MIME types.

The reference below is a list of MIME types supported by Microsoft Internet Information Server version 5.

MIME Types By Content Type

Type/sub-type | Extension
application/envoy | evy
application/fractals | fif
application/futuresplash | spl
application/hta | hta
application/internet-property-stream | acx
application/mac-binhex40 | hqx
application/msword | doc
application/msword | dot
application/octet-stream | *
application/octet-stream | bin
application/octet-stream | class
application/octet-stream | dms
application/octet-stream | exe
application/octet-stream | lha
application/octet-stream | lzh
application/oda | oda
application/olescript | axs
application/pdf | pdf
application/pics-rules | prf
application/pkcs10 | p10
application/pkix-crl | crl
application/postscript | ai
application/postscript | eps
application/postscript | ps
application/rtf | rtf
application/set-payment-initiation | setpay
application/set-registration-initiation | setreg
application/vnd.ms-excel | xla
application/vnd.ms-excel | xlc
application/vnd.ms-excel | xlm
application/vnd.ms-excel | xls
application/vnd.ms-excel | xlt
application/vnd.ms-excel | xlw
application/vnd.ms-outlook | msg
application/vnd.ms-pkicertstore | sst
application/vnd.ms-pkiseccat | cat
application/vnd.ms-pkistl | stl
application/vnd.ms-powerpoint | pot
application/vnd.ms-powerpoint | pps
application/vnd.ms-powerpoint | ppt
application/vnd.ms-project | mpp
application/vnd.ms-works | wcm
application/vnd.ms-works | wdb
application/vnd.ms-works | wks
application/vnd.ms-works | wps
application/winhlp | hlp
application/x-bcpio | bcpio
application/x-cdf | cdf
application/x-compress | z
application/x-compressed | tgz
application/x-cpio | cpio
application/x-csh | csh
application/x-director | dcr
application/x-director | dir
application/x-director | dxr
application/x-dvi | dvi
application/x-gtar | gtar
application/x-gzip | gz
application/x-hdf | hdf
application/x-internet-signup | ins
application/x-internet-signup | isp
application/x-iphone | iii
application/x-javascript | js
application/x-latex | latex
application/x-msaccess | mdb
application/x-mscardfile | crd
application/x-msclip | clp
application/x-msdownload | dll
application/x-msmediaview | m13
application/x-msmediaview | m14
application/x-msmediaview | mvb
application/x-msmetafile | wmf
application/x-msmoney | mny
application/x-mspublisher | pub
application/x-msschedule | scd
application/x-msterminal | trm
application/x-mswrite | wri
application/x-netcdf | cdf
application/x-netcdf | nc
application/x-perfmon | pma
application/x-perfmon | pmc
application/x-perfmon | pml
application/x-perfmon | pmr
application/x-perfmon | pmw
application/x-pkcs12 | p12
application/x-pkcs12 | pfx
application/x-pkcs7-certificates | p7b
application/x-pkcs7-certificates | spc
application/x-pkcs7-certreqresp | p7r
application/x-pkcs7-mime | p7c
application/x-pkcs7-mime | p7m
application/x-pkcs7-signature | p7s
application/x-sh | sh
application/x-shar | shar
application/x-stuffit | sit
application/x-sv4cpio | sv4cpio
application/x-sv4crc | sv4crc
application/x-tar | tar
application/x-tcl | tcl
application/x-tex | tex
application/x-texinfo | texi
application/x-texinfo | texinfo
application/x-troff | roff
application/x-troff | t
application/x-troff | tr
application/x-troff-man | man
application/x-troff-me | me
application/x-troff-ms | ms
application/x-ustar | ustar
application/x-wais-source | src
application/x-x509-ca-cert | cer
application/x-x509-ca-cert | crt
application/x-x509-ca-cert | der
application/ynd.ms-pkipko | pko
application/zip | zip
audio/basic | au
audio/basic | snd
audio/mid | mid
audio/mid | rmi
audio/mpeg | mp3
audio/x-aiff | aif
audio/x-aiff | aifc
audio/x-aiff | aiff
audio/x-mpegurl | m3u
audio/x-pn-realaudio | ra
audio/x-pn-realaudio | ram
audio/x-wav | wav
image/bmp | bmp
image/cis-cod | cod
image/gif | gif
image/ief | ief
image/jpeg | jpe
image/jpeg | jpeg
image/jpeg | jpg
image/pipeg | jfif
image/svg+xml | svg
image/tiff | tif
image/tiff | tiff
image/x-cmu-raster | ras
image/x-cmx | cmx
image/x-icon | ico
image/x-portable-anymap | pnm
image/x-portable-bitmap | pbm
image/x-portable-graymap | pgm
image/x-portable-pixmap | ppm
image/x-rgb | rgb
image/x-xbitmap | xbm
image/x-xpixmap | xpm
image/x-xwindowdump | xwd
message/rfc822 | mht
message/rfc822 | mhtml
message/rfc822 | nws
text/css | css
text/h323 | 323
text/html | htm
text/html | html
text/html | stm
text/iuls | uls
text/plain | bas
text/plain | c
text/plain | h
text/plain | txt
text/richtext | rtx
text/scriptlet | sct
text/tab-separated-values | tsv
text/webviewhtml | htt
text/x-component | htc
text/x-setext | etx
text/x-vcard | vcf
video/mpeg | mp2
video/mpeg | mpa
video/mpeg | mpe
video/mpeg | mpeg
video/mpeg | mpg
video/mpeg | mpv2
video/quicktime | mov
video/quicktime | qt
video/x-la-asf | lsf
video/x-la-asf | lsx
video/x-ms-asf | asf
video/x-ms-asf | asr
video/x-ms-asf | asx
video/x-msvideo | avi
video/x-sgi-movie | movie
x-world/x-vrml | flr
x-world/x-vrml | vrml
x-world/x-vrml | wrl
x-world/x-vrml | wrz
x-world/x-vrml | xaf
x-world/x-vrml | xof

Mime Types By File Extension

Extension | Type/sub-type
 | application/octet-stream
323 | text/h323
acx | application/internet-property-stream
ai | application/postscript
aif | audio/x-aiff
aifc | audio/x-aiff
aiff | audio/x-aiff
asf | video/x-ms-asf
asr | video/x-ms-asf
asx | video/x-ms-asf
au | audio/basic
avi | video/x-msvideo
axs | application/olescript
bas | text/plain
bcpio | application/x-bcpio
bin | application/octet-stream
bmp | image/bmp
c | text/plain
cat | application/vnd.ms-pkiseccat
cdf | application/x-cdf
cer | application/x-x509-ca-cert
class | application/octet-stream
clp | application/x-msclip
cmx | image/x-cmx
cod | image/cis-cod
cpio | application/x-cpio
crd | application/x-mscardfile
crl | application/pkix-crl
crt | application/x-x509-ca-cert
csh | application/x-csh
css | text/css
dcr | application/x-director
der | application/x-x509-ca-cert
dir | application/x-director
dll | application/x-msdownload
dms | application/octet-stream
doc | application/msword
dot | application/msword
dvi | application/x-dvi
dxr | application/x-director
eps | application/postscript
etx | text/x-setext
evy | application/envoy
exe | application/octet-stream
fif | application/fractals
flr | x-world/x-vrml
gif | image/gif
gtar | application/x-gtar
gz | application/x-gzip
h | text/plain
hdf | application/x-hdf
hlp | application/winhlp
hqx | application/mac-binhex40
hta | application/hta
htc | text/x-component
htm | text/html
html | text/html
htt | text/webviewhtml
ico | image/x-icon
ief | image/ief
iii | application/x-iphone
ins | application/x-internet-signup
isp | application/x-internet-signup
jfif | image/pipeg
jpe | image/jpeg
jpeg | image/jpeg
jpg | image/jpeg
js | application/x-javascript
latex | application/x-latex
lha | application/octet-stream
lsf | video/x-la-asf
lsx | video/x-la-asf
lzh | application/octet-stream
m13 | application/x-msmediaview
m14 | application/x-msmediaview
m3u | audio/x-mpegurl
man | application/x-troff-man
mdb | application/x-msaccess
me | application/x-troff-me
mht | message/rfc822
mhtml | message/rfc822
mid | audio/mid
mny | application/x-msmoney
mov | video/quicktime
movie | video/x-sgi-movie
mp2 | video/mpeg
mp3 | audio/mpeg
mpa | video/mpeg
mpe | video/mpeg
mpeg | video/mpeg
mpg | video/mpeg
mpp | application/vnd.ms-project
mpv2 | video/mpeg
ms | application/x-troff-ms
mvb | application/x-msmediaview
nws | message/rfc822
oda | application/oda
p10 | application/pkcs10
p12 | application/x-pkcs12
p7b | application/x-pkcs7-certificates
p7c | application/x-pkcs7-mime
p7m | application/x-pkcs7-mime
p7r | application/x-pkcs7-certreqresp
p7s | application/x-pkcs7-signature
pbm | image/x-portable-bitmap
pdf | application/pdf
pfx | application/x-pkcs12
pgm | image/x-portable-graymap
pko | application/ynd.ms-pkipko
pma | application/x-perfmon
pmc | application/x-perfmon
pml | application/x-perfmon
pmr | application/x-perfmon
pmw | application/x-perfmon
pnm | image/x-portable-anymap
pot, | application/vnd.ms-powerpoint
ppm | image/x-portable-pixmap
pps | application/vnd.ms-powerpoint
ppt | application/vnd.ms-powerpoint
prf | application/pics-rules
ps | application/postscript
pub | application/x-mspublisher
qt | video/quicktime
ra | audio/x-pn-realaudio
ram | audio/x-pn-realaudio
ras | image/x-cmu-raster
rgb | image/x-rgb
rmi | audio/mid
roff | application/x-troff
rtf | application/rtf
rtx | text/richtext
scd | application/x-msschedule
sct | text/scriptlet
setpay | application/set-payment-initiation
setreg | application/set-registration-initiation
sh | application/x-sh
shar | application/x-shar
sit | application/x-stuffit
snd | audio/basic
spc | application/x-pkcs7-certificates
spl | application/futuresplash
src | application/x-wais-source
sst | application/vnd.ms-pkicertstore
stl | application/vnd.ms-pkistl
stm | text/html
svg | image/svg+xml
sv4cpio | application/x-sv4cpio
sv4crc | application/x-sv4crc
t | application/x-troff
tar | application/x-tar
tcl | application/x-tcl
tex | application/x-tex
texi | application/x-texinfo
texinfo | application/x-texinfo
tgz | application/x-compressed
tif | image/tiff
tiff | image/tiff
tr | application/x-troff
trm | application/x-msterminal
tsv | text/tab-separated-values
txt | text/plain
uls | text/iuls
ustar | application/x-ustar
vcf | text/x-vcard
vrml | x-world/x-vrml
wav | audio/x-wav
wcm | application/vnd.ms-works
wdb | application/vnd.ms-works
wks | application/vnd.ms-works
wmf | application/x-msmetafile
wps | application/vnd.ms-works
wri | application/x-mswrite
wrl | x-world/x-vrml
wrz | x-world/x-vrml
xaf | x-world/x-vrml
xbm | image/x-xbitmap
xla | application/vnd.ms-excel
xlc | application/vnd.ms-excel
xlm | application/vnd.ms-excel
xls | application/vnd.ms-excel
xlt | application/vnd.ms-excel
xlw | application/vnd.ms-excel
xof | x-world/x-vrml
xpm | image/x-xpixmap
xwd | image/x-xwindowdump
z | application/x-compress
zip | application/zip


Multimedia Object Element

The Object Element

The <object> element can support many different media types:

Pictures

Sounds

Videos

Other Objects

Displaying A Picture

You can display a picture:

<object height="100%" width="100%"

type="image/jpeg" data="audi.jpeg">

</object>

Click here to try it yourself

Displaying A Web Page

You can display a web page:

<object type="text/html" height="100%" width="100%"

data="http://www.w3schools.com">

</object>

Click here to try it yourself

Displaying A Sound

You can display a sound:

<object

classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">

<param name="FileName" value="liar.wav" />

</object>

Click here to try it yourself

Displaying A Video

You can display a video:

<object

classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">

<param name="FileName" value="3d.wmv" />

</object>

Click here to

Displaying A Calendar

You can display a calendar:

<object width="100%" height="80%"

classid="clsid:8E27C92B-1264-101C-8A2F-040224009C02">

<param name="BackColor" value="14544622">

<param name="DayLength" value="1">

</object>

Click here to try it yourself

Displaying Graphics

You can display graphics:

<object width="200" height="200"

classid="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6">

<param name="Line0001"

value="setFillColor(255, 0, 255)">

<param name="Line0002"

value="Oval(-100, -50, 200, 100, 30)">

</object>

Click here to try it yourself

Displaying Flash

You can display a flash animation:

<object width="400" height="40"

classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com

/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0">

<param name="SRC" value="bookmark.swf">

</object>


Windows Media Player Reference

Windows Media Player

Windows Media Player comes in many different versions.

Here are the class ID's of the different versions, with a list of parameters.

Why Has the class ID Changed?

The correct class ID for Windows Media Player 7 and later is: clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6.

Many places on the internet it states that the class ID should be: clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95. This class ID is the old one, but it will work, because of backward compability. However, if you use the old class ID you will not be able to use the new features added to the component.

Windows Media Player 10

clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6 (same as WMP7)

Windows Media Player 9

clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6 (same as WMP7)

Windows Media Player 7

clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6

Windows Media Player 6.4

clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95

Parameter | Default | Description
AudioStream | true |
AutoSize | true |
AutoStart | true | Sets if the player should start automatically
AnimationAtStart | true | Sets if an animation should show while the file loads
AllowScan | true |
AllowChangeDisplaySize | true |
AutoRewind | false |
Balance | false |
BaseURL |  |
BufferingTime | 5 |
CaptioningID |  |
ClickToPlay | true | Sets if the player should start when the user clicks in the play area
CursorType | false |
CurrentPosition | true |
CurrentMarker | false |
DefaultFrame |  |
DisplayBackColor | false |
DisplayForeColor | 16777215 |
DisplayMode | false |
DisplaySize | false |
Enabled | true |
EnableContextMenu | true |
EnablePositionControls | true |
EnableFullScreenControls | false |
EnableTracker | true |
Filename | URL | The URL of the file to play
InvokeURLs | true |
Language | true |
Mute | false |
PlayCount | 1 |
PreviewMode | false |
Rate | 1 |
SAMILang |  |
SAMIStyle |  |
SAMIFileName |  |
SelectionStart | true |
SelectionEnd | true |
SendOpenStateChangeEvents | true |
SendWarningEvents | true |
SendErrorEvents | true |
SendKeyboardEvents | false |
SendMouseClickEvents | false |
SendMouseMoveEvents | false |
SendPlayStateChangeEvents | true |
ShowCaptioning | false |
ShowControls | true | Sets if the player controls should show
ShowAudioControls | true | Sets if the audio controls should show
ShowDisplay | false | Sets if the display should show
ShowGotoBar | false | Sets if the GotoBar should show
ShowPositionControls | true |
ShowStatusBar | false |
ShowTracker | true |
TransparantAtStart | false |
VideoBorderWidth | false |
VideoBorderColor | false |
VideoBorder3D | false |
Volume | -200 |
WindowlessVideo | false |

Windows Media Player 6 (Older Version)

clsid:05589FA1-C356-11CE-BF01-00AA0055595A

Parameter | Default | Description
Appearance | false |
AutoStart | false |
AllowChangeDisplayMode | true |
AllowHideDisplay | false |
AllowHideControls | true |
AutoRewind | true |
Balance | false |
CurrentPosition | false |
DisplayBackColor | false |
DisplayForeColor | 16777215 |
DisplayMode | false |
Enabled | true |
EnableContextMenu | true |
EnablePositionControls | true |
EnableSelectionControls | false |
EnableTracker | true |
Filename |  |
FullScreenMode | false |
MovieWindowSize | false |
PlayCount | 1 |
Rate | 1 |
SelectionStart | true |
SelectionEnd | true |
ShowControls | true |
ShowDisplay | true |
ShowPositionControls | false |
ShowTracker | true |
Volume | -200 |


Object Element - Quick Time Video

Playing QuickTime Movies

The <object> element can play QuickTime movies.

The QuickTime Format

The QuickTime format is developed by Apple. Videos stored in the QuickTime format have the extension .mov.

QuickTime is a common format on the Internet, but QuickTime movies cannot be played on a Windows computer without an extra (free) component installed.

With the object element, code that will play a QuickTime movie can easily be added to a web page. The object can be set to automatically install a QuickTime player if it is not already installed on the users computer.

The Solution

This is the code required to play a QuickTime movie:

<object width="160" height="144"

classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"

codebase="http://www.apple.com/qtactivex/qtplugin.cab">

<param name="src" value="sample.mov">

<param name="autoplay" value="true">

<param name="controller" value="false">

<embed src="sample.mov" width="160" height="144"

autoplay="true" controller="false"

pluginspage="http://www.apple.com/quicktime/download/">

</embed>

</object>

The <object> Element

The width and height attributes of the object element should match the size of the movie in pixels.

The classid attribute uniquely identifies the player software to use. It must be set to "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B". This unique code identifies an ActiveX control that must be installed on the users PC before the movie can be played. If the user does not have the ActiveX control installed, the browser can automatically download and install it.

The codebase attribute specifies the base path used to resolve relative URIs specified by the classid, data, and archive attributes. When absent, its default value is the base URI of the current document. Note: Internet Explorer uses this attribute to specify a location from where the player can be downloaded. It must be set to "http://www.apple.com/qtactivex/qtplugin.cab". This location will always contain the latest version of the QuickTime player.

The src parameter should point to the movie file.

The autoplay parameter should have the value "true" if you want the movie to play automatically.

The controller parameter should have the value "false" if you don't want the control buttons to show.

The <embed> Element

The embed element is added to support browsers that don't support the object element. A browser that understands the object element will ignore the embed element. The object element will be used by new browsers that support ActiveX controls (Internet Explorer 5 and 6). Older browsers (Netscape 4 and 5) will use the embed element.

The width and height attributes of the embed element should match the size of the movie in pixels.

The autoplay and controller attributes of the embed element should be set to the same values as for the parameters in the object element.

The pluginspage attribute defines the players download path. It must be set to "http://www.apple.com/quicktime/download/".


Object Element - Real Video

Playing Real Video Movies

The <object> element can play Real Video movies.

The Real Video Format

The RealVideo format is developed by Real Media. Videos stored in the Real Video format have the extension .rm or .ram.

The format allows streaming of video (on-line video, Internet TV) with low bandwidths. Because of the low bandwidth priority, quality is often reduced.

The Solution

This is the code required to play a Real Video movie:

<object width="320" height="240"

classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">

<param name="controls" value="ImageWindow" />

<param name="autostart" value="true" />

<param name="src" value="male.ram" />

</object>

The <object> Element

The width and height attributes of the object element should match the size of the movie in pixels.

The classid attribute uniquely identifies the player software to use. It must be set to "clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA". This unique code identifies an ActiveX control that must be installed on the users PC before the movie can be played. If the user does not have the ActiveX control installed, the browser can automatically download and install it.

The param elements supply additional information to the player.

The src parameter should point to the movie (or audio) file.

The autostart parameter should have the value "true" if you want the movie to play automatically.

The controls parameter should have the value "ImageWindow" if you don't want the control buttons to show, or "All" if you want all the controls to show.

Object Reference

Attribute | Defines
classid | A unique id for the object.
height | The height of the object in pixels or %.
width | The width of the object in pixels or in %.

Parameter Reference

Attribute | Defines
src | The source of a RealAudio or RealVideo clip.
controls | The visibility of the controls. (See below)
console | A console name to link multiple controls.
autostart | Automatic start. (true | false).
nolabels | Suppression of label texts in the controls window.
reset | Resetting the control for playlist. (true | false).
autogotoURL | How a URL is handled. (true | false) True forwards URL event to the browser. False uses VBScript event instead.

Controls Values

Value | Displays
All | Displays a full player with all controls.
InfoVolumePanel | Title, author, and copyright and volume slider.
InfoPanel | Title, author, and copyright.
ControlPanel | Position slider, play, pause, and stop buttons.
StatusPanel | Messages, current time position, and clip length.
PlayButton | Play and pause buttons.
StopButton | Stop button.
VolumeSlider | Volume slider.
PositionField | Position and clip length.
StatusField | Messages.
ImageWindow | The video image
StatusBar | Status, position and channels.


Multimedia Sound Formats

Sound can be stored in many different formats.

The MIDI Format

The MIDI (Musical Instrument Digital Interface) is a format for sending music information between electronic music devices like synthesizers and PC sound cards.

The MIDI format was developed in 1982 by the music industry. The MIDI format is very flexible and can be used for everything from very simple to real professional music making.

MIDI files do not contain sampled sound, but a set of digital musical instructions (musical notes) that can be interpreted by your PC's sound card.

The downside of MIDI is that it cannot record sounds (only notes). Or, to put it another way: It cannot store songs, only tunes.

Click here to play The Beatles.

The upside of the MIDI format is that since it contains only instructions (notes), MIDI files can be extremely small. The example above is only 23K in size but it plays for nearly 5 minutes.

The MIDI format is supported by many different software systems over a large range of platforms. MIDI files are supported by all the most popular Internet browsers.

Sounds stored in the MIDI format have the extension .mid or .midi.

The RealAudio Format

The RealAudio format was developed for the Internet by Real Media. The format also supports video.

The format allows streaming of audio (on-line music, Internet radio) with low bandwidths. Because of the low bandwidth priority, quality is often reduced.

Sounds stored in the RealAudio format have the extension .rm or .ram.

The AU Format

The AU format is supported by many different software systems over a large range of platforms.

Sounds stored in the AU format have the extension .au.

The AIFF Format

The AIFF (Audio Interchange File Format) was developed by Apple.

AIFF files are not cross-platform and the format is not supported by all web browsers.

Sounds stored in the AIFF format have the extension .aif or .aiff.

The SND Format

The SND (Sound) was developed by Apple.

SND files are not cross-platform and the format is not supported by all web browsers.

Sounds stored in the SND format have the extension .snd.

The WAVE Format

The WAVE (waveform) format is developed by IBM and Microsoft.

It is supported by all computers running Windows, and by all the most popular web browsers.

Sounds stored in the WAVE format have the extension .wav.

The MP3 Format (MPEG)

MP3 files are actually MPEG files. But the MPEG format was originally developed for video by the Moving Pictures Experts Group. We can say that MP3 files are the sound part of the MPEG video format.

MP3 is one of the most popular sound formats for music recording. The MP3 encoding system combines good compression (small files) with high quality. Expect all your future software systems to support it.

Sounds stored in the MP3 format have the extension .mp3, or .mpga (for MPG Audio).

What Format To Use?

The WAVE format is one of the most popular sound format on the Internet, and it is supported by all popular browsers. If you want recorded sound (music or speech) to be available to all your visitors, you should use the WAVE format.

The MP3 format is the new and upcoming format for recorded music. If your website is about recorded music, the MP3 format is the choice of the future.


Multimedia Tag Reference

Web Multimedia Element Reference

The <bgsound> Element

Attribute | Function
id | A unique id for the element.
src | The location (URL) of the source file.
balance | The balance. (-10000=left, +10000=right).
loop | The number of loops. (-1=infinite).
volume | The volume. (0=max, -10000=min).

The <embed> Element

Attribute | Defines
autostart | Automatic start. (true | false).
height | The height of the element in pixels or %.
hidden | The visibility of the element. (true | false).
src | The location (URL) of the source file.
width | The width of the element in pixels or %.

See also styling attributes, common HTML attributes and Event attributes at the bottom of this page.

The <applet> Element

Attribute | Defines
alt | An alternate text.
archive | The locations (URLs) of archive files.
code | The location (URL) of the applet code.
codebase | The base location (default URL) for all files.
height | The height of the applet in pixels or %.
name | The name of the applet.
object | A saved representation of the applet. Do not use.
width | The width of the applet in pixels or %.

See also styling attributes, common HTML attributes and Event attributes at the bottom of this page.

The <object> Element

Attribute | Defines
archive | The locations (URLs) of archive files.
classid | The location (URL) of the object.
codebase | The base path used to resolve relative URIs specified by the classid, data, and archive attributes.
codetype | The content type of the code.
data | The location (URL) of object data.
declare | Do not instantiate (execute) the object.
height | The height of the object in pixels or %.
name | The object's name.
standby | Text to display while object is loading.
tabindex | The position in the tab order
type | The content type of the object.
usemap | The location (URL) of an image map.
width | The width of the player in pixels or %.

See also styling attributes, common HTML attributes and Event attributes at the bottom of this page.

The <param> Element

The param element defines parameters to the object or applet elements.

Attribute | Defines
id | A unique id for the element.
name | Parameter name.
type | Parameter content type.
value | Parameter value.
valuetype | Parameter value type.

Styling Attributes

Note: These attributes are deprecated. Use styles instead.

Attribute | Defines
align | The alignment of the object.
border | The border with in pixels.
hspace | The horizontal white-space (margin) in pixels.
vspace | The vertical white-space (margin) in pixels.

Common HTML Attributes

Attribute | Defines
class | The element's class.
dir | The directionality of the element.
id | A unique id for the element.
lang | The language used by the element.
style | The element's style.
title | The elements title.

Standard Events

Event | Handles
onclick | mouse clicked
ondblclick | mouse double clicked
onmousedown | mouse button pressed down
onmouseup | mouse button released
onmouseover | cursor moved onto the element
onmousemove | cursor moved within the element
onmouseout | cursor moved away from the element
onkeypressed | key pressed and released over the element
onkeydown | key pressed down over the element
onkeyup | key released over the element


Multimedia Video Formats

Video can be stored in many different formats.

The AVI Format

The AVI (Audio Video Interleave) format was developed by Microsoft.

The AVI format is supported by all computers running Windows, and by all the most popular web browsers. It is a very common format on the Internet, but not always possible to play on non-Windows computers.

Videos stored in the AVI format have the extension .avi.

The Windows Media Format

The Windows Media format is developed by Microsoft.

Windows Media is a common format on the Internet, but Windows Media movies cannot be played on non-Windows computer without an extra (free) component installed. Some later Windows Media movies cannot play at all on non-Windows computers because no player is available.

Videos stored in the Windows Media format have the extension .wmv.

The MPEG Format

The MPEG (Moving Pictures Expert Group) format is the most popular format on the Internet. It is cross-platform, and supported by all the most popular web browsers.

Videos stored in the MPEG format have the extension .mpg or .mpeg.

The QuickTime Format

The QuickTime format is developed by Apple.

QuickTime is a common format on the Internet, but QuickTime movies cannot be played on a Windows computer without an extra (free) component installed.

Videos stored in the QuickTime format have the extension .mov.

The RealVideo Format

The RealVideo format was developed for the Internet by Real Media.

The format allows streaming of video (on-line video, Internet TV) with low bandwidths. Because of the low bandwidth priority, quality is often reduced.

Videos stored in the RealVideo format have the extension .rm or .ram.

The Shockwave (Flash) Format

The Shockwave format was developed by Macromedia.

The Shockwave format requires an extra component to play. This component comes preinstalled with the latest versions of Netscape and Internet Explorer.

Videos stored in the Shockwave format have the extension .swf.


tryit_view0a37.html

Web Page AS Object


tryit_view25dc.html

Music In The Background


tryit_view27ff.html

Calendar Object


tryit_view3723.html

Flash Animation As Object


tryit_view5293.html

Picture As Object


tryit_view558d.html

Beatles Embedded


tryit_view8657.html

Flash Animation As Object


tryit_view8e34.html

Graphic Object


tryit_viewa2bc.html

Linking To Beatles

Click here to play the Beatles


tryit_viewdc8b.html

Horse As An Image


tryit_viewf663.html

Playing The Object


My First CSS

This is my very first page that is styled with CSS!

All the colors, fonts, and layout of this page are styled with CSS.

My favorite links:

· CSS Tutorial
· XML Tutorial
· SQL Tutorial


My First CSS

This is my very first page that is styled with CSS!

All the colors, fonts, and layout of this page are styled with CSS.

My favorite links:

· CSS Tutorial
· XML Tutorial
·


My first CSS

This is my very first page that is styled with CSS!

All the colors, fonts, and layout of this page are styled with CSS.

My favorite links:

· CSS Tutorial
· XML Tutorial
· SQL Tutorial


My first CSS

This is my very first page that is styled with CSS!

All the colors, fonts, and layout of this page are styled with CSS.

My favorite links:

· CSS Tutorial
·
·


My first CSS

This is my very first page that is styled with CSS!

All the colors, fonts, and layout of this page are styled with CSS.

My favorite links:

· CSS Tutorial
· XML Tutorial
·


My first CSS

This is my very first page that is styled with CSS!

All the colors, fonts, and layout of this page are styled with CSS.

My favorite links:

· CSS Tutorial
·
· SQL Tutorial


My First CSS

This is my very first page that is styled with CSS!

All the colors, fonts, and layout of this page are styled with CSS.

My favorite links:

·
· XML Tutorial
·


My First CSS

This is NOT a CSS tutorial, but simply a quick introduction to CSS.

If you are serious about learning CSS, read our CSS tutorial.

You will use 8 steps to transform this page:

Into this:


My First CSS

My First CSS - Step 1

To create a basic HTML page like this:

Use a simple text editor and write this:

<html>

<head>

<title>My first CSS</title>

</head>

<body>

<h1>My First CSS</h1>

<hr />

<img src="pic_web.gif" width="128" height="124">

<p>This is my very first page that is styled with

<acronym title="Cascading Style Sheets">CSS</acronym>!</p>

<p>All the colors, fonts, and layout of this

page are styled with CSS.</p>

<p>My favorite links:</p>

<ul>

<li><a href="/css/default.asp">CSS Tutorial</a></li>

<li><a href="/xml/default.asp">XML Tutorial</a></li>

<li><a href="/sql/default.asp">SQL Tutorial</a></li>

</ul>

</body>

</html>

Try It On Your Computer

If you are using Windows, you can try this on your own computer.

Start Notepad for Windows and type in the HTML code above.

Select "Save As" from the File menu and save the text as "myfirst_css.htm" to your desktop.

Double-click on the "myfirst_css.htm" file to view it in your browser.

For Mac Users

Start TextEdit and change the following preferences: Select (in the preferences window) "Plain text" instead of "Rich text" and then select "Ignore rich text commands in HTML files". This is very important because if you don't do this, HTML codes probably won't work.

Type in the HTML code above. Save the text as "myfirst_css.htm" to your desktop.

Double-click on the "myfirst_css.htm" file to view it in your browser.


My First CSS

My First CSS - Step 2

To add some colors like this:

Add the necessary code to your HTML page like this:

<html>

<head>

<title>My first CSS</title>

<style type="text/css">

body

{

color:#800000;

background-color:#B8BFD8;

}

</style>

</head>

<body>

...

...

...

Try it yourself!

To learn more about CSS color styling: Visit our CSS tutorial.


My First CSS

My First CSS - Step 3

To add a font like this:

Add the necessary code to your HTML page like this:

<html>

<head>

<title>My first CSS</title>

<style type="text/css">

body

{

font-family:verdana;

font-size:80%;

color:#800000;

background-color:#B8BFD8;

}

h1

{

font-family:stencil,"courier new";

}

</style>

</head>

<body>

...

...

...

Try it yourself!

To learn more about CSS font styling: CSS tutorial.


My First CSS

My First CSS - Step 4

To add a link style like this:

Add the necessary code to your HTML page like this:

<html>

<head>

<title>My first CSS</title>

<style type="text/css">

body

{

font-family:verdana;

font-size:80%;

color:#800000;

background-color:#B8BFD8;

}

h1

{

font-family:stencil,"courier new";

}

a {text-decoration:none}

a:link {color:#000000}

a:visited {color:purple}

a:hover {background-color:#ff3300}

</style>

</head>

<body>

...

...

...

Try it yourself!

To learn more about CSS link styling: Visit our CSS tutorial.


My First CSS

My First CSS - Step 5

To style the horizontal line and create a help tool tip like this:

Add the necessary code to your HTML page like this:

<html>

<head>

<title>My first CSS</title>

<style type="text/css">

body

{

font-family:verdana;

font-size:80%;

color:#800000;

background-color:#B8BFD8;

}

h1

{

font-family:stencil,"courier new";

}

a {text-decoration:none}

a:link {color:#000000}

a:visited {color:purple}

a:hover {background-color:#ff3300}

hr

{

color:#b22222;

border:thin dotted

}

acronym

{

border-bottom:1px dotted #b22222;

cursor:help;

}

</style>

</head>

<body>

...

...

...

Try it yourself!

To learn more about CSS cursor styling: Visit our CSS tutorial


My First CSS

My First CSS - Step 6

To add a image float like this:

Add the necessary code to your HTML page like this:

<html>

<head>

<title>My first CSS</title>

<style type="text/css">

body

{

font-family:verdana;

font-size:80%;

color:#800000;

background-color:#B8BFD8;

}

h1

{

font-family:stencil,"courier new";

}

a {text-decoration:none}

a:link {color:#000000}

a:visited {color:purple}

a:hover {background-color:#ff3300}

hr

{

color:#b22222;

border:thin dotted

}acronym

{

border-bottom:1px dotted #b22222;

cursor:help;

}

img

{

float: right;

border: 1px solid #b22222;

}

</style>

</head>

<body>

...

...

...

Try it yourself!

To learn more about CSS image float: Visit our CSS tutorial


My First CSS

My First CSS - Step 7

To style a list like this:

Add the necessary code to your HTML page like this:

<html>

<head>

<title>My first CSS</title>

<style type="text/css">

body

{

font-family:verdana;

font-size:80%;

color:#800000;

background-color:#B8BFD8;

}

h1

{

font-family:stencil,"courier new";

}

ul

{

margin-left:0;

list-style-type:none;

}

a

{

text-decoration:none;

display:block;

padding:2px;

width:150px;

border-bottom:0.1em solid #b22222;

}

a:link {color:#000000}

a:visited {color:purple}

a:hover {background-color:#ff3300}

hr

{

color:#b22222;

border:thin dotted

}acronym

{

border-bottom:1px dotted #b22222;

cursor:help;

}

img

{

float: right;

border: 1px solid #b22222;

}

</style>

</head>

<body>

...

...

...

Try it yourself!

To learn more about CSS list editing: Visit our CSS tutorial.


My First CSS

My First CSS - Step 8

Put the style sheet in an external file

Put the style sheet in an external file. This means that other HTML pages can use the same style sheet.

Start your text editor, write everything inside the <style> element from the HTML file into the editor.

body

{

font-family:verdana;

font-size:80%;

color:#b22222;

background-color:#D8BFD8;

}

h1

{

font-family:stencil,"courier new";

}

ul

{

margin-left:0;

list-style-type:none;

}

a

{

text-decoration:none;

display:block;

padding:2px;

width:150px;

border-bottom:0.1em solid #b22222;

}

a:link {color:#000000}

a:visited {color:purple}

a:hover {background-color:#ff3300}

hr

{

color:#b22222;

border:thin dotted

}

acronym

{

border-bottom:1px dotted #b22222;

cursor: help;

}

img

{

float: right;

border: 1px solid #b22222;

}

Select "Save As" from the File menu and save the file as "myfirst_css.css" in the same directory as the "myfirst_css.htm" HTML file.

Replace the <style> element with a <link> element in the HTML file:

<html>

<head>

<title>My first CSS</title>

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

</head>

<body>

...

...

...

The <link> element tells the browser the style sheet is in "myfirst_css.css".

Save the HTML file and open it in the browser. The style now comes from an external style sheet.

If you wish to learn more about CSS: Visit our CSS tutorial.


My First HTML

This is NOT an HTML tutorial, but simply a quick introduction to HTML.

If you are serious about learning HTML, read our .

You will make this HTML page in 6 steps:


My First HTML

My First HTML - Step 1

To make a HTML page with an HTML header like this:

Use a simple text editor and write this:

<html>

<body>

<h1>My First Header</h1>

<hr />

</body>

</html>

To learn more about HTML: Visit our HTML tutorial

Try It On Your Computer

If you are using Windows, you can try this on your own computer.

Start Notepad for Windows and type in the HTML code above.

Select "Save As" from the File menu and save the text as "myfirst_html.htm" to your desktop.

Double-click on the "myfirst_html.htm" file to view it in your browser.

For Mac Users

Start TextEdit and change the following preferences: Select (in the preferences window) "Plain text" instead of "Rich text" and then select "Ignore rich text commands in HTML files". This is very important because if you don't do this, HTML codes probably won't work.

Type in the HTML code above. Save the text as "myfirst_html.htm" to your desktop.

Double-click on the "myfirst_html.htm" file to view it in your browser.


My First HTML

My First HTML - Step 2

To add some HTML paragraphs like this:

Add the necessary code to your HTML page like this:

<html>

<body>

<h1>My First Header</h1>

<hr />

<p>My first paragraph.</p>

<p>My first <b>Bold text</b> and <i>Italic text</i></p>

</body>

</html>

Try it yourself

To learn more about HTML paragraphs: Visit our


My First HTML

My First HTML - Step 3

To add an HTML hyperlink like this:

Add the necessary code to your HTML page like this:

<html>

<body>

<h1>My First Header</h1>

<hr />

<p>My first paragraph.</p>

<p>My first <b>Bold text</b> and <i>Italic text</i></p>

<p>My first link:

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

W3Schools</a></p>

</body>

</html>

Try it yourself

To learn more about HTML hyperlinks: Visit our HTML tutorial


My First HTML

My First HTML - Step 4

To add an HTML list like this:

Add the necessary code to your HTML page like this:

<html>

<body>

<h1>My First Header</h1>

<hr />

<p>My first paragraph.</p>

<p>My first <b>Bold text</b> and <i>Italic text</i></p>

<p>My first link:

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

W3Schools</a></p>

<p>My first list:</p>

<ul>

<li>Red</li>

<li>Green</li>

<li>Blue</li>

</ul>

</body>

</html>

Try it yourself

To learn more about HTML lists: Visit our


My First HTML

My First HTML - Step 5

To add an HTML image like this:

Add the necessary code to your HTML page like this:

<html>

<body>

<h1>My First Header</h1>

<hr />

<p>My first paragraph.</p>

<p>My first <b>Bold text</b> and <i>Italic text</i></p>

<p>My first link:

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

W3Schools</a></p>

<p>My first list:</p>

<ul>

<li>Red</li>

<li>Green</li>

<li>Blue</li>

</ul>

<p>My first image:</p>

<p><img src="pic_web.gif" /></p>

</body>

</html>

Try it yourself

To learn more about HTML images: Visit our HTML tutorial


My First HTML

My First HTML - Step 6

To add an HTML table like this:

Add the necessary code to your HTML page like this:

<html>

<body>

<h1>My First Header</h1>

<hr />

<p>My first paragraph.</p>

<p>My first <b>Bold text</b> and <i>Italic text</i></p>

<p>My first link:

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

W3Schools</a></p>

<p>My first list:</p>

<ul>

<li>Red</li>

<li>Green</li>

<li>Blue</li>

</ul>

<p>My first image:</p>

<p><img src="pic_web.gif" /></p>

<p>My first table:</p>

<table border="1" width="50%">

<tr>

<th>First</th>

<th>Last</th>

</tr>

<tr>

<td>Donald</td>

<td>Duck</td>

</tr>

<tr>

<td>Mickey</td>

<td>Mouse</td>

</tr>

<tr>

<td>Peter</td>

<td>Pan</td>

</tr>

</table>

</body>

</html>

Try it yourself

To learn more about HTML tables: Visit our HTML tutorial

The End?

This ends our quick introduction to HTML.

HTML is easy to learn. If you want to learn all about HTML:

Visit our full HTML tutorial


My First JavaScript

This is NOT a JavaScript tutorial, but simply a quick introduction to JavaScript.

If you are serious about learning JavaScript, read our complete JavaScript tutorial.

You Will Use JavaScript To Produce This Output In 12 Steps:


My First JavaScript

My First JavaScript - Step 1

To make a JavaScript that writes to your HTML page like this:

Use a simple text editor and write this:

<html>

<body>

My first text with JavaScript:

<script type="text/javascript">

document.write("<h4>Hello world!</h4>")

</script>

</body>

</html>

To learn more about JavaScript Text Writing: Visit our JavaScript tutorial

Try It On Your Computer

If you are using Windows, you can try this on your own computer.

Start Notepad for Windows and type in the HTML code above.

Select "Save As" from the File menu and save the text as "myfirst_javascript.htm" to your desktop.

Double-click on the "myfirst_javascript.htm" file to view it in your browser.

For Mac Users

Start TextEdit and change the following preferences: Select (in the preferences window) "Plain text" instead of "Rich text" and then select "Ignore rich text commands in HTML files". This is very important because if you don't do this, HTML codes probably won't work.

Type in the HTML code above. Save the text as "myfirst_javascript.htm" to your desktop.

Double-click on the "myfirst_javascript.htm" file to view it in your browser.


My First JavaScript

My First JavaScript - Step 2

To make a Variable like this:

Add the necessary code to your HTML page like this:

<html>

<body>

My first variable:

<script type="text/javascript">

var name = "Kai Jim Refsnes"

document.write(name)

</script>

</body>

</html>

Try it yourself!

To learn more about JavaScript Variables: Visit our JavaScript tutorial


My First JavaScript

My First JavaScript - Step 3

To make a Function like this:

Add the necessary code to your HTML page like this:

<html>

<head>

<script type="text/javascript">

function myfunction()

{

alert("HELLO")

}

</script>

</head>

<body>

<input type="button"

onclick="myfunction()"

value="My first function">

</body>

</html>

Try it yourself!

To learn more about JavaScript Functions: Visit our


My First JavaScript

My First JavaScript - Step 4

To make a Calculation like this:

Add the necessary code to your HTML page like this:

<html>

<head>

<script type="text/javascript">

function total(numberA,numberB)

{

return numberA + numberB

}

</script>

</head>

<body>

My First JavaScript calculation: 2 + 3 =

<script type="text/javascript">

document.write(total(2,3))

</script>

</body>

</html>

Try it yourself!

To learn more about JavaScript Calculations: Visit our JavaScript tutorial


My First JavaScript

My First JavaScript - Step 5

To make a If/else like this:

Add the necessary code to your HTML page like this:

<html>

<body>

My first if/else:

<script type="text/javascript">

var d = new Date()

var time = d.getHours()

if (time < 10)

{

document.write("<b>Good morning!</b>")

}

else

{

document.write("<b>Good day!</b>")

}

</script>

</body>

</html>

Try it yourself!

To learn more about JavaScript Conditionals: Visit our JavaScript tutorial


My First JavaScript

My First JavaScript - Step 6

To make a Randomized Text like this:

Add the necessary code to your HTML page like this:

<html>

<body>

My first randomized text:

<script type="text/javascript">

var r=Math.random()

if (r>0.5)

{

document.write("<a href='http://www.w3schools.com'

target='_blank'>Learn Web Development!</a>")

}

else

{

document.write("<a href='http://www.refsnesdata.no'

target='_blank'>Visit Refsnes Data!</a>")

}

</script>

</body>

</html>

Try it yourself!

To learn more about JavaScript Randomizing: JavaScript tutorial


My First JavaScript

My First JavaScript - Step 7

To make a Background Changer like this:

Add the necessary code to your HTML page like this:

<html>

<body>

<script language="javascript">

function change()

{

document.bgColor=document.list.colors.options

[document.list.colors.selectedIndex].value;

}

</script>

<p>My first background changer:

<form name="list">

<select name="colors">

<option value="red">Red

<option value="blue">Blue

<option value="green">Green

<option value="orange">Orange

<option value="white">White

</select>

<input type="button" value="Change Background color!"

name="myButton" onClick="change()" />

</form>

</p>

</body>

</html>

To learn more about JavaScript Form Objects: Visit our


My First JavaScript

My First JavaScript - Step 8

To make a Text-Loop like this:

Add the necessary code to your HTML page like this:

<html>

<body>

My first text-loop:

<script type="text/javascript">

for (i = 1; i <= 6; i++)

{

document.write("<h" + i + ">This is header " + i)

document.write("</h" + i + ">")

}

</script>

</body>

</html>

To learn more about JavaScript Loops: Visit our JavaScript tutorial


My First JavaScript

My First JavaScript - Step 9

To do a Browser Check like this:

Add the necessary code to your HTML page like this:

<html>

<body>

<p>My first browser check:

<script type="text/javascript">

document.write("<p>Browser: ")

document.write(navigator.appName + "</p>")

document.write("<p>Browserversion: ")

document.write(navigator.appVersion + "</p>")

document.write("<p>Cookies enabled: ")

document.write(navigator.cookieEnabled + "</p>")

document.write("<p>Screen resolution: ")

document.write(screen.width + "*" + screen.height)

document.write("</p>")

</script>

</p>

</body>

</html>

Try it yourself!

To learn more about JavaScript Navigator Objects: JavaScript tutorial


My First JavaScript

My First JavaScript - Step 10

To make a Uppercase/Lowercase change like this:

Add the necessary code to your HTML page like this:

<html>

<body>

My First Uppercase/Lowercase Script: <br />

<script type="text/javascript">

var str=("Hello scripter!")

document.write(str.toLowerCase())

document.write("<br />")

document.write(str.toUpperCase())

</script>

</body>

</html>

Try it yourself!

To learn more about JavaScript Text Formating: Visit our JavaScript tutorial


My First JavaScript

My First JavaScript - Step 11

To make a Date display like this:

Add the necessary code to your HTML page like this:

<html>

<body>

<script type="text/javascript">

var d=new Date()

var weekday=new Array("Sunday","Monday","Tuesday",

"Wednesday","Thursday","Friday","Saturday")

var monthname=new Array("Jan","Feb","Mar","Apr",

"May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

document.write("On ")

document.write(weekday[d.getDay()] + " ")

document.write(d.getDate() + ". ")

document.write(monthname[d.getMonth()] + " ")

document.write(d.getFullYear())

document.write(" I wrote my first date display script")

</script>

</body>

</html>

Try it yourself!

To learn more about JavaScript Date Dispaly: Visit our


My First JavaScript

My First JavaScript - Step 12

To make a Converter like this:

Add the necessary code to your HTML page like this:

<html>

<head>

<script type="text/javascript">

function convert(degree)

{

if (degree=="C")

{

F=document.myform.celsius.value * 9 / 5 + 32

document.myform.fahrenheit.value=(F)

}

else

{

C=(document.myform.fahrenheit.value -32) * 5 / 9

document.myform.celsius.value=(C)

}

}

</script>

</head>

<body>

<p><b>My first converter. Insert a number in either input field,

and the number will be converted into

either Celsius or Fahrenheit.</b>

</p>

<form name="myform">

<input name="celsius" onkeyup="convert('C')" size="20"> degrees Celsius<br />

equals<br />

<input name="fahrenheit" onkeyup="convert('F')" size="20"> degrees Fahrenheit

</form>

</body>

</html>

Try it yourself!

To learn view more JavaScript Examples: Visit our JavaScript tutorial

The End?

This ends our quick introduction to JavaScript.

If you want to learn all about JavaScript:

Visit our full JavaScript tutorial


My First VBScript

This is NOT a VBScript tutorial, but simply a quick introduction to VBScript.

If you are serious about learning VBScript, read our VBScript tutorial.

You Will Make These VBScripts In 11 Steps:


My First VBScript

My First VBScript - Step 1

To make a VBScript that writes to your HTML page like this:

Use a simple text editor and write this:

<html>

<p>My first text with VBScript:<br />

<script type="text/vbscript">

document.write("<h2>Hello World!</h2>")

</script>

</p>

</html>

Try it yourself!

To learn more about VBScript Text Writing: Visit our VBScript tutorial

Try It On Your Computer

If you are using Windows, you can try this on your own computer.

Start Notepad for Windows and type in the HTML code above.

Select "Save As" from the File menu and save the text as "myfirst_vbscript.htm" to your desktop.

Double-click on the "myfirst_vbscript.htm" file to view it in your browser.

For Mac Users

Start TextEdit and change the following preferences: Select (in the preferences window) "Plain text" instead of "Rich text" and then select "Ignore rich text commands in HTML files". This is very important because if you don't do this, HTML codes probably won't work.

Type in the HTML code above. Save the text as "myfirst_vbscript.htm" to your desktop.

Double-click on the "myfirst_vbscript.htm" file to view it in your browser.


My First VBScript

My First VBScript - Step 2

To make a Variable like this:

Add the necessary code to your HTML page like this:

<html>

<body>

<p>My first variable:

<script type="text/vbscript">

dim name

name="Kai Jim"

document.write(name)

</script>

</p>

</body>

</html>

Try it yourself!

To learn more about VBScript Variables: Visit our VBScript tutorial


My First VBScript

My First VBScript - Step 3

To make an Array like this:

Add the necessary code to your HTML page like this:

<html>

<body>

<p>My first array:<br />

<script type="text/vbscript">

dim famname(5)

famname(0)="Jan Egil"

famname(1)="Tove"

famname(2)="Hege"

famname(3)="Stale"

famname(4)="Kai Jim"

famname(5)="Borge"

for i=0 to 5

document.write(famname(i) & "<br />")

next

</script>

</p>

</body>

</html>

Try it yourself!

To learn more about VBScript Arrays: Visit our VBScript tutorial


My First VBScript

My First VBScript - Step 4

To make a Random Link like this:

Add the necessary code to your HTML page like this:

<html>

<body>

<p>My first random link:

<script type="text/vbscript">

randomize()

r=rnd()

if r>0.5 then

document.write("<a href='http://www.w3schools.com'

target='_blank'>Learn Web Development!</a>")

else

document.write("<a href='http://www.refsnesdata.no'

target='_blank'>Visit Refsnes Data!</a>")

end if

</script>

</p>

</body>

</html>

Try it yourself!

To learn more about VBScript Randomizing: Visit our


My First VBScript

My First VBScript - Step 5

To make a Random Number like this:

Add the necessary code to your HTML page like this:

<html>

<body>

<p>My first random number<br />

<script type="text/vbscript">

randomize()

randomNumber=Int(100 * rnd())

document.write("A random number: <b>" & randomNumber & "</b>")

</script>

</p>

</body>

</html>

To learn more about VBScript Randomizing: Visit our VBScript tutorial


My First VBScript

My First VBScript - Step 6

To make this:

Add the necessary code to your HTML page like this:

<html>

<head>

<script type="text/vbscript">

function greeting()

i=hour(time)

If i = 10 then

document.write("Just started...!")

elseif i = 11 then

document.write("Hungry!")

elseif i = 12 then

document.write("Ah, lunch-time!")

elseif i = 16 then

document.write("Time to go home!")

else

document.write("Unknown")

end if

end function

</script>

</head>

<body>

<p>My first if/elseif function:<br />

<script type="text/vbscript">

document.write(greeting())

</script>

</p>

</body>

</html>

Try it yourself!

To learn more about VBScript Conditionals: Visit our VBScript tutorial


My First VBScript

My First VBScript - Step 7

To make a Loop like this:

Add the necessary code to your HTML page like this:

<html>

<body>

<p>My first loop:<br />

<script type="text/vbscript">

for i=1 to 6

document.write("<h" & i & ">This is header "

& i & "</h" & i & ">")

next

</script>

</p>

</body>

</html>

Try it

To learn more about VBScript Looping: Visit our VBScript tutorial


My First VBScript

My First VBScript - Step 8

To make a Uppercase/Lowercase change like this:

Add the necessary code to your HTML page like this:

<html>

<body>

<p>My first uppercase/lowercase script:<br />

<script type="text/vbscript">

txt="Have a nice day!"

document.write(ucase(txt))

document.write("<br />")

document.write(lcase(txt))

</script>

</p>

</body>

</html>

Try it yourself!

To learn more about VBScript Text Formatting: Visit our VBScript tutorial


My First VBScript

My First VBScript - Step 9

To make a Reversed Text like this:

Add the necessary code to your HTML page like this:

<html>

<body>

<p>My first reversed text:<br />

<script type="text/vbscript">

sometext = "Hello Everyone!"

document.write(strReverse(sometext))

</script>

</p>

</body>

</html>

Try it yourself!

To learn more about VBScript Text Formatting: Visit our VBScript tutorial


My First VBScript

My First VBScript - Step 10

To make a Counter like this:

Add the necessary code to your HTML page like this:

<html>

<body>

<p>My first counter:<br />

<script type="text/vbscript">

millennium=cdate("1/1/3000 00:00:00")

document.write("It is " & DateDiff("m", Now(), millennium)

& " months to year 3000!<br />")

document.write("It is " & DateDiff("d", Now(), millennium)

& " days to year 3000!<br />")

document.write("It is " & DateDiff("h", Now(), millennium)

& " hours to year 3000!<br />")

document.write("It is " & DateDiff("n", Now(), millennium)

& " minutes to year 3000!<br />")

document.write("It is " & DateDiff("s", Now(), millennium)

& " seconds to year 3000!<br />")

</script>

</p>

</body>

</html>

yourself!

To learn more about VBScript Counters: Visit our VBScript tutorial


My First VBScript

My First VBScript - Step 11

To make a Time Display like this:

Add the necessary code to your HTML page like this:

<html>

<body>

<p>My first time format:<br />

<script type="text/vbscript">

document.write(FormatDateTime(date(),vbgeneraldate))

document.write("<br />")

document.write(FormatDateTime(date(),vblongdate))

document.write("<br />")

document.write("<br />")

document.write(FormatDateTime(now(),vblongtime))

document.write("<br />")

document.write(FormatDateTime(now(),vbshorttime))

</script>

</p>

</body>

</html>

Try it

To learn more about VBScript Date Displays: Visit our VBScript tutorial

The End?

This ends our quick introduction to VBScript.

If you want to learn all about VBScript:

Visit our full VBScript tutorial


MyFirst

QuickStarters - MyFirst

What is MyFirst?

MyFirst is a series of quick-starters designed to give you a quick introduction to some common web building languages.

These introductions are not tutorials. If you are serious about learning these languages, find the tutorials you are looking for at our Home Page.

Table of Contents

css

My First HTML

A quick introduction in how to create a web page with HTML.

css

My First CSS

A quick introduction in how to style an HTML page with CSS.

css

A quick introduction in how to use JavaScript in an HTML page.

css

My First VBScript

A quick introduction in how to use VBScript in an HTML page.


myfirst_html_01.html

My First Header


myfirst_html_02.html

My First Header

My first paragraph.

My first Bold text and Italic text


myfirst_html_03.html

My First Header

My first paragraph.

My first Bold text and Italic text

My first link: W3Schools


myfirst_html_04.html

My First Header

My first paragraph.

My first Bold text and Italic text

My first link: W3Schools

My first list:

· Red
· Green
· Blue


myfirst_html_05.html

My First Header

My first paragraph.

My first Bold text and Italic text

My first link: W3Schools

My first list:

· Red
· Green
· Blue

My first image:


myfirst_html_06.html

My First Header

My first paragraph.

My first Bold text and Italic text

My first link: W3Schools

My first list:

· Red
· Green
· Blue

My first image:

My first table:

First | Last
Donald | Duck
Mickey | Mouse
Peter | Pan


myfirst_js_01.html

My first text with JavaScript:


myfirst_js_02.html

My first variable:


myfirst_js_03.html


myfirst_js_04.html

My First JavaScript calculation: 2 + 3 =


myfirst_js_05.html

My first if/else:


myfirst_js_06.html

My first randomized text:


myfirst_js_07.html

My first background changer:

[TComboFormControlObj]


myfirst_js_08.html

My first text-loop:


myfirst_js_09.html

My first browser check:


myfirst_js_10.html

My First Uppercase/Lowercase Script:


myfirst_js_11.html


myfirst_js_12.html

My first converter. Insert a number in either input field, and the number will be converted into either Celsius or Fahrenheit.

[TEditFormControlObj] degrees Celsius

equals

[TEditFormControlObj] degrees Fahrenheit


myfirst_js_finished.html

My first text with JavaScript:

My first variable:

My First JavaScript calculation: 2 + 3 =

My first if/else:

My first randomized text:

My first background changer:

[TComboFormControlObj]

My first text-loop:

My first browser check:

My First Uppercase/Lowercase Script:

My first converter. Insert a number in either input field, and the number will be converted into either Celsius or Fahrenheit.

[TEditFormControlObj] degrees Celsius

equals

[TEditFormControlObj] degrees Fahrenheit


myfirst_vbscript_01.html

My first text with VBScript:


myfirst_vbscript_02.html

My first variable:


myfirst_vbscript_03.html

My first array:


myfirst_vbscript_04.html

My first random link:


myfirst_vbscript_05.html

My first random number


myfirst_vbscript_06.html

To make a Else/If like this:


myfirst_vbscript_07.html

My first loop:


myfirst_vbscript_08.html

My first uppercase/lowercase script:


myfirst_vbscript_09.html

My first reversed text:


myfirst_vbscript_10.html

My first counter:


myfirst_vbscript_11.html

My first time format:


myfirst_vbscript_finished.html

My first text with VBScript:

My first variable:

My first array:

My first random link:

My first random number

My first if/elseif function:

My first loop:

My first uppercase/lowercase script:

My first reversed text:

My first counter:

My first time format:


tryit_view0367.html

My first counter:


tryit_view09b0.html

My first variable:


tryit_view12bd.html

My First Header

My first paragraph.

My first Bold text and Italic text


tryit_view2913.html

My first text with JavaScript:


tryit_view2a97.html

My first background changer:

[TComboFormControlObj]


tryit_view370f.html

My First JavaScript calculation: 2 + 3 =


tryit_view4024.html

To make a Else/If like this:


tryit_view42b6.html

My First Header

My first paragraph.

My first Bold text and Italic text

My first link: W3Schools

My first list:

· Red
· Green
· Blue

My first image:

My first table:

First | Last
Donald | Duck
Mickey | Mouse
Peter | Pan


tryit_view42f3.html

My first uppercase/lowercase script:


tryit_view59fd.html

My First Uppercase/Lowercase Script:


tryit_view6d70.html

My first if/else:


tryit_view7443.html

My first text-loop:


tryit_view7d34.html

My first text with VBScript:


tryit_view848a.html

My first random link:


tryit_view9592.html

My First Header


tryit_view99a4.html

My first loop:


tryit_view9bc4.html

My first reversed text:


tryit_view9c72.html

My First Header

My first paragraph.

My first Bold text and Italic text

My first link:

My first list:

· Red
· Green
· Blue

My first image:


tryit_viewa311.html

My first time format:


tryit_viewa6e0.html

My first converter. Insert a number in either input field, and the number will be converted into either Celsius or Fahrenheit.

[TEditFormControlObj] degrees Celsius

equals

[TEditFormControlObj] degrees Fahrenheit


tryit_viewbc97.html

My first random number


tryit_viewc56a.html


tryit_viewc800.html

My first browser check:


tryit_viewcbf0.html

My First Header

My first paragraph.

My first Bold text and Italic text

My first link: W3Schools


tryit_viewdbb5.html


tryit_viewe60f.html

My first array:


tryit_viewf141.html

My First Header

My first paragraph.

My first Bold text and Italic text

My first link: W3Schools

My first list:

· Red
· Green
· Blue


tryit_viewfb89.html

My first randomized text:


.NET Building Blocks

.NET Building Blocks is a set of core Internet Services.

Web Services

Web Services provide data and services to other applications.

Future applications will access Web Services via standard Web Formats (HTTP, HTML, XML, and SOAP), with no need to know how the Web Service itself is implemented.

Web Services are main building blocks in the Microsoft .NET programming model.

Standard Communication

Official Web standards (XML, UDDI, SOAP) will be used to describe what Internet data is, and to describe what Web Services can do.

Future Web applications will be built on flexible services that can interact and exchange data, without the loss of integrity.

Internet Storages

.NET offers secure and addressable places to store data and applications on the Web. Allowing all types of Internet devices (PCs, Palmtops, Phones) to access data and applications.

These Web Services are built on Microsoft's existing NTFS, SQL Server, and Exchange technologies.

Internet Dynamic Delivery

Reliable automatic upgrades by demand and installation independent applications.

.NET will support rapid development of applications that can be dynamically reconfigured.

Internet Identity

.NET supports many different levels of authentication services like passwords, wallets, and smart cards.

These services are built on existing Microsoft Passport and Windows Authentication technologies.

Internet Messaging

.NET supports integration of messaging, e-mail, voice-mail, and fax into one unified Internet Service, targeted for all kinds of PCs or smart Internet devices.

These services are built on existing Hotmail, Exchange and Instant Messenger technologies.

Internet Calendar

.NET supports Internet integration of work, social, and private home calendars. Allowing all types of Internet devices (PCs, Palmtops, Phones) to access the data.

These services are built on existing Outlook and Hotmail technologies.

Internet Directory Services

.NET supports a new kind of directory services that can answer XML based questions about Internet Services, far more exactly than search engines and yellow pages.

These services are built on the UDDI standard.


Introduction to Microsoft .NET

Microsoft .NET is Microsoft's new Internet strategy.

.NET was originally called NGWS.

NGWS - Next Generation Windows Services

Before the official announcement of .NET, the term NGWS was used for Microsoft's plans for producing an "Internet-based platform of Next Generation Windows Services".

Steve Ballmer quote January 2000:

"Delivering an Internet-based platform of Next Generation Windows Services is the top priority of our company. The breakthroughs we’re talking about here include changes to the programming model, to the user interface, to the application integration model, the file system, new XML schema....."

Microsoft. NET

The Microsoft. NET strategy was presented by Microsoft officials to the rest of the world in June 2000:

· .NET is Microsoft's new Internet and Web strategy
· .NET is NOT a new operating system
· .NET is a new Internet and Web based infrastructure
· .NET delivers software as Web Services
· .NET is a framework for universal services
· .NET is a server centric computing model
· .NET will run in any browser on any platform
· .NET is based on the newest Web standards

.NET Internet Standards

.NET is built on the following Internet standards:

· HTTP, the communication protocol between Internet Applications
· XML, the format for exchanging data between Internet Applications
· SOAP, the standard format for requesting Web Services
· UDDI, the standard to search and discover Web Services

.NET Framework

The .NET Framework is the infrastructure for the new Microsoft .NET Platform.

The .NET Framework is a common environment for building, deploying, and running Web Services and Web Applications.

The .NET Framework contains common class libraries - like ADO.NET, ASP.NET and Windows Forms - to provide advanced standard services that can be integrated into a variety of computer systems.

The .NET Framework is language neutral. Currently it supports C++, C#, Visual Basic, JScript (The Microsoft version of JavaScript) and COBOL. Third-party languages - like Eiffel, Perl, Python, Smalltalk, and others - will also be available for building future .NET Framework applications.

The new Visual Studio.NET is a common development environment for the new .NET Framework. It provides a feature-rich application execution environment, simplified development and easy integration between a number of different development languages.

Additional Information

· The .NET plan includes a new version of the Windows operating system, a new version of Office, and a variety of new development software for programmers to build Web-based applications.
· The background for .NET is part of Microsoft's new strategy to keep Windows the dominant operating system in the market, as computing begins to move away from desktop computers toward Internet enabled devices, such as hand-held computers and cell phones.
· The most visual components of the new .NET framework are the new Internet Information Server 6.0, with ASP.NET and ADO.NET support, Visual Studio.NET software tools to build Web-based software, and new XML support in the SQL Server 2000 database.
· Bill Gates is supervising the .NET project.


Application Services

Applications must be Services

The paragraphs below describes W3Schools' vision about future Internet Distributed Applications.

Applications must be a Set of Services

Applications can no longer be allowed to contain large masses of compiled executable code. Applications must be broken down into a number of smaller individual services that are easier to create and easier to maintain. Individual services should be developed and maintained by smaller groups of people. Services are not the same as executables, or components, or DLL's. Services should be answers to submitted requests. Services should be returned as data. Our best suggestion is to develop services as a number of server-side HTML and/or XML pages.

Services must not be Purpose Built

Our history is full of applications that were purpose built for a single task. Many of these applications died before they were introduced, because they could not manage new changes in the requirements. This is a terrible waste of money and time. We (and the people that pay for our applications) want to create flexible applications that are so generalized that they can gracefully support future changes. Future - not even thought about - changes should easily hook into our application without crumbling or destroying it. Our best suggestion is to create flexible standard services that can be used to serve a lot of different requests.

Services must be easy to Create and Edit

Services should not be coded if it can be avoided. If a service has to be coded, our best suggestion is to use scripts. Services should never be compiled into executables. That makes services too hard to access and to edit. Any pre-compiled component used in an application will threaten the possibility of creating an application that can move, scale and gracefully support future extensions or changes. Services should be created and modified by editing their properties and methods, not by changing their executable code. Our best suggestion is to use an XML editor to create and edit services, and to use a standard service engine to provide services by executing the service description. The service descriptions should be stored in a data store like a database or in an XML/HTML file.

Services and data must be Self Describing

Application clients must be able to query a server for a service and to ask for the current server functions. Clients and servers must also be able to exchange data in a way so that both understand each element in the data. Our best suggestion is to use an XML based information vocabulary with a DTD (Document Type Definition) to exchange server functions, and to use XML to exchange data.


Application Standards

Client and Server Standards

The paragraphs below describes W3Schools' vision about future Internet Distributed Applications.

Executables, C++ (and Java too) must die

Neither C++ nor Java can ever create standard components that can run on all computers. There is no room for these languages in future distributed applications. Executables are not standard. COM objects are not standard, DLL-files are not standard. Registry settings are not standard. INI-files are not standard. None of these components must be allowed to destroy your dream of a standard distributed application that will run on almost any computer in the world.

Clients must be Standard Internet Browsers

Application clients must be standard clients without any additional components. No part of the applications must be stored on client computers. The application must never use, or rely on, any components, dll- or ini-files, registry settings or any other non standard settings or files stored on the client computer. (Then you can start calling it a Thin Client). Our best suggestion is to let all clients use standard Internet browsers like Internet Explorer, Netscape, or Firefox running on Windows or Mac computers.

Servers must be Standard Internet Servers

Application servers must be standard Internet servers running standard software without any additional components. The application must never use, or rely on, any components, dll- or ini-files, registry settings or any other non standard settings or files stored on the server. Our best suggestion is to use a standard Internet server like Internet Information Services (IIS), with a standard request-handler like Active Server Pages (ASP), and a standard database connector like Active Data Objects (ADO). As your data-store you should use a standard SQL based database like Oracle or Microsoft's SQL Server.

Applications must use Internet Communication

Application clients and servers must not be allowed to communicate via any proprietary protocol. Clients must request servers via a standard Internet protocol and servers must respond via the same protocol. Clients must be able to use any service without having to maintain a permanent connection to the server. Our best suggestion is to let servers be requested with standard stateless Internet HTTP requests. Servers should respond with a standard stateless Internet HTTP response.


.NET Tools

.NET Software

.NET is a mix of technologies, standards and development tools

Windows.NET

Today, Windows 2000 and Windows XP form the backbone of .NET.

In the future, the .NET infrastructure will be integrated into all Microsoft's operating systems, desktop and server products.

Windows.NET is the next generation Windows. It will provide support for all the .NET building blocks and .NET digital media. Windows.NET will be self-supporting with updates via Internet as users need them.

Office.NET

A new version of Microsoft Office - Office.NET - will have a new .NET architecture based on Internet clients and Web Services.

With Office.NET, browsing, communication, document handling and authoring will be integrated within a XML-based environment which allow users to store their documents on the Internet.

ASP.NET

ASP.NET is the latest version of ASP. It includes Web Services to link applications, services and devices using HTTP, HTML, XML and SOAP.

New in ASP.NET:

· New Language Support
· Programmable Controls
· Event Driven Programming
· XML Based Components
· User Authentication
· User Accounts and Roles
· High Scalability
· Compiled Code
· Easy Configuration
· Easy Deployment
· Not ASP Compatible
· Includes ADO.NET

You can read more about ASP.NET and ADO.NET in our ASP.NET Tutorial.

Visual Studio.NET

The latest version of Visual Studio - Visual Studio.NET - incorporates ASP.NET, ADO.NET, Web Services, Web Forms, and language innovations for Visual Basic. The development tools have deep XML support, an XML-based programming model and new object-oriented programming capabilities.

Visual Basic.NET

Visual Basic.NET has added language enhancements, making it a full object-oriented programming language.

SQL Server 2000

SQL Server 2000 is a fully web-enabled database.

SQL Server 2000 has strong support for XML and HTTP which are two of the main infrastructure technologies for .NET.

Some of the most important new SQL Server features are direct access to the database from a browser, query of relational data with results returned as XML, as well as storage of XML in relational formats.

Internet Information Services 6.0

IIS 6.0 has strong support for more programming to take place on the server, to allow the new Web Applications to run in any browser on any platform.


.NET Web Services

Web services are small units of code built to handle a limited task.

What are Web Services?

· Web services are small units of code
· Web services are designed to handle a limited set of tasks
· Web services use XML based communicating protocols
· Web services are independent of operating systems
· Web services are independent of programming languages
· Web services connect people, systems and devices

Small Units of Code

Web services are small units of code designed to handle a limited set of tasks.

An example of a web service can be a small program designed to supply other applications with the latest stock exchange prices. Another example can be a small program designed to handle credit card payment.

XML Based Web Protocols

Web services use the standard web protocols HTTP, XML, SOAP, WSDL, and UDDI.

HTTP

HTTP (Hypertext Transfer Protocol) is the World Wide Web standard for communication over the Internet. HTTP is standardized by the World Wide Web Consortium (W3C).

XML

XML (eXtensible Markup Language) is a well known standard for storing, carrying, and exchanging data. XML is standardized by the W3C.

You can read more about XML in our XML tutorial.

SOAP

SOAP (Simple Object Access Protocol) is a lightweight platform and language neutral communication protocol that allows programs to communicate via standard Internet HTTP. SOAP is standardized by the W3C.

You can read more about SOAP in our SOAP tutorial.

WSDL

WSDL (Web Services Description Language) is an XML-based language used to define web services and to describe how to access them. WSDL is a suggestion by Ariba, IBM and Microsoft for describing services for the W3C XML Activity on XML Protocols.

You can read more about WSDL in our WSDL tutorial.

UDDI

UDDI (Universal Description, Discovery and Integration) is a directory service where businesses can register and search for web services.

UDDI is a public registry, where one can publish and inquire about web services.

Independent of Operating Systems

Since web services use XML based protocols to communicate with other systems, web services are independent of both operating systems and programming languages.

An application calling a web service will always send its requests using XML, and get its answer returned as XML. The calling application will never be concerned about the operating system or the programming language running on the other computer.

Benefits of Web Services

· Easier to communicate between applications
· Easier to reuse existing services
· Easier to distribute information to more consumers
· Rapid development

Web services make it easier to communicate between different applications. They also make it possible for developers to reuse existing web services instead of writing new ones.

Web services can create new possibilities for many businesses because it provides an easy way to distribute information to a large number of consumers. One example could be flight schedules and ticket reservation systems.


Introduction to PHP

A PHP file may contain text, HTML tags and scripts. Scripts in a PHP file are executed on the server.

What You Should Already Know

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

· HTML / XHTML
· Some scripting knowledge

If you want to study these subjects first, find the tutorials on our Home page.

What is PHP?

· PHP stands for PHP: Hypertext Preprocessor
· PHP is a server-side scripting language, like ASP
· PHP scripts are executed on the server
· PHP supports many databases (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, etc.)
· PHP is an open source software (OSS)
· PHP is free to download and use

What is a PHP File?

· PHP files may contain text, HTML tags and scripts
· PHP files are returned to the browser as plain HTML
· PHP files have a file extension of ".php", ".php3", or ".phtml"

What is MySQL?

· MySQL is a database server
· MySQL is ideal for both small and large applications
· MySQL supports standard SQL
· MySQL compiles on a number of platforms
· MySQL is free to download and use

PHP + MySQL

· PHP combined with MySQL are cross-platform (means that you can develop in Windows and serve on a Unix platform)

Why PHP?

· PHP runs on different platforms (Windows, Linux, Unix, etc.)
· PHP is compatible with almost all servers used today (Apache, IIS, etc.)
· PHP is FREE to download from the official PHP resource: www.php.net
· PHP is easy to learn and runs efficiently on the server side

Where to Start?

· Install an Apache server on a Windows or Linux machine
· Install PHP on a Windows or Linux machine
· Install MySQL on a Windows or Linux machine


AJAX Introduction

AJAX = Asynchronous JavaScript And XML

AJAX is an acronym for Asynchronous JavaScript And XML.

AJAX is not a new programming language, but simply a new technique for creating better, faster, and more interactive web applications.

AJAX uses JavaScript to send and receive data between a web browser and a web server.

The AJAX technique makes web pages more responsive by exchanging data with the web server behind the scenes, instead of reloading an entire web page each time a user makes a change.

AJAX Is Based On Open Standards

AJAX is based on the following open standards:

· JavaScript
· XML
· HTML
· CSS

The open standards used in AJAX are well defined, and supported by all major browsers. AJAX applications are browser and platform independent. (Cross-Platform, Cross-Browser technology)

AJAX Is About Better Internet Applications

Web applications have many benefits over desktop applications:

· they can reach a larger audience
· they are easier to install and support
· they are easier to develop

However, Internet applications are not always as "rich" and user-friendly as traditional desktop applications.

With AJAX, Internet applications can be made richer (smaller, faster, and easier to use).

You Can Start Using AJAX Today

There is nothing new to learn.

AJAX is based on open standards. These standards have been used by most developers for several years.

Most existing web applications can be rewritten to use AJAX technology instead of traditional HTML forms.

AJAX Uses XML And HTTP Requests

A traditional web application will submit input (using an HTML form) to a web server. After the web server has processed the data, it will return a completely new web page to the user.

Because the server returns a new web page each time the user submits input, traditional web applications often run slowly and tend to be less user friendly.

With AJAX, web applications can send and retrieve data without reloading the whole web page. This is done by sending HTTP requests to the server (behind the scenes), and by modifying only parts of the web page using JavaScript when the server returns data.

XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.

You will learn more about how this is done in the next chapters of this tutorial.

PHP and AJAX

There is no such thing as an AJAX server.

AJAX is a technology that runs in your browser. It uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.

AJAX is a web browser technology independent of web server software.

However, in this tutorial we will focus more on actual examples running on a PHP server, and less on how AJAX works.

To read more about how AJAX works, visit our AJAX tutorial.


AJAX XMLHttpRequest

The XMLHttpRequest object makes AJAX possible.

The XMLHttpRequest

The XMLHttpRequest object is the key to AJAX.

It has been available ever since Internet Explorer 5.5 was released in July 2000, but not fully discovered before people started to talk about AJAX and Web 2.0 in 2005.

Creating An XMLHttpRequest Object

Different browsers use different methods to create an XMLHttpRequest object.

Internet Explorer uses an ActiveXObject.

Other browsers uses a built in JavaScript object called XMLHttpRequest.

Here is the simplest code you can use to overcome this problem:

var XMLHttp=null

if (window.XMLHttpRequest)

{

XMLHttp=new XMLHttpRequest()

}

else if (window.ActiveXObject)

{

XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

}

Example above explained:

1. First create a variable XMLHttp to use as your XMLHttpRequest object. Set the value to null.
2. Then test if the object window.XMLHttpRequest is available. This object is available in newer versions of Firefox, Mozilla, Opera, and Safari.
3. If it's available, use it to create a new object: XMLHttp=new XMLHttpRequest()
4. If it's not available, test if an object window.ActiveXObject is available. This object is available in Internet Explorer version 5.5 and later.
5. If it is available, use it to create a new object: XMLHttp=new ActiveXObject()

A Better Example?

Some programmers will prefer to use the newest and fastest version of the XMLHttpRequest object.

The example below tries to load Microsoft's latest version "Msxml2.XMLHTTP", available in Internet Explorer 6, before it falls back to "Microsoft.XMLHTTP", available in Internet Explorer 5.5 and later.

function GetXmlHttpObject()

{

var xmlHttp=null;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

}

return xmlHttp;

}

Example above explained:

1. First create a variable XMLHttp to use as your XMLHttpRequest object. Set the value to null.
2. Try to create the object the according to web standards (Mozilla, Opera and Safari):XMLHttp=new XMLHttpRequest()
3. Try to create the object the Microsoft way, available in Internet Explorer 6 and later:XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")
4. If this catches an error, try the older (Internet Explorer 5.5) way: XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

More about the XMLHttpRequest object

If you want to read more about the XMLHttpRequest, visit our AJAX tutorial.


livesearch.html

no suggestion


PHP __construct() Function

Definition and Usage

The __construct() function creates a new SimpleXMLElement object.

This function returns an object on success, and FALSE on failure.

Syntax

__construct(file,class,options,ns,is_prefix)

Parameter

Description

xml

Required. Specifies the XML document or XML data to use

options

Optional. Specifies additional Libxml parameters. Is set by specifying the option and 1 or 0 (TRUE or FALSE, e.g. LIBXML_NOBLANKS(1))

Possible values:

· LIBXML_COMPACT - Set small nodes allocation optimization. This may improve the application performance
· LIBXML_DTDATTR - Set default DTD attributes
· LIBXML_DTDLOAD - Load external subset
· LIBXML_DTDVALID - Validate with the DTD
· LIBXML_NOBLANKS - Remove blank nodes
· LIBXML_NOCDATA - Set CDATA as text nodes
· LIBXML_NOEMPTYTAG - Change empty tags (e.g. <br/> to <br></br>), only available in the DOMDocument->save() and DOMDocument->saveXML() functions
· LIBXML_NOENT - Substitute entities
· LIBXML_NOERROR - Do not show error reports
· LIBXML_NONET - Stop network access while loading documents
· LIBXML_NOWARNING - Do not show warning reports
· LIBXML_NOXMLDECL - Drop the XML declaration when saving a document
· LIBXML_NSCLEAN - Remove excess namespace declarations
· LIBXML_XINCLUDE - Use XInclude substitution
· LIBXML_ERR_ERROR - Get recoverable errors
· LIBXML_ERR_FATAL - Get fatal errors
· LIBXML_ERR_NONE - Get no errors
· LIBXML_ERR_WARNING - Get simple warnings
· LIBXML_VERSION - Get libxml version (e.g. 20605 or 20617)
· LIBXML_DOTTED_VERSION - Get dotted libxml version (e.g. 2.6.5 or 2.6.17)

is_url

Optional. Specifies if the xml parameter is an URL. Default is FALSE

ns

Optional

is_prefix

Optional

Example

<?php

$xmlstring = <<<XML

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

XML;

$xml = new SimpleXMLElement($xmlstring);

echo $xml->body[0];

?>

The output of the code above will be:

Don't forget me this weekend!


PHP abs() function

Definition and Usage

The abs() function returns the absolute value of a number.

Syntax

abs(x)

Parameter | Description
x | Required. A number. If the number is of type float, the return type is also float, otherwise it is integer

Example

<?php

echo(abs(6.7) . "<br />");

echo(abs(-3) . "<br />");

echo(abs(3));

?>

The output of the code above will be:

6.7

3

3


PHP acos() function

Definition and Usage

The acos() function returns the arccosine of a number as a numeric value value between 0 and PI radians.

Syntax

acos(x)

Parameter | Description
x | Required. Must be a numeric value in the range -1 to 1

Tips and Notes

Note: If the parameter x is outside the range -1 to 1, the browser will return -1.#IND.

Note: -1 will return the value of PI.

Example

In this example we will get the arccosine of different numbers:

<?php

echo(acos(0.64) . "<br />");

echo(acos(0) . "<br />");

echo(acos(-1) . "<br />");

echo(acos(1) . "<br />");

echo(acos(2))

?>

The output of the code above will be:

0.876298061168

1.57079632679

3.14159265359

0

-1.#IND


PHP acosh() function

Definition and Usage

The acosh() function returns the inverse hyperbolic cosine of a number.

Syntax

acosh(x)

Parameter | Description
x | Required. A number

Tips and Notes

Note: This function is not implemented on Windows platforms.


PHP addAttribute() Function

Definition and Usage

The addAttribute() function adds an attribute to the SimpleXML Element.

Syntax

class SimpleXMLElement

{

string addAttribute(name,value,ns)

}

Parameter | Description
name | Required. Specifies the name of the attribute
value | Required. Specifies the value of the attribute
ns | Optional. Specifies the namespace of the attribute

Example

XML File

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

PHP Code

<?php

$xml = simplexml_load_file("test.xml");

$xml->body[0]->addAttribute("type", "small");

foreach($xml->body[0]->attributes() as $a => $b)

{

echo $a,'="',$b,"\"</br>";

}

?>

The output of the code above will be:

type="small"


PHP addChild() Function

Definition and Usage

The addChild() function adds a child element to a specified XML node.

Syntax

class SimpleXMLElement

{

string addChild(name,value,ns)

}

Parameter | Description
name | Required. Specifies the name of the child element
value | Optional. Specifies the value of the child element
ns | Optional. Specifies the namespace of the child element

Example

XML File

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

PHP Code

<?php

$xml = simplexml_load_file("test.xml");

$xml->body[0]->addChild("date", "2006-10-13");

foreach ($xml->body->children() as $child)

{

echo "Child node: " . $child . "<br />";

}

?>

The output of the code above will be:

Child node: 2006-10-13


PHP addcslashes() Function

Definition and Usage

The addcslashes() function returns a string with backslashes in front of the specified characters.

Syntax

addcslashes(string,characters)

Parameter | Description
string | Required. Specifies the string to check
characters | Required. Specifies the characters or range of characters to be affected by addcslashes()

Tips and Notes

Note: Be careful using addcslashes() on 0, r, n and t. In PHP, \0, \r, \n and \t are predefined escape sequences.

Example 1

In this example we will add backslashes to certain characters in a string:

<?php

$str = "Hello, my name is Kai Jim.";

echo $str."<br />";

echo addcslashes($str,'m')."<br />";

echo addcslashes($str,'K')."<br />";

?>

The output of the code above will be:

Hello, my name is Kai Jim.

Hello, \my na\me is Kai Ji\m.

Hello, my name is \Kai Jim.

Example 2

In this example we will add backslashes to a range of characters in a string:

<?php

$str = "Hello, my name is Kai Jim.";

echo $str."<br />";

echo addcslashes($str,'A..Z')."<br />";

echo addcslashes($str,'a..z')."<br />";

echo addcslashes($str,'a..h');

?>

The output of the code above will be:

Hello, my name is Kai Jim.

\Hello, my name is \Kai \Jim.

H\e\l\l\o, \m\y \n\a\m\e \i\s K\a\i J\i\m.

H\ello, my n\am\e is K\ai Jim.


PHP addslashes() Function

Definition and Usage

The addslashes() function returns a string with backslashes in front of predefined characters.

The predefined characters are:

· single quote (')
· double quote (")
· backslash (\)
· NULL

Syntax

addslashes(string)

Parameter | Description
string | Required. Specifies the string to check

Tips and Notes

Tip: This function can be used to prepare a string for storage in a database and database queries.

Note: PHP runs addslashes() on all GET, POST, and COOKIE data by default. Therefore you should not use addslashes() on strings that have already been escaped, this will cause double escaping. The function get_magic_quotes_gpc() can be used to check this.

Example

In this example we will add backslashes to the predefined characters in a string:

<?php

$str = "Who's Kai Jim?";

echo $str . " This is not safe in a database query.<br />";

echo addslashes($str) . " This is safe in a database query.";

?>

The output of the code above will be:

Who's Kai Jim? This is not safe in a database query.

Who\'s Kai Jim? This is safe in a database query.


PHP and AJAX Live Search

AJAX can be used for a more user friendly and interactive search.

AJAX Live Search

In the AJAX example below we will demonstrate a live search, where the server gets search results while the user types.

Live search has many benefits compared to traditional searching:

· Matching results are shown as you type
· Results narrow as you continue typing
· If results become too narrow, remove characters to see a broader result

Search for a W3Schools page in the Box Below

[TEditFormControlObj]

This example consists of four pages:

· a simple HTML form
· a JavaScript
· a PHP page
· an XML document

In this example the results are found in an XML document (links.xml). To make this example small and simple, only eight results are available.

The HTML Form

This is the HTML page. It contains a simple HTML form, style for the form and a link to a JavaScript:

<html>

<head>

<script src="livesearch.js"></script>

<style type="text/css">

#livesearch

{

margin:0px;

width:194px;

}

#txt1

{

margin:0px;

}

</style>

</head>

<body>

<form>

<input type="text" id="txt1" size="30"

onkeyup="showResult(this.value)">

<div id="livesearch"></div>

</form>

</body>

</html>

Example Explained - The HTML Form

As you can see, the HTML page above contains a simple HTML form with an input field called "txt1".

The form works like this:

1. An event is triggered when the user presses, and releases a key in the input field
2. When the event is triggered, a function called showResult() is executed.
3. Below the form is a <div> called "livesearch". This is used as a placeholder for the return data of the showResult() function.

The JavaScript

The JavaScript code is stored in "livesearch.js" and linked to the HTML document:

var xmlHttp

function showResult(str)

{

if (str.length==0)

{

document.getElementById("livesearch").

innerHTML="";

document.getElementById("livesearch").

style.border="0px";

return

}

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)

{

alert ("Browser does not support HTTP Request")

return

}

var url="livesearch.php"

url=url+"?q="+str

url=url+"&sid="+Math.random()

xmlHttp.onreadystatechange=stateChanged

xmlHttp.open("GET",url,true)

xmlHttp.send(null)

}

function stateChanged()

{

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

{

document.getElementById("livesearch").

innerHTML=xmlHttp.responseText;

document.getElementById("livesearch").

style.border="1px solid #A5ACB2";

}

}

function GetXmlHttpObject()

{

var xmlHttp=null;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

}

return xmlHttp;

}

Example Explained

The GetXmlHttpObject function is the same as in the PHP AJAX Suggest chapter.

The showResult() Function

This function executes every time a character is entered in the input field.

If there is no input in the text field (str.length == 0) the function sets the return field to empty and removes any border around it.

However, if there is any input in the text field the function executes the following:

1. Defines the url (filename) to send to the server
2. Adds a parameter (q) to the url with the content of the input field
3. Adds a random number to prevent the server from using a cached file
4. Calls on the GetXmlHttpObject function to create an XMLHTTP object, and tells the object to execute a function called stateChanged when a change is triggered
5. Opens the XMLHTTP object with the given url.
6. Sends an HTTP request to the server

The stateChanged() Function

This function executes every time the state of the XMLHTTP object changes.

When the state changes to 4 (or to "complete"), the content of the txtHint placeholder is filled with the response text, and a border is set around the return field.

The PHP Page

The server page called by the JavaScript code is a PHP file called "livesearch.php".

The code in the "livesearch.php" checks the XML document "links.xml". This document contains titles and URL's of some pages on W3Schools.com.

The code searches the XML file for titles matching the search string and returns the result as HTML:

<?php

$xmlDoc = new DOMDocument();

$xmlDoc->load("links.xml");

$x=$xmlDoc->getElementsByTagName('link');

//get the q parameter from URL

$q=$_GET["q"];

//lookup all links from the xml file if length of q>0

if (strlen($q) > 0)

{

$hint="";

for($i=0; $i<($x->length); $i++)

{

$y=$x->item($i)->getElementsByTagName('title');

$z=$x->item($i)->getElementsByTagName('url');

if ($y->item(0)->nodeType==1)

{

//find a link matching the search text

if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))

 {

 if ($hint=="")

  {

  $hint="<a href='" .

  $z->item(0)->childNodes->item(0)->nodeValue .

  "' target='_blank'>" .

  $y->item(0)->childNodes->item(0)->nodeValue . "</a>";

  }

 else

  {

  $hint=$hint . "<br /><a href='" .

  $z->item(0)->childNodes->item(0)->nodeValue .

  "' target='_blank'>" .

  $y->item(0)->childNodes->item(0)->nodeValue . "</a>";

  }

 }

}

}

}

// Set output to "no suggestion" if no hint were found

// or to the correct values

if ($hint == "")

{

$response="no suggestion";

}

else

{

$response=$hint;

}

//output the response

echo $response;

?>

If there is any text sent from the JavaScript (strlen($q) > 0) the following happens:

1. PHP creates an XML DOM object of the "links.xml" file
2. All "title" elements (nodetypes = 1) are looped through to find a name matching the one sent from the JavaScript
3. The link containing the correct title is found and set as the "$response" variable. If more than one match is found, all matches are added to the variable
4. If no matches are found the $response variable is set to "no suggestion"
5. The $result variable is output and sent to the "livesearch" placeholder


PHP and AJAX MySQL Database Example

AJAX can be used for interactive communication with a database.

AJAX Database Example

In the AJAX example below we will demonstrate how a web page can fetch information from a MySQL database using AJAX technology.

Select a Name in the Box Below

Select a User: [TComboFormControlObj]

User info will be listed here.

This example consists of three elements:

· a MySQL database
· a simple HTML form
· a JavaScript
· a PHP page

The Database

The database we will be using in this example looks like this:

id | FirstName | LastName | Age | Hometown | Job
1 | Peter | Griffin | 41 | Quahog | Brewery
2 | Lois | Griffin | 40 | Newport | Piano Teacher
3 | Joseph | Swanson | 39 | Quahog | Police Officer
4 | Glenn | Quagmire | 41 | Quahog | Pilot

The HTML Form

The example above contains a simple HTML form and a link to a JavaScript:

<html>

<head>

<script src="selectuser.js"></script>

</head>

<body>

<form>

Select a User:

<select name="users" onchange="showUser(this.value)">

<option value="Peter">Peter Griffin</option>

<option value="Lois">Lois Griffin</option>

<option value="Glenn">Glenn Quagmire</option>

<option value="Joseph">Joseph Swanson</option>

</select>

</form>

<p>

<div id="txtHint"><b>User info will be listed here.</b></div>

</p>

</body>

</html>

Example Explained - The HTML Form

As you can see it is just a simple HTML form with a drop down box called "users".

The paragraph below the form contains a div called "txtHint". The div is used as a placeholder for info retrieved from the web server.

When the user selects data, a function called "showUser()" is executed. The execution of the function is triggered by the "onchange" event.

In other words: Each time the user changes the value in the drop down box, the function showUser() is called.

The JavaScript

This is the JavaScript code stored in the file "selectuser.js":

var xmlHttp

function showUser(str)

{

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)

{

alert ("Browser does not support HTTP Request")

return

}

var url="getuser.php"

url=url+"?q="+str

url=url+"&sid="+Math.random()

xmlHttp.onreadystatechange=stateChanged

xmlHttp.open("GET",url,true)

xmlHttp.send(null)

}

function stateChanged()

{

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

{

document.getElementById("txtHint").innerHTML=xmlHttp.responseText

}

}

function GetXmlHttpObject()

{

var xmlHttp=null;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

//Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

}

return xmlHttp;

}

Example Explained

The stateChanged() and GetXmlHttpObject functions are the same as in the PHP AJAX Suggest chapter, you can go to there for an explanation of those.

The showUser() Function

If an item in the drop down box is selected the function executes the following:

1. Calls on the GetXmlHttpObject function to create an XMLHTTP object
2. Defines the url (filename) to send to the server
3. Adds a parameter (q) to the url with the content of the input field
4. Adds a random number to prevent the server from using a cached file
5. Call stateChanged when a change is triggered
6. Opens the XMLHTTP object with the given url.
7. Sends an HTTP request to the server

The PHP Page

The server page called by the JavaScript, is a simple PHP file called "getuser.php".

The page is written in PHP and uses a MySQL databse.

The code runs a SQL query against a database and returns the result as an HTML table:

<?php

$q=$_GET["q"];

$con = mysql_connect('localhost', 'peter', 'abc123');

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

mysql_select_db("ajax_demo", $con);

$sql="SELECT * FROM user WHERE FirstName = '".$q."'";

$result = mysql_query($sql);

echo "<table border='1'>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

<th>Hometown</th>

<th>Job</th>

</tr>";

while($row = mysql_fetch_array($result))

{

echo "<tr>";

echo "<td>" . $row['FirstName'] . "</td>";

echo "<td>" . $row['LastName'] . "</td>";

echo "<td>" . $row['Age'] . "</td>";

echo "<td>" . $row['Hometown'] . "</td>";

echo "<td>" . $row['Job'] . "</td>";

echo "</tr>";

}

echo "</table>";

mysql_close($con);

?>

Example Explained

When the query is sent from the JavaScript to the PHP page the following happens:

1. PHP opens a connection to a MySQL server
2. The "user" with the specified name is found
3. A table is created and the data is inserted and sent to the "txtHint" placeholder


PHP and AJAX Poll

AJAX Suggest

In the AJAX example below we will demonstrate a poll where the web page can get the result without reloading.

Do you like PHP and AJAX so far?

Yes: [TRadioButtonFormControlObj]

No: [TRadioButtonFormControlObj]

This example consists of four pages:

· a simple HTML form
· a JavaScript
· a PHP page
· a text file to store the results

The HTML Form

This is the HTML page. It contains a simple HTML form and a link to a JavaScript:

<html>

<head>

<script src="poll.js"></script>

</head>

<body>

<div id="poll">

<h2>Do you like PHP and AJAX so far?</h2>

<form>

Yes:

<input type="radio" name="vote"

value="0" onclick="getVote(this.value)">

<br>No:

<input type="radio" name="vote"

value="1" onclick="getVote(this.value)">

</form>

</div>

</body>

</html>

Example Explained - The HTML Form

As you can see, the HTML page above contains a simple HTML form inside a "<div>" with two radio buttons.

The form works like this:

1. An event is triggered when the user selects the "yes" or "no" option
2. When the event is triggered, a function called getVote() is executed.
3. Around the form is a <div> called "poll". When the data is returned from the getVote() function, the return data will replace the form.

The Text File

The text file (poll_result.txt) is where we store the data from the poll.

It is stored like this:

0||0

The first number represents the "Yes" votes, the second number represents the "No" votes.

Note: Remember to allow your web server to edit the text file. Do NOT give everyone access, just the web server (PHP).

The JavaScript

The JavaScript code is stored in "poll.js" and linked to in the HTML document:

var xmlHttp

function getVote(int)

{

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)

{

alert ("Browser does not support HTTP Request")

return

}

var url="poll_vote.php"

url=url+"?vote="+int

url=url+"&sid="+Math.random()

xmlHttp.onreadystatechange=stateChanged

xmlHttp.open("GET",url,true)

xmlHttp.send(null)

}

function stateChanged()

{

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

{

document.getElementById("poll").

innerHTML=xmlHttp.responseText;

}

}

function GetXmlHttpObject()

{

var objXMLHttp=null

if (window.XMLHttpRequest)

{

objXMLHttp=new XMLHttpRequest()

}

else if (window.ActiveXObject)

{

objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

}

return objXMLHttp

}

Example Explained

The stateChanged() and GetXmlHttpObject functions are the same as in the PHP AJAX Suggest chapter.

The getVote() Function

This function executes when "yes" or "no" is selected in the HTML form.

1. Defines the url (filename) to send to the server
2. Adds a parameter (vote) to the url with the content of the input field
3. Adds a random number to prevent the server from using a cached file
4. Calls on the GetXmlHttpObject function to create an XMLHTTP object, and tells the object to execute a function called stateChanged when a change is triggered
5. Opens the XMLHTTP object with the given url.
6. Sends an HTTP request to the server

The PHP Page

The server page called by the JavaScript code is a simple PHP file called "poll_vote.php".

<?php

$vote = $_REQUEST['vote'];

//get content of textfile

$filename = "poll_result.txt";

$content = file($filename);

//put content in array

$array = explode("||", $content[0]);

$yes = $array[0];

$no = $array[1];

if ($vote == 0)

{

$yes = $yes + 1;

}

if ($vote == 1)

{

$no = $no + 1;

}

//insert votes to txt file

$insertvote = $yes."||".$no;

$fp = fopen($filename,"w");

fputs($fp,$insertvote);

fclose($fp);

?>

<h2>Result:</h2>

<table>

<tr>

<td>Yes:</td>

<td>

<img src="poll.gif"

width='<?php echo(100*round($yes/($no+$yes),2)); ?>'

height='20'>

<?php echo(100*round($yes/($no+$yes),2)); ?>%

</td>

</tr>

<tr>

<td>No:</td>

<td>

<img src="poll.gif"

width='<?php echo(100*round($no/($no+$yes),2)); ?>'

height='20'>

<?php echo(100*round($no/($no+$yes),2)); ?>%

</td>

</tr>

</table>

The selected value is sent from the JavaScript and the following happens:

1. Get the content of the "poll_result.txt" file
2. Put the content of the file in variables and add one to the selected variable
3. Write the result to the "poll_result.txt" file
4. Output a graphical representation of the poll result


PHP and AJAX RSS Reader

An RSS Reader is used to read RSS Feeds

RSS allows fast browsing for news and updates

AJAX RSS Reader

In the AJAX example below we will demonstrate an RSS reader where the content from the RSS is loaded into the webpage without refreshing.

Select an RSS News Feed in the Box Below

Select an RSS-Feed: [TComboFormControlObj]

RSS Feed will be listed here.

This example consists of three pages:

· a simple HTML form
· a JavaScript
· a PHP page.

The HTML Form

This is the HTML page. It contains a simple HTML form and a link to a JavaScript:

<html>

<head>

<script type="text/javascript" src="getrss.js"></script>

</head>

<body>

<form>

Select an RSS-Feed:

<select onchange="showRSS(this.value)">

<option value="Google">Google News</option>

<option value="MSNBC">MSNBC News</option>

</select>

</form>

<p><div id="rssOutput">

<b>RSS Feed will be listed here.</b></div></p>

</body>

</html>

Example Explained - The HTML Form

As you can see, the HTML page above contains a simple HTML form with a drop-down box.

The form works like this:

1. An event is triggered when the user selects an option in the drop down box
2. When the event is triggered, a function called showRSS() is executed.
3. Below the form is a <div> called "rssOutput". This is used as a placeholder for the return data of the showRSS() function.

The JavaScript

The JavaScript code is stored in "getrss.js" and linked to the HTML document:

var xmlHttp

function showRSS(str)

{

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)

{

alert ("Browser does not support HTTP Request")

return

}

var url="getrss.php"

url=url+"?q="+str

url=url+"&sid="+Math.random()

xmlHttp.onreadystatechange=stateChanged

xmlHttp.open("GET",url,true)

xmlHttp.send(null)

}

function stateChanged()

{

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

{

document.getElementById("rssOutput")

.innerHTML=xmlHttp.responseText

}

}

function GetXmlHttpObject()

{

var xmlHttp=null;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

}

return xmlHttp;

}

Example Explained

The stateChanged() and GetXmlHttpObject functions are the same as in the PHP AJAX Suggest chapter.

The showRSS() Function

Every time an option is selected in the input field this function executes the following:

1. Defines the url (filename) to send to the server
2. Adds a parameter (q) to the url with the selected option from the drop down box
3. Adds a random number to prevent the server from using a cached file
4. Calls on the GetXmlHttpObject function to create an XMLHTTP object, and tells the object to execute a function called stateChanged when a change is triggered
5. Opens the XMLHTTP object with the given url.
6. Sends an HTTP request to the server

The PHP Page

The server page called by the JavaScript code is a PHP file called "getrss.php":

<?php

//get the q parameter from URL

$q=$_GET["q"];

//find out which feed was selected

if($q=="Google")

{

$xml=("http://news.google.com/news?ned=us&topic=h&output=rss");

}

elseif($q=="MSNBC")

{

$xml=("http://rss.msnbc.msn.com/id/3032091/device/rss/rss.xml");

}

$xmlDoc = new DOMDocument();

$xmlDoc->load($xml);

//get elements from "<channel>"

$channel=$xmlDoc->getElementsByTagName('channel')->item(0);

$channel_title = $channel->getElementsByTagName('title')

->item(0)->childNodes->item(0)->nodeValue;

$channel_link = $channel->getElementsByTagName('link')

->item(0)->childNodes->item(0)->nodeValue;

$channel_desc = $channel->getElementsByTagName('description')

->item(0)->childNodes->item(0)->nodeValue;

//output elements from "<channel>"

echo("<p><a href='" . $channel_link

. "'>" . $channel_title . "</a>");

echo("<br />");

echo($channel_desc . "</p>");

//get and output "<item>" elements

$x=$xmlDoc->getElementsByTagName('item');

for ($i=0; $i<=2; $i++)

{

$item_title=$x->item($i)->getElementsByTagName('title')

->item(0)->childNodes->item(0)->nodeValue;

$item_link=$x->item($i)->getElementsByTagName('link')

->item(0)->childNodes->item(0)->nodeValue;

$item_desc=$x->item($i)->getElementsByTagName('description')

->item(0)->childNodes->item(0)->nodeValue;

echo ("<p><a href='" . $item_link

. "'>" . $item_title . "</a>");

echo ("<br />");

echo ($item_desc . "</p>");

}

?>

Example Explained - The PHP Page

When an option is sent from the JavaScript the following happens:

1. PHP finds out which RSS feed was selected
2. An XML DOM object is created for the selected RSS feed
3. The elements from the RSS channel are found and outputted
4. The three first elements from the RSS items are looped through and outputted


PHP and AJAX Suggest

AJAX Suggest

In the AJAX example below we will demonstrate how a web page can communicate with a web server online as a user enters data into a web form.

Type a Name in the Box Below

First Name: [TEditFormControlObj]

Suggestions:

This example consists of three pages:

· a simple HTML form
· a JavaScript
· a PHP page

The HTML Form

This is the HTML page. It contains a simple HTML form and a link to a JavaScript:

<html>

<head>

<script src="clienthint.js"></script>

</head>

<body>

<form>

First Name:

<input type="text" id="txt1"

onkeyup="showHint(this.value)">

</form>

<p>Suggestions: <span id="txtHint"></span></p>

</body>

</html>

Example Explained - The HTML Form

As you can see, the HTML page above contains a simple HTML form with an input field called "txt1".

The form works like this:

1. An event is triggered when the user presses, and releases a key in the input field
2. When the event is triggered, a function called showHint() is executed.
3. Below the form is a <span> called "txtHint". This is used as a placeholder for the return data of the showHint() function.

The JavaScript

The JavaScript code is stored in "clienthint.js" and linked to the HTML document:

var xmlHttp

function showHint(str)

{

if (str.length==0)

{

document.getElementById("txtHint").innerHTML=""

return

}

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)

{

alert ("Browser does not support HTTP Request")

return

}

var url="gethint.php"

url=url+"?q="+str

url=url+"&sid="+Math.random()

xmlHttp.onreadystatechange=stateChanged

xmlHttp.open("GET",url,true)

xmlHttp.send(null)

}

function stateChanged()

{

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

{

document.getElementById("txtHint").innerHTML=xmlHttp.responseText

}

}

function GetXmlHttpObject()

{

var xmlHttp=null;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

}

return xmlHttp;

}

Example Explained

The showHint() Function

This function executes every time a character is entered in the input field.

If there is some input in the text field (str.length > 0) the function executes the following:

1. Defines the url (filename) to send to the server
2. Adds a parameter (q) to the url with the content of the input field
3. Adds a random number to prevent the server from using a cached file
4. Calls on the GetXmlHttpObject function to create an XMLHTTP object, and tells the object to execute a function called stateChanged when a change is triggered
5. Opens the XMLHTTP object with the given url.
6. Sends an HTTP request to the server

If the input field is empty, the function simply clears the content of the txtHint placeholder.

The stateChanged() Function

This function executes every time the state of the XMLHTTP object changes.

When the state changes to 4 (or to "complete"), the content of the txtHint placeholder is filled with the response text.

The GetXmlHttpObject() Function

AJAX applications can only run in web browsers with complete XML support.

The code above called a function called GetXmlHttpObject().

The purpose of the function is to solve the problem of creating different XMLHTTP objects for different browsers.

This is explained in the previous chapter.

The PHP Page

The server page called by the JavaScript code is a simple PHP file called "gethint.php".

The code in the "gethint.php" checks an array of names and returns the corresponding names to the client:

<?php

// Fill up array with names

$a[]="Anna";

$a[]="Brittany";

$a[]="Cinderella";

$a[]="Diana";

$a[]="Eva";

$a[]="Fiona";

$a[]="Gunda";

$a[]="Hege";

$a[]="Inga";

$a[]="Johanna";

$a[]="Kitty";

$a[]="Linda";

$a[]="Nina";

$a[]="Ophelia";

$a[]="Petunia";

$a[]="Amanda";

$a[]="Raquel";

$a[]="Cindy";

$a[]="Doris";

$a[]="Eve";

$a[]="Evita";

$a[]="Sunniva";

$a[]="Tove";

$a[]="Unni";

$a[]="Violet";

$a[]="Liza";

$a[]="Elizabeth";

$a[]="Ellen";

$a[]="Wenche";

$a[]="Vicky";

//get the q parameter from URL

$q=$_GET["q"];

//lookup all hints from array if length of q>0

if (strlen($q) > 0)

{

$hint="";

for($i=0; $i<count($a); $i++)

{

if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))

  {

  if ($hint=="")

    {

    $hint=$a[$i];

    }

  else

    {

    $hint=$hint." , ".$a[$i];

    }

  }

}

}

//Set output to "no suggestion" if no hint were found

//or to the correct values

if ($hint == "")

{

$response="no suggestion";

}

else

{

$response=$hint;

}

//output the response

echo $response;

?>

If there is any text sent from the JavaScript (strlen($q) > 0) the following happens:

1. Find a name matching the characters sent from the JavaScript
2. If more than one name is found, include all names in the response string
3. If no matching names were found, set response to "no suggestion"
4. If one or more matching names were found, set response to these names
5. The response is sent to the "txtHint" placeholder


PHP and AJAX XML Example

AJAX can be used for interactive communication with an XML file.

AJAX XML Example

In the AJAX example below we will demonstrate how a web page can fetch information from an XML file using AJAX technology.

Select a CD in the Box Below

Select a CD: [TComboFormControlObj]

CD info will be listed here.

This example consists of four pages:

· a simple HTML form
· an XML file
· a JavaScript
· a PHP page

The HTML Form

The example above contains a simple HTML form and a link to a JavaScript:

<html>

<head>

<script src="selectcd.js"></script>

</head>

<body>

<form>

Select a CD:

<select name="cds" onchange="showCD(this.value)">

<option value="Bob Dylan">Bob Dylan</option>

<option value="Bee Gees">Bee Gees</option>

<option value="Cat Stevens">Cat Stevens</option>

</select>

</form>

<p>

<div id="txtHint"><b>CD info will be listed here.</b></div>

</p>

</body>

</html>

Example Explained

As you can see it is just a simple HTML form with a simple drop down box called "cds".

The paragraph below the form contains a div called "txtHint". The div is used as a placeholder for info retrieved from the web server.

When the user selects data, a function called "showCD" is executed. The execution of the function is triggered by the "onchange" event.

In other words: Each time the user changes the value in the drop down box, the function showCD is called.

The XML File

The XML file is "cd_catalog.xml". This document contains a CD collection.

The JavaScript

This is the JavaScript code stored in the file "selectcd.js":

var xmlHttp

function showCD(str)

{

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)

{

alert ("Browser does not support HTTP Request")

return

}

var url="getcd.php"

url=url+"?q="+str

url=url+"&sid="+Math.random()

xmlHttp.onreadystatechange=stateChanged

xmlHttp.open("GET",url,true)

xmlHttp.send(null)

}

function stateChanged()

{

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

{

document.getElementById("txtHint").innerHTML=xmlHttp.responseText

}

}

function GetXmlHttpObject()

{

var xmlHttp=null;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

}

return xmlHttp;

}

Example Explained

The stateChanged() and GetXmlHttpObject functions are the same as in the last chapter, you can go to the previous page for an explanation of those

The showCD() Function

If an item in the drop down box is selected the function executes the following:

1. Calls on the GetXmlHttpObject function to create an XMLHTTP object
2. Defines the url (filename) to send to the server
3. Adds a parameter (q) to the url with the content of the input field
4. Adds a random number to prevent the server from using a cached file
5. Call stateChanged when a change is triggered
6. Opens the XMLHTTP object with the given url.
7. Sends an HTTP request to the server

The PHP Page

The server paged called by the JavaScript, is a simple PHP file called "getcd.php".

The page is written in PHP using the XML DOM to load the XML document "cd_catalog.xml".

The code runs a query against the XML file and returns the result as HTML:

<?php

$q=$_GET["q"];

$xmlDoc = new DOMDocument();

$xmlDoc->load("cd_catalog.xml");

$x=$xmlDoc->getElementsByTagName('ARTIST');

for ($i=0; $i<=$x->length-1; $i++)

{

//Process only element nodes

if ($x->item($i)->nodeType==1)

{

if ($x->item($i)->childNodes->item(0)->nodeValue == $q)

  {

  $y=($x->item($i)->parentNode);

  }

}

}

$cd=($y->childNodes);

for ($i=0;$i<$cd->length;$i++)

{

//Process only element nodes

if ($cd->item($i)->nodeType==1)

{

echo($cd->item($i)->nodeName);

echo(": ");

echo($cd->item($i)->childNodes->item(0)->nodeValue);

echo("<br />");

}

}

?>

Example Explained

When the query is sent from the JavaScript to the PHP page the following happens:

1. PHP creates an XML DOM object of the "cd_catalog.xml" file
2. All "artist" elements (nodetypes = 1) are looped through to find a name matching the one sent from the JavaScript.
3. The CD containing the correct artist is found
4. The album information is output and sent to the "txtHint" placeholder


PHP Array Functions

PHP Array Introduction

The array functions allow you to manipulate arrays.

PHP supports both simple and multi-dimensional arrays. There are also specific functions for populating arrays from database queries.

Installation

The array functions are part of the PHP core. There is no installation needed to use these functions.

PHP Array Functions

PHP: indicates the earliest version of PHP that supports the function.

Function | Description | PHP
array() | Creates an array | 3
array_change_key_case() | Returns an array with all keys in lowercase or uppercase | 4
array_chunk() | Splits an array into chunks of arrays | 4
 | Creates an array by using one array for keys and another for its values | 5
array_count_values() | Returns an array with the number of occurrences for each value | 4
array_diff() | Compares array values, and returns the differences | 4
array_diff_assoc() | Compares array keys and values, and returns the differences | 4
 | Compares array keys, and returns the differences | 5
array_diff_uassoc() | Compares array keys and values, with an additional user-made function check, and returns the differences | 5
 | Compares array keys, with an additional user-made function check, and returns the differences | 5
array_fill() | Fills an array with values | 4
array_filter() | Filters elements of an array using a user-made function | 4
array_flip() | Exchanges all keys with their associated values in an array | 4
array_intersect() | Compares array values, and returns the matches | 4
array_intersect_assoc() | Compares array keys and values, and returns the matches | 4
array_intersect_key() | Compares array keys, and returns the matches | 5
array_intersect_uassoc() | Compares array keys and values, with an additional user-made function check, and returns the matches | 5
array_intersect_ukey() | Compares array keys, with an additional user-made function check, and returns the matches | 5
array_key_exists() | Checks if the specified key exists in the array | 4
array_keys() | Returns all the keys of an array | 4
array_map() | Sends each value of an array to a user-made function, which returns new values | 4
array_merge() | Merges one or more arrays into one array | 4
array_merge_recursive() | Merges one or more arrays into one array | 4
 | Sorts multiple or multi-dimensional arrays | 4
array_pad() | Inserts a specified number of items, with a specified value, to an array | 4
array_pop() | Deletes the last element of an array | 4
array_product() | Calculates the product of the values in an array | 5
array_push() | Inserts one or more elements to the end of an array | 4
array_rand() | Returns one or more random keys from an array | 4
 | Returns an array as a string, using a user-defined function | 4
 | Returns an array in the reverse order | 4
array_search() | Searches an array for a given value and returns the key | 4
array_shift() | Removes the first element from an array, and returns the value of the removed element | 4
array_slice() | Returns selected parts of an array | 4
 | Removes and replaces specified elements of an array | 4
array_sum() | Returns the sum of the values in an array | 4
array_udiff() | Compares array values in a user-made function and returns an array | 5
 | Compares array keys, and compares array values in a user-made function, and returns an array | 5
array_udiff_uassoc() | Compares array keys and array values in user-made functions, and returns an array | 5
 | Compares array values in a user-made function and returns an array | 5
 | Compares array keys, and compares array values in a user-made function, and returns an array | 5
array_uintersect_uassoc() | Compares array keys and array values in user-made functions, and returns an array | 5
array_unique() | Removes duplicate values from an array | 4
array_unshift() | Adds one or more elements to the beginning of an array | 4
 | Returns all the values of an array | 4
 | Applies a user function to every member of an array | 3
array_walk_recursive() | Applies a user function recursively to every member of an array | 5
 | Sorts an array in reverse order and maintain index association | 3
asort() | Sorts an array and maintain index association | 3
compact() | Create array containing variables and their values | 4
count() | Counts elements in an array, or properties in an object | 3
current() | Returns the current element in an array | 3
each() | Returns the current key and value pair from an array | 3
end() | Sets the internal pointer of an array to its last element | 3
extract() | Imports variables into the current symbol table from an array | 3
 | Checks if a specified value exists in an array | 4
key() | Fetches a key from an array | 3
krsort() | Sorts an array by key in reverse order | 3
 | Sorts an array by key | 3
list() | Assigns variables as if they were an array | 3
natcasesort() | Sorts an array using a case insensitive "natural order" algorithm | 4
natsort() | Sorts an array using a "natural order" algorithm | 4
next() | Advance the internal array pointer of an array | 3
pos() | Alias of current() | 3
prev() | Rewinds the internal array pointer | 3
range() | Creates an array containing a range of elements | 3
reset() | Sets the internal pointer of an array to its first element | 3
rsort() | Sorts an array in reverse order | 3
shuffle() | Shuffles an array | 3
sizeof() | Alias of count() | 3
sort() | Sorts an array | 3
uasort() | Sorts an array with a user-defined function and maintain index association | 3
uksort() | Sorts an array by keys using a user-defined function | 3
 | Sorts an array by values using a user-defined function | 3

PHP Array Constants

PHP: indicates the earliest version of PHP that supports the constant.

Constant | Description | PHP
CASE_LOWER | Used with array_change_key_case() to convert array keys to lower case |
CASE_UPPER | Used with array_change_key_case() to convert array keys to upper case |
SORT_ASC | Used with array_multisort() to sort in ascending order |
SORT_DESC | Used with array_multisort() to sort in descending order |
SORT_REGULAR | Used to compare items normally |
SORT_NUMERIC | Used to compare items numerically |
SORT_STRING | Used to compare items as strings |
SORT_LOCALE_STRING | Used to compare items as strings, based on the current locale | 4
COUNT_NORMAL |  |
COUNT_RECURSIVE |  |
EXTR_OVERWRITE |  |
EXTR_SKIP |  |
EXTR_PREFIX_SAME |  |
EXTR_PREFIX_ALL |  |
EXTR_PREFIX_INVALID |  |
EXTR_PREFIX_IF_EXISTS |  |
EXTR_IF_EXISTS |  |
EXTR_REFS |  |


PHP array()

Definition and Usage

array() creates an array, with keys and values. If you skip the keys when you specify an array, an integer key is generated, starting at 0 and increases by 1 for each value.

Syntax

array(key => value)

Parameter | Description
key | Optional. Specifies the key, of type numeric or string. If not set, an integer key is generated, starting at 0
value | Required. Specifies the value

Example 1

<?php

$a=array("a"=>"Dog","b"=>"Cat","c"=>"Horse");

print_r($a);

?>

The output of the code above will be:

Array ( [a] => Dog [b] => Cat [c] => Horse )

Example 2

<?php

$a=array("Dog","Cat","Horse");

print_r($a);

?>

The output of the code above will be:

Array ( [0] => Dog [1] => Cat [2] => Horse )


PHP array_change_key_case() Function

Definition and Usage

The array_change_key_case() function returns an array with all array KEYS in lower case or upper case.

Syntax

array_change_key_case(array,case)

Parameter

Description

array

Required. Specifies the array to use

case

Optional. Possible values:

· CASE_LOWER - Deafult value. Returns the array key values in lower case.
· CASE_UPPER - Returns the array key values in upper case.

Tips and Notes

Note: If two or more array keys will be the same after running this function, the last array will override the others. (See example 2)

Example 1

<?php

$a=array("a"=>"Cat","b"=>"Dog","c"=>"Horse");

print_r(array_change_key_case($a,CASE_UPPER));

?>

The output of the code above will be:

Array ( [A] => Cat [B] => Dog [C] => Horse )

Example 2

<?php

$a=array("a"=>"Cat","b"=>"Dog","c"=>"Horse","B"=>"Bird");

print_r(array_change_key_case($a,CASE_UPPER));

?>

The output of the code above will be:

Array ( [A] => Cat [B] => Bird [C] => Horse )


PHP array_chunk() Function

Definition and Usage

The array_chunk() function splits an array into chunks of new arrays.

Syntax

array_chunk(array,size,preserve_key)

Parameter

Description

array

Required. Specifies the array to use

size

Required. Specifies how many elements each new array will contain

preserve_key

Optional. Possible values:

· true - Preserves the keys from the original array.
· false - Default. Does not preserve the keys from the original array.

Example 1

<?php

$a=array("a"=>"Cat","b"=>"Dog","c"=>"Horse","d"=>"Cow");

print_r(array_chunk($a,2));

?>

The output of the code above will be:

Array (

[0] => Array ( [0] => Cat [1] => Dog )

[1] => Array ( [0] => Horse [1] => Cow )

)

Example 2

<?php

$a=array("a"=>"Cat","b"=>"Dog","c"=>"Horse","d"=>"Cow");

print_r(array_chunk($a,2,true));

?>

The output of the code above will be:

Array (

[0] => Array ( [a] => Cat [b] => Dog )

[1] => Array ( [c] => Horse [d] => Cow )

)


PHP array_combine() Function

Definition and Usage

The array_combine() function creates an array by combining two other arrays, where the first array is the keys, and the other array is the values.

Syntax

array_combine(array1,array2)

Parameter | Description
array1 | Required. An array, specifying the keys
array2 | Required. An array, specifying the values

Tips and Notes

Note: Both parameters must have equal number of elements.

Example

<?php

$a1=array("a","b","c","d");

$a2=array("Cat","Dog","Horse","Cow");

print_r(array_combine($a1,$a2));

?>

The output of the code above will be:

Array ( [a] => Cat [b] => Dog [c] => Horse [d] => Cow )


PHP array_count_values() Function

Definition and Usage

The array_count_values() function returns an array, where the keys are the original array's values, and the values is the number of occurrences.

Syntax

array_count_values(array)

Parameter | Description
array | Required. Specifying an arrary.

Example

<?php

$a=array("Cat","Dog","Horse","Dog");

print_r(array_count_values($a));

?>

The output of the code above will be:

Array ( [Cat] => 1 [Dog] => 2 [Horse] => 1 )


PHP array_diff() Function

Definition and Usage

The array_diff() function compares two or more arrays, and returns an array with the keys and values from the first array, only if the value is not present in any of the other arrays.

Syntax

array_diff(array1,array2,array3...)

Parameter | Description
array1 | Required. The first array is the array that the others will be compared with
array2 | Required. An array to be compared with the first array
array3 | Optional. An array to be compared with the first array

Tips and Notes

Tip: You can compare the first array with one array, or as many as you like.

Note: Only the value is used in the comparison.

Example

<?php

$a1=array(0=>"Cat",1=>"Dog",2=>"Horse");

$a2=array(3=>"Horse",4=>"Dog",5=>"Fish");

print_r(array_diff($a1,$a2));

?>

The output of the code above will be:

Array ( [0] => Cat )


PHP array_diff_assoc() Function

Definition and Usage

The array_diff_assoc() function compares two or more arrays, and returns an array with the keys and values from the first array, only if they are not present in any of the other arrays.

Syntax

array_diff_assoc(array1,array2,array3...)

Parameter | Description
array1 | Required. The first array is the array that the others will be compared with
array2 | Required. An array to be compared with the first array
array3 | Optional. An array to be compared with the first array

Tips and Notes

Tip: You can compare the first array with one array, or as many as you like.

Note: Both the key and the value is used in the comparison.

Example

<?php

$a1=array(0=>"Cat",1=>"Dog";,2=>"Horse");

$a2=array(0=>"Rat",1=>"Horse";,2=>"Dog");

$a3=array(0=>"Horse",1=>"Dog",2=>"Cat");

print_r(array_diff_assoc($a1,$a2,$a3));

?>

The output of the code above will be:

Array ( [0] => Cat [2] => Horse )


PHP array_diff_key() Function

Definition and Usage

The array_diff_key() function compares two or more arrays, and returns an array with the keys and values from the first array, only if the key is not present in any of the other arrays.

Syntax

array_diff_key(array1,array2,array3...)

Parameter | Description
array1 | Required. The first array is the array that the others will be compared with
array2 | Required. An array to be compared with the first array
array3 | Optional. An array to be compared with the first array

Tips and Notes

Tip: You can compare the first array with one array, or as many as you like.

Note: Only the key is used in the comparison.

Example

<?php

$a1=array(0=>"Cat",1=>"Dog",2=>"Horse");

$a2=array(2=>"Bird",3=>"Rat",4=>"Fish");

$a3=array(5=>"Horse",6=>"Dog",7=>"Bird");

print_r(array_diff_key($a1,$a2,$a3));

?>

The output of the code above will be:

Array ( [0] => Cat [1] => Dog )


PHP array_diff_uassoc() Function

Definition and Usage

The array_diff_uassoc() function compares two or more arrays, checking for differences, before comparing the keys in a user-defined function, then returns an array with the keys and values from the first array, if the function allows it.

Syntax

array_diff_uassoc(array1,array2,array3...,function)

Parameter | Description
array1 | Required. The first array is the array that the others will be compared with
array2 | Required. An array to be compared with the first array
array3 | Optional. An array to be compared with the first array
function | Required. The name of the user-made function

Tips and Notes

Tip: You can compare the first array with one array, or as many as you like.

Note: Both the key and the value is used in the automatic comparison, then, in the user-defined function, only the keys are being compared.

Example 1

<?php

function myfunction($v1,$v2)

{

if ($v1===$v2)

{

return 0;

}

if ($v1>$v2)

{

return 1;

}

else

{

return -1;

}

}

$a1=array(0=>"Dog",1=>"Cat",2=>"Horse");

$a2=array(3=>"Dog",1=>"Cat",5=>"Horse");

print_r(array_diff_uassoc($a1,$a2,"myfunction"));

?>

The output of the code above will be:

Array ( [0] => Dog [2] => Horse )

Example 2

How to assign more than two arrays to the function

<?php

function myfunction($v1,$v2)

{

if ($v1===$v2)

{

return 0;

}

if ($v1>$v2)

{

return 1;

}

else

{

return -1;

}

}

$a1=array(0=>"Dog",1=>"Cat",2=>"Horse");

$a2=array(3=>"Dog",1=>"Cat",5=>"Horse");

$a3=array(6=>"Bird",0=>"Dog",5=>"Horse");

print_r(array_diff_uassoc($a1,$a2,$a3,"myfunction"));

?>

The output of the code above will be:

Array ( [2] => Horse )


PHP array_diff_ukey() Function

Definition and Usage

The array_diff_ukey() function compares the keys in two or more arrays, checking for differences, before comparing the keys in a user-defined function, then returns an array with the keys and values from the first array, if the function allows it.

Syntax

array_diff_ukey(array1,array2,array3...,function)

Parameter | Description
array1 | Required. The first array is the array that the others will be compared with
array2 | Required. An array to be compared with the first array
array3 | Optional. An array to be compared with the first array
function | Required. The name of the user-made function

Tips and Notes

Tip: You can compare the first array with one array, or as many as you like.

Note: Only the keys have to be the same to get a match, both in the automatic comparison and in the user-defined function.

Example 1

<?php

function myfunction($v1,$v2)

{

if ($v1===$v2)

{

return 0;

}

if ($v1>$v2)

{

return 1;

}

else

{

return -1;

}

}

$a1=array(0=>"Dog",1=>"Cat",2=>"Horse");

$a2=array(3=>"Rat",1=>"Bird",5=>"Monkey");

print_r(array_diff_ukey($a1,$a2,"myfunction"));

?>

The output of the code above will be:

Array ( [0] => Dog [2] => Horse )

Example 2

How to assign more than two arrays to the function

<?php

function myfunction($v1,$v2)

{

if ($v1===$v2)

{

return 0;

}

if ($v1>$v2)

{

return 1;

}

else

{

return -1;

}

}

$a1=array(0=>"Dog",1=>"Cat",2=>"Horse");

$a2=array(3=>"Rat",1=>"Bird",5=>"Monkey");

$a3=array(6=>"Dog",7=>"Donkey",0=>"Horse");

print_r(array_diff_ukey($a1,$a2,$a3,"myfunction"));

?>

The output of the code above will be:

Array ( [2] => Horse )


PHP array_fill() Function

Definition and Usage

The array_fill() function returns an array filled with the values you describe.

Syntax

array_fill(start,number,value)

Parameter | Description
start | Required. A numeric value, specifies the starting index of the key
number | Required. A numeric value, specifies the number of entries
value | Required. Specifies the value to be inserted

Example

<?php

$a=array_fill(2,3,"Dog");

print_r($a);

?>

The output of the code above will be:

Array ( [2] => Dog [3] => Dog [4] => Dog )


PHP array_filter() Function

Definition and Usage

The array_filter() function passes each value in the array to a user-made function, which returns either true or false, and returns an array only with the values that returned true.

Syntax

array_filter(array,function)

Parameter | Description
array | Required. Specifies an array
number | Required. Name of the user-made function

Example

<?php

function myfunction($v)

{

if ($v==="Horse")

{

return true;

}

return false;

}

$a=array(0=>"Dog",1=>"Cat",2=>"Horse");

print_r(array_filter($a,"myfunction"));

?>

The output of the code above will be:

Array ( [2] => Horse )


PHP array_flip() Function

Definition and Usage

The array_flip() function returns an array with all the original keys as values, and all original values as keys.

Syntax

array_flip(array)

Parameter | Description
array | Required. Specifies an array

Example

<?php

$a=array(0=>"Dog",1=>"Cat",2=>"Horse");

print_r(array_flip($a));

?>

The output of the code above will be:

Array ( [Dog] => 0 [Cat] => 1 [Horse] => 2 )


PHP array_intersect() Function

Definition and Usage

The array_intersect() function compares two or more arrays, and returns an array with the keys and values from the first array, only if the value is present in all of the other arrays.

Syntax

array_intersect(array1,array2,array3...)

Parameter | Description
array1 | Required. The first array is the array that the others will be compared with
array2 | Required. An array to be compared with the first array
array3 | Optional. An array to be compared with the first array

Tips and Notes

Tip: You can compare the first array with one array, or as many as you like.

Note: Only the value is used in the comparison.

Example

<?php

$a1=array(0=>"Cat",1=>"Dog",2=>"Horse");

$a2=array(3=>"Horse",4=>"Dog",5=>"Fish");

print_r(array_intersect($a1,$a2));

?>

The output of the code above will be:

Array ( [1] => Dog [2] => Horse )


PHP array_intersect_assoc() Function

Definition and Usage

The array_intersect_assoc() function compares two or more arrays, and returns an array with the keys and values from the first array, only if they are present in all of the other arrays.

Syntax

array_intersect_assoc(array1,array2,array3...)

Parameter | Description
array1 | Required. The first array is the array that the others will be compared with
array2 | Required. An array to be compared with the first array
array3 | Optional. An array to be compared with the first array

Tips and Notes

Tip: You can compare the first array with one array, or as many as you like.

Note: Both the key and the value is used in the comparison.

Example 1

<?php

$a1=array(0=>"Cat",1=>"Dog",2=>"Horse");

$a2=array(3=>"Horse",1=>"Dog",0=>"Cat");

print_r(array_intersect_assoc($a1,$a2));

?>

The output of the code above will be:

Array ( [0] => Cat [1] => Dog )

Example 2

<?php

$a1=array(0=>"Cat",1=>"Dog",2=>"Horse");

$a2=array(3=>"Horse",1=>"Dog",5=>"Fish");

$a3=array(6=>"Cow",1=>"Dog",8=>"Fish");

print_r(array_intersect_assoc($a1,$a2,$a3));

?>

The output of the code above will be:

Array ( [1] => Dog )


PHP array_intersect_key() Function

Definition and Usage

The array_intersect_key() function compares two or more arrays, and returns an array with the keys and values from the first array, only if the key is present in all of the other arrays.

Syntax

array_intersect_key(array1,array2,array3...)

Parameter | Description
array1 | Required. The first array is the array that the others will be compared with
array2 | Required. An array to be compared with the first array
array3 | Optional. An array to be compared with the first array

Tips and Notes

Tip: You can compare the first array with one array, or as many as you like.

Note: Only the key is used in the comparison.

Example 1

<?php

$a1=array(0=>"Cat",1=>"Dog",2=>"Horse");

$a2=array(2=>"Bird",0=>"Cat",4=>"Fish");

print_r(array_intersect_key($a1,$a2));

?>

The output of the code above will be:

Array ( [0] => Cat [2] => Horse )

Example 2

<?php

$a1=array(0=>"Cat",1=>"Dog",2=>"Horse");

$a2=array(2=>"Bird",3=>"Rat",4=>"Fish");

$a3=array(2=>"Dog",6=>"Cow",7=>"Bird");

print_r(array_intersect_key($a1,$a2,$a3));

?>

The output of the code above will be:

Array ( [2] => Horse )


PHP array_intersect_uassoc() Function

Definition and Usage

The array_intersect_uassoc() function compares two or more arrays, checking for matches, before comparing the keys in a user-defined function, then returns an array with the keys and values from the first array, if the function allows it.

Syntax

array_intersect_uassoc(array1,array2,array3...,function)

Parameter | Description
array1 | Required. The first array is the array that the others will be compared with
array2 | Required. An array to be compared with the first array
array3 | Optional. An array to be compared with the first array
function | Required. The name of the user-made function

Tips and Notes

Tip: You can compare the first array with one array, or as many as you like.

Note: Both the key and the value is used in the automatic comparison, then, in the user-defined function, only the keys are being compared.

Example 1

<?php

function myfunction($v1,$v2)

{

if ($v1===$v2)

{

return 0;

}

if ($v1>$v2)

{

return 1;

}

else

{

return -1;

}

}

$a1=array(0=>"Dog",1=>"Cat",2=>"Horse");

$a2=array(3=>"Dog",1=>"Cat",5=>"Horse");

print_r(array_intersect_uassoc($a1,$a2,"myfunction"));

?>

The output of the code above will be:

Array ( [1] => Cat )

Example 2

How to assign more than two arrays to the function

<?php

function myfunction($v1,$v2)

{

if ($v1===$v2)

{

return 0;

}

if ($v1>$v2)

{

return 1;

}

else

{

return -1;

}

}

$a1=array(0=>"Dog",1=>"Cat",2=>"Horse");

$a2=array(0=>"Dog",1=>"Cat",5=>"Horse");

$a3=array(6=>"Bird",0=>"Dog",5=>"Horse");

print_r(array_intersect_uassoc($a1,$a2,$a3,"myfunction"));

?>

The output of the code above will be:

Array ( [0] => Dog )


PHP array_intersect_ukey() Function

Definition and Usage

The array_intersect_ukey() function compares the keys in two or more arrays, checking for matches, before comparing the keys in a user-defined function, then returns an array with the keys and values from the first array, if the function allows it.

Syntax

array_intersect_ukey(array1,array2,array3...,function)

Parameter | Description
array1 | Required. The first array is the array that the others will be compared with
array2 | Required. An array to be compared with the first array
array3 | Optional. An array to be compared with the first array
function | Required. The name of the user-made function

Tips and Notes

Tip: You can compare the first array with one array, or as many as you like.

Note: Only the keys have to be the same to get a match, both in the automatic comparison and in the user-defined function.

Example 1

<?php

function myfunction($v1,$v2)

{

if ($v1===$v2)

{

return 0;

}

if ($v1>$v2)

{

return 1;

}

else

{

return -1;

}

}

$a1=array(0=>"Dog",1=>"Cat",2=>"Horse");

$a2=array(3=>"Rat",1=>"Bird",5=>"Monkey");

print_r(array_intersect_ukey($a1,$a2,"myfunction"));

?>

The output of the code above will be:

Array ( [] => Cat )

Example 2

How to assign more than two arrays to the function

<?php

function myfunction($v1,$v2)

{

if ($v1===$v2)

{

return 0;

}

if ($v1>$v2)

{

return 1;

}

else

{

return -1;

}

}

$a1=array(0=>"Dog",1=>"Cat",2=>"Horse");

$a2=array(0=>"Rat",1=>"Bird",5=>"Monkey");

$a3=array(6=>"Dog",7=>"Donkey",0=>"Horse");

print_r(array_intersect_ukey($a1,$a2,$a3,"myfunction"));

?>

The output of the code above will be:

Array ( [0] => Dog )


PHP array_key_exists() Function

Definition and Usage

The array_key_exists() function checks an array for a specified key, and returns true if the key exists and false is the key does not exist.

Syntax

array_key_exists(key,array)

Parameter | Description
key | Required. Specifies the key
array | Required. Specifies an array

Tips and Notes

Tip: Remember that if you skip the key when you specify an array, an integer key is generated, starting at 0 and increases by 1 for each value. (See example 3)

Example 1

<?php

$a=array("a"=>"Dog","b"=>"Cat");

if (array_key_exists("a",$a))

{

echo "Key exists!";

}

else

{

echo "Key does not exist!";

}

?>

The output of the code above will be:

Key exists!

Example 2

<?php

$a=array("a"=>"Dog","b"=>"Cat");

if (array_key_exists("c",$a))

{

echo "Key exists!";

}

else

{

echo "Key does not exist!";

}

?>

The output of the code above will be:

Key does not exist!

Example 3

<?php

$a=array("Dog",Cat");

if (array_key_exists(0,$a))

{

echo "Key exists!";

}

else

{

echo "Key does not exist!";

}

?>

The output of the code above will be:

Key exists!


PHP array_keys() Function

Definition and Usage

The array_keys() function returns an array containing the keys.

Syntax

array_keys(array,value)

Parameter

Description

array

Required. Specifies an array

value

Optional. You can specify a value, then only the keys with this value are returned

strict

Optional. Used with the value parameter. Possible values:

· true - Returns the keys with the specified value, depending on type: the number 5 is not the same as the string "5".
· false - Default value. Not depending on type, the number 5 is the same as the string "5".

Example 1

<?php

$a=array("a"=>"Horse","b"=>"Cat","c"=>"Dog");

print_r(array_keys($a));

?>

The output of the code above will be:

Array ( [0] => a [1] => b [2] => c )

Example 2

Using the value parameter.

<?php

$a=array("a"=>"Horse","b"=>"Cat","c"=>"Dog");

print_r(array_keys($a,"Dog"));

?>

The output of the code above will be:

Array ( [0] => c)

Example 3

Using the strict parameter: false

<?php

$a=array(10,20,30,"10");

print_r(array_keys($a,"10",false));

?>

The output of the code above will be:

Array ( [0] => 0 [1] => 3 )

Example 4

Using the strict parameter: true

<?php

$a=array(10,20,30,"10");

print_r(array_keys($a,"10",true));

?>

The output of the code above will be:

Array ( [0] => 3)


PHP array_map() Function

Definition and Usage

The array_map() function sends each value of an array to a user-made function, and returns an array with new values, given by the user-made function.

Syntax

array_map(function,array1,array2,array3...)

Parameter | Description
function | Required. The name of the user-made function, or null
array1 | Required. Specifies an array
array2 | Optional. Specifies an array
array3 | Optional. Specifies an array

Tips and Notes

Tip: You can assign one array to the function, or as many as you like.

Example 1

<?php

function myfunction($v)

{

if ($v==="Dog")

{

return "Fido";

}

return $v;

}

$a=array("Horse","Dog","Cat");

print_r(array_map("myfunction",$a));

?>

The output of the code above will be:

Array ( [0] => Horse [1] => Fido [2] => Cat )

Example 2

Using the more than one parameter.

<?php

function myfunction($v1,$v2)

{

if ($v1===$v2)

{

return "same";

}

return "different";

}

$a1=array("Horse","Dog","Cat");

$a2=array("Cow","Dog","Rat");

print_r(array_map("myfunction",$a1,$a2));

?>

The output of the code above will be:

Array ( [0] => different [1] => same [2] => different )

Example 3

Look what happens if you assign null as the functionname:

<?php

$a1=array("Dog","Cat");

$a2=array("Puppy","Kitten");

print_r(array_map(null,$a1,$a2));

?>

The output of the code above will be:

Array (

[0] => Array ( [0] => Dog [1] => Puppy )

[1] => Array ( [0] => Cat [1] => Kitten )

)


PHP array_merge() Function

Definition and Usage

The array_merge() function merges one ore more arrays into one array.

Syntax

array_merge(array1,array2,array3...)

Parameter | Description
array1 | Required. Specifies an array
array2 | Optional. Specifies an array
array3 | Optional. Specifies an array

Tips and Notes

Tip: You can assign one array to the function, or as many as you like.

Note: If two or more array elements have the same key, the last one overrides the others.

Note: If you assign only one array to the array_merge() function, and the keys are integers, the function returns a new array with integer keys starting at 0 and increases by 1 for each value. (See example 2)

Example 1

<?php

$a1=array("a"=>"Horse","b"=>"Dog");

$a2=array("c"=>"Cow","b"=>"Cat");

print_r(array_merge($a1,$a2));

?>

The output of the code above will be:

Array ( [a] => Horse [b] => Cat [c] => Cow )

Example 2

Using only one array parameter.

<?php

$a=array(3=>"Horse",4=>"Dog");

print_r(array_merge($a));

?>

The output of the code above will be:

Array ( [0] => Horse [1] => Dog )


PHP array_merge_recursive() Function

Definition and Usage

The array_merge_recursive() function merges one ore more arrays into one array. The difference between this function ant the array_merge() function is when two or more array elements have the same key. Instead of override keys, the array_merge_recursivse() function makes the value as an array. (See example 1)

Syntax

array_merge_recursive(array1,array2,array3...)

Parameter | Description
array1 | Required. Specifies an array
array2 | Optional. Specifies an array.
array3 | Optional. Specifies an array

Tips and Notes

Note: If you assign only one array to the array_merge_recursive() function, it will beahave exactly the same as the array_merge() function.

Example

<?php

$a1=array("a"=>"Horse","b"=>"Dog");

$a2=array("c"=>"Cow","b"=>"Cat");

print_r(array_merge_recursive($a1,$a2));

?>

The output of the code above will be:

Array (

[a] => Horse

[b] => Array ( [0] => Dog [1] => Cat )

[c] => Cow

)


PHP array_multisort() Function

Definition and Usage

The array_multisort() function returns a sorted array. You can assign one or more arrays. The function sorts the first array, and the other arrays follow, then, if two or more values are the same, it sorts the next array, and so on.

Syntax

array_multisort(array1,sorting order,sorting type,array2,array3...)

Parameter

Description

array1

Required. Specifies an array

sorting order

Optional. Specifies the sorting order. Possible values:

· SORT_ASC Default. Sort in ascending order (A-Z)
· SORT_DESC sort in descending order (Z-A)

sorting type

Optional. Specifies the type to use, when comparing elements. Possible values:

· SORT_REGULAR Default. Compare elements normally
· SORT_NUMERIC Compare elements as numeric values
· SORT_STRING Compare elements as string values

array2

Optional. Specifies an array

array3

Optional. Specifies an array

Tips and Notes

Tip: You can assign only one array to the array_multisort() function, or as many as you like.

Note: String keys will be maintained, but numeric keys will be re-indexed, starting at 0 and increase by 1.

Note: You can assign the sorting order and the sorting type parameters after each array. If you don't, each array parameter uses the default values.

Example 1

<?php

$a1=array("Dog","Cat");

$a2=array("Fido","Missy");

array_multisort($a1,$a2);

print_r($a1);

print_r($a2);

?>

The output of the code above will be:

Array ( [0] => Cat [1] => Dog )

Array ( [0] => Missy [1] => Fido )

Example 2

See how it sorts when two values are the same:

<?php

$a1=array("Dog","Dog","Cat");

$a2=array("Pluto","Fido","Missy");

array_multisort($a1,$a2);

print_r($a1);

print_r($a2);

?>

The output of the code above will be:

Array ( [0] => Cat [1] => Dog [2] => Dog )

Array ( [0] => Missy [1] => Fido [2] => Pluto )

Example 3

With sorting parameters:

<?php

$a1=array("Dog","Dog","Cat");

$a2=array("Pluto","Fido","Missy");

array_multisort($a1,SORT_ASC,$a2,SORT_DESC);

print_r($a1);

print_r($a2);

?>

The output of the code above will be:

Array ( [0] => Cat [1] => Dog [2] => Dog )

Array ( [0] => Missy [1] => Pluto [2] => Fido )


PHP array_pad() Function

Definition and Usage

The array_pad() function inserts a specified number of elements, with a specified value, to an array.

Syntax

array_pad(array,size,value)

Parameter | Description
array | Required. Specifies an array
size | Required. Specifies the number of elements in the array returned from the function
value | Required. Specifies the value of the new elements in the array returned from the function

Tips and Notes

Tip: If you assign a negative size parameter, the function will insert new elements BEFORE the original elements. (See example 2)

Note: This function will not delete any elements if the size parameter is less than the original array's size.

Example 1

<?php

$a=array("Dog","Cat");

print_r(array_pad($a,5,0));

?>

The output of the code above will be:

Array ( [0] => Dog [1] => Cat [2] => 0 [3] => 0 [4] => 0 )

Example 2

With a negative size parameter:

<?php

$a=array("Dog","Cat");

print_r(array_pad($a,-5,0));

?>

The output of the code above will be:

Array ( [0] => 0 [1] => 0 [2] => 0 [3] => Dog [4] => Cat )


PHP array_pop() Function

Definition and Usage

The array_pop() function deletes the last element of an array.

Syntax

array_pop(array)

Parameter | Description
array | Required. Specifies an array

Example

<?php

$a=array("Dog","Cat","Horse");

array_pop($a);

print_r($a);

?>

The output of the code above will be:

Array ( [0] => Dog [1] => Cat )


PHP array_product() Function

Definition and Usage

The array_product() function calculates and returns the product of an array.

Syntax

array_product(array)

Parameter | Description
array | Required. Specifies an array

Example

<?php

$a=array(5,5);

echo(array_product($a));

?>

The output of the code above will be:

25


PHP array_push() Function

Definition and Usage

The array_push() function inserts one or more elements to the end of an array.

Syntax

array_push(array,value1,value2...)

Parameter | Description
array | Required. Specifies an array
value1 | Required. Specifies the value to add
value2 | Optional. Specifies the value to add

Tips and Notes

Tip: You can add one value, or as many as you like.

Note: Even if your array has string keys, your added elements will allways have numeric keys. (See example 2)

Example 1

<?php

$a=array("Dog","Cat");

array_push($a,"Horse","Bird");

print_r($a);

?>

The output of the code above will be:

Array ( [0] => Dog [1] => Cat [2] => Horse [3] => Bird )

Example 2

An array with string keys:

<?php

$a=array("a"=>"Dog","b"=>"Cat");

array_push($a,"Horse","Bird");

print_r($a);

?>

The output of the code above will be:

Array ( [a] => Dog [b] => Cat [0] => Horse [1] => Bird )


PHP array_rand() Function

Definition and Usage

The array_rand() function returns a random key from an array, or it returns an array of random keys if you specify that the function should return more than one key.

Syntax

array_rand(array,number)

Parameter | Description
array | Required. Specifies an array
number | Optional. Default 1. Specifies how many random keys to return

Example 1

<?php

$a=array("a"=>"Dog","b"=>"Cat","c"=>"Horse");

print_r(array_rand($a,1));

?>

The output of the code above could be:

b

Example 2

An array with string keys:

<?php

$a=array("a"=>"Dog","b"=>"Cat","c"=>"Horse");

print_r(array_rand($a,2));

?>

The output of the code above could be:

Array ( [0] => c [1] => b )


PHP array_reduce() Function

Definition and Usage

The array_reduce() function sends the values in an array to a user-defined function, and returns a string.

Syntax

array_reduce(array,function,initial)

Parameter | Description
array | Required. Specifies an array
function | Required. Specifies the name of the function
initial | Optional. Specifies the initial value to send to the function

Example 1

<?php

function myfunction($v1,$v2)

{

return $v1 . "-" . $v2;

}

$a=array("Dog","Cat","Horse");

print_r(array_reduce($a,"myfunction"));

?>

The output of the code above will be:

-Dog-Cat-Horse

Example 2

With the initial parameter:

<?php

function myfunction($v1,$v2)

{

return $v1 . "-" . $v2;

}

$a=array("Dog","Cat","Horse");

print_r(array_reduce($a,"myfunction",5));

?>

The output of the code above will be:

5-Dog-Cat-Horse

Example 3

Returning a sum:

<?php

function myfunction($v1,$v2)

{

return $v1+$v2;

}

$a=array(10,15,20);

print_r(array_reduce($a,"myfunction",5));

?>

The output of the code above will be:

50


PHP array_reverse() Function

Definition and Usage

The array_reverse() function returns an array in the reverse order.

Syntax

array_reverse(array,preserve)

Parameter

Description

array

Required. Specifies an array

preserve

Optional. Possible values:

· true
· false

Specifies if the function should preserve the array's keys or not.

Example

<?php

$a=array("a"=>"Dog","b"=>"Cat","c"=>"Horse");

print_r(array_reverse($a));

?>

The output of the code above will be:

Array ( [c] => Horse [b] => Cat [a] => Dog )


PHP array_search() Function

Definition and Usage

The array_search() function search an array for a value and returns the key.

Syntax

array_search(value,array,strict)

Parameter

Description

value

Required. Specifies the value to search for

array

Required. Specifies the array to search in

strict

Optional. Possible values:

· true
· false - Default

When set to true, the number 5 is not the same as the string 5 (See example 2)

Example 1

<?php

$a=array("a"=>"Dog","b"=>"Cat","c"=>"Horse");

echo array_search("Dog",$a);

?>

The output of the code above will be:

a

Example 2

<?php

$a=array("a"=>"5","b"=>5,"c"=>"5");

echo array_search(5,$a,true);

?>

The output of the code above will be:

b


PHP array_shift() Function

Definition and Usage

The array_shift() function removes the first element from an array, and returns the value of the removed element.

Syntax

array_shift(array)

Parameter | Description
array | Required. Specifies an array

Tips and Notes

Note: If the keys are numeric, all elements will get new keys, starting from 0 and increases by 1. (See example 2)

Example 1

<?php

$a=array("a"=>"Dog","b"=>"Cat","c"=>"Horse");

echo array_shift($a);

print_r ($a);

?>

The output of the code above will be:

Dog

Array ( [b] => Cat [c] => Horse )

Example 2

With numeric keys:

<?php

$a=array(0=>"Dog",1=>"Cat",2=>"Horse");

echo array_shift($a);

print_r ($a);

?>

The output of the code above will be:

Dog

Array ( [0] => Cat [1] => Horse )


PHP array_slice() Function

Definition and Usage

The array_slice() function returns selected parts of an array.

Syntax

array_slice(array,start,length,preserve)

Parameter

Description

array

Required. Specifies an array

start

Required. Numeric value. Specifies where the function will start the slice. 0 = the first element. If this value is set to a negative number, the function will start slicing that far from the last element. -2 means start at the second last element of the array.

length

Optional. Numeric value. Specifies the length of the returned array. If this value is set to a negative number, the function will stop slicing that far from the last element. If this value is not set, the function will return all elements, starting from the position set by the start-parameter.

preserve

Optional. Possible values:

· true - Preserve keys
· false - Default - Reset keys

Tips and Notes

Note: If the array have string keys, the returned array will allways preserve the keys. (See example 4)

Example 1

<?php

$a=array(0=>"Dog",1=>"Cat",2=>"Horse",3=>"Bird");

print_r(array_slice($a,1,2));

?>

The output of the code above will be:

Array ( [0] => Cat [1] => Horse )

Example 2

With a negative start parameter:

<?php

$a=array(0=>"Dog",1=>"Cat",2=>"Horse",3=>"Bird");

print_r(array_slice($a,-2,1));

?>

The output of the code above will be:

Array ( [0] => Horse )

Example 3

With the preserve parameter set to true:

<?php

$a=array(0=>"Dog",1=>"Cat",2=>"Horse",3=>"Bird");

print_r(array_slice($a,1,2,true));

?>

The output of the code above will be:

Array ( [1] => Cat [2] => Horse )

Example 4

With string keys:

<?php

$a=array("a"=>"Dog","b"=>"Cat","c"=>"Horse","d"=>"Bird");

print_r(array_slice($a,1,2));

?>

The output of the code above will be:

Array ( [b] => Cat [c] => Horse )


PHP array_splice() Function

Definition and Usage

The array_splice() function removes selected elements from an array and replaces it with new elements. The function also returns an array with the removed elements.

Syntax

array_splice(array,start,length,array)

Parameter | Description
array | Required. Specifies an array
start | Required. Numeric value. Specifies where the function will start removing elements. 0 = the first element. If this value is set to a negative number, the function will start that far from the last element. -2 means start at the second last element of the array.
length | Optional. Numeric value. Specifies how many elements will be removed, and also length of the returned array. If this value is set to a negative number, the function will stop that far from the last element. If this value is not set, the function will remove all elements, starting from the position set by the start-parameter.
array | Optional. Specifies an array with the elements that will be insertet to the original array. If it's only one element, it can be a string, and does not have to be an array.

Tips and Notes

Tip: If the function does not removes any elements (length=0), the replacment array will be inserted from the position of the start parameter. (See example 3)

Note: The keys in the replacement array are not preserved.

Example 1

<?php

$a1=array(0=>"Dog",1=>"Cat",2=>"Horse",3=>"Bird");

$a2=array(0=>"Tiger",1=>"Lion");

array_splice($a1,0,2,$a2);

print_r($a1);

?>

The output of the code above will be:

Array ( [0] => Tiger [1] => Lion [2] => Horse [3] => Bird )

Example 2

The same example as example 1, but the output is the returned array:

<?php

$a1=array(0=>"Dog",1=>"Cat",2=>"Horse",3=>"Bird");

$a2=array(0=>"Tiger",1=>"Lion");

print_r(array_splice($a1,0,2,$a2));

?>

The output of the code above will be:

Array ( [0] => Dog [1] => Cat )

Example 3

With the length parameter set to 0:

<?php

$a1=array(0=>"Dog",1=>"Cat");

$a2=array(0=>"Tiger",1=>"Lion");

array_splice($a1,1,0,$a2);

print_r($a1);

?>

The output of the code above will be:

Array ( [0] => Dog [1] => Tiger [2] => Lion [3] => Cat )


PHP array_sum() Function

Definition and Usage

The array_sum() function returns the sum of all the values in the array.

Syntax

array_sum(array)

Parameter | Description
array | Required. Specifies an array

Example

<?php

$a=array(0=>"5",1=>"15",2=>"25");

echo array_sum($a);

?>

The output of the code above will be:

45


PHP array_udiff() Function

Definition and Usage

The array_udiff() function compares two or more arrays, in a user-made function, and returns an array containing the elements from the first array, if the user-made function allows it. The user-made function compares array values, and returns a numeric value, a positive number (1) if the returned array should contain this element, and 0, or a negative number (-1), if not.

Syntax

array_udiff(array1,array2,array3...,function)

Parameter | Description
array1 | Required. The first array is the array that the others will be compared with
array2 | Required. An array to be compared with the first array
array3 | Optional. An array to be compared with the first array
function | Required. The name of the user-made function

Tips and Notes

Tip: You can compare the first array with one array, or as many as you like.

Note: Only the value is used in the comparison.

Example

<?php

function myfunction($v1,$v2)

{

if ($v1===$v2)

{

return 0;

}

return 1;

}

$a1=array("a"=>"Cat","b"=>"Dog","c"=>"Horse");

$a2=array(1=>"Cat",2=>"Dog",3=>"Fish");

print_r(array_udiff($a1,$a2,"myfunction"));

?>

The output of the code above will be:

Array ( [c] => Horse )


PHP array_udiff_assoc() Function

Definition and Usage

The array_udiff_assoc() function compares two or more arrays, both in a built in function and in a user-made function, and then returns an array containing the elements from the first array, if the functions allow it. The built in function compares the keys. The user-made function compares the values, and returns a numeric value, a positive number (1) if the returned array should contain this element, and 0, or a negative number (-1), if not.

Syntax

array_udiff_assoc(array1,array2,array3...,function)

Parameter | Description
array1 | Required. The first array is the array that the others will be compared with
array2 | Required. An array to be compared with the first array
array3 | Optional. An array to be compared with the first array
function | Required. The name of the user-made function

Tips and Notes

Tip: You can compare the first array with one array, or as many as you like.

Note: For comparison, the key is used in the built-in function and the value is used in the user-made function.

Example

<?php

function myfunction($v1,$v2)

{

if ($v1===$v2)

{

return 0;

}

return 1;

}

$a1=array("a"=>"Cat","b"=>"Dog","c"=>"Horse");

$a2=array("a"=>"Cat","b"=>"Horse","c"=>"Dog");

print_r(array_udiff_assoc($a1,$a2,"myfunction"));

?>

The output of the code above will be:

Array ( [b] Dog [c] => Horse )


PHP array_udiff_uassoc() Function

Definition and Usage

The array_udiff_uassoc() function compares two or more arrays, in two user-made functions, and returns an array containing the elements from the first array, if the user-made functions allow it. The first user-made function compares array keys, and the second compares array values, and both returns a numeric value, a positive number (1) if the returned array should contain this element, and 0, or a negative number (-1), if not.

Syntax

array_udiff_uassoc(array1,array2,array3...,function1,function2)

Parameter | Description
array1 | Required. The first array is the array that the others will be compared with
array2 | Required. An array to be compared with the first array
array3 | Optional. An array to be compared with the first array
function1 | Required. The name of the user-made function that compares the array keys
function2 | Required. The name of the user-made function that compares the array values

Tips and Notes

Tip: You can compare the first array with one array, or as many as you like.

Note: For comparison, the key is used in the first function and the value is used in the second. They are both user-made functions.

Example

<?php

function myfunction_key($v1,$v2)

{

if ($v1===$v2)

{

return 0;

}

return 1;

}

function myfunction_value($v1,$v2)

{

if ($v1===$v2)

{

return 0;

}

return 1;

}

$a1=array("a"=>"Cat","b"=>"Dog","c"=>"Horse");

$a2=array("a"=>"Cat","b"=>"Dog","c"=>"Fish");

print_r(array_udiff_uassoc($a1,$a2,"myfunction_key","myfunction_value"));

?>

The output of the code above will be:

Array ( [c] => Horse )


PHP array_uintersect() Function

Definition and Usage

The array_uintersect() function compares two or more arrays, in a user-made function, and returns an array containing the elements from the first array, if the user-made function allows it. The user-made function compares array values, and returns a numeric value, 0 if the returned array should contain this element.

Syntax

array_uintersect(array1,array2,array3...,function)

Parameter | Description
array1 | Required. The first array is the array that the others will be compared with
array2 | Required. An array to be compared with the first array
array3 | Optional. An array to be compared with the first array
function | Required. The name of the user-made function

Tips and Notes

Tip: You can compare the first array with one array, or as many as you like.

Note: Only the value is used in the comparison.

Example

<?php

function myfunction($v1,$v2)

{

if ($v1===$v2)

{

return 0;

}

if ($v1 > $v2) return 1;

{

return -1;

}

return 1;

}

$a1=array("a"=>"Cat","b"=>"Dog","c"=>"Horse");

$a2=array(1=>"Cat",2=>"Dog",3=>"Fish");

print_r(array_uintersect($a1,$a2,"myfunction"));

?>

The output of the code above will be:

Array ( [a] => Cat [b] => Dog )


PHP array_uintersect_assoc() Function

Definition and Usage

The array_uintesect_assoc() function compares two or more arrays, both in a built in function and in a user-made function, and then returns an array containing the elements from the first array, if the functions allow it. The built in function compares the keys. The user-made function compares the values, and returns a numeric value, 0 if the returned array should contain this element.

Syntax

array_uintersect_assoc(array1,array2,array3...,function)

Parameter | Description
array1 | Required. The first array is the array that the others will be compared with
array2 | Required. An array to be compared with the first array
array3 | Optional. An array to be compared with the first array
function | Required. The name of the user-made function

Tips and Notes

Tip: You can compare the first array with one array, or as many as you like.

Note: For comparison, the key is used in the built-in function and the value is used in the user-made function.

Example

<?php

function myfunction($v1,$v2)

{

if ($v1===$v2)

{

return 0;

}

return 1;

}

$a1=array("a"=>"Cat","b"=>"Dog","c"=>"Horse");

$a2=array("a"=>"Cat","b"=>"Horse","c"=>"Dog");

print_r(array_uintersect_assoc($a1,$a2,"myfunction"));

?>

The output of the code above will be:

Array ( [a] Cat )


PHP array_uintersect_uassoc() Function

Definition and Usage

The array_uintersect_uassoc() function compares two or more arrays, in two user-made functions, and returns an array containing the elements from the first array, if the user-made functions allow it. The first user-made function compares array keys, and the second compares array values, and both returns a numeric value, 0 if the returned array should contain this element.

Syntax

array_uintersect_uassoc(array1,array2,array3...,function1,function2)

Parameter | Description
array1 | Required. The first array is the array that the others will be compared with
array2 | Required. An array to be compared with the first array
array3 | Optional. An array to be compared with the first array
function1 | Required. The name of the user-made function that compares the array keys
function2 | Required. The name of the user-made function that compares the array values

Tips and Notes

Tip: You can compare the first array with one array, or as many as you like.

Note: For comparison, the key is used in the first function and the value is used in the second. They are both user-made functions.

Example

<?php

function myfunction_key($v1,$v2)

{

if ($v1===$v2)

{

return 0;

}

return 1;

}

function myfunction_value($v1,$v2)

{

if ($v1===$v2)

{

return 0;

}

return 1;

}

$a1=array("a"=>"Cat","b"=>"Dog","c"=>"Horse");

$a2=array("a"=>"Cat","b"=>"Dog","c"=>"Dog");

print_r(array_uintersect_uassoc($a1,$a2,"myfunction_key","myfunction_value"));

?>

The output of the code above will be:

Array ( [a] => Cat [b] => Dog )


PHP array_unique() Function

Definition and Usage

The array_unique() function removes duplicate values from an array. If two or more array values are the same, the first appearance will be kept and the other will be removed.

Syntax

array_unique(array)

Parameter | Description
array | Required. Specifying an array

Tips and Notes

Note: The returned array will keep the first array item's key type.

Example

<?php

$a=array("a"=>"Cat","b"=>"Dog","c"=>"Cat");

print_r(array_unique($a));

?>

The output of the code above will be:

Array ( [a] => Cat [b] => Dog )


PHP array_unshift() Function

Definition and Usage

The array_unshift() function inserts new elements to an array. The new array values will be inserted in the beginning of the array. The function's return value is the new number of elements in the array (See example 2).

Syntax

array_unshift(array,value1,value2,value3...)

Parameter | Description
array | Required. Specifying an array
value1 | Required. Specifies a value to insert
value2 | Optional. Specifies a value to insert
value3 | Optional. Specifies a value to insert

Tips and Notes

Tip: You can add one value, or as many as you like.

Note: Numeric keys will start at 0 and increas by 1 (See example3). String keys will remain the same (See example 1).

Example 1

<?php

$a=array("a"=>"Cat","b"=>"Dog");

array_unshift($a,"Horse");

print_r($a);

?>

The output of the code above will be:

Array ( [0] => Horse [a] => Cat [b] => Dog )

Example 2

Return value:

<?php

$a=array("a"=>"Cat","b"=>"Dog");

print_r(array_unshift($a,"Horse"));

?>

The output of the code above will be:

3

Example 3

Numeric keys:

<?php

$a=array(0=>"Cat",1=>"Dog");

array_unshift($a,"Horse");

print_r($a);

?>

The output of the code above will be:

Array ( [0] => Horse [1] => Cat [2] => Dog )


PHP array_values() Function

Definition and Usage

The array_values() function returns an array containing all the values of an array.

Syntax

array_values(array)

Parameter | Description
array | Required. Specifying an array

Tips and Notes

Tip: The returned array will have numeric keys, starting at 0 and increase by 1.

Example

<?php

$a=array("a"=>"Cat","b"=>"Dog","c"=>"Horse");

print_r(array_values($a));

?>

The output of the code above will be:

Array ( [0] => Cat [1] => Dog [2] => Horse )


PHP array_walk() Function

Definition and Usage

The array_walk() function runs each array element in a user-made function. The array's keys and values are parameters in the function. Returns True or False

Syntax

array_walk(array,function,parameter...)

Parameter | Description
array | Required. Specifying an array
function | Required. The name of the user-made function
parameter | Optional. Specifies a parameter to the user-made function

Tips and Notes

Tip: You can assign one parameter to the function, or as many as you like.

Note: You can change an array element's value in the user-made function by specifying the first parameter as a reference: &$value. (See example 3)

Example 1

<?php

function myfunction($value,$key)

{

echo "The key $key has the value $value<br />";

}

$a=array("a"=>"Cat","b"=>"Dog","c"=>"Horse");

array_walk($a,"myfunction");

?>

The output of the code above will be:

The key a has the value Cat

The key b has the value Dog

The key c has the value Horse

Example 2

With a parameter:

<?php

function myfunction($value,$key,$p)

{

echo "$key $p $value<br />";

}

$a=array("a"=>"Cat","b"=>"Dog","c"=>"Horse");

array_walk($a,"myfunction","has the value");

?>

The output of the code above will be:

a has the value Cat

b has the value Dog

c has the value Horse

Example 3

Change an array element's value. (Notice the &$value)

<?php

function myfunction(&$value,$key)

{

$value="Bird;

}

$a=array("a"=>"Cat","b"=>"Dog","c"=>"Horse");

array_walk($a,"myfunction");

print_r($a);

?>

The output of the code above will be:

Array ( [a] => Bird [b] => Bird [c] => Bird )


PHP array_walk_recursive() Function

Definition and Usage

The array_walk_recursive() function runs each array element in a user-made function. The array's keys and values are parameters in the function. The difference between this function and the array_walk() function is that with this function you can work with deeper arrays (an array inside an array). Returns True or False

Syntax

array_walk_recursive(array,function,parameter)

Parameter | Description
array | Required. Specifying an array
function | Required. The name of the user-made function
parameter | Optional. Specifies a parameter to the user-made function

Tips and Notes

Tip: You can assign one parameter to the function, or as many as you like.

Example

<?php

function myfunction($value,$key)

{

echo "The key $key has the value $value<br />";

}

$a1=array("a"=>"Cat","b"=>"Dog");

$a2=array($a1,"1"=>"Bird","2"=>"Horse");

array_walk_recursive($a2,"myfunction");

?>

The output of the code above will be:

The key a has the value Cat

The key b has the value Dog

The key 1 has the value Bird

The key 2 has the value Horse


PHP Arrays

An array can store one or more values in a single variable name.

What is an array?

When working with PHP, sooner or later, you might want to create many similar variables.

Instead of having many similar variables, you can store the data as elements in an array.

Each element in the array has its own ID so that it can be easily accessed.

There are three different kind of arrays:

· Numeric array - An array with a numeric ID key
· Associative array - An array where each ID key is associated with a value
· Multidimensional array - An array containing one or more arrays

Numeric Arrays

A numeric array stores each element with a numeric ID key.

There are different ways to create a numeric array.

Example 1

In this example the ID key is automatically assigned:

$names = array("Peter","Quagmire","Joe");

Example 2

In this example we assign the ID key manually:

$names[0] = "Peter";

$names[1] = "Quagmire";

$names[2] = "Joe";

The ID keys can be used in a script:

<?php

$names[0] = "Peter";

$names[1] = "Quagmire";

$names[2] = "Joe";

echo $names[1] . " and " . $names[2] .

" are ". $names[0] . "'s neighbors";

?>

The code above will output:

Quagmire and Joe are Peter's neighbors

Associative Arrays

An associative array, each ID key is associated with a value.

When storing data about specific named values, a numerical array is not always the best way to do it.

With associative arrays we can use the values as keys and assign values to them.

Example 1

In this example we use an array to assign ages to the different persons:

$ages = array("Peter"=>32, "Quagmire"=>30, "Joe"=>34);

Example 2

This example is the same as example 1, but shows a different way of creating the array:

$ages['Peter'] = "32";

$ages['Quagmire'] = "30";

$ages['Joe'] = "34";

The ID keys can be used in a script:

<?php

$ages['Peter'] = "32";

$ages['Quagmire'] = "30";

$ages['Joe'] = "34";

echo "Peter is " . $ages['Peter'] . " years old.";

?>

The code above will output:

Peter is 32 years old.

Multidimensional Arrays

In a multidimensional array, each element in the main array can also be an array. And each element in the sub-array can be an array, and so on.

Example

In this example we create a multidimensional array, with automatically assigned ID keys:

$families = array

(

"Griffin"=>array

(

"Peter",

"Lois",

"Megan"

),

"Quagmire"=>array

(

"Glenn"

),

"Brown"=>array

(

"Cleveland",

"Loretta",

"Junior"

)

);

The array above would look like this if written to the output:

Array

(

[Griffin] => Array

(

[0] => Peter

[1] => Lois

[2] => Megan

)

[Quagmire] => Array

(

[0] => Glenn

)

[Brown] => Array

(

[0] => Cleveland

[1] => Loretta

[2] => Junior

)

)


PHP arsort() Function

Definition and Usage

The arsort() function sorts an array by the values in reverse order. The values keep their original keys.

This function returns TRUE on success, or FALSE on failure.

Syntax

arsort(array,sorttype)

Parameter

Description

array

Required. Specifying an array

sorttype

Optional. Specifies how to sort the array values. Possible values:

· SORT_REGULAR - Default. Treat values as they are (don't change types)
· SORT_NUMERIC - Treat values numerically
· SORT_STRING - Treat values as strings
· SORT_LOCALE_STRING - Treat values as strings, based on local settings

Example

<?php

$my_array = array("a" => "Dog", "b" => "Cat", "c" => "Horse");

arsort($my_array);

print_r($my_array);

?>

The output of the code above will be:

Array

(

[c] => Horse

[a] => Dog

[b] => Cat

)


PHP asin() function

Definition and Usage

The asin() function returns the arcsine of a number as a numeric value between

-PI/2 and PI/2 radians.

Syntax

asin(x)

Parameter | Description
x | Required. Must be a numeric value in the range -1 to 1

Tips and Notes

Note: If the parameter x is outside the range -1 to 1, the browser will return -1.#IND.

Note: 1 will return the value of PI/2.

Example

In this example we will get the arcsine of different numbers:

<?php

echo(asin(0.64) . "<br />");

echo(asin(0) . "<br />");

echo(asin(-1) . "<br />");

echo(asin(1) . "<br />");

echo(asin(2))

?>

The output of the code above will be:

0.694498265627

0

-1.57079632679

1.57079632679

-1.#IND


PHP asinh() function

Definition and Usage

The asinh() function returns the inverse hyperbolic sine of a number.

Syntax

asinh(x)

Parameter | Description
x | Required. A number

Tips and Notes

Note: This function is not implemented on Windows platforms.


PHP asort() Function

Definition and Usage

The asort() function sorts an array by the values. The values keep their original keys.

This function returns TRUE on success, or FALSE on failure.

Syntax

asort(array,sorttype)

Parameter

Description

array

Required. Specifying an array

sorttype

Optional. Specifies how to sort the array values. Possible values:

· SORT_REGULAR - Default. Treat values as they are (don't change types)
· SORT_NUMERIC - Treat values numerically
· SORT_STRING - Treat values as strings
· SORT_LOCALE_STRING - Treat values as strings, based on local settings

Example

<?php

$my_array = array("a" => "Dog", "b" => "Cat", "c" => "Horse");

asort($my_array);

print_r($my_array);

?>

The output of the code above will be:

Array

(

[b] => Cat

[a] => Dog

[c] => Horse

)


PHP asXML() Function

Definition and Usage

The asXML() function returns the XML document, from a SimpleXMLElement object, as a string.

This function returns FALSE on failure.

Syntax

class SimpleXMLElement

{

string asXML(file)

}

Parameter | Description
file | Optional. If this parameter is specified, this function writes the XML to a file instead of returning it

Example

XML File

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

PHP Code

<?php

if (file_exists('test.xml'))

{

$xml = simplexml_load_file('test.xml');

}

echo $xml->asXML();

?>

The output of the code above will be:

Tove Jani Reminder Don't forget me this weekend!

If you select "View source" in the browser window, you will see the following HTML:

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>


PHP atan() and atan2() functions

Definition and Usage

The atan() function returns the arctangent of a number as a numeric value between -PI/2 and PI/2 radians.

The atan2() function returns the angle theta of an (x,y) point as a numeric value between -PI and PI radians.

Syntax

atan(x)

atan2(x,y)

Parameter | Description
x | Required. A number
y | Required. A number

Example 1 - atan()

The following example returns the arctangent of different numbers with the atan() function:

<?php

echo(atan(0.50) . "<br />");

echo(atan(-0.50) . "<br />");

echo(atan(5) . "<br />");

echo(atan(10) . "<br />");

echo(atan(-5) . "<br />");

echo(atan(-10))

?>

The output of the code above will be:

0.463647609001

-0.463647609001

1.37340076695

1.4711276743

-1.37340076695

-1.4711276743

Example 2 - atan2()

The following example returns the angle theta of different (x,y) points with the atan2() function:

<?php

echo(atan2(0.50,0.50) . "<br />");

echo(atan2(-0.50,-0.50) . "<br />");

echo(atan2(5,5) . "<br />");

echo(atan2(10,20) . "<br />");

echo(atan2(-5,-5) . "<br />");

echo(atan2(-10,10))

?>

The output of the code above will be:

0.785398163397

-2.35619449019

0.785398163397

0.463647609001

-2.35619449019

-0.785398163397


PHP atanh() function

Definition and Usage

The atanh() function returns the inverse hyperbolic tangent of an angle.

Syntax

atanh(x)

Parameter | Description
x | Required. A number

Tips and Notes

Note: This function is not implemented on Windows platforms.


PHP attributes() Function

Definition and Usage

The attributes() function gets an XML elements attributes.

Syntax

class SimpleXMLElement

{

string attributes(ns,is_prefix)

}

Parameter | Description
ns | Optional
is_prefix | Optional

Example

XML File

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body type="small"important="low">

Don't forget me this weekend!</body>

</note>

PHP Code

<?php

$xml = simplexml_load_file("test.xml");

foreach($xml->body[0]->attributes() as $a => $b)

{

echo $a,'="',$b,"\"</br>";

}

?>

The output of the code above will be:

type="small" important="low"


PHP base_convert() function

Definition and Usage

The base_convert() function converts a number from one base to another.

Syntax

base_convert(number,frombase,tobase)

Parameter | Description
number | Required. Original value
frombase | Required. Original base of number. Frombase has to be between 2 and 36, inclusive. Digits in numbers with a base higher than 10 will be represented with the letters a-z, with a meaning 10, b meaning 11 and z meaning 35.
tobase | Required. The base to convert to. Tobase has to be between 2 and 36, inclusive. Digits in numbers with a base higher than 10 will be represented with the letters a-z, with a meaning 10, b meaning 11 and z meaning 35.

Example 1

Convert an octal number to a decimal number:

<?php

$oct = "0031";

$dec = base_convert($oct,8,10);

echo "$oct in octal is equal to $dec in decimal.";

?>

The output of the code above will be:

0031 in octal is equal to 25 in decimal.

Example 2

Convert an octal number to a hexadecimal number:

<?php

$oct = "3648";

$hex = base_convert($oct,8,16);

echo "$oct in octal is equal to $hex in hexadecimal.";

?>

The output of the code above will be:

3648 in octal is equal to f4 in hexadecimal.


PHP basename() Function

Definition and Usage

The basename() function returns the filename from a path.

Syntax

basename(path,suffix)

Parameter | Description
path | Required. Specifies the path to check
suffix | Optional. Specifies a file extension. If the filename has this file extension, the file extension will not show

Example

<?php

$path = "/testweb/home.php";

//Show filename with file extension

echo basename($path) ."<br/>";

//Show filename without file extension

echo basename($path,".php");

?>

The output of the code above will be:

home.php

home


PHP bin2hex() Function

Definition and Usage

The bin2hex() function converts a string of ASCII characters to hexadecimal values. The string can be converted back using the pack() function.

Syntax

bin2hex(string)

Parameter | Description
string | Required. The string to be converted

Example

In this example we will convert a string value from binary to hex and back:

<?php

$str = "Hello world!";

echo bin2hex($str) . "<br />";

echo pack("H*",bin2hex($str)) . "<br />";

?>

The output of the code above will be:

48656c6c6f20776f726c6421

Hello world!


PHP bindec() function

Definition and Usage

The bindec() function converts a binary number to a decimal number.

Syntax

bindec(binary_number)

Parameter | Description
binary_number | Required. Specifies the binary number to convert

Example

<?php

echo bindec("0011") . "<br />";

echo bindec("01") . "<br />";

echo bindec("11000110011") . "<br />";

echo bindec("111");

?>

The output of the code above will be:

3

1

1587

7


PHP cal_days_in_month() function

Definition and Usage

The cal_days_in_month() function returns the number of days in a month of a specified year and calendar.

Syntax

cal_days_in_month(calendar,month,year)

Parameter | Description
calendar | Required. Specifies the calendar to use
month | Required. Specifies the month
year | Required. Specifies the year

Example

<?php

$d=cal_days_in_month(CAL_GREGORIAN,10,2005);

echo("There was $d days in October 2005");

?>

The output of the code above will be:

There was 31 days in October 2005


PHP cal_from_jd() function

Definition and Usage

The cal_from_jd() function converts the specified Julian day into a date of the specified calendar.

Syntax

cal_from_jd(jd,calendar)

Parameter

Description

jd

Required. A number (a Julian day count)

calendar

Required. Specifies the calendar to use. The following calendar values can be used:

· CAL_GREGORIAN
· CAL_JULIAN
· CAL_JEWISH
· CAL_FRENCH

Example

<?php

$d=unixtojd(mktime(0,0,0,1,18,2006));

print_r(cal_from_jd($d,CAL_GREGORIAN));

?>

The output of the code above will be:

Array

(

[date] => 1/18/2006

[month] => 1

[day] => 18

[year] => 2006

[dow] => 3

[abbrevdayname] => Wed

[dayname] => Wednesday

[abbrevmonth] => Jan

[monthname] => January

)


PHP cal_info() function

Definition and Usage

The cal_info() function returns an array that contains information about a given calendar.

The array contains the following elements: calname, calsymbol, month, abbrevmonth and maxdaysinmonth.

Syntax

cal_info(calendar)

Parameter

Description

calendar

Optional. Specifies the calendar. The following calendar values can be used:

· 0 = CAL_GREGORIAN
· 1 = CAL_JULIAN
· 2 = CAL_JEWISH
· 3 = CAL_FRENCH

Tips and Notes

Tip: In PHP 5, if no calendar parameter is specified, information on ALL supported calendars is returned.

Example

<?php

$calinfo=cal_info(0);

print_r($calinfo);

?>

The output of the code above will be:

Array

(

[months] => Array

(

[1] => January

[2] => February

[3] => March

[4] => April

[5] => May

[6] => June

[7] => July

[8] => August

[9] => September

[10] => October

[11] => November

[12] => December

)

[abbrevmonths] => Array

(

[1] => Jan

[2] => Feb

[3] => Mar

[4] => Apr

[5] => May

[6] => Jun

[7] => Jul

[8] => Aug

[9] => Sep

[10] => Oct

[11] => Nov

[12] => Dec

)

[maxdaysinmonth] => 31

[calname] => Gregorian

[calsymbol] => CAL_GREGORIAN

)


PHP cal_to_jd() function

Definition and Usage

The cal_to_jd() function converts a specified date to Julian day count.

Syntax

cal_to_jd(calendar,month,day,year)

Parameter

Description

calendar

Required. Specifies the calendar to use. The following calendar values can be used:

· CAL_GREGORIAN
· CAL_JULIAN
· CAL_JEWISH
· CAL_FRENCH

month

Required. Specifies the month

day

Required. Specifies the day

year

Required. Specifies the year

Example

<?php

$d=cal_to_jd(CAL_GREGORIAN,10,03,2005);

echo($d);

?>

The output of the code above will be:

2453647


PHP Calendar Functions

PHP Calendar Introduction

The calendar functions are useful when working with different calendar formats. The standard it is based on is the Julian day count (Julian day count is a count of days starting from January 1, 4713 B.C.). Note that the Julian day count is not the same as the Julian calendar!

Note: To convert between calendar formats, you must first convert to Julian day count, then to the calendar format.

Installation

The windows version of PHP has built-in support for the calendar extension. So, the calendar functions will work automatically.

However, if you are running the Linux version of PHP, you will have to compile PHP with --enable-calendar to get the calendar functions to work.

PHP Calendar Functions

PHP: indicates the earliest version of PHP that supports the function.

Function | Description | PHP
 | Returns the number of days in a month for a specified year and calendar | 4
 | Converts a Julian day count into a date of a specified calendar | 4
cal_info() | Returns information about a given calendar | 4
 | Converts a date to Julian day count | 4
 | Returns the Unix timestamp for midnight on Easter of a specified year | 3
 | Returns the number of days after March 21, on which Easter falls for a specified year | 3
FrenchToJD() | Converts a French Republican date to a Julian day count | 3
GregorianToJD() | Converts a Gregorian date to a Julian day count | 3
 | Returns the day of a week | 3
JDMonthName() | Returns a month name | 3
JDToFrench() | Converts a Julian day count to a French Republican date | 3
JDToGregorian() | Converts a Julian day count to a Gregorian date | 3
jdtojewish() | Converts a Julian day count to a Jewish date | 3
JDToJulian() | Converts a Julian day count to a Julian date | 3
jdtounix() | Converts a Julian day count to a Unix timestamp | 4
JewishToJD() | Converts a Jewish date to a Julian day count | 3
JulianToJD() | Converts a Julian date to a Julian day count | 3
 | Converts a Unix timestamp to a Julian day count | 4

PHP Calendar Constants

PHP: indicates the earliest version of PHP that supports the constant.

Constant | Description | PHP
CAL_GREGORIAN | Gregorian calendar | 3
CAL_JULIAN | Julian calendar | 3
CAL_JEWISH | Jewish calendar | 3
CAL_FRENCH | French Republican calendar | 3
CAL_NUM_CALS |  | 3
CAL_DOW_DAYNO |  | 3
CAL_DOW_SHORT |  | 3
CAL_DOW_LONG |  | 3
CAL_MONTH_GREGORIAN_SHORT |  | 3
CAL_MONTH_GREGORIAN_LONG |  | 3
CAL_MONTH_JULIAN_SHORT |  | 3
CAL_MONTH_JULIAN_LONG |  | 3
CAL_MONTH_JEWISH |  | 3
CAL_MONTH_FRENCH |  | 3
CAL_EASTER_DEFAULT |  | 4
CAL_EASTER_DEFAULT |  | 4
CAL_EASTER_ROMAN |  | 4
CAL_EASTER_ALWAYS_GREGORIAN |  | 4
CAL_EASTER_ALWAYS_JULIAN |  | 4
CAL_JEWISH_ADD_ALAFIM_GERESH |  | 5
CAL_JEWISH_ADD_ALAFIM |  | 5
CAL_JEWISH_ADD_GERESHAYIM |  | 5


PHP ceil() function

Definition and Usage

The ceil() function returns the value of a number rounded UPWARDS to the nearest integer.

Syntax

ceil(x)

Parameter | Description
x | Required. A number

Example

In the following example we will use the ceil() function on different numbers:

<?php

echo(ceil(0.60) . "<br />");

echo(ceil(0.40) . "<br />");

echo(ceil(5) . "<br />");

echo(ceil(5.1) . "<br />");

echo(ceil(-5.1) . "<br />");

echo(ceil(-5.9))

?>

The output of the code above will be:

1

1

5

6

-5

-5


PHP chdir() Function

Definition and Usage

The chdir() function changes the current directory to the specified directory.

This function returns TRUE on success and FALSE on failure.

Syntax

chdir(directory)

Parameter | Description
directory | Required. Specifies the directory to change to

Example

<?php

//Get current directory

echo getcwd();

echo "<br />";

//Change to the images directory

chdir("images");

echo "<br />";

echo getcwd();

?>

The output of the code above could be:

C:\testweb\main

C:\testweb\main\images


PHP checkdate() function

Definition and Usage

The checkdate() function returns true if the specified date is valid, and false otherwise.

A date is valid if:

· month is between 1 and 12 inclusive
· day is within the allowed number of days for the particular month
· year is between 1 and 32767 inclusive

Syntax

checkdate(month,day,year)

Parameter | Description
month | Required. Specifies the month
day | Required. Specifies the day
year | Required. Specifies the year

Example

<?php

var_dump(checkdate(12,31,2000));

var_dump(checkdate(2,29,2003));

var_dump(checkdate(2,29,2004));

?>

The output of the code above will be:

bool(true)

bool(false)

bool(true)


PHP chgrp() Function

Definition and Usage

The chgrp() function changes the usergroup of the specified file.

Returns TRUE on success and FALSE on failure.

Syntax

chgrp(file,group)

Parameter | Description
file | Required. Specifies the file to check
group | Required. Specifies the new group. Can be a group name or a group ID

Example

<?php

chgrp("test.txt","admin")

?>


PHP children() Function

Definition and Usage

The children() function gets the child nodes of the specified XML node.

Syntax

class SimpleXMLElement

{

string children(ns,is_prefix)

}

Parameter | Description
ns | Optional
is_prefix | Optional

Example

XML File

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

PHP Code

<?php

$xml = simplexml_load_file("test.xml");

foreach ($xml->children() as $child)

{

echo "Child node: " . $child . "<br />";

}

?>

The output of the code above will be:

Child node: Tove

Child node: Jani

Child node: Reminder

Child node: Don't forget me this weekend!


PHP chmod() Function

Definition and Usage

The chmod() function changes permissions of the specified file.

Returns TRUE on success and FALSE on failure.

Syntax

chmod(file,mode)

Parameter

Description

file

Required. Specifies the file to check

mode

Required. Specifies the new permissions.

The mode parameter consists of four numbers:

· The first number is always zero
· The second number specifies permissions for the owner
· The third number specifies permissions for the owner's user group
· The fourth number specifies permissions for everybody else

Possible values (to set multiple permissions, add up the following numbers):

· 1 = execute permissions
· 2 = write permissions
· 4 = read permissions

Example

<?php

// Read and write for owner, nothing for everybody else

chmod("test.txt","0600");

// Read and write for owner, read for everybody else

chmod("test.txt","0644");

// Everything for owner, read and execute for everybody else

chmod("test.txt","0755");

// Everything for owner, read for owner's group

chmod("test.txt","0740");

?>


PHP chop() Function

Definition and Usage

The chop() function will remove a white space or other predefined character from the right end of a string.

This function is an alias of the rtrim() function.

Syntax

chop(string,charlist)

Parameter

Description

string

Required. Specifies the string to check

charlist

Optional. Specifies which characters to remove from the string.

The following characters are allowed and is set to be removed if the charlist parameter is empty:

· "\0" - ASCII 0, NULL
· "\t" - ASCII 9, a tab
· "\n" - ASCII 10, a new line
· "\x0B" - ASCII 11, a vertical tab.
· "\r" - ASCII 13, a carriage return
· " " - ASCII 32, an ordinary white space

Example

In this example we will use the chop() function to remove characters from the right end of a string:

<?php

$str = "Hello World!\n\n";

echo $str;

echo chop($str);

?>

The source output of the code above will be:

<html>

<body>

Hello World!

Hello World!</body>

</html>

The browser output of the code above will be:

Hello World! Hello World!


PHP chown() Function

Definition and Usage

The chown() function changes the owner of the specified file.

Returns TRUE on success and FALSE on failure.

Syntax

chown(file,owner)

Parameter | Description
file | Required. Specifies the file to check
owner | Required. Specifies the new owner. Can be a user name or a user ID.

Example

<?php

chown("test.txt","charles")

?>


PHP chr() Function

Definition and Usage

The chr() function returns a character from the specified ASCII value.

Syntax

chr(ascii)

Parameter | Description
ascii | Required. An ASCII value

Tips and Notes

Note: The x parameter can be specified in decimal, octal, or hex values. Octal values are defined by a leading 0, while hex values are defined by a leading 0x.

Example

<?php

echo chr(52)."<br />";

echo chr(052)."<br />";

echo chr(0x52)."<br />";

?>

The output of the code above will be:

4

*

R


PHP chroot() Function

Definition and Usage

The chroot() function changes the root directory of the current process to the specified directory.

This function returns TRUE on success and FALSE on failure.

Syntax

chroot(directory)

Parameter | Description
directory | Required. Specifies the new root directory

Tips and Notes

Note: This function does not work on Windows platforms.


PHP chunk_split() Function

Definition and Usage

The chunk_split() function splits a string into a series of smaller parts.

Syntax

chunk_split(string,length,end)

Parameter | Description
string | Required. Specifies the string to split
length | Optional. A number that defines the length of the chunks. Default is 76
end | Optional. A string that defines what to place at the end of each chunk. Default is \r\n

Tips and Notes

Note: This function does not alter the original string.

Example 1

In this example we will split the string after each character and add a "." after each split:

<?php

$str = "Hello world!";

echo chunk_split($str,1,".");

?>

The output of the code above will be:

H.e.l.l.o. .w.o.r.l.d.!.

Example 2

In this example we will split the string after the sixth character and add "..." after each split:

<?php

$str = "Hello world!";

echo chunk_split($str,6,"...");

?>

The output of the code above will be:

Hello ...world!...


PHP clearstatcache() Function

Definition and Usage

The clearstatcache() function clears the file status cache.

PHP caches data for some functions for better performance. If a file is being checked several times in a script, you might want to avoid caching to get correct results. To do this, use the clearstatcache() function.

Syntax

clearstatcache()

Tips and Notes

Tip: Functions that are caching:

· stat()
· lstat()
· file_exists()
· is_writable()
· is_readable()
· is_executable()
· is_file()
· is_dir()
· is_link()
· filectime()
· fileatime()
· filemtime()
· fileinode()
· filegroup()
· fileowner()
· filesize()
· filetype()
· fileperms()

Example

<?php

//check filesize

echo filesize("test.txt");

echo "<br />";

$file = fopen("test.txt", "a+");

// truncate file

ftruncate($file,100);

fclose($file);

//Clear cache and check filesize again

clearstatcache();

echo filesize("test.txt");

?>

The output of the code above could be:

792

100


PHP closedir() Function

Definition and Usage

The closedir() function closes a directory handle opened by the opendir() function.

Syntax

closedir(dir_stream)

Parameter | Description
dir_stream | Required. Specifies the directory handle to close

Example 1

<?php

//Open images directory

$dir = opendir("images");

//List files in images directory

while (($file = readdir($dir)) !== false)

{

echo "filename: " . $file . "<br />";

}

closedir($dir);

?>

The output of the code above could be:

filename: .

filename: ..

filename: cat.gif

filename: dog.gif

filename: food

filename: horse.gif


PHP compact() Function

Definition and Usage

The compact() function creates an array from variables and their values.

Syntax

compact(var1,var2...)

Parameter | Description
var1 | Required. Can be a string with the variable name, or an array of variables
var2 | Optional. Can be a string with the variable name, or an array of variables. Multiple parameters are allowed.

Tips and Notes

Note: Any strings that does not match variable names will be skipped.

Example 1

<?php

$firstname = "Peter";

$lastname = "Griffin";

$age = "38";

$result = compact("firstname", "lastname", "age");

print_r($result);

?>

The output of the code above will be:

Array

(

[firstname] => Peter

[lastname] => Griffin

[age] => 38

)

Example 2

Using a string that does not match a variable, and an array of variable names:

<?php

$firstname = "Peter";

$lastname = "Griffin";

$age = "38";

$name = array("firstname", "lastname");

$result = compact($name, "location", "age");

print_r($result);

?>

The output of the code above will be:

Array

(

[firstname] => Peter

[lastname] => Griffin

[age] => 38

)


PHP connection_aborted() Function

Definition and Usage

The connection_aborted() function checks whether the client has disconnected.

This function returns 1 if the connection has been aborted, otherwise it returns 0.

Syntax

connection_aborted()

Example

Create a function (check_abort()) that writes a log message if a client aborts the script:

<?php

function check_abort()

{

if (connection_aborted())

error_log ("Script $GLOBALS[SCRIPT_NAME]" .

"$GLOBALS[SERVER_NAME] was aborted by the user.");

}

//some script to be executed here

// Call the check_abort function when the script ends

register_shutdown_function("check_abort");

?>


PHP connection_status() Function

Definition and Usage

The connection_status() function returns the current connection status.

Possible values that can be returned are:

· 0 - CONNECTION_NORMAL - connection is running normally
· 1 - CONNECTION_ABORTED - connection is aborted by user or network error
· 2 - CONNECTION_TIMEOUT - connection timed out
· 3 - CONNECTION_ABORTED & CONNECTION_TIMEOUT

Syntax

connection_status()

Example

<?php

switch (connection_status ())

{

case CONNECTION_NORMAL:

 $txt = 'Connection is in a normal state';

 break;

case CONNECTION_ABORTED:

 $txt = 'Connection aborted';

 break;

case CONNECTION_TIMEOUT:

 $txt = 'Connection timed out';

 break;

case (CONNECTION_ABORTED & CONNECTION_TIMEOUT):

 $txt = 'Connection aborted and timed out';

 break;

default:

 $txt = 'Unknown';

 break;

}

echo $txt;

?>


PHP constant() Function

Definition and Usage

The constant() function returns the value of a constant.

Syntax

constant(constant)

Parameter | Description
constant | Required. Specifies the name of the constant to check

Tips and Notes

Note: This function also works with class constants.

Example

<?php

//define a constant

define("GREETING","Hello you! How are you today?");

echo constant("GREETING");

?>

The output of the code above will be:

Hello you! How are you today?


PHP convert_cyr_string() Function

Definition and Usage

The convert_cyr_string() function converts a string from one Cyrillic character-set to another.

The supported Cyrillic character-sets are:

· k - koi8-r
· w - windows-1251
· i - iso8859-5
· a - x-cp866
· d - x-cp866
· m - x-mac-cyrillic

Syntax

convert_cyr_string(string,from,to)

Parameter | Description
string | Required. The string to convert
from | Required. A character that specifies what Cyrillic character-set to convert from
to | Required. A character that specifies what Cyrillic character-set to convert to

Example

In this example we will convert a string from one character-set to another:

<?php

$str = "Hello world! æøå";

echo $str."<br />";

echo convert_cyr_string($str,'w','a');

?>

The output of the code above will be:

Hello world! æøå

Hello world! ¦è¥


PHP convert_uudecode() Function

Definition and Usage

The convert_uudecode() function decodes a uuencoded string.

Syntax

convert_uudecode(string)

Parameter | Description
string | Required. The uuencoded string to decode

Example

In this example we will decode a uuencoded string using convert_uudecode():

<?php

$str = ",2&5L;&\@=V]R;&0A `";

echo convert_uudecode($str);

?>

The output of the code above will be:

Hello world!


PHP convert_uuencode() Function

Definition and Usage

The convert_uuencode() function encodes a string using the uuencode algorithm.

Syntax

convert_uuencode(string)

Parameter | Description
string | Required. The string to uuencode

Tips and Notes

Note: This function encodes all strings (including binary) into printable characters. This will fix any problems with obscure binary data when storing in a database or transmit data over a network. Remember to use the convert_uudecode() function before using the data again.

Note: Uuencoded data is about 35% larger than the original.

Example

In this example we will encode a string using convert_uuencode():

<?php

$str = "Hello world!";

echo convert_uuencode($str);

?>

The output of the code above will be:

,2&5L;&\@=V]R;&0A `


PHP Cookies

A cookie is often used to identify a user.

What is a Cookie?

A cookie is often used to identify a user. A cookie is a small file that the server embeds on the user's computer. Each time the same computer requests a page with a browser, it will send the cookie too. With PHP, you can both create and retrieve cookie values.

How to Create a Cookie?

The setcookie() function is used to set a cookie.

Note: The setcookie() function must appear BEFORE the <html> tag.

Syntax

setcookie(name, value, expire, path, domain);

Example

In the example below, we will create a cookie named "user" and assign the value "Alex Porter" to it. We also specify that the cookie should expire after one hour:

<?php

setcookie("user", "Alex Porter", time()+3600);

?>

<html>

<body>

</body>

</html>

Note: The value of the cookie is automatically URLencoded when sending the cookie, and automatically decoded when received (to prevent URLencoding, use setrawcookie() instead).

How to Retrieve a Cookie Value?

The PHP $_COOKIE variable is used to retrieve a cookie value.

In the example below, we retrieve the value of the cookie named "user" and display it on a page:

<?php

// Print a cookie

echo $_COOKIE["user"];

// A way to view all cookies

print_r($_COOKIE);

?>

In the following example we use the isset() function to find out if a cookie has been set:

<html>

<body>

<?php

if (isset($_COOKIE["user"]))

echo "Welcome " . $_COOKIE["user"] . "!<br />";

else

echo "Welcome guest!<br />";

?>

</body>

</html>

How to Delete a Cookie?

When deleting a cookie you should assure that the expiration date is in the past.

Delete example:

<?php

// set the expiration date to one hour ago

setcookie("user", "", time()-3600);

?>

What if a Browser Does NOT Support Cookies?

If your application deals with browsers that do not support cookies, you will have to use other methods to pass information from one page to another in your application. One method is to pass the data through forms (forms and user input are described earlier in this tutorial).

The form below passes the user input to "welcome.php" when the user clicks on the "Submit" button:

<html>

<body>

<form action="welcome.php" method="post">

Name: <input type="text" name="name" />

Age: <input type="text" name="age" />

<input type="submit" />

</form>

</body>

</html>

Retrieve the values in the "welcome.php" file like this:

<html>

<body>

Welcome <?php echo $_POST["name"]; ?>.<br />

You are <?php echo $_POST["age"]; ?> years old.

</body>

</html>


PHP copy() Function

Definition and Usage

The copy() function copies a file.

This function returns TRUE on success and FALSE on failure.

Syntax

copy(file,to_file)

Parameter | Description
file | Required. Specifies the file to copy
to_file | Required. Specifies the file to copy to

Tips and Notes

Note: If the destination file already exists, it will be overwritten.

Example

<?php

echo copy("target.txt","source.txt");

?>

The output of the code above will be:

1


PHP cos() function

Definition and Usage

The cos() function returns the cosine of a number.

Syntax

cos(x)

Parameter | Description
x | Required. A number

Tips and Notes

Note: The cos() function returns a numeric value between -1 and 1, which represents the cosine of the angle.

Example

In the following example we will return the cosine of different numbers:

<?php

echo(cos(3) . "<br />");

echo(cos(-3) . "<br />");

echo(cos(0) . "<br />");

echo(cos(M_PI) . "<br />");

echo(cos(2*M_PI))

?>

The output of the code above will be:

-0.9899924966004454

-0.9899924966004454

1

-1

1


PHP cosh() function

Definition and Usage

The cosh() function returns the hyperbolic cosine of a number (equivalent to (exp(x) + exp(-x)) / 2).

Syntax

cosh(x)

Parameter | Description
x | Required. A number

Example

In the following example we will return the hyperbolic cosine of different numbers:

<?php

echo(cosh(3) . "<br />");

echo(cosh(-3) . "<br />");

echo(cosh(0) . "<br />");

echo(cosh(M_PI) . "<br />");

echo(cosh(2*M_PI))

?>

The output of the code above will be:

10.0676619958

10.0676619958

1

11.5919532755

267.746761484


PHP count() Function

Definition and Usage

The count() function counts the elements of an array, or the properties of an object.

Syntax

count(array1,array2)

Parameter

Description

array

Required. Specifies the array or object to count.

mode

Optional. Specifies the mode of the function. Possible values:

· 0 - Default. Does not detect multidimensional arrays (arrays within arrays)
· 1 - Detects multidimensional arrays

Note: This parameter was added in PHP 4.2

Tips and Notes

Note: This function may return 0 if a variable isn't set, but it may also return 0 if a variable contains an empty array. The isset() function can be used to test if a variable is set.

Example

<?php

$people = array("Peter", "Joe", "Glenn", "Cleveland");

$result = count($people);

echo $result;

?>

The output of the code above will be:

4


PHP count_chars() Function

Definition and Usage

The count_chars() function returns how many times an ASCII character occurs within a string and returns the information.

Syntax

count_chars(string,mode)

Parameter

Description

string

Required. The string to be checked

mode

Optional. Specifies the return modes. 0 is default. The different return modes are:

· 0 - an array with the ASCII value as key and number of occurrences as value
· 1 - an array with the ASCII value as key and number of occurrences as value, only lists occurrences greater than zero
· 2 - an array with the ASCII value as key and number of occurrences as value, only lists occurrences equal to zero are listed
· 3 - a string with all the different characters used
· 4 - a string with all the unused characters

Example 1

In this example we will use count_char() with mode 1 to check the string. Mode 1 will return an array with the ASCII value as key and how

many times it occurred as value (e.g. in the example below, the ASCII value for the letter "l" is 108, and it occurs three times):

<?php

$str = "Hello World!";

print_r(count_chars($str,1));

?>

The output of the code above will be:

Array

(

[32] => 1

[33] => 1

[72] => 1

[87] => 1

[100] => 1

[101] => 1

[108] => 3

[111] => 2

[114] => 1

)

Example 2

In this example we will use the count_char() with mode 3 to check the string. Mode 3 will return a string with all the different characters used:

<?php

$str = "Hello World!";

echo count_chars($str,3);

?>

The output of the code above will be:

!HWdelor


PHP crc32() Function

Definition and Usage

The crc32() function calculates a 32-bit CRC (cyclic redundancy checksum) for a string.

This function can be used to validate data integrity.

Syntax

crc32(string)

Parameter | Description
string | Required. The string to be calculated

Tips and Notes

Tip: To ensure that you get the correct string representation from the crc32() function, you'll need to use the %u formatter of the printf() or sprintf() function. If the %u formatter is not used, the result may display in incorrect and negative numbers.

Example 1

In this example we will print the result of crc32() with and without the "%u" formatter (note that the result is equal):

<?php

$str = crc32("Hello world!");

echo 'Without %u: '.$str."<br />";

echo 'With %u: ';

printf("%u",$str);

?>

The output of the code above will be:

Without %u: 461707669

With %u: 461707669

Example 2

In this example we will print the result of crc32() with and without the "%u" formatter (note that the result is not equal):

<?php

$str = crc32("Hello world.");

echo 'Without %u: '.$str."<br />";

echo 'With %u: ';

printf("%u",$str);

?>

The output of the code above will be:

Without %u: -1959132156

With %u: 2335835140


PHP crypt() Function

Definition and Usage

The crypt() function returns a string encrypted using DES, Blowfish, or MD5 algorithms.

This function behaves different on different operating systems, some operating systems supports more than one type of encryption. PHP checks what algorithms are available and what algorithms to use when it is installed.

The exact algorithm depends on the format and length of the salt parameter. Salts help make the encryption more secure by increasing the number of encrypted strings that can be generated for one specific string with one specific encryption method.

There are some constants that are used together with the crypt() function. The value of these constants are set by PHP when it is installed.

Constants:

· [CRYPT_SALT_LENGTH] - The length of the default encryption. With standard DES encryption, the length is 2
· [CRYPT_STD_DES] - Value is 1 if the standard DES algorithm is supported, 0 otherwise. The Standard DES-based encryption has a two character salt
· [CRYPT_EXT_DES] - Value is1 if the extended DES algorithm is supported, 0 otherwise. The Extended DES encryption has a nine character salt
· [CRYPT_MD5] - Value is 1 if the MD5 algorithm is supported, 0 otherwise. The MD5 encryption has a 12 character salt starting with $1$
· [CRYPT_BLOWFISH] - Value is 1 if the Blowfish algorithm is supported, 0 otherwise. The Blowfish encryption has a 16 character salt starting with $2$ or $2a$

Syntax

crypt(str,salt)

Parameter | Description
str | Required. Specifies the string to be encoded
salt | Optional. A string used to increase the number of characters encoded, to make the encoding more secure. If the salt argument is not provided, one will be randomly generated by PHP each time you call this function.

Tips and Notes

Note: There is no decrypt function. The crypt() function uses a one-way algorithm.

Example 1

In this example we will test the different algorithms:

<?php

if (CRYPT_STD_DES == 1)

{

echo "Standard DES: ".crypt("hello world")."\n<br />";

}

else

{

echo "Standard DES not supported.\n<br />";

}

if (CRYPT_EXT_DES == 1)

{

echo "Extended DES: ".crypt("hello world")."\n<br />";

}

else

{

echo "Extended DES not supported.\n<br />";

}

if (CRYPT_MD5 == 1)

{

echo "MD5: ".crypt("hello world")."\n<br />";

}

else

{

echo "MD5 not supported.\n<br />";

}

if (CRYPT_BLOWFISH == 1)

{

echo "Blowfish: ".crypt("hello world");

}

else

{

echo "Blowfish DES not supported.";

}

?>

The output of the code above could be (depending on the operating system):

Standard DES: $1$r35.Y52.$iyiFuvM.zFGsscpU0aZ4e.

Extended DES not supported.

MD5: $1$BN1.0I2.$8oBI/4mufxK6Tq89M12mk/

Blowfish DES not supported.


PHP current() Function

Definition and Usage

The current() function returns the value of the current element in an array.

Syntax

current(array)

Parameter | Description
array | Required. Specifies the array to use

Tips and Notes

Note: This function returns FALSE on empty elements or elements with no value.

Tip: This function does not move the arrays internal pointer. To do this, use the next() and prev() functions.

Example 1

<?php

$people = array("Peter", "Joe", "Glenn", "Cleveland");

echo current($people) . "<br />";

?>

The output of the code above will be:

Peter


PHP Database ODBC

ODBC is an Application Programming Interface (API) that allows you to connect to a data source (e.g. an MS Access database).

Create an ODBC Connection

With an ODBC connection, you can connect to any database, on any computer in your network, as long as an ODBC connection is available.

Here is how to create an ODBC connection to a MS Access Database:

1. Open the Administrative Tools icon in your Control Panel.
2. Double-click on the Data Sources (ODBC) icon inside.
3. Choose the System DSN tab.
4. Click on Add in the System DSN tab.
5. Select the Microsoft Access Driver. Click Finish.
6. In the next screen, click Select to locate the database.
7. Give the database a Data Source Name (DSN).
8. Click OK.

Note that this configuration has to be done on the computer where your web site is located. If you are running Internet Information Server (IIS) on your own computer, the instructions above will work, but if your web site is located on a remote server, you have to have physical access to that server, or ask your web host to to set up a DSN for you to use.

Connecting to an ODBC

The odbc_connect() function is used to connect to an ODBC data source. The function takes four parameters: the data source name, username, password, and an optional cursor type.

The odbc_exec() function is used to execute an SQL statement.

Example

The following example creates a connection to a DSN called northwind, with no username and no password. It then creates an SQL and executes it:

$conn=odbc_connect('northwind','','');

$sql="SELECT * FROM customers";

$rs=odbc_exec($conn,$sql);

Retrieving Records

The odbc_fetch_row() function is used to return records from the result-set. This function returns true if it is able to return rows, otherwise false.

The function takes two parameters: the ODBC result identifier and an optional row number:

odbc_fetch_row($rs)

Retrieving Fields from a Record

The odbc_result() function is used to read fields from a record. This function takes two parameters: the ODBC result identifier and a field number or name.

The code line below returns the value of the first field from the record:

$compname=odbc_result($rs,1);

The code line below returns the value of a field called "CompanyName":

$compname=odbc_result($rs,"CompanyName");

Closing an ODBC Connection

The odbc_close() function is used to close an ODBC connection.

odbc_close($conn);

An ODBC Example

The following example shows how to first create a database connection, then a result-set, and then display the data in an HTML table.

<html>

<body>

<?php

$conn=odbc_connect('northwind','','');

if (!$conn)

{exit("Connection Failed: " . $conn);}

$sql="SELECT * FROM customers";

$rs=odbc_exec($conn,$sql);

if (!$rs)

{exit("Error in SQL");}

echo "<table><tr>";

echo "<th>Companyname</th>";

echo "<th>Contactname</th></tr>";

while (odbc_fetch_row($rs))

{

$compname=odbc_result($rs,"CompanyName");

$conname=odbc_result($rs,"ContactName");

echo "<tr><td>$compname</td>";

echo "<td>$conname</td></tr>";

}

odbc_close($conn);

echo "</table>";

?>

</body>

</html>


PHP Date / Time Functions

PHP Date / Time Introduction

The date/time functions allow you to extract and format the date and time on the server.

Note: These functions depend on the locale settings of the server!

Installation

The date/time functions are part of the PHP core. There is no installation needed to use these functions.

Runtime Configuration

The behavior of the date/time functions is affected by settings in php.ini.

Date/Time configuration options:

Name | Default | Description | Changeable
date.default_latitude | "31.7667" | Specifies the default latitude (available since PHP 5). This option is used by date_sunrise() and date_sunset() | PHP_INI_ALL
date.default_longitude | "35.2333" | Specifies the default longitude (available since PHP 5). This option is used by date_sunrise() and date_sunset() | PHP_INI_ALL
date.sunrise_zenith | "90.83" | Specifies the default sunrise zenith (available since PHP 5). This option is used by date_sunrise() and date_sunset() | PHP_INI_ALL
date.sunset_zenith | "90.83" | Specifies the default sunset zenith (available since PHP 5). This option is used by date_sunrise() and date_sunset() | PHP_INI_ALL
date.timezone | "" | Specifies the default timezone (available since PHP 5.1) | PHP_INI_ALL

PHP Date / Time Functions

PHP: indicates the earliest version of PHP that supports the function.

Function | Description | PHP
checkdate() | Validates a Gregorian date | 3
date_default_timezone_get() | Returns the default time zone | 5
date_default_timezone_set() | Sets the default time zone | 5
date_sunrise() | Returns the time of sunrise for a given day / location | 5
date_sunset() | Returns the time of sunset for a given day / location | 5
 | Formats a local time/date | 3
getdate() | Returns an array that contains date and time information for a Unix timestamp | 3
 | Returns an array that contains current time information | 3
 | Formats a GMT/UTC date/time | 3
gmmktime() | Returns the Unix timestamp for a GMT date | 3
gmstrftime() | Formats a GMT/UTC time/date according to locale settings | 3
idate() | Formats a local time/date as integer | 5
localtime() | Returns an array that contains the time components of a Unix timestamp | 4
microtime() | Returns the microseconds for the current time | 3
mktime() | Returns the Unix timestamp for a date | 3
 | Formats a local time/date according to locale settings | 3
strptime() | Parses a time/date generated with strftime() | 5
strtotime() | Parses an English textual date or time into a Unix timestamp | 3
time() | Returns the current time as a Unix timestamp | 3

PHP Date / Time Constants

PHP: indicates the earliest version of PHP that supports the constant.

Constant | Description | PHP
DATE_ATOM | Atom (example: 2005-08-15T16:13:03+0000) |
DATE_COOKIE | HTTP Cookies (example: Sun, 14 Aug 2005 16:13:03 UTC) |
DATE_ISO8601 | ISO-8601 (example: 2005-08-14T16:13:03+0000) |
DATE_RFC822 | RFC 822 (example: Sun, 14 Aug 2005 16:13:03 UTC) |
DATE_RFC850 | RFC 850 (example: Sunday, 14-Aug-05 16:13:03 UTC) |
DATE_RFC1036 | RFC 1036 (example: Sunday, 14-Aug-05 16:13:03 UTC) |
DATE_RFC1123 | RFC 1123 (example: Sun, 14 Aug 2005 16:13:03 UTC) |
DATE_RFC2822 | RFC 2822 (Sun, 14 Aug 2005 16:13:03 +0000) |
DATE_RSS | RSS (Sun, 14 Aug 2005 16:13:03 UTC) |
DATE_W3C | World Wide Web Consortium (example: 2005-08-14T16:13:03+0000) |


PHP Date()

The PHP date() function is used to format a time or a date.

The PHP Date() Function

The PHP date() function formats a timestamp to a more readable date and time.

Syntax

date(format,timestamp)

Parameter | Description
format | Required. Specifies the format of the timestamp
timestamp | Optional. Specifies a timestamp. Default is the current date and time (as a timestamp)

PHP Date - What is a Timestamp?

A timestamp is the number of seconds since January 1, 1970 at 00:00:00 GMT. This is also known as the Unix Timestamp.

PHP Date - Format the Date

The first parameter in the date() function specifies how to format the date/time. It uses letters to represent date and time formats. Here are some of the letters that can be used:

· d - The day of the month (01-31)
· m - The current month, as a number (01-12)
· Y - The current year in four digits

An overview of all the letters that can be used in the format parameter, can be found in our .

Other characters, like"/", ".", or "-" can also be inserted between the letters to add additional formatting:

<?php

echo date("Y/m/d");

echo "<br />";

echo date("Y.m.d");

echo "<br />";

echo date("Y-m-d");

?>

The output of the code above could be something like this:

2006/07/11

2006.07.11

2006-07-11

PHP Date - Adding a Timestamp

The second parameter in the date() function specifies a timestamp. This parameter is optional. If you do not supply a timestamp, the current time will be used.

In our next next example we will use the mktime() function to create a timestamp for tomorrow.

The mktime() function returns the Unix timestamp for a specified date.

Syntax

mktime(hour,minute,second,month,day,year,is_dst)

To go one day in the future we simply add one to the day argument of mktime():

<?php

$tomorrow = mktime(0,0,0,date("m"),date("d")+1,date("Y"));

echo "Tomorrow is ".date("Y/m/d/", $tomorrow);

?>

The output of the code above could be something like this:

Tomorrow is 2006/07/12

PHP Date - Reference

For more information about all the PHP date functions, please visit our PHP Date Reference.


PHP date() function

Definition and Usage

The date() function formats a local time/date.

Syntax

date(format,timestamp)

Parameter

Description

format

Required. Specifies how to return the result:

· d - The day of the month (from 01 to 31)
· D - A textual representation of a day (three letters)
· j - The day of the month without leading zeros (1 to 31)
· l (lowercase 'L') - A full textual representation of a day
· N - The ISO-8601 numeric representation of a day (1 for Monday through 7 for Sunday)
· S - The English ordinal suffix for the day of the month (2 characters st, nd, rd or th. Works well with j)
· w - A numeric representation of the day (0 for Sunday through 6 for Saturday)
· z - The day of the year (from 0 through 365)
· W - The ISO-8601 week number of year (weeks starting on Monday)
· F - A full textual representation of a month (January through December)
· m - A numeric representation of a month (from 01 to 12)
· M - A short textual representation of a month (three letters)
· n - A numeric representation of a month, without leading zeros (1 to 12)
· t - The number of days in the given month
· L - Whether it's a leap year (1 if it is a leap year, 0 otherwise)
· o - The ISO-8601 year number
· Y - A four digit representation of a year
· y - A two digit representation of a year
· a - Lowercase am or pm
· A - Uppercase AM or PM
· B - Swatch Internet time (000 to 999)
· g - 12-hour format of an hour (1 to 12)
· G - 24-hour format of an hour (0 to 23)
· h - 12-hour format of an hour (01 to 12)
· H - 24-hour format of an hour (00 to 23)
· i - Minutes with leading zeros (00 to 59)
· s - Seconds, with leading zeros (00 to 59)
· e - The timezone identifier (Examples: UTC, Atlantic/Azores)
· I (capital i) - Whether the date is in daylights savings time (1 if Daylight Savings Time, 0 otherwise)
· O - Difference to Greenwich time (GMT) in hours (Example: +0100)
· T - Timezone setting of the PHP machine (Examples: EST, MDT)
· Z - Timezone offset in seconds. The offset west of UTC is negative, and the offset east of UTC is positive (-43200 to 43200)
· c - The ISO-8601 date (e.g. 2004-02-12T15:19:21+00:00)
· r - The RFC 2822 formatted date (e.g. Thu, 21 Dec 2000 16:01:07 +0200)
· U - The seconds since the Unix Epoch (January 1 1970 00:00:00 GMT)

timestamp

Optional.

Example

<?php

echo("Result with date():<br />");

echo(date("l") . "<br />");

echo(date("l dS \of F Y h:i:s A") . "<br />");

echo("Oct 3,1975 was on a ".date("l", mktime(0,0,0,10,3,1975))."<br />");

echo(date(DATE_RFC822) . "<br />");

echo(date(DATE_ATOM,mktime(0,0,0,10,3,1975)) . "<br /><br />");

echo("Result with gmdate():<br />");

echo(gmdate("l") . "<br />");

echo(gmdate("l dS \of F Y h:i:s A") . "<br />");

echo("Oct 3,1975 was on a ".gmdate("l", mktime(0,0,0,10,3,1975))."<br />");

echo(gmdate(DATE_RFC822) . "<br />");

echo(gmdate(DATE_ATOM,mktime(0,0,0,10,3,1975)) . "<br />");

?>

The output of the code above could be something like this:

Result with date():

Tuesday

Tuesday 24th of January 2006 02:41:22 PM

Oct 3,1975 was on a Friday

Tue, 24 Jan 2006 14:41:22 CET

1975-10-03T00:00:00+0100

Result with gmdate():

Tuesday

Tuesday 24th of January 2006 01:41:22 PM

Oct 3,1975 was on a Thursday

Tue, 24 Jan 2006 13:41:22 GMT

1975-10-02T23:00:00+0000


PHP date_default_timezone_get() function

Definition and Usage

The date_default_timezone_get() function returns the default timezone used by all date/time functions in a script.

Syntax

date_default_timezone_get(void)

Parameter | Description
void | Optional.

Example

<?php

echo(date_default_timezone_get());

?>

The output of the code above will be:

Europe/Paris


PHP date_default_timezone_set() function

Definition and Usage

The date_default_timezone_set() function sets the default timezone used by all date/time functions.

Syntax

date_default_timezone_set(timezone)

Parameter | Description
timezone | Required. The timezone identifier, like "UTC" or "Europe/Paris". List of valid timezones: http://www.php.net/manual/en/timezones.php

Tips and Notes

Note: This function always returns true (even if the timezone parameter isn't valid).

Example

<?php

echo(date_default_timezone_set("Europe/Paris"));

?>

The output of the code above will be:

1


PHP date_sunrise() function

Definition and Usage

The date_sunrise() function returns the time of sunrise for a specified day and location.

Syntax

date_sunrise(timestamp,format,latitude,longitude,zenith,gmt_offset)

Parameter

Description

timestamp

Required.

format

Optional. Specifies how to return the result:

· SUNFUNCS_RET_STRING (returns the result as string. e.g. 16:46)
· SUNFUNCS_RET_DOUBLE (returns the result as float. e.g. 16.78243132)
· SUNFUNCS_RET_TIMESTAMP (returns the result as integer (timestamp). e.g. 1095034606)

latitude

Optional. Specifies the latitude of the location. The latitude defaults to North. If you want to specify a South value, you must pass a negative value.

longitude

Optional. Specifies the longitude of the location. The longitude defaults to East. If you want to specify a West value, you must pass a negative value.

zenith

Optional.

gmt_offset

Optional. Specifies the difference between GMT and local time in hours.

Example

<?php

//Calculate the sunrise time for Lisbon, Portugal

//Latitude: 38.4 North

//Longitude: 9 West

//Zenith ~= 90

//offset: +1 GMT

echo("Date: " . date("D M d Y") . "<br />");

echo("Sunrise time: ");

echo(date_sunrise(time(),SUNFUNCS_RET_STRING,38.4,-9,90,1));

?>

The output of the code above could be:

Date: Tue Jan 24 2006

Sunrise time: 08:52


PHP date_sunset() function

Definition and Usage

The date_sunset() function returns the time of sunset for a specified day and location.

Syntax

date_sunset(timestamp,format,latitude,longitude,zenith,gmt_offset)

Parameter

Description

timestamp

Required.

format

Optional. Specifies how to return the result:

· SUNFUNCS_RET_STRING (returns the result as string. e.g. 16:46)
· SUNFUNCS_RET_DOUBLE (returns the result as float. e.g. 16.78243132)
· SUNFUNCS_RET_TIMESTAMP (returns the result as integer (timestamp). e.g. 1095034606)

latitude

Optional. Specifies the latitude of the location. The latitude defaults to North. If you want to specify a South value, you must pass a negative value.

longitude

Optional. Specifies the longitude of the location. The longitude defaults to East. If you want to specify a West value, you must pass a negative value.

zenith

Optional.

gmt_offset

Optional. Specifies the difference between GMT and local time in hours.

Example

<?php

//Calculate the sunset time for Lisbon, Portugal

//Latitude: 38.4 North

//Longitude: 9 West

//Zenith ~= 90

//offset: +1 GMT

echo("Date: " . date("D M d Y") . "<br />");

echo("Sunset time: ");

echo(date_sunset(time(),SUNFUNCS_RET_STRING,38.4,-9,90,1));

?>

The output of the code above could be:

Date: Tue Jan 24 2006

Sunset time: 18:44


PHP debug_backtrace() Function

Definition and Usage

The debug_backtrace() function generates a backtrace.

This function displays data from the code that led up to the debug_backtrace() function.

Returns an associative array. The possible returned elements are as follows:

Name

Type

Description

function

string

The current function name

line

integer

The current line number

file

string

The current file name

class

string

The current class name

object

object

The current object

type

string

The current call type. Possible calls:

· Returns: "->" - Method call
· Returns: "::" - Static method call
· Returns nothing - Function call

args

array

If inside a function, this lists the functions arguments. If inside an included file, this lists the included file name

Syntax

debug_backtrace()

Example

<?php

function one($str1, $str2)

{

two("Glenn", "Quagmire");

}

function two($str1, $str2)

{

three("Cleveland", "Brown");

}

function three($str1, $str2)

{

print_r(debug_backtrace());

}

one("Peter", "Griffin");

?>

The output of the code above should be something like this:

Array

(

[0] => Array

(

[file] => C:\webfolder\test.php

[line] => 7

[function] => three

[args] => Array

(

[0] => Cleveland

[1] => Brown

)

)

[1] => Array

(

[file] => C:\webfolder\test.php

[line] => 3

[function] => two

[args] => Array

(

[0] => Glenn

[1] => Quagmire

)

)

[2] => Array

(

[file] => C:\webfolder\test.php

[line] => 14

[function] => one

[args] => Array

(

[0] => Peter

[1] => Griffin

)

)

)


PHP debug_print_backtrace() Function

Definition and Usage

The debug_print_backtrace() function prints a backtrace.

This function displays data from the code that led up to the debug_print_backtrace() function.

Syntax

debug_print_backtrace()

Example

<?php

function one($str1, $str2)

{

two("Glenn", "Quagmire");

}

function two($str1, $str2)

{

three("Cleveland", "Brown");

}

function three($str1, $str2)

{

debug_print_backtrace();

}

one("Peter", "Griffin");

?>

The output of the code above should be something like this:

#0 three(Cleveland, Brown) called at [C:\webfolder\test.php:8]

#1 two(Glenn, Quagmire) called at [C:\webfolder\test.php:4]

#2 one(Peter, Griffin) called at [C:\webfolder\test.php:15]


PHP decbin() function

Definition and Usage

The decbin() function converts a decimal number to a binary number.

Syntax

decbin(dec_number)

Parameter | Description
dec_number | Required. Specifies the decimal number to convert

Example

<?php

echo decbin("3") . "<br />";

echo decbin("1") . "<br />";

echo decbin("1587") . "<br />";

echo decbin("7");

?>

The output of the code above will be:

11

1

11000110011

111


PHP dechex() function

Definition and Usage

The dechex() function converts a decimal number to a hexadecimal number.

Syntax

dechex(dec_number)

Parameter | Description
dec_number | Required. Specifies the decimal number to convert

Example

<?php

echo dechex("30") . "<br />";

echo dechex("10") . "<br />";

echo dechex("1587") . "<br />";

echo dechex("70");

?>

The output of the code above will be:

1e

a

633

46


PHP decoct() function

Definition and Usage

The decoct() function converts a decimal number to an octal number.

Syntax

decoct(dec_number)

Parameter | Description
dec_number | Required. Specifies the decimal number to convert

Example

<?php

echo decoct("30") . "<br />";

echo decoct("10") . "<br />";

echo decoct("1587") . "<br />";

echo decoct("70");

?>

The output of the code above will be:

36

12

3063

106


PHP define() Function

Definition and Usage

The define() function defines a constant.

Constants are much like variables, except for the following differences:

· A constant's value cannot be changed after it is set
· Constant names do not need a leading dollar sign ($)
· Constants can be accessed regardless of scope
· Constant values can only be strings and numbers

Syntax

define(name,value,case_insensitive)

Parameter | Description
name | Required. Specifies the name of the constant
value | Required. Specifies the value of the constant
case_insensitive | Optional. Specifies whether the constant name should be case-insensitive. If set to TRUE, the constant will be case-insensitive. Default is FALSE (case-sensitive)

Example 1

Define a case-sensitive constant:

<?php

define("GREETING","Hello you! How are you today?");

echo constant("GREETING");

?>

The output of the code above will be:

Hello you! How are you today?

Example 2

Define a case-insensitive constant:

<?php

define("GREETING","Hello you! How are you today?",TRUE);

echo constant("greeting");

?>

The output of the code above will be:

Hello you! How are you today?


PHP defined() Function

Definition and Usage

The defined() function checks whether a constant exists.

Returns TRUE if the constant exists, or FALSE otherwise.

Syntax

defined(name)

Parameter | Description
name | Required. Specifies the name of the constant to check

Example

<?php

define("GREETING","Hello you! How are you today?");

echo defined("GREETING");

?>

The output of the code above will be:

1


PHP deg2rad() function

Definition and Usage

The deg2rad() function converts a degree to its radian number.

Syntax

deg2rad(degree_number)

Parameter | Description
degree_number | Required. Specifies the degree to convert

Example 1

<?php

echo deg2rad("30") . "<br />";

echo deg2rad("10") . "<br />";

echo deg2rad("1587") . "<br />";

echo deg2rad("70");

?>

The output of the code above will be:

0.523598775598

0.174532925199

27.6983752292

1.2217304764

Example 2

<?php

$deg = 180;

$rad = deg2rad($deg);

echo "$deg degrees is equal to $rad radians";

?>

The output of the code above will be:

180 degrees is equal to 3.14159265359 radians


PHP die() Function

Definition and Usage

The die() function prints a message and exits the current script.

This function is an alias of the exit() function.

Syntax

die(message)

Parameter | Description
message | Required. Specifies the message or status number to write before exiting the script. The status number will not be written to the output.

Example

<?php

$site = "http://www.w3schools.com/";

fopen($site,"r")

or die("Unable to connect to $site");

?>


PHP dir() Function

Definition and Usage

The dir() function opens a directory handle and returns an object. The object contains three methods called read() , rewind() , and close() .

This function returns a directory stream on success and FALSE and an error on failure. You can hide the error output by adding an '@' in front of the function name.

Syntax

dir(directory)

Parameter | Description
directory | Required. Specifies the directory to stream

Example 1

<?php

//Open images directory

$dir = dir("images");

//List files in images directory

while (($file = $dir->read()) !== false)

{

echo "filename: " . $file . "<br />";

}

$dir->close();

?>

The output of the code above could be:

filename: .

filename: ..

filename: cat.gif

filename: dog.gif

filename: food

filename: horse.gif

Example 2

This example hides the error if dir() fails:

<?php

//Open images directory

$dir = @ dir("images");

//List files in images directory

while (($file = $dir->read()) !== false)

{

echo "filename: " . $file . "<br />";

}

$dir->close();

?>

The output of the code above could be:

filename: .

filename: ..

filename: cat.gif

filename: dog.gif

filename: food

filename: horse.gif


PHP Directory Functions

PHP Directory Introduction

The directory functions allow you to retrieve information about directories and their contents.

Installation

The directory functions are part of the PHP core. There is no installation needed to use these functions.

PHP Directory Functions

PHP: indicates the earliest version of PHP that supports the function.

Function | Description | PHP
chdir() | Changes the current directory | 3
chroot() | Changes the root directory of the current process | 4
dir() | Opens a directory handle and returns an object | 3
closedir() | Closes a directory handle | 3
 | Returns the current directory | 4
opendir() | Opens a directory handle | 3
readdir() | Returns an entry from a directory handle | 3
rewinddir() | Resets a directory handle | 3
scandir() | Lists files and directories inside a specified path | 5

PHP Directory Constants

PHP: indicates the earliest version of PHP that supports the constant.

Constant | Description | PHP
DIRECTORY_SEPARATOR |  | 3
PATH_SEPARATOR |  | 4


PHP dirname() Function

Definition and Usage

The dirname() function returns the directory name from a path.

Syntax

dirname(path)

Parameter | Description
path | Required. Specifies the path to check

Example

<?php

echo dirname("c:/testweb/home.php") . "<br />";

echo dirname("/testweb/home.php");

?>

The output of the code above will be:

c:/testweb

/testweb


PHP disk_free_space() Function

Definition and Usage

The disk_free_space() function returns the free space, in bytes, of the specified directory.

Syntax

disk_free_space(directory)

Parameter | Description
directory | Required. Specifies the directory to check

Example

<?php

echo disk_free_space("C:");

?>

The output of the code above could be:

109693288448


PHP disk_total_space() Function

Definition and Usage

The disk_total_space() function returns the total space, in bytes, of the specified directory.

Syntax

disk_total_space(directory)

Parameter | Description
directory | Required. Specifies the directory to check

Example

<?php

echo disk_total_space("C:");

?>

The output of the code above could be:

119990349824


PHP diskfreespace() Function

Definition and Usage

The diskfreespace() function returns the free space, in bytes, of the specified directory.

This function is an alias of the disk_free_space() function.

Syntax

diskfreespace(directory)

Parameter | Description
directory | Required. Specifies the directory to check

Example

<?php

echo diskfreespace("C:");

?>

The output of the code above could be:

109693288448


PHP each() Function

Definition and Usage

The each() function returns the current element key and value, and moves the internal pointer forward.

This element key an value is returned in an array with four elements. Two elements (1 and Value) for the element value, and two elements (0 and Key) for the element key.

This function returns FALSE if there are no more array elements.

Syntax

each(array)

Parameter | Description
array | Required. Specifies the array to use

Tips and Notes

Note: This function returns FALSE on empty elements or elements with no value.

Example 1

<?php

$people = array("Peter", "Joe", "Glenn", "Cleveland");

print_r (each($people));

?>

The output of the code above will be:

Array ( [1] => Peter [value] => Peter [0] => 0 [key] => 0 )

Example 2

Same example as above, but with a loop to output the whole array:

<?php

$people = array("Peter", "Joe", "Glenn", "Cleveland");

reset($people);

while (list($key, $val) = each($people))

{

echo "$key => $val<br />";

}

?>

The output of the code above will be:

0 => Peter

1 => Joe

2 => Glenn

3 => Cleveland


PHP easter_date() function

Definition and Usage

The easter_date() function returns the Unix timestamp for midnight on Easter of a specified year.

Syntax

easter_date(year)

Parameter | Description
year | Optional. Defines the year to calculate the midnight on Easter from. If the year parameter is omitted, the current year is used.

Tips and Notes

Note: If the year is outside of the range for Unix timestamps (before 1970 or after 2037), this function will generate a warning. The easter_days() function can be used instead of easter_date() to calculate Easter for years which fall outside the range.

Example

<?php

echo(easter_date() . "<br />");

echo(date("M-d-Y",easter_date()) . "<br />");

echo(date("M-d-Y",easter_date(2000)) . "<br />");

echo(date("M-d-Y",easter_date(2001)) . "<br />");

echo(date("M-d-Y",easter_date(2002)));

?>

The output of the code above will be:

1145138400

Apr-16-2006

Apr-23-2000

Apr-15-2001

Mar-31-2002


PHP easter_days() function

Definition and Usage

The easter_days() function returns the number of days after March 21, on which Easter falls for a specified year.

Syntax

easter_days(year,method)

Parameter | Description
year | Optional. Defines the year to calculate the midnight on Easter from. If the year parameter is omitted, the current year is used.
method | Optional. Allows you to calculate Easter dates based on other calendars. E.g. it uses the Gregorian calendar during the years 1582 - 1752 when set to CAL_EASTER_ROMAN

Tips and Notes

Note: If the year is outside of the range for Unix timestamps (before 1970 or after 2037), this function will generate a warning.

Example

<?php

echo(easter_days() . "<br />");

echo(easter_days(1990) . "<br />");

echo(easter_days(1342) . "<br />");

echo(easter_days(2050);

?>

The output of the code above will be:

26

25

10

20


PHP echo() Function

Definition and Usage

The echo() function outputs one or more strings.

Syntax

echo(strings)

Parameter | Description
strings | Required. One or more strings to be sent to the output

Tips and Notes

Note: The echo() function is not actually a function, so you are not required to use parentheses with it. However, if you want to pass more than one parameter to echo(), using parentheses will generate a parse error.

Tip: The echo() function is slightly faster than print().

Tip: The echo() function has the following shortcut syntax. See example 5.

Example 1

<?php

$str = "Who's Kai Jim?";

echo $str;

echo "<br />";

echo $str."<br />I don't know!";

?>

The output of the code above will be:

Who's Kai Jim?

Who's Kai Jim?

I don't know!

Example 2

<?php

echo "This text

spans multiple

lines.";

?>

The output of the code above will be:

This text spans multiple lines.

Example 3

<?php

echo 'This ','string ','was ','made ','with multiple parameters';

?>

The output of the code above will be:

This string was made with multiple parameters

Example 4

Difference of single and double quotes. Single quotes will print the variable name, not the value:

<?php

$color = "red";

echo "Roses are $color";

echo "<br />";

echo 'Roses are $color';

?>

The output of the code above will be:

Roses are red

Roses are $color

Example 5

Shortcut syntax:

<html>

<body>

<?php

$color = "red";

?>

<p>Roses are <?=$color?></p>

</body>

</html>


PHP end() Function

Definition and Usage

The end() function moves the internal pointer to, and outputs, the last element in the array.

This function returns the value of the last element in the array on success.

Syntax

end(array)

Parameter | Description
array | Required. Specifies the array to use

Example

<?php

$people = array("Peter", "Joe", "Glenn", "Cleveland");

echo current($people) . "<br />";

echo end($people);

?>

The output of the code above will be:

Peter

Cleveland


PHP Error and Logging Functions

PHP Error and Logging Introduction

The error and logging functions allows error handling and logging.

The error functions allow users to define error handling rules, and modify the way the errors can be logged.

The logging functions allow users to log applications and send log messages to email, system logs or other machines.

Installation

The error and logging functions are part of the PHP core. There is no installation needed to use these functions.

PHP Error and Logging Functions

PHP: indicates the earliest version of PHP that supports the function.

Function | Description | PHP
 | Generates a backtrace | 4
 | Prints a backtrace | 5
error_get_last() | Get the last error that occured | 5
error_log() | Sends an error to the server error log, a file or a remote destination | 4
 | Specifies which errors are reported | 4
restore_error_handler() | Restores the previous error handler | 4
restore_exception_handler() | Restores the previous exception handler | 5
set_error_handler() | Sets a user-defined function to handle errors | 4
set_exception_handler() | Sets a user-defined function to handle exceptions | 5
trigger_error() | Creates a user-defined error message | 4
user_error() | Alias of trigger_error() | 4

PHP Error and Logging Constants

PHP: indicates the earliest version of PHP that supports the constant.

Value | Constant | Description | PHP
1 | E_ERROR | Fatal run-time errors. Errors that can not be recovered from. Execution of the script is halted |
2 | E_WARNING | Non-fatal run-time errors. Execution of the script is not halted |
4 | E_PARSE | Compile-time parse errors. Parse errors should only be generated by the parser |
8 | E_NOTICE | Run-time notices. The script found something that might be an error, but could also happen when running a script normally |
16 | E_CORE_ERROR | Fatal errors at PHP startup. This is like an E_ERROR in the PHP core | 4
32 | E_CORE_WARNING | Non-fatal errors at PHP startup. This is like an E_WARNING in the PHP core | 4
64 | E_COMPILE_ERROR | Fatal compile-time errors. This is like an E_ERROR generated by the Zend Scripting Engine | 4
128 | E_COMPILE_WARNING | Non-fatal compile-time errors. This is like an E_WARNING generated by the Zend Scripting Engine | 4
256 | E_USER_ERROR | Fatal user-generated error. This is like an E_ERROR set by the programmer using the PHP function trigger_error() | 4
512 | E_USER_WARNING | Non-fatal user-generated warning. This is like an E_WARNING set by the programmer using the PHP function trigger_error() | 4
1024 | E_USER_NOTICE | User-generated notice. This is like an E_NOTICE set by the programmer using the PHP function trigger_error() | 4
2048 | E_STRICT | Run-time notices. PHP suggest changes to your code to help interoperability and compatibility of the code | 5
4096 | E_RECOVERABLE_ERROR | Catchable fatal error. This is like an E_ERROR but can be caught by a user defined handle (see also set_error_handler()) | 5
8191 | E_ALL | All errors and warnings, except of level E_STRICT | 5


PHP Error Handling

The default error handling in PHP is very simple. An error message with filename, line number and a message describing the error is sent to the browser.

PHP Error Handling

When creating scripts and web applications, error handling is an important part. If your code lacks error checking code, your program may look very unprofessional and you may be open to security risks.

This tutorial contains some of the most common error checking methods in PHP.

We will show different error handling methods:

· Simple "die()" statements
· Custom errors and error triggers
· Error reporting

Basic Error Handling: Using the die() function

The first example shows a simple script that opens a text file:

<?php

$file=fopen("welcome.txt","r");

?>

If the file does not exist you might get an error like this:

Warning: fopen(welcome.txt) [function.fopen]: failed to open stream:

No such file or directory in C:\webfolder\test.php on line 2

To avoid that the user gets an error message like the one above, we test if the file exist before we try to access it:

<?php

if(!file_exists("welcome.txt"))

{

die("File not found");

}

else

{

$file=fopen("welcome.txt","r");

}

?>

Now if the file does not exist you get an error like this:

File not found

The code above is more efficient than the earlier code, because it uses a simple error handling mechanism to stop the script after the error.

However, simply stopping the script is not always the right way to go. Let take a look at alternative PHP functions for handling errors.

Creating a Custom Error Handler

Creating a custom error handler is quite simple. We simply create a special function that can be called when an error occurs in PHP.

This function must have be able to handle a minimum of two parameters (error level and error message) but can accept up to five parameters (optionally: file, line-number, and the error context):

Syntax

error_function(error_level,error_message,

error_file,error_line,error_context)

Parameter | Description
error_level | Required. Specifies the error report level for the user-defined error. Must be a value number. See table below for possible error report levels
error_message | Required. Specifies the error message for the user-defined error
error_file | Optional. Specifies the filename in which the error occurred
error_line | Optional. Specifies the line number in which the error occurred
error_context | Optional. Specifies an array containing every variable, and their values, in use when the error occurred

Error Report levels

These error report levels are the different types of error the user-defined error handler can be used for:

Value | Constant | Description
2 | E_WARNING | Non-fatal run-time errors. Execution of the script is not halted
8 | E_NOTICE | Run-time notices. The script found something that might be an error, but could also happen when running a script normally
256 | E_USER_ERROR | Fatal user-generated error. This is like an E_ERROR set by the programmer using the PHP function trigger_error()
512 | E_USER_WARNING | Non-fatal user-generated warning. This is like an E_WARNING set by the programmer using the PHP function trigger_error()
1024 | E_USER_NOTICE | User-generated notice. This is like an E_NOTICE set by the programmer using the PHP function trigger_error()
4096 | E_RECOVERABLE_ERROR | Catchable fatal error. This is like an E_ERROR but can be caught by a user defined handle (see also set_error_handler())
8191 | E_ALL | All errors and warnings, except level E_STRICT (E_STRICT will be part of E_ALL as of PHP 6.0)

Now lets create a function to handle errors:

function customError($errno, $errstr)

{

echo "<b>Error:</b> [$errno] $errstr<br />";

echo "Ending Script";

die();

}

The code above is a simple error handling function. When it is triggered, it gets the error level and an error message. It then outputs the error level and message and terminates the script.

Now that we have created an error handling function we need to decide when it should be triggered.

Set Error Handler

The default error handler for PHP is the built in error handler. We are going to make the function above the default error handler for the duration of the script.

It is possible to change the error handler to apply for only some errors, that way the script can handle different errors in different ways. However, in this example we are going to use our custom error handler for all errors:

set_error_handler("customError");

Since we want our custom function to handle all errors, the set_error_handler() only needed one parameter, a second parameter could be added to specify an error level.

Example

Testing the error handler by trying to output variable that does not exist:

<?php

//error handler function

function customError($errno, $errstr)

{

echo "<b>Error:</b> [$errno] $errstr";

}

//set error handler

set_error_handler("customError");

//trigger error

echo($test);

?>

The output of the code above should be something like this:

Custom error: [8] Undefined variable: test

Trigger an Error

In a script where users can input data it is useful to trigger errors when an illegal input occurs. In PHP, this is done by the trigger_error() function.

Example

In this example an error occurs if the "test" variable is bigger than "1":

<?php

$test=2;

if ($test>1)

{

trigger_error("Value must be 1 or below");

}

?>

The output of the code above should be something like this:

Notice: Value must be 1 or below

in C:\webfolder\test.php on line 6

An error can be triggered anywhere you wish in a script, and by adding a second parameter, you can specify what error level is triggered.

Possible error types:

· E_USER_ERROR - Fatal user-generated run-time error. Errors that can not be recovered from. Execution of the script is halted
· E_USER_WARNING - Non-fatal user-generated run-time warning. Execution of the script is not halted
· E_USER_NOTICE - Default. User-generated run-time notice. The script found something that might be an error, but could also happen when running a script normally

Example

In this example an E_USER_WARNING occurs if the "test" variable is bigger than "1". If an E_USER_WARNING occurs we will use our custom error handler and end the script:

<?php

//error handler function

function customError($errno, $errstr)

{

echo "<b>Error:</b> [$errno] $errstr<br />";

echo "Ending Script";

die();

}

//set error handler

set_error_handler("customError",E_USER_WARNING);

//trigger error

$test=2;

if ($test>1)

{

trigger_error("Value must be 1 or below",E_USER_WARNING);

}

?>

The output of the code above should be something like this:

Error: [512] Value must be 1 or below

Ending Script

Now that we have learned to create our own errors and how to trigger them, lets take a look at error logging.

Error Logging

By default, PHP sends an error log to the servers logging system or a file, depending on how the error_log configuration is set in the php.ini file. By using the error_log() function you can send error logs to a specified file or a remote destination.

Sending errors messages to yourself by e-mail can be a good way of getting notified of specific errors.

Send an Error Message by E-Mail

In the example below we will send an e-mail with an error message and end the script, if a specific error occurs:

<?php

//error handler function

function customError($errno, $errstr)

{

echo "<b>Error:</b> [$errno] $errstr<br />";

echo "Webmaster has been notified";

error_log("Error: [$errno] $errstr",1,

"someone@example.com","From: webmaster@example.com");

}

//set error handler

set_error_handler("customError",E_USER_WARNING);

//trigger error

$test=2;

if ($test>1)

{

trigger_error("Value must be 1 or below",E_USER_WARNING);

}

?>

The output of the code above should be something like this:

Error: [512] Value must be 1 or below

Webmaster has been notified

And the mail received from the code above looks like this:

Error: [512] Value must be 1 or below

This should not be used with all errors. Regular errors should be logged on the server using the default PHP logging system.


PHP error_get_last() Function

Definition and Usage

The error_get_last() function gets the last error that occured.

This funtion returns the last occured error in an array, or NULL if no errors have occured.

The error array returned contains 4 keys and values:

· [type] - Error type
· [message] - Error message
· [file] - The file where the error occurred
· [line] - The line where the error occurred

Syntax

error_get_last()

Example

<?php

echo $test;

print_r(error_get_last());

?>

The output of the code above should be something like this:

Array

(

[type] => 8

[message] => Undefined variable: test

[file] => C:\webfolder\test.php

[line] => 2

)


PHP error_log() Function

Definition and Usage

The error_log() function sends an error to the server error log, a file or a remote destination.

This funtion returns TRUE on success, or FALSE on failure.

Syntax

error_log(error,type,destination,headers)

Parameter

Description

error

Required. The error message to log

type

Optional. Specifies the error log type.

Possible log types:

· 0 - Default. The error is sent to the servers logging system or a file, depending on how the error_log configuration is set in the php.ini file
· 1 - The error is sent by email to the address in the destination parameter. This message type is the only one that uses the headers parameter
· 2 - The error is sent through the PHP debugging connection. This option is only available in PHP 3
· 3 - The error is added to the file destination string

destination

Optional. Specifies where to send the error message. The value of this parameter depends on the value of the "type" parameter

headers

Optional. Only used if the "type" parameter is "1". Specifies additional headers, like From, Cc, and Bcc. The additional headers should be separated with a CRLF (\r\n).

Note: When sending an email, it must contain a From header. This can be set with this parameter or in the php.ini file.

Example

The following example sends an e-mail with a custom error:

<?php

$test=2;

if ($test>1)

{

error_log("A custom error has been triggered",

1,"someone@example.com","From: webmaster@example.com");

}

?>

The mail received from the code above looks like this:

A custom error has been triggered


PHP error_reporting() Function

Definition and Usage

The error_reporting() function specifies which errors are reported.

This function sets which errors are reported for the duration of the current script.

This funtion returns the old error_reporting level.

Syntax

error_reporting(report_level)

Parameter | Description
report_level | Optional. Specifies the error report level for the current script. Value number and constant name are accepted, however, constant names are recommended for compatibility for future PHP versions

Report levels

Value | Constant | Description
1 | E_ERROR | Fatal run-time errors. Errors that can not be recovered from. Execution of the script is halted
2 | E_WARNING | Non-fatal run-time errors. Execution of the script is not halted
4 | E_PARSE | Compile-time parse errors. Parse errors should only be generated by the parser
8 | E_NOTICE | Run-time notices. The script found something that might be an error, but could also happen when running a script normally
16 | E_CORE_ERROR | Fatal errors at PHP startup. This is like an E_ERROR in the PHP core
32 | E_CORE_WARNING | Non-fatal errors at PHP startup. This is like an E_WARNING in the PHP core
64 | E_COMPILE_ERROR | Fatal compile-time errors. This is like an E_ERROR generated by the Zend Scripting Engine
128 | E_COMPILE_WARNING | Non-fatal compile-time errors. This is like an E_WARNING generated by the Zend Scripting Engine
256 | E_USER_ERROR | Fatal user-generated error. This is like an E_ERROR set by the programmer using the PHP function trigger_error()
512 | E_USER_WARNING | Non-fatal user-generated warning. This is like an E_WARNING set by the programmer using the PHP function trigger_error()
1024 | E_USER_NOTICE | User-generated notice. This is like an E_NOTICE set by the programmer using the PHP function trigger_error()
2048 | E_STRICT | Run-time notices. PHP suggest changes to your code to help interoperability and compatibility of the code
4096 | E_RECOVERABLE_ERROR | Catchable fatal error. This is like an E_ERROR but can be caught by a user defined handle (see also set_error_handler())
8191 | E_ALL | All errors and warnings, except level E_STRICT (E_STRICT will be part of E_ALL as of PHP 6.0)

Example

<?php

//Disable error reporting

error_reporting(0);

//Report runtime errors

error_reporting(E_ERROR | E_WARNING | E_PARSE);

//Report all errors

error_reporting(E_ALL);

?>


PHP eval() Function

Definition and Usage

The eval() function evaluates a string as PHP code.

The string must be valid PHP code and must end with semicolon.

This function returns NULL unless a return statement is called in the code string. Then the value passed to return is returned. If there is a parse error in the code string, eval() returns FALSE.

Syntax

eval(phpcode)

Parameter | Description
phpcode | Required. Specifies the PHP code to be evaluated

Tips and Notes

Note: A return statement will terminate the evaluation of the string immediately.

Tip: This function can be useful for storing PHP code in a database.

Example

<?php

$string = "beautiful";

$time = "winter";

$str = 'This is a $string $time morning!';

echo $str. "<br />";

eval("\$str = \"$str\";");

echo $str;

?>

The output of the code above will be:

This is a $string $time morning!

This is a beautiful winter morning!


PHP exit() Function

Definition and Usage

The exit() function prints a message and exits the current script.

This function is an alias of the die() function.

Syntax

exit(message)

Parameter | Description
message | Required. Specifies the message or status number to write before exiting the script. The status number will not be written to the output.

Example

<?php

$site = "http://www.w3schools.com/";

fopen($site,"r")

or exit("Unable to connect to $site");

?>


PHP exp() function

Definition and Usage

The exp() function returns the value of Ex, where E is Euler's constant (approximately 2.7183) and x is the number passed to it.

Syntax

exp(x)

Parameter | Description
x | Required. A number

Tips and Notes

Tip: E is the Euler's constant, which is the base of natural logarithms (approximately 2.7183).

Example

In the following example we will use the exp() function on different numbers:

<?php

echo(exp(1) . "<br />");

echo(exp(-1) . "<br />");

echo(exp(5) . "<br />");

echo(exp(10))

?>

The output of the code above will be:

2.718281828459045

0.36787944117144233

148.4131591025766

22026.465794806718


PHP explode() Function

Definition and Usage

The explode() function breaks a string into an array.

Syntax

explode(separator,string,limit)

Parameter | Description
separator | Required. Specifies where to break the string
string | Required. The string to split
limit | Optional. Specifies the maximum number of array elements to return

Tips and Notes

Note: Separator cannot be an empty string.

Example

In this example we will break a string to an array:

<?php

$str = "Hello world. It's a beautiful day.";

print_r (explode(" ",$str));

?>

The output of the code above will be:

Array

(

[0] => Hello

[1] => world.

[2] => It's

[3] => a

[4] => beautiful

[5] => day.

)


PHP expm1() function

Definition and Usage

The expm1() function returns the value of Ex-1, where E is Euler's constant (approximately 2.7183) and x is the number passed to it.

Syntax

expm1(x)

Parameter | Description
x | Required. A number

Tips and Notes

Tip: E is the Euler's constant, which is the base of natural logarithms (approximately 2.7183).

Note: This function is not implemented on Windows platforms.

Example

In the following example we will use the expm1() function on different numbers:

<?php

echo(expm1(1) . "<br />");

echo(expm1(-1) . "<br />");

echo(expm1(5) . "<br />");

echo(expm1(10))

?>


PHP extract() Function

Definition and Usage

The extract() function imports variables into the local symbol table from an array.

This function uses array keys as variable names and values as variable values. For each element it will create a variable in the current symbol table.

This function returns the number of variables extracted on success.

Syntax

extract(array,extract_rules,prefix)

Parameter

Description

array

Required. Specifies the array to use

extract_rules

Optional. The extract() function checks for invalid variable names and collisions with existing variable names. This parameter specifies how invalid and colliding names are treated.

Possible values:

· EXTR_OVERWRITE - Default. On collision, the existing variable is overwritten
· EXTR_SKIP - On collision, the existing variable is not overwritten
· EXTR_PREFIX_SAME - On collision, the variable name will be given a prefix
· EXTR_PREFIX_ALL - All variable names will be given a prefix
· EXTR_PREFIX_INVALID - Only invalid or numeric variable names will be given a prefix
· EXTR_IF_EXISTS - Only overwrite existing variables in the current symbol table, otherwise do nothing
· EXTR_PREFIX_IF_EXISTS - Only add prefix to variables if the same variable exists in the current symbol table
· EXTR_REFS - Extracts variables as references. The imported variables are still referencing the values of the array parameter

prefix

Optional. If EXTR_PREFIX_SAME, EXTR_PREFIX_ALL, EXTR_PREFIX_INVALID or EXTR_PREFIX_IF_EXISTS are used in the extract_rules parameter, a specified prefix is required.

This parameter specifies the prefix. The prefix is automatically separated from the array key by an underscore character.

Example 1

<?php

$a = 'Original';

$my_array = array("a" => "Cat","b" => "Dog", "c" => "Horse");

extract($my_array);

echo "\$a = $a; \$b = $b; \$c = $c";

?>

The output of the code above will be:

$a = Cat; $b = Dog; $c = Horse

Example 2

With all parameters in use:

<?php

$a = 'Original';

$my_array = array("a" => "Cat","b" => "Dog", "c" => "Horse");

extract($my_array, EXTR_PREFIX_SAME, 'dup');

echo "\$a = $a; \$b = $b; \$c = $c; \$dup_a = $dup_a;";

?>

The output of the code above will be:

$a = Original; $b = Dog; $c = Horse; $dup_a = Cat;


PHP fclose() Function

Definition and Usage

The fclose() function closes an open file.

This function returns TRUE on success or FALSE on failure.

Syntax

fclose(file)

Parameter | Description
file | Required. Specifies the file to close

Example

<?php

$file = fopen("test.txt","r");

//some code to be executed

fclose($file);

?>


PHP feof() Function

Definition and Usage

The feof() function checks if the "end-of-file" (EOF) has been reached.

This function returns TRUE if an error occurs, or if EOF has been reached. Otherwise it returns FALSE.

Syntax

feof(file)

Parameter | Description
file | Required. Specifies the open file to check

Tips and Notes

Tip: The feof() function is useful for looping through data of unknown length.

Example

<?php

$file = fopen("test.txt", "r");

//Output a line of the file until the end is reached

while(! feof($file))

{

echo fgets($file). "<br />";

}

fclose($file);

?>

The output of the code above will be:

Hello, this is a test file.

There are three lines here.

This is the last line.


PHP fflush() Function

Definition and Usage

The fflush() function writes all buffered output to an open file.

Returns TRUE on success and FALSE on failure.

Syntax

fflush(file)

Parameter | Description
file | Required. Specifies the open file stream to check

Example

<?php

file = fopen("test.txt","r+");

// some code

fflush($file);

?>


PHP fgetc() Function

Definition and Usage

The fgetc() function returns a single character from an open file.

Syntax

fgetc(file)

Parameter | Description
file | Required. Specifies the file to check

Tips and Notes

Note: This function is slow and should not be used on large files. If you need to read one character at a time from a large file, use fgets() to read data one line at a time and then process the line one character at a time with fgetc().

Example 1

<?php

$file = fopen("test2.txt","r");

echo fgetc($file);

fclose($file);

?>

The output of the code above will be:

H

Example 2

Read file character by character:

<?php

$file = fopen("test2.txt","r");

while (! feof ($file))

{

echo fgetc($file);

}

fclose($file);

?>

The output of the code above will be:

Hello, this is a test file.


PHP fgetcsv() Function

Definition and Usage

The fgetcsv() function parses a line from an open file, checking for CSV fields.

The fgetcsv() function stops returning on a new line, at the specified length, or at EOF, whichever comes first.

This function returns the CSV fields in an array on success, or FALSE on failure and EOF.

Syntax

fgetcsv(file,length,separator,enclosure)

Parameter | Description
file | Required. Specifies the file to check
length | Optional. Specifies the maximum length of a line. Must be greater than the longest line (in characters) in the CSV file. Omitting this parameter (or setting it to 0) the line length is not limited, which is slightly slower. Note: This parameter is required in versions prior to PHP 5
separator | Optional. A character that specifies the field separator. Default is comma ( , )
enclosure | Optional. A character that specifies the field enclosure character. Default is "

Tips and Notes

Tip: Also see the fputcsv() function.

Example 1

<?php

$file = fopen("contacts.csv","r");

print_r(fgetcsv($file));

fclose($file);

?>

The CSV file:

Kai Jim, Refsnes, Stavanger, Norway

Hege, Refsnes, Stavanger, Norway

The output of the code above will be:

Array

(

[0] => Kai Jim

[1] => Refsnes

[2] => Stavanger

[3] => Norway

)

Example 2

<?php

$file = fopen("contacts.csv","r");

while(! feof($file))

{

print_r(fgetcsv($file));

}

fclose($file);

?>

The CSV file:

Kai Jim, Refsnes, Stavanger, Norway

Hege, Refsnes, Stavanger, Norway

The output of the code above will be:

Array

(

[0] => Kai Jim

[1] => Refsnes

[2] => Stavanger

[3] => Norway

)

Array

(

[0] => Hege

[1] => Refsnes

[2] => Stavanger

[3] => Norway

)


PHP fgets() Function

Definition and Usage

The fgets() function returns a line from an open file.

The fgets() function stops returning on a new line, at the specified length, or at EOF, whichever comes first.

This function returns FALSE on failure.

Syntax

fgets(file,length)

Parameter | Description
file | Required. Specifies the file to read from
length | Optional. Specifies the number of bytes to read. Default is 1024 bytes.

Example 1

<?php

$file = fopen("test.txt","r");

echo fgets($file);

fclose($file);

?>

The output of the code above will be:

Hello, this is a test file.

Example 2

Read file line by line:

<?php

$file = fopen("test.txt","r");

while(! feof($file))

{

echo fgets($file). "<br />";

}

fclose($file);

?>

The output of the code above will be:

Hello, this is a test file.

There are three lines here.

This is the last line.


PHP fgetss() Function

Definition and Usage

The fgetss() function returns a line, with HTML and PHP tags removed, from an open file.

The fgetss() function stops returning on a new line, at the specified length, or at EOF, whichever comes first.

This function returns FALSE on failure.

Syntax

fgetss(file,length,tags)

Parameter | Description
file | Required. Specifies the file to check
length | Optional. Specifies the number of bytes to read. Default is 1024 bytes. Note: This parameter is required in versions prior to PHP 5
tags | Optional. Specifies tags that will not be removed

Example 1

<?php

$file = fopen("test.htm","r");

echo fgetss($file);

fclose($file);

?>

The output of the code above will be:

This is a paragraph.

Example 2

<?php

$file = fopen("test.htm","r");

echo fgetss($file,1024,"<p>,<b>");

fclose($file);

?>

The output of the code above will be:

This is a paragraph.

The source of the output above will be:

<p><b>This is a paragraph.</b></p>


PHP File

PHP File Handling

The fopen() function is used to open files in PHP.

Opening a File

The fopen() function is used to open files in PHP.

The first parameter of this function contains the name of the file to be opened and the second parameter specifies in which mode the file should be opened:

<html>

<body>

<?php

$file=fopen("welcome.txt","r");

?>

</body>

</html>

The file may be opened in one of the following modes:

Modes | Description
r | Read only. Starts at the beginning of the file
r+ | Read/Write. Starts at the beginning of the file
w | Write only. Opens and clears the contents of file; or creates a new file if it doesn't exist
w+ | Read/Write. Opens and clears the contents of file; or creates a new file if it doesn't exist
a | Append. Opens and writes to the end of the file or creates a new file if it doesn't exist
a+ | Read/Append. Preserves file content by writing to the end of the file
x | Write only. Creates a new file. Returns FALSE and an error if file already exists
x+ | Read/Write. Creates a new file. Returns FALSE and an error if file already exists

Note: If the fopen() function is unable to open the specified file, it returns 0 (false).

Example

The following example generates a message if the fopen() function is unable to open the specified file:

<html>

<body>

<?php

$file=fopen("welcome.txt","r") or exit("Unable to open file!");

?>

</body>

</html>

Closing a File

The fclose() function is used to close an open file:

<?php

$file = fopen("test.txt","r");

//some code to be executed

fclose($file);

?>

Check End-of-file

The feof() function checks if the "end-of-file" (EOF) has been reached.

The feof() function is useful for looping through data of unknown length.

Note: You cannot read from files opened in w, a, and x mode!

if (feof($file)) echo "End of file";

Reading a File Line by Line

The fgets() function is used to read a single line from a file.

Note: After a call to this function the file pointer has moved to the next line.

Example

The example below reads a file line by line, until the end of file is reached:

<?php

$file = fopen("welcome.txt", "r") or exit("Unable to open file!");

//Output a line of the file until the end is reached

while(!feof($file))

{

echo fgets($file). "<br />";

}

fclose($file);

?>

Reading a File Character by Character

The fgetc() function is used to read a single character from a file.

Note: After a call to this function the file pointer moves to the next character.

Example

The example below reads a file character by character, until the end of file is reached:

<?php

$file=fopen("welcome.txt","r") or exit("Unable to open file!");

while (!feof($file))

{

echo fgetc($file);

}

fclose($file);

?>

PHP Filesystem Reference

For a full reference of the PHP filesystem functions, visit our PHP Filesystem Reference.


PHP File Upload

With PHP, it is possible to upload files to the server.

Create an Upload-File Form

To allow users to upload files from a form can be very useful.

Look at the following HTML form for uploading files:

<html>

<body>

<form action="upload_file.php" method="post"

enctype="multipart/form-data">

<label for="file">Filename:</label>

<input type="file" name="file" id="file" />

<br />

<input type="submit" name="submit" value="Submit" />

</form>

</body>

</html>

Notice the following about the HTML form above:

· The enctype attribute of the <form> tag specifies which content-type to use when submitting the form. "multipart/form-data" is used when a form requires binary data, like the contents of a file, to be uploaded
· The type="file" attribute of the <input> tag specifies that the input should be pocessed as a file. For example, when viewed in a browser, there will be a browse-button next to the input field

Note: Allowing users to upload files is a big security risk. Only permit trusted users to perform file uploads.

Create The Upload Script

The "upload_file.php" file contains the code for uploading a file:

<?php

if ($_FILES["file"]["error"] > 0)

{

echo "Error: " . $_FILES["file"]["error"] . "<br />";

}

else

{

echo "Upload: " . $_FILES["file"]["name"] . "<br />";

echo "Type: " . $_FILES["file"]["type"] . "<br />";

echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";

echo "Stored in: " . $_FILES["file"]["tmp_name"];

}

?>

By using the global PHP $_FILES array you can upload files from a client computer to the remote server.

The first parameter is the form's input name and the second index can be either "name", "type", "size", "tmp_name" or "error". Like this:

· $_FILES["file"]["name"] - the name of the uploaded file
· $_FILES["file"]["type"] - the type of the uploaded file
· $_FILES["file"]["size"] - the size in bytes of the uploaded file
· $_FILES["file"]["tmp_name"] - the name of the temporary copy of the file stored on the server
· $_FILES["file"]["error"] - the error code resulting from the file upload

This is a very simple way of uploading files. For security reasons, you should add restrictions on what the user is allowed to upload.

Restrictions on Upload

In this script we add some restrictions to the file upload. The user may only upload .gif or .jpeg files and the file size must be under 20 kb:

<?php

if ((($_FILES["file"]["type"] == "image/gif")

|| ($_FILES["file"]["type"] == "image/pjpeg"))

&& ($_FILES["file"]["size"] < 20000))

{

if ($_FILES["file"]["error"] > 0)

  {

  echo "Error: " . $_FILES["file"]["error"] . "<br />";

  }

else

  {

  echo "Upload: " . $_FILES["file"]["name"] . "<br />";

  echo "Type: " . $_FILES["file"]["type"] . "<br />";

  echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";

  echo "Stored in: " . $_FILES["file"]["tmp_name"];

  }

}

else

{

echo "Invalid file";

}

?>

Saving the Uploaded File

The examples above create a temporary copy of the uploaded files in the PHP temp folder on the server.

The temporary copied files disappears when the script ends. To store the uploaded file we need to copy it to a different location:

<?php

if (($_FILES["file"]["type"] == "image/gif")

|| ($_FILES["file"]["type"] == "image/pjpeg")

&& ($_FILES["file"]["size"] < 20000))

{

if ($_FILES["file"]["error"] > 0)

  {

  echo "Return Code: " . $_FILES["file"]["error"] . "<br />";

  }

else

  {

  echo "Upload: " . $_FILES["file"]["name"] . "<br />";

  echo "Type: " . $_FILES["file"]["type"] . "<br />";

  echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";

  echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";

  if (file_exists("upload/" . $_FILES["file"]["name"]))

    {

    echo $_FILES["file"]["name"] . " already exists. ";

    }

  else

    {

    move_uploaded_file($_FILES["file"]["tmp_name"],

    "upload/" . $_FILES["file"]["name"]);

    echo "Stored in: " . "upload/" . $_FILES["file"]["name"];

    }

  }

}

else

{

echo "Invalid file";

}

?>

The script above checks if the file already exists, if it does not, it copies the file to the specified folder.

Note: This example saves the file to a new folder called "upload"


PHP file() Function

Definition and Usage

The file() reads a file into an array.

Each array element contains a line from the file, with newline still attached.

Syntax

file(path,include_path,context)

Parameter | Description
path | Required. Specifies the file to read
include_path | Optional. Set this parameter to '1' if you want to search for the file in the include_path (in php.ini) as well
context | Optional. Specifies the context of the file handle. Context is a set of options that can modify the behavior of a stream. Can be skipped by using NULL.

Tips and Notes

Tip: This function became binary-safe in PHP 4.3. (meaning that both binary data, like images, and character data can be written with this function).

Example

<?php

print_r(file("test.txt"));

?>

The output of the code above will be:

Array

(

[0] => Hello World. Testing testing!

[1] => Another day, another line.

[2] => If the array picks up this line,

[3] => then is it a pickup line?

)


PHP file_exists() Function

Definition and Usage

The file_exists() function checks whether or not a file or directory exists.

This function returns TRUE if the file or directory exists, otherwise it returns FALSE.

Syntax

file_exists(path)

Parameter | Description
path | Required. Specifies the path to check

Example

<?php

echo file_exists("test.txt");

?>

The output of the code above will be:

1


PHP file_get_contents() Function

Definition and Usage

The file_get_contents() reads a file into a string.

This function is the preferred way to read the contents of a file into a string. Because it will use memory mapping techniques, if this is supported by the server, to enhance performance.

Syntax

file_get_contents(path,include_path,context,start,max_length)

Parameter | Description
path | Required. Specifies the file to read
include_path | Optional. Set this parameter to '1' if you want to search for the file in the include_path (in php.ini) as well
context | Optional. Specifies the context of the file handle. Context is a set of options that can modify the behavior of a stream. Can be skipped by using NULL.
start | Optional. Specifies where in the file to start reading. This parameter was added in PHP 5.1
max_length | Optional. Specifies how many bytes to read. This parameter was added in PHP 5.1

Tips and Notes

Tip: This function is binary-safe (meaning that both binary data, like images, and character data can be written with this function).

Example

<?php

echo file_get_contents("test.txt");

?>

The output of the code above will be:

This is a test file with test text.


PHP file_put_contents() Function

Definition and Usage

The file_put_contents() writes a string to a file.

This function follows these rules when accessing a file:

1. If FILE_USE_INCLUDE_PATH is set, check the include path for a copy of *filename*
2. Create the file if it does not exist
3. Open the file
4. Lock the file if LOCK_EX is set
5. If FILE_APPEND is set, move to the end of the file. Otherwise, clear the file content
6. Write the data into the file
7. Close the file and release any locks

This function returns the number of character written into the file on success, or FALSE on failure.

Syntax

file_put_contents(file,data,mode,context)

Parameter

Description

file

Required. Specifies the file to write to. If the file does not exist, this function will create one

data

Required. The data to write to the file. Can be a string, an array or a data stream

mode

Optional. Specifies how to open/write to the file. Possible values:

· FILE_USE_INCLUDE_PATH
· FILE_APPEND
· LOCK_EX

context

Optional. Specifies the context of the file handle. Context is a set of options that can modify the behavior of a stream.

Tips and Notes

Note: Use FILE_APPEND to avoid deleting the existing content of the file.

Example

<?php

echo file_put_contents("test.txt","Hello World. Testing!");

?>

The output of the code above will be:

21


PHP fileatime() Function

Definition and Usage

The fileatime() function returns the last access time of the specified file.

This function returns the last access time as a Unix timestamp on success, FALSE on failure.

Syntax

fileatime(filename)

Parameter | Description
filename | Required. Specifies the file to check

Tips and Notes

Note: The result of this function are cached. Use clearstatcache() to clear the cache.

Note: Some Unix systems have access time updates disabled, because this function reduces performance for applications that regularly accesses a large number of files.

Example

<?php

echo fileatime("test.txt");

echo "<br />";

echo "Last access: ".date("F d Y H:i:s.",fileatime("test.txt"));

?>

The output of the code above could be:

1140684501

Last access: February 23 2006 09:48:21.


PHP filectime() Function

Definition and Usage

The filectime() function returns the last time the specified file was changed.

This function checks for the inode changes as well as regular changes. Inode changes is when permissions, owner, group or other metadata is changed.

This function returns the last change time as a Unix timestamp on success, FALSE on failure.

Syntax

filectime(filename)

Parameter | Description
filename | Required. Specifies the file to check

Tips and Notes

Note: The result of this function are cached. Use clearstatcache() to clear the cache.

Tip: Use the filemtime() function to return the last time the file content was changed.

Example

<?php

echo filectime("test.txt");

echo "<br />";

echo "Last change: ".date("F d Y H:i:s.",filectime("test.txt"));

?>

The output of the code above could be:

1138609592

Last change: January 30 2006 09:26:32.


PHP filegroup() Function

Definition and Usage

The filegroup() function returns the group ID of the specified file.

This function returns the group ID on success or FALSE on failure.

Syntax

filegroup(filename)

Parameter | Description
filename | Required. Specifies the file to check

Tips and Notes

Note: The result of this function are cached. Use clearstatcache() to clear the cache.

Note: This function doesn't produce meaningful results on Windows systems.

Tip: Use posix_getgrgid() to convert the group ID to a group name.

Example

<?php

echo filegroup("test.txt");

?>


PHP fileinode() Function

Definition and Usage

The fileinode() function returns the inode of the specified file.

This function returns the inode number of the file on success, FALSE on failure.

Syntax

fileinode(filename)

Parameter | Description
filename | Required. Specifies the file to check

Tips and Notes

Note: The result of this function are cached. Use clearstatcache() to clear the cache.

Note: This function doesn't produce meaningful results on Windows systems.

Example

<?php

echo fileinode("test.txt");

?>


PHP filemtime() Function

Definition and Usage

The filemtime() function returns the last time the file content was modified.

This function returns the last change time as a Unix timestamp on success, FALSE on failure.

Syntax

filemtime(filename)

Parameter | Description
filename | Required. Specifies the file to check

Tips and Notes

Note: The result of this function are cached. Use clearstatcache() to clear the cache.

Example

<?php

echo filemtime("test.txt");

echo "<br />";

echo "Last modified: ".date("F d Y H:i:s.",filemtime("test.txt"));

?>

The output of the code above could be:

1139919766

Last modified: February 14 2006 13:22:46.


PHP fileowner() Function

Definition and Usage

The fileowner() function returns the user ID (owner) of the specified file.

This function returns the user ID on success or FALSE on failure.

Syntax

fileowner(filename)

Parameter | Description
filename | Required. Specifies the file to check

Tips and Notes

Note: The results of this function are cached. Use clearstatcache() to clear the cache.

Note: This function doesn't produce meaningful results on Windows systems.

Tip: Use posix_getpwuid() to convert the user ID to a user name.

Example

<?php

echo fileowner("test.txt");

?>


PHP fileperms() Function

Definition and Usage

The fileperms() function returns the permissions for a file or directory.

This function returns the permission as a number on success or FALSE on failure.

Syntax

fileperms(filename)

Parameter | Description
filename | Required. Specifies the file to check

Tips and Notes

Note: The result of this function are cached. Use clearstatcache() to clear the cache.

Example 1

<?php

echo fileperms("test.txt");

?>

The output of the code above could be:

33206

Example 2

Display permissions as an octal value:

<?php

echo substr(sprintf("%o",fileperms("test.txt")),-4);

?>

The output of the code above could be:

1777


PHP filesize() Function

Definition and Usage

The filesize() function returns the size of the specified file.

This function returns the file size in bytes on success or FALSE on failure.

Syntax

filesize(filename)

Parameter | Description
filename | Required. Specifies the file to check

Tips and Notes

Note: The result of this function are cached. Use clearstatcache() to clear the cache.

Example

<?php

echo filesize("test.txt");

?>

The output of the code above will be:

20


PHP Filesystem Functions

PHP Filesystem Introduction

The filesystem functions allow you to access and manipulate the filesystem.

Installation

The filesystem functions are part of the PHP core. There is no installation needed to use these functions.

Runtime Configuration

The behavior of the filesystem functions is affected by settings in php.ini.

Filesystem configuration options:

Name | Default | Description | Changeable
allow_url_fopen | "1" | Allows fopen()-type functions to work with URLs (available since PHP 4.0.4) | PHP_INI_SYSTEM
user_agent | NULL | Defines the user agent for PHP to send (available since PHP 4.3) | PHP_INI_ALL
default_socket_timeout | "60" | Sets the default timeout, in seconds, for socket based streams (available since PHP 4.3) | PHP_INI_ALL
from | "" | Defines the anonymous FTP password (your email address) | PHP_INI_ALL
auto_detect_line_endings | "0" | When set to "1", PHP will examine the data read by fgets() and file() to see if it is using Unix, MS-Dos or Mac line-ending characters (available since PHP 4.3) | PHP_INI_ALL

Unix / Windows Compatibility

When specifying a path on Unix platforms, the forward slash (/) is used as directory separator. However, on Windows platforms, both forward slash (/) and backslash (\) can be used.

PHP Filesystem Functions

PHP: indicates the earliest version of PHP that supports the function.

Function | Description | PHP
basename() | Returns the filename component of a path | 3
chgrp() | Changes the file group | 3
chmod() | Changes the file mode | 3
chown() | Changes the file owner | 3
 | Clears the file status cache | 3
copy() | Copies a file | 3
delete() | See unlink() or unset() |
dirname() | Returns the directory name component of a path | 3
disk_free_space() | Returns the free space of a directory | 4
 | Returns the total size of a directory | 4
diskfreespace() | Alias of disk_free_space() | 3
fclose() | Closes an open file | 3
feof() | Tests for end-of-file on an open file | 3
fflush() | Flushes buffered output to an open file | 4
fgetc() | Returns a character from an open file | 3
 | Parses a line from an open file, checking for CSV fields | 3
 | Returns a line from an open file | 3
 | Returns a line, with HTML and PHP tags removed, from an open file | 3
file() | Reads a file into an array | 3
file_exists() | Checks whether or not a file or directory exists | 3
file_get_contents() | Reads a file into a string | 4
file_put_contents | Writes a string to a file | 5
fileatime() | Returns the last access time of a file | 3
 | Returns the last change time of a file | 3
filegroup() | Returns the group ID of a file | 3
fileinode() | Returns the inode number of a file | 3
filemtime() | Returns the last modification time of a file | 3
fileowner() | Returns the user ID (owner) of a file | 3
 | Returns the permissions of a file | 3
filesize() | Returns the file size | 3
filetype() | Returns the file type | 3
flock() | Locks or releases a file | 3
fnmatch() | Matches a filename or string against a specified pattern | 4
 | Opens a file or URL | 3
fpassthru() | Reads from an open file, until EOF, and writes the result to the output buffer | 3
fputcsv() | Formats a line as CSV and writes it to an open file | 5
fputs() | Alias of fwrite() | 3
fread() | Reads from an open file | 3
fscanf() | Parses input from an open file according to a specified format | 4
 | Seeks in an open file | 3
fstat() | Returns information about an open file | 4
ftell() | Returns the current position in an open file | 3
ftruncate() | Truncates an open file to a specified length | 4
 | Writes to an open file | 3
 | Returns an array of filenames / directories matching a specified pattern | 4
is_dir() | Checks whether a file is a directory | 3
 | Checks whether a file is executable | 3
is_file() | Checks whether a file is a regular file | 3
is_link() | Checks whether a file is a link | 3
is_readable() | Checks whether a file is readable | 3
is_uploaded_file() | Checks whether a file was uploaded via HTTP POST | 3
is_writable() | Checks whether a file is writeable | 4
is_writeable() | Alias of is_writable() | 3
link() | Creates a hard link | 3
 | Returns information about a hard link | 3
lstat() | Returns information about a file or symbolic link | 3
mkdir() | Creates a directory | 3
move_uploaded_file() | Moves an uploaded file to a new location | 4
parse_ini_file() | Parses a configuration file | 4
 | Returns information about a file path | 4
pclose() | Closes a pipe opened by popen() | 3
 | Opens a pipe | 3
readfile() | Reads a file and writes it to the output buffer | 3
readlink() | Returns the target of a symbolic link | 3
realpath() | Returns the absolute pathname | 4
rename() | Renames a file or directory | 3
rewind() | Rewinds a file pointer | 3
rmdir() | Removes an empty directory | 3
 | Sets the buffer size of an open file | 3
stat() | Returns information about a file | 3
symlink() | Creates a symbolic link | 3
tempnam() | Creates a unique temporary file | 3
tmpfile() | Creates a unique temporary file | 3
 | Sets access and modification time of a file | 3
 | Changes file permissions for files | 3
unlink() | Deletes a file | 3

PHP Filesystem Constants

PHP: indicates the earliest version of PHP that supports the constant.

Constant | Description | PHP
GLOB_BRACE |  |
GLOB_ONLYDIR |  |
GLOB_MARK |  |
GLOB_NOSORT |  |
GLOB_NOCHECK |  |
GLOB_NOESCAPE |  |
PATHINFO_DIRNAME |  |
PATHINFO_BASENAME |  |
PATHINFO_EXTENSION |  |
FILE_USE_INCLUDE_PATH |  |
FILE_APPEND |  |
FILE_IGNORE_NEW_LINES |  |
FILE_SKIP_EMPTY_LINES |  |


PHP filetype() Function

Definition and Usage

The filetype() function returns the file type of a specified file or directory.

This function returns the one of seven possible values on success or FALSE on failure.

Possible return values:

· fifo
· char
· dir
· block
· link
· file
· unknown

Syntax

filetype(filename)

Parameter | Description
filename | Required. Specifies the file to check

Tips and Notes

Note: The result of this function are cached. Use clearstatcache() to clear the cache.

Example 1

<?php

echo filetype("test.txt");

?>

The output of the code above will be:

file

Example 2

<?php

echo filetype("images");

?>

The output of the code above will be:

dir


PHP flock() Function

Definition and Usage

The flock() function locks or releases a file.

This function returns TRUE on success or FALSE on failure.

Syntax

flock(file,lock,block)

Parameter

Description

file

Required. Specifies an open file to lock or release

lock

Required. Specifies what kind of lock to use.

Possible values:

· LOCK_SH - Shared lock (reader). Allow other processes to access the file
· LOCK_EX - Exclusive lock (writer). Prevent other processes from accessing the file
· LOCK_UN - Release a shared or exclusive lock
· LOCK_NB - Avoids blocking other processes while locking

block

Optional. Set to 1 to block other processes while locking

Tips and Notes

Note: These locks only apply to the current PHP process. Other processes can modify or delete a PHP-locked file if permissions allow.

Note: flock() is mandatory under Windows.

Tip: The lock is released also by fclose(), which is called automatically when script is finished.

Example

<?php

$file = fopen("test.txt","w+");

// exclusive lock

if (flock($file,LOCK_EX))

{

fwrite($file,"Write something");

// release lock

flock($file,LOCK_UN);

}

else

{

echo "Error locking file!";

}

fclose($file);

?>


PHP floor() function

Definition and Usage

The floor() function returns the value of a number rounded DOWNWARDS to the nearest integer.

Syntax

floor(x)

Parameter | Description
x | Required. A number

Example

In this example we will use the floor() function on different numbers:

<?php

echo(floor(0.60) . "<br />");

echo(floor(0.40) . "<br />");

echo(floor(5) . "<br />");

echo(floor(5.1) . "<br />");

echo(floor(-5.1) . "<br />");

echo(floor(-5.9))

?>

The output of the code above will be:

0

0

5

5

-6

-6


PHP fmod() function

Definition and Usage

The fmod() function divides x by y and returns the remainder (modulo) of the division.

Syntax

fmod(x,y)

Parameter | Description
x | Required. A number
y | Required.

Example

In the following example we will use the fmod() function to return the remainder of 5/2:

<?php

$r = fmod(5,2);

echo $r

?>

The output of the code above will be:

1


PHP fopen() Function

Definition and Usage

The fopen() function opens a file or URL.

If fopen() fails, it returns FALSE and an error on failure. You can hide the error output by adding an '@' in front of the function name.

Syntax

fopen(filename,mode,include_path,context)

Parameter

Description

filename

Required. Specifies the file or URL to open

mode

Required. Specifies the type of access you require to the file/stream.

Possible values:

· "r" (Read only. Starts at the beginning of the file)
· "r+" (Read/Write. Starts at the beginning of the file)
· "w" (Write only. Opens and clears the contents of file; or creates a new file if it doesn't exist)
· "w+" (Read/Write. Opens and clears the contents of file; or creates a new file if it doesn't exist)
· "a" (Write only. Opens and writes to the end of the file or creates a new file if it doesn't exist)
· "a+" (Read/Write. Preserves file content by writing to the end of the file)
· "x" (Write only. Creates a new file. Returns FALSE and an error if file already exists)
· "x+" (Read/Write. Creates a new file. Returns FALSE and an error if file already exists)

include_path

Optional. Set this parameter to '1' if you want to search for the file in the include_path (in php.ini) as well

context

Optional. Specifies the context of the file handle. Context is a set of options that can modify the behavior of a stream

Tips and Notes

Note: When writing to a text file, be sure to use the correct line-ending character! Unix systems use \n, Windows systems use \r\n, and Macintosh systems use \r as the line ending character. Windows offers a translation flag ('t') which will translate \n to \r\n when working with the file. You can also use 'b' to force binary mode. To use these flags, specify either 'b' or 't' as the last character of the mode parameter.

Example

<?php

$file = fopen("test.txt","r");

$file = fopen("/home/test/test.txt","r");

$file = fopen("/home/test/test.gif","wb");

$file = fopen("http://www.example.com/","r");

$file = fopen("ftp://user:password@example.com/test.txt","w");

?>


PHP Forms

PHP Forms and User Input

The PHP $_GET and $_POST variables are used to retrieve information from forms, like user input.

PHP Form Handling

The most important thing to notice when dealing with HTML forms and PHP is that any form element in an HTML page will automatically be available to your PHP scripts.

Form example:

<html>

<body>

<form action="welcome.php" method="post">

Name: <input type="text" name="name" />

Age: <input type="text" name="age" />

<input type="submit" />

</form>

</body>

</html>

The example HTML page above contains two input fields and a submit button. When the user fills in this form and click on the submit button, the form data is sent to the "welcome.php" file.

The "welcome.php" file looks like this:

<html>

<body>

Welcome <?php echo $_POST["name"]; ?>.<br />

You are <?php echo $_POST["age"]; ?> years old.

</body>

</html>

A sample output of the above script may be:

Welcome John.

You are 28 years old.

The PHP $_GET and $_POST variables will be explained in the next chapters.

Form Validation

User input should be validated whenever possible. Client side validation is faster, and will reduce server load.

However, any site that gets enough traffic to worry about server resources, may also need to worry about site security. You should always use server side validation if the form accesses a database.

A good way to validate a form on the server is to post the form to itself, instead of jumping to a different page. The user will then get the error messages on the same page as the form. This makes it easier to discover the error.


PHP fpassthru() Function

Definition and Usage

The fpassthru() function reads all data from the current position in an open file, until EOF, and writes the result to the output buffer.

This function returns the number of characters passed or FALSE on failure.

Syntax

fpassthru(file)

Parameter | Description
file | Required. Specifies the open file or resource to read from

Tips and Notes

Note: When using fpassthru() on a binary file on Windows, remember to open the file in binary mode.

Tip: Call rewind() to set the file pointer to the beginning of the file if you have already written to the file.

Tip: If you just want to dump the contents of a file to the output buffer, without first modifying it, use the readfile() function instead.

Example 1

<?php

$file = fopen("test.txt","r");

// Read first line

fgets($file);

// Send rest of the file to the output buffer

echo fpassthru($file);

fclose($file);

?>

The output of the code above could be:

There are three lines in this file.

This is the last line.59

59 indicates the number of characters passed.

Example 2

Dump index page of a www server:

<?php

$file = fopen("http://www.example.com","r");

fpassthru($file);

?>


PHP fprintf() Function

Definition and Usage

The fprintf() function writes a formatted string to a specified output stream (example: file or database).

The arg1, arg2, ++ parameters will be inserted at percent (%) signs in the main string. This function works "step-by-step". At the first % sign, arg1 is inserted, at the second % sign, arg2 is inserted, etc.

The fprintf() function returns the length of the written string.

Syntax

fprintf(stream,format,arg1,arg2,arg++)

Parameter

Description

stream

Required. Specifies where to write/output the string

format

Required. Specifies the string and how to format the variables in it.

Possible format values:

· %% - Returns a percent sign
· %b - Binary number
· %c - The character according to the ASCII value
· %d - Signed decimal number
· %e - Scientific notation (e.g. 1.2e+2)
· %u - Unsigned decimal number
· %f - Floating-point number (local settings aware)
· %F - Floating-point number (not local settings aware)
· %o - Octal number
· %s - String
· %x - Hexadecimal number (lowercase letters)
· %X - Hexadecimal number (uppercase letters)

Additional format values. These are placed between the % and the letter (example %.2f):

· + (Forces both + and - in front of numbers. By default, only negative numbers are marked)
· ' (Specifies what to use as padding. Default is space. Must be used together with the width specifier. Example: %'x20s (this uses "x" as padding)
· - (Left-justifies the variable value)
· [0-9] (Specifies the minimum width held of to the variable value)
· .[0-9] (Specifies the number of decimal digits or maximum string length)

Note: If multiple additional format values are used, they must be in the same order as above.

arg1

Required. The argument to be inserted at the first %-sign in the format string

arg2

Optional. The argument to be inserted at the second %-sign in the format string

arg++

Optional. The argument to be inserted at the third, fourth, etc. %-sign in the format string

Tips and Notes

Note: If there are more % signs than arguments, you must use placeholders. A placeholder is inserted after the % sign, and consists of the argument- number and "\$". See example three.

Tip: Related functions: printf(), sprintf(), vfprintf(), vprintf(), and vsprintf().

Example 1

<?php

$str = "Hello";

$number = 123;

$file = fopen("test.txt","w");

echo fprintf($file,"%s world. Day number %u",$str,$number);

?>

The output of the code above will be:

27

The following text will be written to the file "test.txt":

Hello world. Day number 123

Example 2

<?php

$number = 123;

$file = fopen("test.txt","w");

fprintf($file,"%f",$number);

?>

The following text will be written to the file "test.txt":

123.000000

Example 3

Use of placeholders:

<?php

$number = 123;

$file = fopen("test.txt","w");

fprintf($file,"With 2 decimals: %1\$.2f

\nWith no decimals: %1\$u",$number);

?>

The following text will be written to the file "test.txt":

With 2 decimals: 123.00

With no decimals: 123


PHP fputcsv() Function

Definition and Usage

The fputcsv() function formats a line as CSV and writes it to an open file.

This function returns the length of the written string, or FALSE on failure.

Syntax

fputcsv(file,fields,seperator,enclosure)

Parameter | Description
file | Required. Specifies the open file to write to
fields | Required. Specifies which array to get the data from
separator | Optional. A character that specifies the field separator. Default is comma ( , )
enclosure | Optional. A character that specifies the field enclosure character. Default is "

Tips and Notes

Tip: Also see the fgetcsv() function.

Example

<?php

$list = array

(

"Peter,Griffin,Oslo,Norway",

"Glenn,Quagmire,Oslo,Norway",

);

$file = fopen("contacts.csv","w");

foreach ($list as $line)

{

fputcsv($file,split(',',$line));

}

fclose($file);

?>

The CSV file will look like this after the code above has been executed:

Peter,Griffin,Oslo,Norway

Glenn,Quagmire,Oslo,Norway


PHP fputs() Function

Definition and Usage

The fputs() writes to an open file.

The function will stop at the end of the file or when it reaches the specified length, whichever comes first.

This function returns the number of bytes written on success, or FALSE on failure.

The fputs() function is an alias of the fwrite() function.

Syntax

fputs(file,string,length)

Parameter | Description
file | Required. Specifies the open file to write to
string | Required. Specifies the string to write to the open file
length | Optional. Specifies the maximum number of bytes to write

Tips and Notes

Tip: This function is binary-safe (meaning that both binary data, like images, and character data can be written with this function).

Example

<?php

$file = fopen("test.txt","w");

echo fputs($file,"Hello World. Testing!");

fclose($file);

?>

The output of the code above will be:

21


PHP fread() Function

Definition and Usage

The fread() reads from an open file.

The function will stop at the end of the file or when it reaches the specified length, whichever comes first.

This function returns the read string, or FALSE on failure.

Syntax

fread(file,length)

Parameter | Description
file | Required. Specifies the open file to read from
length | Required. Specifies the maximum number of bytes to read

Tips and Notes

Tip: This function is binary-safe (meaning that both binary data, like images, and character data can be written with this function).

Example 1

Read 10 bytes from file:

<?php

$file = fopen("test.txt","r");

fread($file,"10");

fclose($file);

?>

Example 2

Read entire file:

<?php

$file = fopen("test.txt","r");

fread($file,filesize($file));

fclose($file);

?>


PHP FrenchToJD() function

Definition and Usage

The FrenchToJD() function converts a specified date from the French Republican Calendar to Julian day count.

Syntax

frenchtojd(month,day,year)

Parameter | Description
month | Required. Specifies the month
day | Required. Specifies the day
year | Required. Specifies the year. Must be within the range 1 to 14.

Tips and Notes

Tip: The French Republican Calendar is a calendar proposed during the French Revolution, and used by the French government for about twelve years from late 1793. This function only convert dates in years 1 through 14 (Gregorian dates 22 September 1792 - 22 September 1806). This more than covers the period when the calendar was in use.

Example

<?php

$d=frenchtojd(3,3,14);

echo($d);

?>

The output of the code above will be:

2380650


PHP fscanf() Function

Definition and Usage

The fscanf() function parses the input from an open file according to the specified format.

Syntax

fscanf(file,format,mixed)

Parameter

Description

file

Required. Specifies the file to check

format

Required. Specifies the format.

Possible format values:

· %% - Returns a percent sign
· %b - Binary number
· %c - The character according to the ASCII value
· %d - Signed decimal number
· %e - Scientific notation (e.g. 1.2e+2)
· %u - Unsigned decimal number
· %f - Floating-point number (local settings aware)
· %F - Floating-point number (not local settings aware)
· %o - Octal number
· %s - String
· %x - Hexadecimal number (lowercase letters)
· %X - Hexadecimal number (uppercase letters)

Additional format values. These are placed between the % and the letter (example %.2f):

· + (Forces both + and - in front of numbers. By default, only negative numbers are marked)
· ' (Specifies what to use as padding. Default is space. Must be used together with the width specifier. Example: %'x20s (this uses "x" as padding)
· - (Left-justifies the variable value)
· [0-9] (Specifies the minimum width held of to the variable value)
· .[0-9] (Specifies the number of decimal digits or maximum string length)

Note: If multiple additional format values are used, they must be in the same order as above.

mixed

Optional.

Tips and Notes

Note: Any whitespace in the format string matches any whitespace in the input stream. This means that a tab (\t) in the format string can match a single space character in the input stream.


PHP fseek() Function

Definition and Usage

The fseek() function seeks in an open file.

This function moves the file pointer from its current position to a new position, forward or backward, specified by the number of bytes.

This function returns 0 on success, or -1 on failure. Seeking past EOF will not generate an error.

Syntax

fseek(file,offset,whence)

Parameter

Description

file

Required. Specifies the open file to seek in

offset

Required. Specifies the new position (measured in bytes from the beginning of the file)

whence

Optional. (added in PHP 4). Possible values:

· SEEK_SET - Set position equal to offset. Default
· SEEK_CUR - Set position to current location plus offset
· SEEK_END - Set position to EOF plus offset (to move to a position before EOF, the offset must be a negative value)

Tips and Notes

Tip: Find the current position by using ftell()!

Example

<?php

$file = fopen("test.txt","r");

// read first line

fgets($file);

// move back to beginning of file

fseek($file,0);

?>


PHP fstat() Function

Definition and Usage

The fstat() function returns information about an open file.

This function returns an array with the following elements:

· [0] or [dev] - Device number
· [1] or [ino] - Inode number
· [2] or [mode] - Inode protection mode
· [3] or [nlink] - Number of links
· [4] or [uid] - User ID of owner
· [5] or [gid] - Group ID of owner
· [6] or [rdev] - Inode device type
· [7] or [size] - Size in bytes
· [8] or [atime] - Last access (as Unix timestamp)
· [9] or [mtime] - Last modified (as Unix timestamp)
· [10] or [ctime] - Last inode change (as Unix timestamp)
· [11] or [blksize] - Blocksize of filesystem IO (if supported)
· [12] or [blocks] - Number of blocks allocated

Syntax

fstat(file)

Parameter | Description
file | Required. Specifies the open file to check

Tips and Notes

Note: The results from this function will differ from server to server. The array may contain the number index, the name index, or both.

Tip: This function is similar to stat(), except that with this function the file must be open.

Example

<?php

$file = fopen("test.txt","r");

print_r(fstat($file));

fclose($file);

?>

The output of the code above could be:

Array

(

[0] => 0

[1] => 0

[2] => 33206

[3] => 1

[4] => 0

[5] => 0

[6] => 0

[7] => 92

[8] => 1141633430

[9] => 1141298003

[10] => 1138609592

[11] => -1

[12] => -1

[dev] => 0

[ino] => 0

[mode] => 33206

[nlink] => 1

[uid] => 0

[gid] => 0

[rdev] => 0

[size] => 92

[atime] => 1141633430

[mtime] => 1141298003

[ctime] => 1138609592

[blksize] => -1

[blocks] => -1

)


PHP ftell() Function

Definition and Usage

The ftell() function returns the current position in an open file.

Returns the current file pointer position, or FALSE on failure.

Syntax

ftell(file)

Parameter | Description
file | Required. Specifies the open file to check

Example

<?php

$file = fopen("test.txt","r");

// print current position

echo ftell($file);

// change current position

fseek($file,"15");

// print current position again

echo "<br />" . ftell($file);

fclose($file);

?>

The output of the code above will be:

0

15


PHP FTP Functions

PHP FTP Introduction

The FTP functions give client access to file servers through the File Transfer Protocol (FTP).

The FTP functions are used to open, login and close connections, as well as upload, download, rename, delete, and get information on files from file servers. Not all of the FTP functions will work with every server or return the same results. The FTP functions became available with PHP 3.

These functions are meant for detailed access to an FTP server. If you only wish to read from or write to a file on an FTP server, consider using the ftp:// wrapper with the Filesystem functions.

Installation

The windows version of PHP has built-in support for the FTP extension. So, the FTP functions will work automatically.

However, if you are running the Linux version of PHP, you will have to compile PHP with --enable-ftp (PHP 4+) or --with-ftp (PHP 3) to get the FTP functions to work.

PHP FTP Functions

PHP: indicates the earliest version of PHP that supports the function.

Function | Description | PHP
 | Allocates space for a file to be uploaded to the FTP server | 5
ftp_cdup() | Changes the current directory to the parent directory on the FTP server | 3
 | Changes the current directory on the FTP server | 3
ftp_chmod() | Sets permissions on a file via FTP | 5
ftp_close() | Closes an FTP connection | 4
 | Opens an FTP connection | 3
ftp_delete() | Deletes a file on the FTP server | 3
ftp_exec() | Executes a program/command on the FTP server | 4
 | Downloads a file from the FTP server and saves it to an open file | 3
 | Uploads from an open file and saves it to a file on the FTP server | 3
ftp_get_option() | Returns runtime behaviors of the FTP connection | 4
ftp_get() | Downloads a file from the FTP server | 3
ftp_login() | Logs on to an FTP connection | 3
ftp_mdtm() | Returns the last modified time of a specified file | 3
 | Creates a new directory on the FTP server | 3
 | Continues retrieving/sending a file (non-blocking) | 4
ftp_nb_fget() | Downloads a file from the FTP server and saves it to an open file (non-blocking) | 4
 | Uploads from an open file and saves it to a file on the FTP server (non-blocking) | 4
 | Downloads a file from the FTP server (non-blocking) | 4
ftp_nb_put() | Uploads a file to the FTP server (non-blocking) | 4
ftp_nlist() | Lists the files in a specified directory on the FTP server | 3
ftp_pasv() | Turns passive mode on or off | 3
ftp_put() | Uploads a file to the FTP server | 3
ftp_pwd() | Returns the current directory name | 3
ftp_quit() | Alias of ftp_close() | 3
ftp_raw() | Sends a raw command to the FTP server | 5
ftp_rawlist() | Returns a detailed list of files in the specified directory | 3
ftp_rename() | Renames a file or directory on the FTP server | 3
ftp_rmdir() | Removes a directory on the FTP server | 3
 | Sets runtime options for the FTP connection | 4
 | Sends a SITE command to the server | 3
 | Returns the size of the specified file | 3
ftp_ssl_connect() | Opens a secure SSL-FTP connection | 4
ftp_systype() | Returns the system type identifier of the FTP server | 3

PHP FTP Constants

PHP: indicates the earliest version of PHP that supports the constant.

Constant | Description | PHP
FTP_ASCII |  | 3
FTP_TEXT |  | 3
FTP_BINARY |  | 3
FTP_IMAGE |  | 3
FTP_TIMEOUT_SEC |  | 3
FTP_AUTOSEEK |  | 4
FTP_AUTORESUME | Determine resume position and start position for get and put requests automatically | 4
FTP_FAILED | Asynchronous transfer has failed | 4
FTP_FINISHED | Asynchronous transfer has finished | 4
FTP_MOREDATA | Asynchronous transfer is still active | 4


PHP ftp_alloc() Function

Definition and Usage

The ftp_alloc() function allocates space for a file to be uploaded to the FTP server.

This function returns TRUE on success or FALSE on failure.

Syntax

ftp_alloc(ftp_connection,size,return)

Parameter | Description
ftp_connection | Required. Specifies the FTP connection to use
size | Required. Specifies the number of bytes to allocate
return | Optional. Specifies a variable to store the server response in

Tips and Notes

Note: Many FTP servers do not support this command.

Example 1

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

ftp_alloc($conn,"160",$response);

echo $response;

ftp_close($conn);

?>

Example 2

<?php

$file = "myfile.txt";

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

if (ftp_alloc($conn, filesize($file), $response))

{

echo "Space allocated on server.";

}

else

{

echo "Unable to allocate space. " . $response;

}

ftp_close($conn);

?>


PHP ftp_cdup() Function

Definition and Usage

The ftp_cdup() function changes the current directory to the parent directory (one step up).

This function returns TRUE on success and FALSE on failure.

Syntax

ftp_cdup(ftp_connection)

Parameter | Description
ftp_connection | Required. Specifies the FTP connection to use

Example

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

//Outputs the current directory

echo "Dir: ".ftp_pwd($conn);

echo "<br />";

//Change to the images directory

ftp_chdir($conn,"images");

echo "Dir: ".ftp_pwd($conn);

echo "<br />";

//Change current directory to parent directory

ftp_cdup($conn);

echo "Dir: ".ftp_pwd($conn);

ftp_close($ftp_server);

?>

The output of the code above will be:

Dir: /

Dir: /images

Dir: /


PHP ftp_chdir() Function

Definition and Usage

The ftp_chdir() function changes the current directory to the specified directory.

This function returns TRUE on success and FALSE and a warning on failure.

Syntax

ftp_chdir(ftp_connection,directory)

Parameter | Description
ftp_connection | Required. Specifies the FTP connection to use
directory | Required. Specifies the directory to change to

Example

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

//Outputs the current directory

echo "Dir: ".ftp_pwd($conn);

echo "<br />";

//Change to the images directory

ftp_chdir($conn,"images");

echo "Dir: ".ftp_pwd($conn);

ftp_close($ftp_server);

?>

The output of the code above will be:

Dir: /

Dir: /images


PHP ftp_chmod() Function

Definition and Usage

The ftp_chmod() function sets permissions on a specified file on the FTP server.

This function returns the new permissions on success and FALSE and a warning on failure.

Syntax

ftp_chmod(ftp_connection,mode,file)

Parameter

Description

ftp_connection

Required. Specifies the FTP connection to use

mode

Required. Specifies the new permissions.

The mode parameter consists of four numbers:

· The first number is always zero
· The second number specifies permissions for the owner
· The third number specifies permissions for the owner's user group
· The fourth number specifies permissions for everybody else

Possible values (to set multiple permissions, add up the following numbers):

· 1 = execute permissions
· 2 = write permissions
· 4 = read permissions

file

Required. Specifies the name of the file to modify

Example

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"user","pass");

// Read and write for owner, nothing for everybody else

ftp_chmod($conn,"0600","test.txt");

// Read and write for owner, read for everybody else

ftp_chmod($conn,"0644","test.txt");

// Everything for owner, read and execute for everybody else

ftp_chmod($conn,"0755","test.txt");

// Everything for owner, read for owner's group

ftp_chmod($conn,"0740","test.txt");

ftp_close($conn);

?>


PHP ftp_close() Function

Definition and Usage

The ftp_close() function closes an FTP connection.

Syntax

ftp_close(ftp_connection)

Parameter | Description
ftp_connection | Required. Specifies the FTP connection to close

Example

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

//some code to be executed

ftp_close($conn);

?>


PHP ftp_connect() Function

Definition and Usage

The ftp_connect() function opens an FTP connection to a server.

When the connection is open, you can run FTP functions against the server.

Syntax

ftp_connect(host,port,timeout)

Parameter | Description
host | Required. Specifies the FTP server to connect to. Can be a domain address or an IP address. This parameter should not include "ftp://" or slashes
port | Optional. Specifies the port of the FTP server. Default is 21
timeout | Optional. Specifies the timeout for this FTP connection. Default is 90 seconds

Example

The example below tries to connect to an FTP server. If the connection fails, the die() function terminates the script and outputs a message:

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

?>


PHP ftp_delete() Function

Definition and Usage

The ftp_delete() function deletes a file on the FTP server.

This function returns TRUE on success and FALSE and a warning on failure.

Syntax

ftp_delete(ftp_connection,file)

Parameter | Description
ftp_connection | Required. Specifies the FTP connection to use
file | Required. Specifies the path of the file to delete

Example

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

echo ftp_delete($conn,"test.txt");

ftp_close($conn);

?>

The output of the code above will be:

1


PHP ftp_exec() Function

Definition and Usage

The ftp_exec() function requests a program or command to be executed on the FTP server.

This function returns TRUE on success and FALSE on failure.

Syntax

ftp_exec(ftp_connection,command)

Parameter | Description
ftp_connection | Required. Specifies the FTP connection to use
command | Required. Specifies the command request to send to the FTP server

Tips and Notes

Note: Unlike the ftp_raw() function, ftp_exec() can only send commands after it is logged in to the FTP server.

Example

<?php

$command = "ls-al > test.txt";

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

if (ftp_exec($conn,$command))

{

echo "Command executed successfully";

}

else

{

echo "Execution of command failed";

}

ftp_close($conn);

?>


PHP ftp_fget() Function

Definition and Usage

The ftp_fget() function gets a file from the FTP server and saves it to an open file.

This function returns TRUE on success and FALSE on failure.

Syntax

ftp_fget(ftp_connection,remote,local,mode,resume)

Parameter

Description

ftp_connection

Required. Specifies the FTP connection to use

remote

Required. Specifies the path of the file to copy from

local

Required. Specifies the open file to paste into

mode

Required. Specifies the transfer mode. The possible values are:

· FTP_ASCII
· FTP_BINARY

resume

Optional. Specifies where in the remote file to start copying. Default is 0

Example

This example copies the text from "source.txt" into "target.txt":

<?php

$source = "source.txt";

$target = fopen("target.txt", "w");

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

ftp_fget($conn,$source,$target,FTP_ASCII);

ftp_close($conn);

?>


PHP ftp_fput() Function

Definition and Usage

The ftp_fput() function uploads from an open file and saves it to a file on the FTP server.

This function returns TRUE on success and FALSE on failure.

Syntax

ftp_fput(ftp_connection,remote,local,mode,resume)

Parameter

Description

ftp_connection

Required. Specifies the FTP connection to use

remote

Required. Specifies the file to upload to

local

Required. Specifies the open file to upload from

mode

Required. Specifies the transfer mode. The possible values are:

· FTP_ASCII
· FTP_BINARY

resume

Optional. Specifies where in the local file to start copying. Default is 0

Example

This example copies the text from "source.txt" into "target.txt":

<?php

$source = fopen("source.txt","r");

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

echo ftp_fput($conn,"target.txt",$source,FTP_ASCII);

ftp_close($conn);

?>

The output of the code above will be:

1


PHP ftp_get() Function

Definition and Usage

The ftp_get() function gets a file from the FTP server and saves it to a local file.

This function returns TRUE on success and FALSE on failure.

Syntax

ftp_get(ftp_connection,local,remote,mode,resume)

Parameter

Description

ftp_connection

Required. Specifies the FTP connection to use

local

Required. Specifies where to save the file. If this file already exists, it will be overwritten

remote

Required. Specifies the path of the file to copy from

mode

Required. Specifies the transfer mode. The possible values are:

· FTP_ASCII
· FTP_BINARY

resume

Optional. Specifies where in the remote file to start copying

Example

This example copies the text from "source.txt" into "target.txt":

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

echo ftp_get($conn,"target.txt","source.txt",FTP_ASCII);

ftp_close($conn);

?>

The output of the code above will be:

1


PHP ftp_get_option() Function

Definition and Usage

The ftp_get_option() function returns specified runtime behavior from the FTP connection.

Syntax

ftp_get_option(ftp_connection,option)

Parameter

Description

ftp_connection

Required. Specifies the FTP connection to use

option

Required. Specifies which runtime behavior to return. Possible values:

· FTP_TIMEOUT_SEC - Returns the time limit for network operations
· FTP_AUTOSEEK - Returns TRUE if this option is on, FALSE otherwise

Example

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

echo ftp_get_option($conn,FTP_TIMEOUT_SEC);

ftp_close($conn);

?>

The output of the code above will be:

90


PHP ftp_login() Function

Definition and Usage

The ftp_login() function logs in to the specified FTP connection.

This function returns TRUE on success and FALSE and a warning on failure.

Syntax

ftp_login(ftp_connection,username,password)

Parameter | Description
ftp_connection | Required. Specifies the FTP connection to login to
username | Required. Specifies the username to login with
password | Required. Specifies the password to login with

Example

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

ftp_close($conn);

?>


PHP ftp_mdtm() Function

Definition and Usage

The ftp_mdtm() function returns when the specified file was last modified.

This function returns the last modified time as a Unix timestamp (or -1 on error).

Syntax

ftp_login(ftp_connection,file)

Parameter | Description
ftp_connection | Required. Specifies the FTP connection to login to
file | Required. Specifies the file to check

Tips and Notes

Note: Not all FTP servers support this function.

Example

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

$mod = ftp_mdtm($conn,"test.txt")

//Result in Unix timestamp

echo $mod;

echo "<br />";

//Unix timestamp formatted as a date

echo date(DATE_RFC822,$mod);

ftp_close($conn);

?>

The output of the code above will be:

1140082571

Thu, 16 Feb 2006 10:36:11 CET


PHP ftp_mkdir() Function

Definition and Usage

The ftp_mkdir() function creates a directory on the FTP server.

This function returns the name and path of the new directory on success and FALSE on failure.

Syntax

ftp_mkdir(ftp_connection,dir)

Parameter | Description
ftp_connection | Required. Specifies the FTP connection to use
dir | Required. Specifies the name of the directory to create

Example

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

echo ftp_mkdir($conn,"testdir");

ftp_close($conn);

?>

The output of the code above will be:

/testdir


PHP ftp_nb_continue() Function

Definition and Usage

The ftp_nb_continue() function continues to receive/send a file to the FTP server.

This function returns one of the following values:

· FTP_FAILED (send/receive failed)
· FTP_FINISHED (send/receive completed)
· FTP_MOREDATA (send/receive in progress)

This function sends/retrieves the file asynchronously. This means your program can perform other operations while the file is being downloaded.

Syntax

ftp_nb_continue(ftp_connection)

Parameter | Description
ftp_connection | Required. Specifies the FTP connection to use

Example

<?php

$source = "source.txt";

$target = fopen("target.txt", "w");

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

$status = ftp_nb_fget($conn,$source,$target,FTP_ASCII);

while ($status == FTP_MOREDATA)

{

$status = ftp_nb_continue($conn);

}

if ($status != FTP_FINISHED)

{

echo "Download error";

}

ftp_close($conn);

?>


PHP ftp_nb_fget() Function

Definition and Usage

The ftp_nb_fget() function gets a file from the FTP server and saves it to an open file.

This function returns one of the following values:

· FTP_FAILED (send/receive failed)
· FTP_FINISHED (send/receive completed)
· FTP_MOREDATA (send/receive in progress)

Unlike ftp_fget(), this function retrieves the file asynchronously. This means your program can perform other operations while the file is being downloaded.

Syntax

ftp_nb_fget(ftp_connection,remote,local,mode,resume)

Parameter

Description

ftp_connection

Required. Specifies the FTP connection to use

remote

Required. Specifies the path of the file to copy from

local

Required. Specifies the open file to paste into

mode

Required. Specifies the transfer mode. The possible values are:

· FTP_ASCII
· FTP_BINARY

resume

Optional. Specifies where in the remote file to start copying. Default is 0

Example

This example copies the text from "source.txt" into "target.txt":

<?php

$source = "source.txt";

$target = fopen("target.txt", "w");

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

ftp_nb_fget($conn,$source,$target,FTP_ASCII);

ftp_close($conn);

?>


PHP ftp_nb_fput() Function

Definition and Usage

The ftp_nb_fput() function uploads from an open file and saves it to a file on the FTP server.

This function returns one of the following values:

· FTP_FAILED (send/receive failed)
· FTP_FINISHED (send/receive completed)
· FTP_MOREDATA (send/receive in progress)

Unlike ftp_fput(), this function retrieves the file asynchronously. This means your program can perform other operations while the file is being downloaded.

Syntax

ftp_nb_fput(ftp_connection,remote,local,mode,resume)

Parameter

Description

ftp_connection

Required. Specifies the FTP connection to use

remote

Required. Specifies the file to upload to

local

Required. Specifies the open file to upload from

mode

Required. Specifies the transfer mode. The possible values are:

· FTP_ASCII
· FTP_BINARY

resume

Optional. Specifies where in the local file to start copying. Default is 0

Example

This example copies the text from "source.txt" into "target.txt":

<?php

$source = fopen("source.txt","r");

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

ftp_nb_fput($conn,"target.txt",$source,FTP_ASCII);

ftp_close($conn);

?>


PHP ftp_nb_get() Function

Definition and Usage

The ftp_nb_get() function gets a file from the FTP server and saves it to a local file.

This function returns one of the following values:

· FTP_FAILED (send/receive failed)
· FTP_FINISHED (send/receive completed)
· FTP_MOREDATA (send/receive in progress)

Unlike ftp_get(), this function retrieves the file asynchronously. This means your program can perform other operations while the file is being downloaded.

Syntax

ftp_nb_get(ftp_connection,local,remote,mode,resume)

Parameter

Description

ftp_connection

Required. Specifies the FTP connection to use

local

Required. Specifies where to save the file. If this file already exists, it will be overwritten

remote

Required. Specifies the path of the file to copy from

mode

Required. Specifies the transfer mode. The possible values are:

· FTP_ASCII
· FTP_BINARY

resume

Optional. Specifies where in the remote file to start copying

Example

This example copies the text from "source.txt" into "target.txt":

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

ftp_nb_get($conn,"target.txt","source.txt",FTP_ASCII);

ftp_close($conn);

?>


PHP ftp_nb_put() Function

Definition and Usage

The ftp_nb_put() function uploads from a local file to the FTP server.

This function returns one of the following values:

· FTP_FAILED (send/receive failed)
· FTP_FINISHED (send/receive completed)
· FTP_MOREDATA (send/receive in progress)

Unlike ftp_put(), this function retrieves the file asynchronously. This means your program can perform other operations while the file is being downloaded.

Syntax

ftp_nb_put(ftp_connection,remote,local,mode,resume)

Parameter

Description

ftp_connection

Required. Specifies the FTP connection to use

remote

Required. Specifies the file to upload to

local

Required. Specifies the path of the file to upload from

mode

Required. Specifies the transfer mode. The possible values are:

· FTP_ASCII
· FTP_BINARY

resume

Optional. Specifies where in the local file to start copying

Example

This example copies the text from "source.txt" into "target.txt":

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

ftp_nb_put($conn,"target.txt","source.txt",FTP_ASCII);

ftp_close($conn);

?>


PHP ftp_nlist() Function

Definition and Usage

The ftp_nlist() function lists the files in a specified directory on the FTP server.

This function returns an array of file names on success or FALSE on failure.

Syntax

ftp_nlist(ftp_connection,dir)

Parameter | Description
ftp_connection | Required. Specifies the FTP connection to use
dir | Required. Specifies the directory to check. Use "." to get the current directory

Tips and Notes

Note: This function does not work with IIS (Internet Information Server). It returns nothing.

Example

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

print_r(ftp_nlist($conn,"images"));

ftp_close($conn);

?>

The output of the code above could be:

array(3)

{

[0]=> "flower.gif"

[1]=> "car.gif"

[2]=> "house.gif"

}


PHP ftp_pasv() Function

Definition and Usage

The ftp_pasv() function sets passive mode on or off.

In passive mode, data connections are initiated by the client, not the server. This is useful if the client is behind a firewall.

Syntax

ftp_pasv(ftp_connection,mode)

Parameter

Description

ftp_connection

Required. Specifies the FTP connection to use

mode

Required. Specifies the mode.

· TRUE = passive mode on
· FALSE = passive mode off

Example

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

ftp_pasv($conn,TRUE);

ftp_close($conn);

?>


PHP ftp_put() Function

Definition and Usage

The ftp_put() function uploads from a local file to the FTP server.

This function returns TRUE on success and FALSE on failure.

Syntax

ftp_put(ftp_connection,remote,local,mode,resume)

Parameter

Description

ftp_connection

Required. Specifies the FTP connection to use

remote

Required. Specifies the file to upload to

local

Required. Specifies the path of the file to upload from

mode

Required. Specifies the transfer mode. Possible values:

· FTP_ASCII
· FTP_BINARY

resume

Optional. Specifies where in the local file to start copying

Example

This example copies the text from "source.txt" into "target.txt":

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

echo ftp_put($conn,"target.txt","source.txt",FTP_ASCII);

ftp_close($conn);

?>

The output of the code above will be:

1


PHP ftp_pwd() Function

Definition and Usage

The ftp_pwd() function returns the current directory name of the specified FTP connection.

Syntax

ftp_pwd(ftp_connection)

Parameter | Description
ftp_connection | Required. Specifies the FTP connection to use

Example

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

// print current directory

echo ftp_pwd($conn) . "<br />";

// change directory to images

ftp_chdir($conn,"images");

// print current directory

echo ftp_pwd($conn);

ftp_close($conn);

?>

The output of the code above will be:

/

/images


PHP ftp_quit() Function

Definition and Usage

The ftp_quit() function closes an FTP connection.

Syntax

ftp_quit(ftp_connection)

Parameter | Description
ftp_connection | Required. Specifies the FTP connection to close

Tips and Notes

Tip: This function is an alias of ftp_close().

Example

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

//some code to be executed

ftp_quit($conn);

?>


PHP ftp_raw() Function

Definition and Usage

The ftp_raw() function sends a raw command to the FTP server.

Syntax

ftp_raw(ftp_connection,command)

Parameter | Description
ftp_connection | Required. Specifies the FTP connection to use
command | Required. Specifies the command to execute

Tips and Notes

Note: This function returns the server response as an array of strings. No parsing is performed, and ftp_raw() does not check if the command was correct.

Example

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

print_r (ftp_raw($conn,"USER admin"));

print_r (ftp_raw($conn,"PASS ert456"));

ftp_close($conn);

?>

The output of the code above will be:

Array ([0] => 331 User admin, password please)

Array ([0] => 230 Password Ok, User logged in)


PHP ftp_rawlist() Function

Definition and Usage

The ftp_rawlist() function returns a detailed list of files in the specified directory of the FTP server.

Syntax

ftp_rawlist(ftp_connection,dir,recursive)

Parameter | Description
ftp_connection | Required. Specifies the FTP connection to use
dir | Required. Specifies the directory. Use "." to specify the current directory
recursive | Optional. By default, this function sends a "LIST" command to the server. However, if the recursive parameter is set to TRUE, it sends a "LIST -R" command.

Tips and Notes

Note: This function returns the server response as an array. No parsing is performed.

Example

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

print_r (ftp_rawlist($conn,"."));

ftp_close($conn);

?>

The output of the code above could be something like this:

Array

(

[0] => dr--r--r-- 1 user group 0 Feb 15 13:02 .

[1] => dr--r--r-- 1 user group 0 Feb 15 13:02 ..

[2] => drw-rw-rw- 1 user group 0 Jan 03 08:33 images

[3] => -rw-rw-rw- 1 user group 160 Feb 16 13:54 test.php

[4] => -rw-rw-rw- 1 user group 20 Feb 14 12:22 test.txt

)


PHP ftp_rename() Function

Definition and Usage

The ftp_rename() function renames a file or directory on the FTP server.

This function returns TRUE on success and FALSE on failure.

Syntax

ftp_rename(ftp_connection,from,to)

Parameter | Description
ftp_connection | Required. Specifies the FTP connection to use
from | Required. Specifies the file or directory to rename
to | Required. Specifies the new name of the file or directory

Example

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

ftp_rename($conn,"oldname.txt","newname.txt");

ftp_close($conn);

?>


PHP ftp_rmdir() Function

Definition and Usage

The ftp_rmdir() function deletes a directory on the FTP server.

This function returns TRUE on success and FALSE on failure.

Syntax

ftp_rmdir(ftp_connection,dir)

Parameter | Description
ftp_connection | Required. Specifies the FTP connection to use
dir | Required. Specifies the directory to delete

Example

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

ftp_rmdir($conn,"testdir");

ftp_close($conn);

?>


PHP ftp_set_option() Function

Definition and Usage

The ftp_set_option() function specifies runtime behavior for the FTP connection.

This function returns TRUE on success and FALSE on failure.

Syntax

ftp_set_option(ftp_connection,option,value)

Parameter

Description

ftp_connection

Required. Specifies the FTP connection to use

option

Required. Specifies which runtime behaviors to set. Possible values:

· FTP_TIMEOUT_SEC
· FTP_AUTOSEEK

value

Required. Sets the value for the option parameter.

If the option parameter is set to FTP_TIMEOUT_SEC, this parameter indicates the time limit (in seconds) for network operations.

If the option parameter is set to FTP_AUTOSEEK, this parameter must be either TRUE (autoseek on) or FALSE (autoseek off)

Example

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

ftp_set_option($conn,FTP_TIMEOUT_SEC,120);

ftp_close($conn);

?>


PHP ftp_site() Function

Definition and Usage

The ftp_site() function sends a SITE command to the FTP server.

SITE commands are not standardized, and are different from server to server. They are useful for handling such things as file permissions and group membership.

This function returns TRUE on success and FALSE and a warning on failure.

Syntax

ftp_site(ftp_connection,command)

Parameter | Description
ftp_connection | Required. Specifies the FTP connection to use
command | Required. Specifies the SITE command to send to the FTP server

Tips and Notes

Tip: To see what commands are available, send the REMOTEHELP command using the ftp_raw() function.

Example

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

ftp_site($conn,"CHMOD 0600 sitetest.txt");

ftp_close($conn);

?>


PHP ftp_size() Function

Definition and Usage

The ftp_size() function returns the size of a specified file on the FTP server.

This function returns the size in bytes or -1 on error.

Syntax

ftp_size(ftp_connection,file)

Parameter | Description
ftp_connection | Required. Specifies the FTP connection to use
file | Required. Specifies the file to check

Tips and Notes

Note: Not all FTP servers support this function

Example

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

echo ftp_size($conn,"test.txt");

ftp_close($conn);

?>

The output of the code above will be:

160


PHP ftp_ssl_connect() Function

Definition and Usage

The ftp_ssl_connect() function opens an secure SSL-FTP connection to a server.

When the connection is open, you can run FTP functions against the server.

Syntax

ftp_ssl_connect(host,port,timeout)

Parameter | Description
host | Required. Specifies the FTP server to connect to. Can be a domain address or an IP address. This parameter should not include "ftp://" or slashes
port | Optional. Specifies the port of the FTP server. Default is 21
timeout | Optional. Specifies the timeout for this FTP connection. Default is 90 seconds

Example

The example below tries to connect to an FTP server. If the connection fails, the die() function terminates the script and outputs a message:

<?php

$conn = ftp_ssl_connect("ftp.testftp.com") or die("Could not connect");

?>


PHP ftp_systype() Function

Definition and Usage

The ftp_systype() function returns the system type identifier of the FTP server.

This function returns the system type on success and FALSE on failure.

Syntax

ftp_systype(ftp_connection)

Parameter | Description
ftp_connection | Required. Specifies the FTP connection to use

Example

<?php

$conn = ftp_connect("ftp.testftp.com") or die("Could not connect");

ftp_login($conn,"admin","ert456");

echo ftp_systype($conn);

ftp_close($conn);

?>

The output of the code above could be:

UNIX


PHP ftruncate() Function

Definition and Usage

The ftruncate() function truncates an open file to the specified length.

Returns TRUE on success, or FALSE on failure.

Syntax

ftruncate(file,size)

Parameter | Description
file | Required. Specifies the open file to truncate
size | Required. Specifies the new file size

Example

<?php

//check filesize

echo filesize("test.txt");

echo "<br />";

$file = fopen("test.txt", "a+");

ftruncate($file,100);

fclose($file);

//Clear cache and check filesize again

clearstatcache();

echo filesize("test.txt");

?>

The output of the code above will be:

792

100


PHP Functions

The real power of PHP comes from its functions.

In PHP - there are more than 700 built-in functions available.

PHP Functions

In this tutorial we will show you how to create your own functions.

For a reference and examples of the built-in functions, please visit our

Create a PHP Function

A function is a block of code that can be executed whenever we need it.

Creating PHP functions:

· All functions start with the word "function()"
· Name the function - It should be possible to understand what the function does by its name. The name can start with a letter or underscore (not a number)
· Add a "{" - The function code starts after the opening curly brace
· Insert the function code
· Add a "}" - The function is finished by a closing curly brace

Example

A simple function that writes my name when it is called:

<html>

<body>

<?php

function writeMyName()

{

echo "Kai Jim Refsnes";

}

writeMyName();

?>

</body>

</html>

Use a PHP Function

Now we will use the function in a PHP script:

<html>

<body>

<?php

function writeMyName()

{

echo "Kai Jim Refsnes";

}

echo "Hello world!<br />";

echo "My name is ";

writeMyName();

echo ".<br />That's right, ";

writeMyName();

echo " is my name.";

?>

</body>

</html>

The output of the code above will be:

Hello world!

My name is Kai Jim Refsnes.

That's right, Kai Jim Refsnes is my name.

PHP Functions - Adding parameters

Our first function (writeMyName()) is a very simple function. It only writes a static string.

To add more functionality to a function, we can add parameters. A parameter is just like a variable.

You may have noticed the parentheses after the function name, like: writeMyName(). The parameters are specified inside the parentheses.

Example 1

The following example will write different first names, but the same last name:

<html>

<body>

<?php

function writeMyName($fname)

{

echo $fname . " Refsnes.<br />";

}

echo "My name is ";

writeMyName("Kai Jim");

echo "My name is ";

writeMyName("Hege");

echo "My name is ";

writeMyName("Stale");

?>

</body>

</html>

The output of the code above will be:

My name is Kai Jim Refsnes.

My name is Hege Refsnes.

My name is Stale Refsnes.

Example 2

The following function has two parameters:

<html>

<body>

<?php

function writeMyName($fname,$punctuation)

{

echo $fname . " Refsnes" . $punctuation . "<br />";

}

echo "My name is ";

writeMyName("Kai Jim",".");

echo "My name is ";

writeMyName("Hege","!");

echo "My name is ";

writeMyName("Ståle","...");

?>

</body>

</html>

The output of the code above will be:

My name is Kai Jim Refsnes.

My name is Hege Refsnes!

My name is Ståle Refsnes...

PHP Functions - Return values

Functions can also be used to return values.

Example

<html>

<body>

<?php

function add($x,$y)

{

$total = $x + $y;

return $total;

}

echo "1 + 16 = " . add(1,16)

?>

</body>

</html>

The output of the code above will be:

1 + 16 = 17


PHP fwrite() Function

Definition and Usage

The fwrite() writes to an open file.

The function will stop at the end of the file or when it reaches the specified length, whichever comes first.

This function returns the number of bytes written, or FALSE on failure.

Syntax

fwrite(file,string,length)

Parameter | Description
file | Required. Specifies the open file to write to
string | Required. Specifies the string to write to the open file
length | Optional. Specifies the maximum number of bytes to write

Tips and Notes

Tip: This function is binary-safe (meaning that both binary data, like images, and character data can be written with this function).

Example

<?php

$file = fopen("test.txt","w");

echo fwrite($file,"Hello World. Testing!");

fclose($file);

?>

The output of the code above will be:

21


PHP $_GET

The $_GET variable is used to collect values from a form with method="get".

The $_GET Variable

The $_GET variable is an array of variable names and values sent by the HTTP GET method.

The $_GET variable is used to collect values from a form with method="get". Information sent from a form with the GET method is visible to everyone (it will be displayed in the browser's address bar) and it has limits on the amount of information to send (max. 100 characters).

Example

<form action="welcome.php" method="get">

Name: <input type="text" name="name" />

Age: <input type="text" name="age" />

<input type="submit" />

</form>

When the user clicks the "Submit" button, the URL sent could look something like this:

http://www.w3schools.com/welcome.php?name=Peter&age=37

The "welcome.php" file can now use the $_GET variable to catch the form data (notice that the names of the form fields will automatically be the ID keys in the $_GET array):

Welcome <?php echo $_GET["name"]; ?>.<br />

You are <?php echo $_GET["age"]; ?> years old!

Why use $_GET?

Note: When using the $_GET variable all variable names and values are displayed in the URL. So this method should not be used when sending passwords or other sensitive information! However, because the variables are displayed in the URL, it is possible to bookmark the page. This can be useful in some cases.

Note: The HTTP GET method is not suitable on large variable values; the value cannot exceed 100 characters.

The $_REQUEST Variable

The PHP $_REQUEST variable contains the contents of both $_GET, $_POST, and $_COOKIE.

The PHP $_REQUEST variable can be used to get the result from form data sent with both the GET and POST methods.

Example

Welcome <?php echo $_REQUEST["name"]; ?>.<br />

You are <?php echo $_REQUEST["age"]; ?> years old!


PHP get_browser() Function

Definition and Usage

The get_browser() function looks up the user's browscap.ini file and returns the capabilities of the user's browser.

This function returns an object or an array with information about the user's browser on success, or FALSE on failure.

Syntax

get_browser(user_agent,return_array)

Parameter | Description
user_agent | Optional. Specifies the name of an HTTP user agent. Default is the value of $HTTP_USER_AGENT. You can bypass this parameter with NULL
return_array | Optional. If this parameter is set to TRUE, the function will return an array instead of an object

Example

<?php

echo $_SERVER['HTTP_USER_AGENT'] . "<br /><br />";

$browser = get_browser(null,true);

print_r($browser);

?>

The output of the code above could be something like this:

Mozilla/4.0

(compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)

Array

(

[browser_name_regex] => ^mozilla/.\.0

(compatible; msie 6\.0.*;.*windows nt 5\.1.*\.net clr.*).*$

[browser_name_pattern] => Mozilla/?.0

(compatible; MSIE 6.0*;*Windows NT 5.1*.NET CLR*)*

[parent] => IE 6.0

[platform] => WinXP

[netclr] => 1

[browser] => IE

[version] => 6.0

[majorver] => 6

[minorver] => 0

[css] => 2

[frames] => 1

[iframes] => 1

[tables] => 1

[cookies] => 1

[backgroundsounds] => 1

[vbscript] => 1

[javascript] => 1

[javaapplets] => 1

[activexcontrols] => 1

[cdf] => 1

[aol] =>

[beta] =>

[win16] =>

[crawler] =>

[stripper] =>

[wap] =>

[ak] =>

[sk] =>

)


PHP get_html_translation_table() Function

Definition and Usage

The get_html_translation_table() function returns the translation table used by the htmlentities() and htmlspecialchars() functions.

Syntax

get_html_translation_table(function,quotestyle)

Parameter

Description

function

Optional. Specifies which translation table to return. Default is HTML_SPECIALCHARS.

Possible values:

· HTML_ENTITIES - Translates all characters that need URL-encoding to be shown properly on a HTML page
· HTML_SPECIALCHARS - Translates some characters that need URL-encoding to be shown properly on a HTML page

quotestyle

Optional. Defines how to encode single and double quotes. Default is ENT_COMPAT

Possible values:

· ENT_COMPAT - Encodes double quotes, not single quotes
· ENT_QUOTES - Encodes double and single quotes
· ENT_NOQUOTES - Does not encode single or double quotes

Tips and Notes

Tip: Some characters can be encoded several ways. The get_html_translation_table() function returns the most common encoding.

Example

In this example we will show both translation tables.:

<?php

print_r (get_html_translation_table());

echo "<br />";

print_r (get_html_translation_table(HTML_ENTITIES));

?>

The output of the code above will be:

Array

(

["] => " [<] => < [>] => > [&] => &

)

Array

(

[ ] => [¡] => ¡ [¢] => ¢ [£] => £

[¤] => ¤ [¥] => ¥ [¦] => ¦ [§] => §

[¨] => ¨ [©] => © [ª] => ª [«] => «

[¬] => ¬ [] => [®] => ® [¯] => ¯

[°] => ° [±] => ± [²] => ² [³] => ³

[´] => ´ [µ] => µ [¶] => ¶ [·] => ·

[¸] => ¸ [¹] => ¹ [º] => º [»] => »

[¼] => ¼ [½] => ½ [¾] => ¾ [¿] => ¿

[À] => À [Á] => Á [Â] => Â [Ã] => Ã

[Ä] => Ä [Å] => Å [Æ] => Æ [Ç] => Ç

[È] => È [É] => É [Ê] => Ê [Ë] => Ë

[Ì] => Ì [Í] => Í [Î] => Î [Ï] => Ï

[Ð] => Ð [Ñ] => Ñ [Ò] => Ò [Ó] => Ó

[Ô] => Ô [Õ] => Õ [Ö] => Ö [×] => ×

[Ø] => Ø [Ù] => Ù [Ú] => Ú [Û] => Û

[Ü] => Ü [Ý] => Ý [Þ] => Þ [ß] => ß

[à] => à [á] => á [â] => â [ã] => ã

[ä] => ä [å] => å [æ] => æ [ç] => ç

[è] => è [é] => é [ê] => ê [ë] => ë

[ì] => ì [í] => í [î] => î [ï] => ï

[ð] => ð [ñ] => ñ [ò] => ò [ó] => ó

[ô] => ô [õ] => õ [ö] => ö [÷] => ÷

[ø] => ø [ù] => ù [ú] => ú [û] => û

[ü] => ü [ý] => ý [þ] => þ [ÿ] => ÿ

["] => " [<] => < [>] => > [&] => &

)


PHP getcwd() Function

Definition and Usage

The getcwd() function returns the current directory.

This function returns the current directory on success and FALSE on failure.

Syntax

getcwd()

Example

<?php

echo getcwd();

?>

The output of the code above could be:

C:\testweb\main


PHP getdate() function

Definition and Usage

The getdate() function returns an array that contains date and time information for a Unix timestamp.

The returning array contains ten elements with relevant information needed when formatting a date string:

· [seconds] - seconds
· [minutes] - minutes
· [hours] - hours
· [mday] - day of the month
· [wday] - day of the week
· [year] - year
· [yday] - day of the year
· [weekday] - name of the weekday
· [month] - name of the month

Syntax

getdate(timestamp)

Parameter | Description
timestamp | Optional. Specifies the time in Unix time format

Example 1

<?php

print_r(getdate())

?>

The output of the code above could be:

Array

(

[seconds] => 45

[minutes] => 52

[hours] => 14

[mday] => 24

[wday] => 2

[mon] => 1

[year] => 2006

[yday] => 23

[weekday] => Tuesday

[month] => January

[0] => 1138110765

)

Example 2

<?php

$my_t=getdate(date("U"));

print("$my_t[weekday], $my_t[month] $my_t[mday], $my_t[year]");

?>

The output of the code above could be:

Wednesday, January 25, 2006


PHP getDocNamespaces() Function

Definition and Usage

The getDocNamespaces() function gets the namespaces declared in an XML document from a SimpleXMLElement object.

This function returns an array of the namespaces in an XML document on success, or FALSE on failure.

Syntax

class SimpleXMLElement

{

string getDocNamespaces(recursive)

}

Parameter | Description
recursive | Optional. Specifies if all namespaces in parent and child nodes should be returned. Default is FALSE

Example

XML File

<?xml version="1.0" encoding="ISO-8859-1"?>

<note xmlns:b="http://www.w3schools.com/example/">

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<b:body>Don't forget me this weekend!</b:body>

</note>

PHP Code

<?php

if (file_exists('test.xml'))

{

$xml = simplexml_load_file('test.xml');

}

print_r($xml->getDocNamespaces());

?>

The output of the code above will be:

Array

(

[b] => http://www.w3schools.com/example/

)


PHP getName() Function

Definition and Usage

The getName() function gets the name of an XML element from a SimpleXMLElement object.

This function returns the name of the current XML element on success, or FALSE on failure.

Syntax

class SimpleXMLElement

{

string getName()

}

Example

XML File

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

PHP Code

<?php

if (file_exists('test.xml'))

{

$xml = simplexml_load_file('test.xml');

}

echo $xml->getName() . "<br />";

foreach($xml->children() as $child)

{

echo $child->getName() . "<br />";

}

?>

The output of the code above will be:

note

to

from

heading

body


PHP getNamespaces() Function

PHP getNamespace() Function

Definition and Usage

The getNamespace() function gets the namespaces used in an XML document from a SimpleXMLElement object.

This function returns an array of the namespaces in an XML document on success, or FALSE on failure.

Syntax

class SimpleXMLElement

{

string getNamespace(recursive)

}

Parameter | Description
recursive | Optional. Specifies if all namespaces in parent and child nodes should be returned. Default is FALSE

Example

XML File

<?xml version="1.0" encoding="ISO-8859-1"?>

<note xmlns:b="http://www.w3schools.com/example/">

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<b:body>Don't forget me this weekend!</b:body>

</note>

PHP Code

<?php

if (file_exists('test.xml'))

{

$xml = simplexml_load_file('test.xml');

}

print_r($xml->getNamespaces());

?>

The output of the code above will be:

Array

(

[b] => http://www.w3schools.com/example/

)


PHP getrandmax() function

Definition and Usage

The getrandmax() function returns the maximum random number that can be returned by a call to the rand() function.

Syntax

getrandmax()

Example

<?php

echo(getrandmax());

?>

The output of the code above could be:

32767


PHP gettimeofday() function

Definition and Usage

The gettimeofday() function returns an array that contains current time information.

The meaning of the returning array keys:

· [sec] - seconds since the Unix Epoch
· [usec] - microseconds
· [minuteswest] - minutes west of Greenwich
· [dsttime] - type of dst correction

Syntax

gettimeofday(return_float)

Parameter | Description
return_float | Optional. Makes gettimeofday() return a float when it is set to true.

Example 1

<?php

echo(gettimeofday(true) . "<br /><br />");

print_r(gettimeofday());

?>

The output of the code above could be:

1138111447.4

Array

(

[sec] => 1138111447

[usec] => 395863

[minuteswest] => -60

[dsttime] => 0

)

Example 2

<?php

$my_t=gettimeofday();

print("$my_t[sec].$my_t[usec]");

?>

The output of the code above could be:

1138197006.988273


PHP glob() Function

Definition and Usage

The glob() function returns an array of filenames or directories matching a specified pattern.

This function returns an array of files/directories, or FALSE on failure.

Syntax

glob(pattern,flags)

Parameter

Description

pattern

Required. Specifies the pattern to search for

flags

Optional. Specifies special settings.

Possible values:

· GLOB_MARK - Adds a slash to each item returned
· GLOB_NOSORT - Return files as they appear in the directory (unsorted)
· GLOB_NOCHECK - Returns the search pattern if no match were found
· GLOB_NOESCAPE - Backslashes do not quote metacharacters
· GLOB_BRACE - Expands {a,b,c} to match 'a', 'b', or 'c'
· GLOB_ONLYDIR - Return only directories which match the pattern
· GLOB_ERR - (added in PHP 5.1) Stop on errors (errors are ignored by default)

Example 1

<?php

print_r(glob("*.txt"));

?>

The output of the code above could be:

Array

(

[0] => target.txt

[1] => source.txt

[2] => test.txt

[3] => test2.txt

)

Example 2

<?php

print_r(glob("*.*"));

?>

The output of the code above could be:

Array

(

[0] => contacts.csv

[1] => default.php

[2] => target.txt

[3] => source.txt

[4] => tem1.tmp

[5] => test.htm

[6] => test.ini

[7] => test.php

[8] => test.txt

[9] => test2.txt

)


PHP gmdate() function

Definition and Usage

The gmdate() function formats a GMT/UTC date/time.

Syntax

gmdate(format,timestamp)

Parameter

Description

format

Required. Specifies how to return the result:

· d - The day of the month (from 01 to 31)
· D - A textual representation of a day (three letters)
· j - The day of the month without leading zeros (1 to 31)
· l (lowercase 'L') - A full textual representation of a day
· N - The ISO-8601 numeric representation of a day (1 for Monday through 7 for Sunday)
· S - The English ordinal suffix for the day of the month (2 characters st, nd, rd or th. Works well with j)
· w - A numeric representation of the day (0 for Sunday through 6 for Saturday)
· z - The day of the year (from 0 through 365)
· W - The ISO-8601 week number of year (weeks starting on Monday)
· F - A full textual representation of a month (January through December)
· m - A numeric representation of a month (from 01 to 12)
· M - A short textual representation of a month (three letters)
· n - A numeric representation of a month, without leading zeros (1 to 12)
· t - The number of days in the given month
· L - Whether it's a leap year (1 if it is a leap year, 0 otherwise)
· o - The ISO-8601 year number
· Y - A four digit representation of a year
· y - A two digit representation of a year
· a - Lowercase am or pm
· A - Uppercase AM or PM
· B - Swatch Internet time (000 to 999)
· g - 12-hour format of an hour (1 to 12)
· G - 24-hour format of an hour (0 to 23)
· h - 12-hour format of an hour (01 to 12)
· H - 24-hour format of an hour (00 to 23)
· i - Minutes with leading zeros (00 to 59)
· s - Seconds, with leading zeros (00 to 59)
· e - The timezone identifier (Examples: UTC, Atlantic/Azores)
· I (capital i) - Whether the date is in daylights savings time (1 if Daylight Savings Time, 0 otherwise)
· O - Difference to Greenwich time (GMT) in hours (Example: +0100)
· T - Timezone setting of the PHP machine (Examples: EST, MDT)
· Z - Returns 0
· c - The ISO-8601 date (e.g. 2004-02-12T15:19:21+00:00)
· r - The RFC 2822 formatted date (e.g. Thu, 21 Dec 2000 16:01:07 +0200)
· U - The seconds since the Unix Epoch (January 1 1970 00:00:00 GMT)

timestamp

Optional.

Example

<?php

echo("Result with date():<br />");

echo(date("l") . "<br />");

echo(date("l dS \of F Y h:i:s A") . "<br />");

echo("Oct 3,1975 was on a ".date("l", mktime(0,0,0,10,3,1975))."<br />");

echo(date(DATE_RFC822) . "<br />");

echo(date(DATE_ATOM,mktime(0,0,0,10,3,1975)) . "<br /><br />");

echo("Result with gmdate():<br />");

echo(gmdate("l") . "<br />");

echo(gmdate("l dS \of F Y h:i:s A") . "<br />");

echo("Oct 3,1975 was on a ".gmdate("l", mktime(0,0,0,10,3,1975))."<br />");

echo(gmdate(DATE_RFC822) . "<br />");

echo(gmdate(DATE_ATOM,mktime(0,0,0,10,3,1975)) . "<br />");

?>

The output of the code above could be something like this:

Result with date():

Tuesday

Tuesday 24th of January 2006 02:41:22 PM

Oct 3,1975 was on a Friday

Tue, 24 Jan 2006 14:41:22 CET

1975-10-03T00:00:00+0100

Result with gmdate():

Tuesday

Tuesday 24th of January 2006 01:41:22 PM

Oct 3,1975 was on a Thursday

Tue, 24 Jan 2006 13:41:22 GMT

1975-10-02T23:00:00+0000


PHP gmmktime() function

Definition and Usage

The gmmktime() function returns a Unix timestamp for a GMT date.

Syntax

gmmktime(hour,minute,second,month,day,year,is_dst)

Parameter | Description
hour | Optional. Specifies the hour
minute | Optional. Specifies the minute
second | Optional. Specifies the second
month | Optional. Specifies the numerical month
day | Optional. Specifies the day
year | Optional. Specifies the year. The valid range for year is on some systems between 1901 and 2038. However this limitation is overcome in PHP 5
is_dst | Optional. Set this parameter to 1 if the time is during daylight savings time (DST), 0 if it is not, or -1 (the default) if it is unknown. If it's unknown, PHP tries to find out itself (which may cause unexpected results). Note: This parameter became deprecated in PHP 5. The new timezone handling features should be used instead

Tips and Notes

Tip: This function is identical to mktime() except the passed parameters represents a GMT date.

Example

<?php

$my_birthday = gmmktime(0,0,0,10,3,1975);

print($my_birthday . "<br />");

print(date("M-d-Y",$my_birthday));

?>

The output of the code above would be:

181526400

Oct-03-1975


PHP gmstrftime() function

Definition and Usage

The gmstrftime() function formats a GMT/UTC time or date according to locale settings.

Syntax

gmstrftime(format,timestamp)

Parameter

Description

format

Required. Specifies how to return the result:

· %a - abbreviated weekday name
· %A - full weekday name
· %b - abbreviated month name
· %B - full month name
· %c - preferred date and time representation
· %C - century number (the year divided by 100, range 00 to 99)
· %d - day of the month (01 to 31)
· %D - same as %m/%d/%y
· %e - day of the month (1 to 31)
· %g - like %G, but without the century
· %G - 4-digit year corresponding to the ISO week number (see %V).
· %h - same as %b
· %H - hour, using a 24-hour clock (00 to 23)
· %I - hour, using a 12-hour clock (01 to 12)
· %j - day of the year (001 to 366)
· %m - month (01 to 12)
· %M - minute
· %n - newline character
· %p - either am or pm according to the given time value
· %r - time in a.m. and p.m. notation
· %R - time in 24 hour notation
· %S - second
· %t - tab character
· %T - current time, equal to %H:%M:%S
· %u - weekday as a number (1 to 7), Monday=1. Warning: In Sun Solaris Sunday=1
· %U - week number of the current year, starting with the first Sunday as the first day of the first week
· %V - The ISO 8601 week number of the current year (01 to 53), where week 1 is the first week that has at least 4 days in the current year, and with Monday as the first day of the week
· %W - week number of the current year, starting with the first Monday as the first day of the first week
· %w - day of the week as a decimal, Sunday=0
· %x - preferred date representation without the time
· %X - preferred time representation without the date
· %y - year without a century (range 00 to 99)
· %Y - year including the century
· %Z or %z - time zone or name or abbreviation
· %% - a literal % character

timestamp

Optional. Specifies the date or time to be formatted. If no timestamp is specified, it uses the current GMT time.

Tips and Notes

Tip: This function is identical to strftime() except that the time returned is Greenwich Mean Time (GMT).

Example

Example of both strftime() and gmstrftime():

<?php

echo(strftime("%b %d %Y %X", mktime(20,0,0,12,31,98))."<br />");

echo(gmstrftime("%b %d %Y %X", mktime(20,0,0,12,31,98))."<br />");

//Print the current date, time, and time zone.

echo(gmstrftime("It is %a on %b %d, %Y, %X time zone: %Z",time()));

?>

The output of the code above could be:

Dec 31 1998 20:00:00

Dec 31 1998 19:00:00

It is Wed on Jan 25, 2006, 11:32:10 time zone: W. Europe Standard Time


PHP GregorianToJD() function

Definition and Usage

The GregorianToJD() function converts a date from the Gregorian calendar to Julian day count.

Syntax

gregoriantojd(month,day,year)

Parameter | Description
month | Required. Specifies the month
day | Required. Specifies the day
year | Required. Specifies the year. Valid range is from 4714 B.C. to 9999 A.D.

Tips and Notes

Note: Although this function can handle dates back to 4714 B.C., you should notice that the Gregorian calendar was not instituted until 1582, and some countries did not accept it until much later (Britain converted in 1752, USSR in 1918, and Greece in 1923). Most European countries used the Julian calendar prior to the Gregorian.

Example

<?php

$jd = gregoriantojd(10,3,1975);

echo($jd . "<br />");

$gregorian = jdtogregorian($jd);

echo($gregorian);

?>

The output of the code above will be:

2442689

10/3/1975


PHP header() Function

Definition and Usage

The header() function sends a raw HTTP header to a client.

It is important to notice that header() must be called before any actual output is sent (In PHP 4 and later, you can use output buffering to solve this problem):

<html>

<?php

// This results in an error.

// The output above is before the header() call

header('Location: http://www.example.com/');

?>

Syntax

header(string,replace,http_response_code)

Parameter | Description
string | Required. Specifies the header string to send
replace | Optional. Indicates whether the header should replace previous or add a second header. Default is TRUE (will replace). FALSE (allows multiple headers of the same type)
http_response_code | Optional. Forces the HTTP response code to the specified value (available in PHP 4.3 and higher)

Tips and Notes

Note: Since PHP 4.4 this function prevents more than one header to be sent at once. This is a protection against header injection attacks.

Example 1

Prevent page caching:

<?php

// Date in the past

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

header("Cache-Control: no-cache");

header("Pragma: no-cache");

?>

<html>

<body>

...

...

Note: There are options that users may set to change the browser's default caching settings. By sending the headers above, you should override any of those settings and force the browser to not cache!

Example 2

Let the user be prompted to save a generated PDF file (Content-Disposition header is used to supply a recommended filename and force the browser to display the save dialog box):

<?php

header("Content-type:application/pdf");

// It will be called downloaded.pdf

header("Content-Disposition:attachment;filename='downloaded.pdf'");

// The PDF source is in original.pdf

readfile("original.pdf");

?>

<html>

<body>

...

...

Note: There is a bug in Microsoft IE 5.5 that prevents this from working. The bug can be resolved by upgrading to Service Pack 2 or later.


PHP headers_list() Function

Definition and Usage

The headers_list() function returns a list of response headers sent (or ready to send) to a client.

This function returns an array of headers.

Syntax

headers_list()

Tips and Notes

Tip: To determine whether or not the headers have been sent yet, use the headers_sent() function.

Example 1

<?php

setcookie("TestCookie","SomeValue"');

header("X-Sample-Test: foo");

header('Content-type: text/plain');

?>

<html>

<body>

<?php

// What headers are to be sent?

var_dump(headers_list());

?>

</body>

</html>

The output of the code above will be:

array(4)

{

[0]=> string(23) "X-Powered-By: PHP/5.1.1"

[1]=> string(19) "Set-Cookie: TestCookie=SomeValue"

[2]=> string(18) "X-Sample-Test: foo"

[3]=> string(24) "Content-type: text/plain"

}


PHP headers_sent() Function

Definition and Usage

The headers_sent() function checks if / where the HTTP headers have been sent.

This function returns TRUE if headers has been sent or FALSE if not.

Syntax

headers_sent(file,line)

Parameter | Description
file,line | Optional. If the file and line parameters are set, headers_sent() will put the PHP source file name and line number where output started in the file and line variables

Tips and Notes

Note: You can't add more header lines using header() once the header block has already been sent.

Note: The optional file and line parameters where added in PHP 4.3.

Example 1

<?php

// If no headers are sent, send one

if (!headers_sent())

{

header("Location: http://www.w3schools.com/");

exit;

}

?>

<html>

<body>

...

...

Example 2

Using the optional file and line parameters:

<?php

// $file and $line are passed in for later use

// Do not assign them values beforehand

if (!headers_sent($file, $line))

{

header("Location: http://www.w3schools.com/");

exit;

// Trigger an error here

}

else

{

echo "Headers sent in $file on line $line";

exit;

}

?>

<html>

<body>

...

...


PHP hebrev() Function

Definition and Usage

The hebrev() function converts Hebrew text from a right-to-left flow to a left-to-right flow.

Only ASCII characters between 224 and 251, and punctuation characters will be affected.

Syntax

hebrev(string,maxcharline)

Parameter | Description
string | Required. A Hebrew text
maxcharline | Optional. Specifies maximum characters for each line. hebrev() will avoid breaking words if possible

Tips and Notes

Tip: hebrev() and hebrevc() can convert Hebrew logical text (the Windows encoding) to Hebrew visual text. Hebrew visual requires no special right-to-left character support to be displayed properly, making it very useful for displaying Hebrew text on the web.

Example

<?php

echo hebrev("á çùåï äúùñâ");

?>

The output of the code above will be:

âñùúä ïåùç á


PHP hebrevc() Function

Definition and Usage

The hebrevc() function converts Hebrew text from a right-to-left flow to a left-to-right flow. It also converts new lines (\n) into <br />.

Only ASCII characters between 224 and 251, and punctuation characters will be affected.

Syntax

hebrevc(string,maxcharline)

Parameter | Description
string | Required. A Hebrew text
maxcharline | Optional. Specifies maximum characters for each line. hebrev() will avoid breaking words if possible

Tips and Notes

Tip: hebrev() and hebrevc() can convert Hebrew logical text (the Windows encoding) to Hebrew visual text. Hebrew visual requires no special right-to-left character support to be displayed properly, making it very useful for displaying Hebrew text on the web.

Example

<?php

echo hebrevc("á çùåï äúùñâ\ná çùåï äúùñâ");

?>

The output of the code above will be:

âñùúä ïåùç á

âñùúä ïåùç á


PHP hexdec() function

Definition and Usage

The hexdec() function converts a hexadecimal number to a decimal number.

Syntax

hexdec(hex_number)

Parameter | Description
hex_number | Required. Specifies the hexadecimal number to convert

Example

<?php

echo hexdec("1e") . "<br />";

echo hexdec("a") . "<br />";

echo hexdec("11ff") . "<br />";

echo hexdec("cceeff");

?>

The output of the code above will be:

30

10

4607

13430527


PHP highlight_file() Function

Definition and Usage

The highlight_file() function outputs a file with the PHP syntax highlighted. The syntax is highlighted by using HTML tags.

The colors used for highlighting can be set in the php.ini file or with the ini_set() function.

This function returns TRUE on success, or FALSE on failure.

Syntax

highlight_file(filename,return)

Parameter | Description
filename | Required. Specifies the file to display
return | Optional. If this parameter is set to TRUE, this function will return the highlighted code as a string, instead of printing it out. Default is FALSE

Tips and Notes

Note: When using this function, the entire file will be displayed - including passwords and any other sensitive information!

Example

"test.php":

<html>

<body>

<?php

highlight_file("test.php");

?>

</body>

</html>

The output of the code above could be:

<html>

<body>

<?php

highlight_file("test.php");

?>

</body>

</html>

and, if you select "View source" in the browser window, it will look something like this:

<html>

<body>

<code>

<span style="color: #000000">&lt;html&gt;

<br />

&lt;body&gt;

<br />

<span style="color: #0000BB">&lt;?php

<br />highlight_file</span>

<span style="color: #007700">(</span>

<span style="color: #DD0000">"test.php"</span>

<span style="color: #007700">);<br /></span>

<span style="color: #0000BB">?&gt;<br /></span>

&lt;/body&gt;

<br />

&lt;/html&gt;</span>

</code>

</body>

</html>


PHP highlight_string() Function

Definition and Usage

The highlight_string() function outputs a string with the PHP syntax highlighted. The string is highlighted by using HTML tags.

The colors used for highlighting can be set in the php.ini file or with the ini_set() function.

This function returns TRUE on success, or FALSE on failure.

Syntax

highlight_string(string,return)

Parameter | Description
string | Required. Specifies the string to highlight
return | Optional. If this parameter is set to TRUE, this function will return the highlighted code as a string, instead of printing it out. Default is FALSE

Example

<html>

<body>

<?php

highlight_string("Hello world! <?php phpinfo(); ?>");

?>

</body>

</html>

The output of the could above could be:

Hello world! <?php phpinfo(); ?>

and, if you select "View source" in the browser window, it will look something like this:

<html>

<body>

<code>

<span style="color: #000000">Hello&nbsp;world!&nbsp;

<span style="color: #0000BB">&lt;?php&nbsp;phpinfo</span>

<span style="color: #007700">();&nbsp;</span>

<span style="color: #0000BB">?&gt;</span>

</span>

</code>

</body>

</html>


PHP html_entity_decode() Function

Definition and Usage

The html_entity_decode() function converts HTML entities to characters.

The html_entity_decode() function is the opposite of htmlentities().

Syntax

html_entity_decode(string,quotestyle,character-set)

Parameter

Description

string

Required. Specifies the string to decode

quotestyle

Optional. Specifies how to decode single and double quotes.

The available quote styles are:

· ENT_COMPAT - Default. Decodes only double quotes
· ENT_QUOTES - Decodes double and single quotes
· ENT_NOQUOTES - Does not decode any quotes

character-set

Optional. A string that specifies which character-set to use.

Allowed values are:

· ISO-8859-1 - Default. Western European
· ISO-8859-15 - Western European (adds the Euro sign + French and Finnish letters missing in ISO-8859-1)
· UTF-8 - ASCII compatible multi-byte 8-bit Unicode
· cp866 - DOS-specific Cyrillic charset
· cp1251 - Windows-specific Cyrillic charset
· cp1252 - Windows specific charset for Western European
· KOI8-R - Russian
· BIG5 - Traditional Chinese, mainly used in Taiwan
· GB2312 - Simplified Chinese, national standard character set
· BIG5-HKSCS - Big5 with Hong Kong extensions
· Shift_JIS - Japanese
· EUC-JP - Japanese

Tips and Notes

Note: Unrecognized character-sets will be ignored and replaced by ISO-8859-1.

Example 1

<?php

$str = "Jane &amp; &#039;Tarzan&#039;";

echo html_entity_decode($str);

echo "<br />";

echo html_entity_decode($str, ENT_QUOTES);

echo "<br />";

echo html_entity_decode($str, ENT_NOQUOTES);

?>

The browser output of the code above will be:

Jane & 'Tarzan'

Jane & 'Tarzan'

Jane & 'Tarzan'

If you select "View source" in the browser window, you will see the following HTML:

<html>

<body>

Jane & &#039;Tarzan&#039;<br />

Jane & 'Tarzan'<br />

Jane & &#039;Tarzan&#039;

</body>

</html>

Example 2

<html>

<body>

<?php

$str = "My name is &Oslash;yvind &Aring;sane. I&#039;m Norwegian";

echo html_entity_decode($str, ENT_QUOTES, "ISO-8859-1");

?>

</body>

</html>

The browser output of the code above will be:

My name is Øyvind Åsane. I'm Norwegian

If you select "View source" in the browser window, you will see the following HTML:

<html>

<body>

My name is Øyvind Åsane. I'm Norwegian

</body>

</html>


PHP htmlentities() Function

Definition and Usage

The htmlentities() function converts characters to HTML entities.

Syntax

htmlentities(string,quotestyle,character-set)

Parameter

Description

string

Required. Specifies the string to convert

quotestyle

Optional. Specifies how to encode single and double quotes.

The available quote styles are:

· ENT_COMPAT - Default. Encodes only double quotes
· ENT_QUOTES - Encodes double and single quotes
· ENT_NOQUOTES - Does not encode any quotes

character-set

Optional. A string that specifies which character-set to use.

Allowed values are:

· ISO-8859-1 - Default. Western European
· ISO-8859-15 - Western European (adds the Euro sign + French and Finnish letters missing in ISO-8859-1)
· UTF-8 - ASCII compatible multi-byte 8-bit Unicode
· cp866 - DOS-specific Cyrillic charset
· cp1251 - Windows-specific Cyrillic charset
· cp1252 - Windows specific charset for Western European
· KOI8-R - Russian
· BIG5 - Traditional Chinese, mainly used in Taiwan
· GB2312 - Simplified Chinese, national standard character set
· BIG5-HKSCS - Big5 with Hong Kong extensions
· Shift_JIS - Japanese
· EUC-JP - Japanese

Tips and Notes

Note: Unrecognized character-sets will be ignored and replaced by ISO-8859-1.

Example 1

<html>

<body>

<?php

$str = "Jane & 'Tarzan'";

echo htmlentities($str, ENT_COMPAT);

echo "<br />";

echo htmlentities($str, ENT_QUOTES);

echo "<br />";

echo htmlentities($str, ENT_NOQUOTES);

?>

</body>

</html>

The browser output of the code above will be:

Jane & 'Tarzan'

Jane & 'Tarzan'

Jane & 'Tarzan'

If you select "View source" in the browser window, you will see the following HTML:

<html>

<body>

Jane &amp; 'Tarzan'<br />

Jane &amp; &#039;Tarzan&#039;<br />

Jane &amp; 'Tarzan'

</body>

</html>

Example 2

<html>

<body>

<?php

$str = "My name is Øyvind Åsane. I'm Norwegian";

echo htmlentities($str, ENT_COMPAT, "ISO-8859-1");

?>

</body>

</html>

The browser output of the code above will be:

My name is Øyvind Åsane. I'm Norwegian

If you select "View source" in the browser window, you will see the following HTML:

<html>

<body>

My name is &Oslash;yvind &Aring;sane. I'm Norwegian

</body>

</html>


PHP htmlspecialchars() Function

Definition and Usage

The htmlspecialchars() function converts some predefined characters to HTML entities.

The predefined characters are:

· & (ampersand) becomes &amp;
· " (double quote) becomes &quot;
· ' (single quote) becomes &#039;
· < (less than) becomes &lt;
· > (greater than) becomes &gt;

Syntax

htmlspecialchars(string,quotestyle,character-set)

Parameter

Description

string

Required. Specifies the string to convert

quotestyle

Optional. Specifies how to encode single and double quotes.

The available quote styles are:

· ENT_COMPAT - Default. Encodes only double quotes
· ENT_QUOTES - Encodes double and single quotes
· ENT_NOQUOTES - Does not encode any quotes

character-set

Optional. A string that specifies which character-set to use.

Allowed values are:

· ISO-8859-1 - Default. Western European
· ISO-8859-15 - Western European (adds the Euro sign + French and Finnish letters missing in ISO-8859-1)
· UTF-8 - ASCII compatible multi-byte 8-bit Unicode
· cp866 - DOS-specific Cyrillic charset
· cp1251 - Windows-specific Cyrillic charset
· cp1252 - Windows specific charset for Western European
· KOI8-R - Russian
· BIG5 - Traditional Chinese, mainly used in Taiwan
· GB2312 - Simplified Chinese, national standard character set
· BIG5-HKSCS - Big5 with Hong Kong extensions
· Shift_JIS - Japanese
· EUC-JP - Japanese

Tips and Notes

Note: Unrecognized character-sets will be ignored and replaced by ISO-8859-1.

Example 1

<html>

<body>

<?php

$str = "Jane & 'Tarzan'";

echo htmlspecialchars($str, ENT_COMPAT);

echo "<br />";

echo htmlspecialchars($str, ENT_QUOTES);

echo "<br />";

echo htmlspecialchars($str, ENT_NOQUOTES);

?>

</body>

</html>

The browser output of the code above will be:

Jane & 'Tarzan'

Jane & 'Tarzan'

Jane & 'Tarzan'

If you select "View source" in the browser window, you will see the following HTML:

<html>

<body>

Jane &amp; 'Tarzan'<br />

Jane &amp; &#039;Tarzan&#039;<br />

Jane &amp; 'Tarzan'

</body>

</html>


PHP htmlspecialchars_decode() Function

Definition and Usage

The htmlspecialchars_decode() function converts some predefined HTML entities to characters.

HTML entities that will be decoded are:

· &amp; becomes & (ampersand)
· &quot; becomes " (double quote)
· &#039; becomes ' (single quote)
· &lt; becomes < (less than)
· &gt; becomes > (greater than)

The htmlspecialchars_decode() function is the opposite of htmlspecialchars().

Syntax

htmlspecialchars_decode(string,quotestyle)

Parameter

Description

string

Required. Specifies the string to decode

quotestyle

Optional. Specifies how to decode single and double quotes.

The available quote styles are:

· ENT_COMPAT - Default. Decodes only double quotes
· ENT_QUOTES - Decodes double and single quotes
· ENT_NOQUOTES - Does not decode any quotes

Example 1

<?php

$str = "Jane &amp; &#039;Tarzan&#039;";

echo htmlspecialchars_decode($str);

echo "<br />";

echo htmlspecialchars_decode($str, ENT_QUOTES);

echo "<br />";

echo htmlspecialchars_decode($str, ENT_NOQUOTES);

?>

The browser output of the code above will be:

Jane & 'Tarzan'

Jane & 'Tarzan'

Jane & 'Tarzan'

If you select "View source" in the browser window, you will see the following HTML:

<html>

<body>

Jane & &#039;Tarzan&#039;<br />

Jane & 'Tarzan'<br />

Jane & &#039;Tarzan&#039;

</body>

</html>

Example 2

<html>

<body>

<?php

$str = "My name is &Oslash;yvind &Aring;sane. I&#039;m Norwegian";

echo htmlspecialchars_decode($str, ENT_QUOTES);

?>

</body>

</html>

The browser output of the code above will be:

My name is Øyvind Åsane. I'm Norwegian

If you select "View source" in the browser window, you will see the following HTML:

<html>

<body>

My name is &Oslash;yvind &Aring;sane. I'm Norwegian

</body>

</html>


PHP HTTP Functions

PHP HTTP Introduction

The HTTP functions let you manipulate information sent to the browser by the Web server, before any other output has been sent.

Installation

The directory functions are part of the PHP core. There is no installation needed to use these functions.

PHP HTTP Functions

PHP: indicates the earliest version of PHP that supports the function.

Function | Description | PHP
header() | Sends a raw HTTP header to a client | 3
headers_list() | Returns a list of response headers sent (or ready to send) | 5
 | Checks if / where the HTTP headers have been sent | 3
setcookie() | Sends an HTTP cookie to a client | 3
setrawcookie() | Sends an HTTP cookie without URL encoding the cookie value | 5

PHP HTTP Constants

None.


PHP hypot() function

Definition and Usage

The hypot() function returns the length of the hypotenuse of a right-angle triangle.

Syntax

hypot(x,y)

Parameter | Description
x | Required. Length of side x
y | Required. Length of side y

Tips and Notes

Tip: The hypotenuse of a right-angle triangle with sides of length x and y is equivalent to sqrt(x*x + y*y).

Example

<?php

echo hypot(2,3) . "<br />";

echo hypot(3,6) . "<br />";

echo hypot(3,6) . "<br />";

echo hypot(1,3);

?>

The output of the code above will be:

3.60555127546

6.7082039325

6.7082039325

3.16227766017


PHP idate() function

Definition and Usage

The idate() function formats a local time or date as integer.

Syntax

idate(format,timestamp)

Parameter

Description

format

Required. Specifies how to return the result:

· B - Swatch Beat/Internet Time
· d - Day of the month
· h - Hour (12 hour format)
· H - Hour (24 hour format)
· i - Minutes
· I - returns 1 if DST (daylight saving time) is activated, 0 otherwise
· L - returns 1 for leap year, 0 otherwise
· m - Month number
· s - Seconds
· t - Days in current month
· U - Seconds since the Unix Epoch (January 1 1970 00:00:00 GMT)
· w - Day of the week (Sunday=0)
· W - ISO-8601 week number of year (week starts on Monday)
· y - Year (1 or 2 digits)
· Y - Year (4 digits)
· z - Day of the year
· Z - Timezone offset in seconds

timestamp

Optional. Specifies the date or time to be formatted. If no timestamp is specified, it uses the current local time.

Tips and Notes

Note: This function accepts just one character in the format parameter!

Example

<?php

echo(idate("Y"));

?>

The output of the code above could be:

2006


PHP If...Else Statements

The if, elseif and else statements in PHP are used to perform different actions based on different conditions.

Conditional Statements

Very often when you write code, you want to perform different actions for different decisions.

You can use conditional statements in your code to do this.

· if...else statement - use this statement if you want to execute a set of code when a condition is true and another if the condition is not true
· elseif statement - is used with the if...else statement to execute a set of code if one of several condition are true

The If...Else Statement

If you want to execute some code if a condition is true and another code if a condition is false, use the if....else statement.

Syntax

if (condition)

code to be executed if condition is true;

else

code to be executed if condition is false;

Example

The following example will output "Have a nice weekend!" if the current day is Friday, otherwise it will output "Have a nice day!":

<html>

<body>

<?php

$d=date("D");

if ($d=="Fri")

echo "Have a nice weekend!";

else

echo "Have a nice day!";

?>

</body>

</html>

If more than one line should be executed if a condition is true/false, the lines should be enclosed within curly braces:

<html>

<body>

<?php

$d=date("D");

if ($d=="Fri")

{

echo "Hello!<br />";

echo "Have a nice weekend!";

echo "See you on Monday!";

}

?>

</body>

</html>

The ElseIf Statement

If you want to execute some code if one of several conditions are true use the elseif statement

Syntax

if (condition)

code to be executed if condition is true;

elseif (condition)

code to be executed if condition is true;

else

code to be executed if condition is false;

Example

The following example will output "Have a nice weekend!" if the current day is Friday, and "Have a nice Sunday!" if the current day is Sunday. Otherwise it will output "Have a nice day!":

<html>

<body>

<?php

$d=date("D");

if ($d=="Fri")

echo "Have a nice weekend!";

elseif ($d=="Sun")

echo "Have a nice Sunday!";

else

echo "Have a nice day!";

?>

</body>

</html>


PHP ignore_user_abort() Function

Definition and Usage

The ignore_user_abort() function sets whether a remote client can abort the running of a script.

This function returns the previous value of the user-abort setting.

Syntax

ignore_user_abort(setting)

Parameter | Description
setting | Optional. TRUE ignores user aborts in a script (the script will continue to run). This is FALSE by default, meaning that client aborts will cause the script to stop running

Tips and Notes

Tip: You can call this function without an argument, to return the current setting.

Example

<?php

ignore_user_abort();

?>

The output of the code above could be:

0


PHP implode() Function

Definition and Usage

The implode() function returns a string from the elements of an array.

Syntax

implode(separator,array)

Parameter | Description
separator | Optional. Specifies what to put between the array elements. Default is "" (an empty string)
array | Required. The array to join to a string

Tips and Notes

Note: The implode() function accept its parameters in either order. However, for consistency with explode(), you should use the documented order of arguments.

Note: The separator parameter of implode() is optional. However, it is recommended to always use two parameters for backwards compatibility.

Example

<?php

$arr = array('Hello','World!','Beautiful','Day!');

echo implode(" ",$arr);

?>

The output of the code above will be:

Hello World! Beautiful Day!


PHP in_array() Function

Definition and Usage

The in_array() function searches an array for a specific value.

This function returns TRUE if the value is found in the array, or FALSE otherwise.

Syntax

in_array(search,array,type)

Parameter | Description
search | Required. Specifies the what to search for
array | Required. Specifies the array to search
type | Optional. If this parameter is set, the in_array() function searches for the search-string and specific type in the array

Tips and Notes

Note: If the search parameter is a string and the type parameter is set to TRUE, the search is case-sensitive.

Example 1

<?php

$people = array("Peter", "Joe", "Glenn", "Cleveland");

if (in_array("Glenn",$people))

{

echo "Match found";

}

else

{

echo "Match not found";

}

?>

The output of the code above will be:

Match found

Example 2

<?php

$people = array("Peter", "Joe", "Glenn", "Cleveland", 23);

if (in_array("23",$people, TRUE))

{

echo "Match found<br />";

}

else

{

echo "Match not found<br />";

}

if (in_array("Glenn",$people, TRUE))

{

echo "Match found<br />";

}

else

{

echo "Match not found<br />";

}

if (in_array(23,$people, TRUE))

{

echo "Match found<br />";

}

else

{

echo "Match not found<br />";

}

?>

The output of the code above will be:

Match not found

Match found

Match not found


PHP Include File include() and require()

PHP Include File

Server Side Includes (SSI) are used to create functions, headers, footers, or elements that will be reused on multiple pages.

Server Side Includes

You can insert the content of a file into a PHP file before the server executes it, with the include() or require() function. The two functions are identical in every way, except how they handle errors. The include() function generates a warning (but the script will continue execution) while the require() function generates a fatal error (and the script execution will stop after the error).

These two functions are used to create functions, headers, footers, or elements that can be reused on multiple pages.

This can save the developer a considerable amount of time. This means that you can create a standard header or menu file that you want all your web pages to include. When the header needs to be updated, you can only update this one include file, or when you add a new page to your site, you can simply change the menu file (instead of updating the links on all web pages).

The include() Function

The include() function takes all the text in a specified file and copies it into the file that uses the include function.

Example 1

Assume that you have a standard header file, called "header.php". To include the header file in a page, use the include() function, like this:

<html>

<body>

<?php include("header.php"); ?>

<h1>Welcome to my home page</h1>

<p>Some text</p>

</body>

</html>

Example 2

Now, let's assume we have a standard menu file that should be used on all pages (include files usually have a ".php" extension). Look at the "menu.php" file below:

<html>

<body>

<a href="http://www.w3schools.com/default.php">Home</a> |

<a href="http://www.w3schools.com/about.php">About Us</a> |

<a href="http://www.w3schools.com/contact.php">Contact Us</a>

The three files, "default.php", "about.php", and "contact.php" should all include the "menu.php" file. Here is the code in "default.php":

<?php include("menu.php"); ?>

<h1>Welcome to my home page</h1>

<p>Some text</p>

</body>

</html>

If you look at the source code of the "default.php" in a browser, it will look something like this:

<html>

<body>

<a href="default.php">Home</a> |

<a href="about.php">About Us</a> |

<a href="contact.php">Contact Us</a>

<h1>Welcome to my home page</h1>

<p>Some text</p>

</body>

</html>

And, of course, we would have to do the same thing for "about.php" and "contact.php". By using include files, you simply have to update the text in the "menu.php" file if you decide to rename or change the order of the links or add another web page to the site.

The require() Function

The require() function is identical to include(), they only handle errors differently.

The include() function generates a warning (but the script will continue execution) while the require() function generates a fatal error (and the script execution will stop after the error).

If you include a file with the include() function and an error occurs, you might get an error message like the one below.

PHP code:

<html>

<body>

<?php

include("wrongFile.php");

echo "Hello World!";

?>

</body>

</html>

Error message:

Warning: include(wrongFile.php) [function.include]:

failed to open stream:

No such file or directory in C:\home\website\test.php on line 5

Warning: include() [function.include]:

Failed opening 'wrongFile.php' for inclusion

(include_path='.;C:\php5\pear')

in C:\home\website\test.php on line 5

Hello World!

Notice that the echo statement is still executed! This is because a Warning does not stop the script execution.

Now, let's run the same example with the require() function.

PHP code:

<html>

<body>

<?php

require("wrongFile.php");

echo "Hello World!";

?>

</body>

</html>

Error message:

Warning: require(wrongFile.php) [function.require]:

failed to open stream:

No such file or directory in C:\home\website\test.php on line 5

Fatal error: require() [function.require]:

Failed opening required 'wrongFile.php'

(include_path='.;C:\php5\pear')

in C:\home\website\test.php on line 5

The echo statement was not executed because the script execution stopped after the fatal error.

It is recommended to use the require() function instead of include(), because scripts should not continue executing if files are missing or misnamed.


PHP Installation

What do You Need?

This tutorial will not explain how to install PHP, MySQL, or Apache Server.

If your server supports PHP - you don't need to do anything! You do not need to compile anything or install any extra tools - just create some .php files in your web directory - and the server will parse them for you. Most web hosts offer PHP support.

However, if your server does not support PHP, you must install PHP. Below is a link to a good tutorial from PHP.net on how to install PHP5:

http://www.php.net/manual/en/install.php

Download PHP

Download PHP for free here: http://www.php.net/downloads.php

Download MySQL Database

Download MySQL for free here: http://www.mysql.com/downloads/index.html

Download Apache Server

Download Apache for free here:


PHP is_dir() Function

Definition and Usage

The is_dir() function checks whether the specified file is a directory.

This function returns TRUE if the directory exists.

Syntax

is_dir(file)

Parameter | Description
file | Required. Specifies the file to check

Tips and Notes

Note: The result of this function are cached. Use clearstatcache() to clear the cache.

Example

<?php

$file = "images";

if(is_dir($file))

{

echo ("$file is a directory");

}

else

{

echo ("$file is not a directory");

}

?>

The output of the code above could be:

images is a directory


PHP is_executable() Function

Definition and Usage

The is_executable() function checks whether the specified file is executable.

This function returns TRUE if the file is executable.

Syntax

is_executable(file)

Parameter | Description
file | Required. Specifies the file to check

Tips and Notes

Note: The result of this function are cached. Use clearstatcache() to clear the cache.

Note: The is_executable() function became available with Windows in PHP 5.0

Example

<?php

$file = "setup.exe";

if(is_executable($file))

{

echo ("$file is executable");

}

else

{

echo ("$file is not executable");

}

?>

The output of the code above could be:

setup.exe is executable


PHP is_file() Function

Definition and Usage

The is_file() function checks whether the specified file is a regular file.

This function returns TRUE if it is a file.

Syntax

is_file(file)

Parameter | Description
file | Required. Specifies the file to check

Tips and Notes

Note: The result of this function are cached. Use clearstatcache() to clear the cache.

Example

<?php

$file = "test.txt";

if(is_file($file))

{

echo ("$file is a regular file");

}

else

{

echo ("$file is not a regular file");

}

?>

The output of the code above could be:

test.txt is a regular file


PHP is_finite() function

Definition and Usage

The is_finite() function returns true if the specified value is a finite number, otherwise it returns nothing.

The value is finite if it is within the allowed range for a PHP float on this platform.

Syntax

is_finite(x)

Parameter | Description
x | Required. The value to check

Example

<?php

echo is_finite(2) . "<br />";

echo is_finite(log(0)) . "<br />";

echo is_finite(2000);

?>

The output of the code above will be:

1

1


PHP is_infinite() function

Definition and Usage

The is_infinite() function returns true if the specified value is an infinite number, otherwise it returns nothing.

The value is infinite if it is too big to fit into a PHP float on this platform.

Syntax

is_infinite(x)

Parameter | Description
x | Required. The value to check

Example

<?php

echo is_infinite(2) . "<br />";

echo is_infinite(log(0)) . "<br />";

echo is_infinite(2000);

?>

The output of the code above will be:

1


PHP is_link() Function

Definition and Usage

The is_link() function checks whether the specified file is a link.

This function returns TRUE if it is a link.

Syntax

is_link(file)

Parameter | Description
file | Required. Specifies the file to check

Tips and Notes

Note: The result of this function are cached. Use clearstatcache() to clear the cache.

Example

<?php

$link = "images";

if(is_link($link))

{

echo ("$link is a link");

}

else

{

echo ("$link is not a link");

}

?>

The output of the code above could be:

images is not a link


PHP is_nan() function

Definition and Usage

The is_nan() function returns true if the specified value is "not a number", otherwise it returns nothing.

Syntax

is_nan(x)

Parameter | Description
x | Required. The value to check

Example

<?php

echo is_nan(200) . "<br />";

echo is_nan(acos(1.01));

?>

The output of the code above will be:

1


PHP is_readable() Function

Definition and Usage

The is_readable() function checks whether the specified file is readable.

This function returns TRUE if the file is readable.

Syntax

is_readable(file)

Parameter | Description
file | Required. Specifies the file to check

Tips and Notes

Note: The result of this function are cached. Use clearstatcache() to clear the cache.

Example

<?php

$file = "test.txt";

if(is_readable($file))

{

echo ("$file is readable");

}

else

{

echo ("$file is not readable");

}

?>

The output of the code above could be:

test.txt is readable


PHP is_uploaded_file() Function

Definition and Usage

The is_uploaded_file() function checks whether the specified file is uploaded via HTTP POST.

This function returns TRUE if the file is uploaded via HTTP POST.

Syntax

is_uploaded_file(file)

Parameter | Description
file | Required. Specifies the file to check

Tips and Notes

Note: The result of this function are cached. Use clearstatcache() to clear the cache.

Example

<?php

$file = "test.txt";

if(is_uploaded_file($file))

{

echo ("$file is uploaded via HTTP POST");

}

else

{

echo ("$file is not uploaded via HTTP POST");

}

?>

The output of the code above could be:

test.txt is not uploaded via HTTP POST


PHP is_writable() Function

Definition and Usage

The is_writable() function checks whether the specified file is writeable.

This function returns TRUE if the file is writeable.

Syntax

is_writable(file)

Parameter | Description
file | Required. Specifies the file to check

Tips and Notes

Note: The result of this function are cached. Use clearstatcache() to clear the cache.

Example

<?php

$file = "test.txt";

if(is_writable($file))

{

echo ("$file is writeable");

}

else

{

echo ("$file is not writeable");

}

?>

The output of the code above could be:

test.txt is writeable


PHP is_writeable() Function

Definition and Usage

The is_writeable() function checks whether the specified file is writeable.

This function returns TRUE if the file is writeable.

This function is an alias of the is_writable() function.

Syntax

is_writeable(file)

Parameter | Description
file | Required. Specifies the file to check

Tips and Notes

Note: The result of this function are cached. Use clearstatcache() to clear the cache.

Example

<?php

$file = "test.txt";

if(is_writeable($file))

{

echo ("$file is writeable");

}

else

{

echo ("$file is not writeable");

}

?>

The output of the code above could be:

test.txt is writeable


PHP JDDayOfWeek() function

Definition and Usage

The JDDayOfWeek() function returns the day of a week.

Syntax

jddayofweek(jd,mode)

Parameter

Description

jd

Required. A number (a Julian day count)

mode

Optional. Defines what to return (integer or string). Mode values:

· 0 - Default. Returns the day number as an int (0=Sunday, 1=Monday, etc)
· 1 - Returns a string that contains the day of week (English-Gregorian)
· 2 - Returns a string that contains the abbreviated day of week (English-Gregorian)

Example

<?php

$jd=cal_to_jd(CAL_GREGORIAN,date("m"),date("d"),date("Y"));

echo(jddayofweek($jd,1));

?>

The output of the code above could be:

Thursday


PHP JDMonthName() function

Definition and Usage

The JDMonthName() function returns a month name.

Syntax

jdmonthname(jd,mode)

Parameter

Description

jd

Required. A number (a Julian day count)

mode

Optional. Defines which calendar to convert the Julian day count to, and what type of month names are to be returned. Mode values:

· 0 - Gregorian - abbreviated (Jan, Feb, Mar, etc.)
· 1 - Gregorian (January, February, March, etc.)
· 2 - Julian - abbreviated (Jan, Feb, Mar, etc.)
· 3 - Julian (January, February, March, etc.)
· 4 - Jewish (Tishri, Heshvan, Kislev, etc.)
· 5 - French Republican (Vendemiaire, Brumaire, Frimaire, etc.)

Example

<?php

$jd=cal_to_jd(CAL_GREGORIAN,date("m"),date("d"),date("Y"));

echo(jdmonthname($jd,1));

?>

The output of the code above could be:

January


PHP JDToFrench() function

Definition and Usage

The JDToFrench() function converts a Julian day count to a French Republican Calendar date.

Syntax

jdtofrench(jd)

Parameter | Description
jd | Required. A number (a Julian day count)

Tips and Notes

Note: This function returns a string in the format "month/day/year".

Tip: The French Republican Calendar is a calendar proposed during the French Revolution, and used by the French government for about twelve years from late 1793.

Example

<?php

$d=jdtofrench(2380650);

echo($d);

?>

The output of the code above will be:

3/3/14


PHP JDToGregorian() function

Definition and Usage

The JDToGregorian() function converts a Julian day count to a Gregorian date.

Syntax

jdtogregorian(jd)

Parameter | Description
jd | Required. A number (a Julian day count)

Tips and Notes

Note: This function returns a string in the format "month/day/year".

Example

<?php

$jd = gregoriantojd(10,3,1975);

echo($jd . "<br />");

$gregorian = jdtogregorian($jd);

echo($gregorian);

?>

The output of the code above will be:

2442689

10/3/1975


PHP JDToJewish() function

Definition and Usage

The JDToJewish() function converts a Julian day count to a Jewish calendar date.

Syntax

jdtojewish(jd,hebrew,fl)

Parameter

Description

jd

Required. A number (a Julian day count)

hebrew

Optional. True indicates Hebrew output format

fl

Optional. Defines the Hebrew output format. The available formats are:

· CAL_JEWISH_ADD_ALAFIM_GERESH
· CAL_JEWISH_ADD_ALAFIM
· CAL_JEWISH_ADD_GERESHAYIM

Example

<?php

echo(jdtojewish(gregoriantojd(10,8,2002)) . "<br />");

echo(jdtojewish(gregoriantojd(10,8,2002),true));

?>

The output of the code above will be:

2/2/5763

á çùåï äúùñâ


PHP JDToJulian() function

Definition and Usage

The JDToJulian() function converts a Julian day count to a Julian calendar date.

Syntax

jdtojulian(jd)

Parameter | Description
jd | Required. A number (a Julian day count)

Tips and Notes

Note: This function returns a string in the format "month/day/year".

Example

<?php

$jd = juliantojd(10,3,1975);

echo($jd . "<br />");

$julian = jdtojulian($jd);

echo($julian);

?>

The output of the code above will be:

2442702

10/3/1975


PHP JDToUnix() function

Definition and Usage

The JDToUnix() function converts a Julian day count to a Unix timestamp.

Syntax

jdtounix(jd)

Parameter | Description
jd | Required. A number (a Julian day count)

Tips and Notes

Note: This function will return false if the parameter jd is not inside the Unix epoch (means that the Gregorian years must be between 1970 and 2037 or that jd >= 2440588 and jd <= 2465342). The time returned is local time.

Example

<?php

$jd = gregoriantojd(10,3,1970);

$unix = jdtounix($jd);

echo($unix);

?>

The output of the code above will be:

23760000


PHP JewishToJD() function

Definition and Usage

The JewishToJD() function converts a Jewish calendar date to a Julian day count.

Syntax

jewishtojd(month,day,year)

Parameter | Description
month | Required. Specifies the month
day | Required. Specifies the day
year | Required. Specifies the year

Tips and Notes

Note: Although this function can handle dates back to year 1 (3761 B.C.), you should notice that in the beginning there was no formula to determine the start of a month. A new month was started when the new moon was first observed.

Example

<?php

echo(jewishtojd(2,2,5763));

?>

The output of the code above will be:

2452556


PHP join() Function

Definition and Usage

The join() function returns a string from the elements of an array.

The join() function is an alias of the implode() function.

Syntax

join(separator,array)

Parameter | Description
separator | Optional. Specifies what to put between the array elements. Default is "" (an empty string)
array | Required. The array to join to a string

Tips and Notes

Note: The join() function accept its parameters in either order. However, for consistency with explode(), you should use the documented order of arguments.

Note: The separator parameter of join() is optional. However, it is recommended to always use two parameters for backwards compatibility.

Example

<?php

$arr = array('Hello','World!','Beautiful','Day!');

echo join(" ",$arr);

?>

The output of the code above will be:

Hello World! Beautiful Day!


PHP JulianToJD() function

Definition and Usage

The JulianToJD() function converts a Julian calendar date to a Julian day count.

Syntax

juliantojd(month,day,year)

Parameter | Description
month | Required. Specifies the month
day | Required. Specifies the day
year | Required. Specifies the year. Valid range is 4713 B.C. to 9999 A.D.

Tips and Notes

Note: Although this function can handle dates back to 4713 B.C., you should notice that the Julian calendar was created in 46 B.C., and it did not stabilize until at least 8 A.D. Also, the beginning of a year varied from one culture to another - not all accepted January as the first month. Remember that the current calendar being used worldwide is the Gregorian calendar. The gregoriantojd() function can be used to convert such dates to their Julian Day count.

Example

<?php

$jd = juliantojd(10,3,1975);

echo($jd . "<br />");

$julian = jdtojulian($jd);

echo($julian);

?>

The output of the code above will be:

2442702

10/3/1975


PHP key() Function

Definition and Usage

The key() function returns the element key from the current internal pointer position.

This function returns FALSE on error.

Syntax

key(array)

Parameter | Description
array | Required. Specifies the array to use

Example

<?php

$people = array("Peter", "Joe", "Glenn", "Cleveland");

echo "The key from the current position is: " . key($people);

?>

The output of the code above will be:

The key from the current position is: 0


PHP krsort() Function

Definition and Usage

The krsort() function sorts an array by the keys in reverse order. The values keep their original keys.

This function returns TRUE on success, or FALSE on failure.

Syntax

krsort(array,sorttype)

Parameter

Description

array

Required. Specifies the array to sort

sorttype

Optional. Specifies how to sort the array values. Possible values:

· SORT_REGULAR - Default. Treat values as they are (don't change types)
· SORT_NUMERIC - Treat values numerically
· SORT_STRING - Treat values as strings
· SORT_LOCALE_STRING - Treat values as strings, based on local settings

Example

<?php

$my_array = array("a" => "Dog", "b" => "Cat", "c" => "Horse");

krsort($my_array);

print_r($my_array);

?>

The output of the code above will be:

Array

(

[c] => Horse

[b] => Cat

[a] => Dog

)


PHP ksort() Function

Definition and Usage

The ksort() function sorts an array by the keys. The values keep their original keys.

This function returns TRUE on success, or FALSE on failure.

Syntax

ksort(array,sorttype)

Parameter

Description

array

Required. Specifies the array to sort

sorttype

Optional. Specifies how to sort the array values. Possible values:

· SORT_REGULAR - Default. Treat values as they are (don't change types)
· SORT_NUMERIC - Treat values numerically
· SORT_STRING - Treat values as strings
· SORT_LOCALE_STRING - Treat values as strings, based on local settings

Example

<?php

$my_array = array("a" => "Dog", "b" => "Cat", "c" => "Horse");

ksort($my_array);

print_r($my_array);

?>

The output of the code above will be:

Array

(

[a] => Dog

[b] => Cat

[c] => Horse

)


PHP levenshtein() Function

Definition and Usage

The levenshtein() function returns the Levenshtein distance between two strings.

The Levenshtein distance is the number of characters you have to replace, insert or delete to transform string1 into string2.

By default, PHP gives each operation (replace, insert, and delete) equal weight. However, you can define the cost of each operation by setting the optional insert, replace, and delete parameters.

Syntax

levenshtein(string1,string2,insert,replace,delete)

Parameter | Description
string1 | Required. First string to compare
string2 | Required. Second string to compare
insert | Optional. The cost of inserting a character. Default is 1
replace | Optional. The cost of replacing a character. Default is 1
delete | Optional. The cost of deleting a character. Default is 1

Tips and Notes

Note: The levenshtein() function returns -1 if one of the strings exceeds 255 characters.

Note: The levenshtein() function is not case-sensitive.

Note: The levenshtein() function is faster than the similar_text() function. However, similar_text() will give you a more accurate result with less modifications needed.

Example

<?php

echo levenshtein("Hello World","ello World");

echo "<br />";

echo levenshtein("Hello World","ello World",10,20,30);

?>

The output of the code above will be:

1

30


PHP libxml Functions

PHP libxml Introduction

The libxml functions and constants are used together with SimpleXML, XSLT and DOM functions.

Installation

These functions require the libxml package. It can be downloaded here: Downloads at xmlsoft.org

PHP libxml Functions

PHP: indicates the earliest version of PHP that supports the function.

Function | Description | PHP
libxml_clear_errors() | Clear libxml error buffer | 5
libxml_get_errors() | Retrieve array of errors | 5
libxml_get_last_error() | Retrieve last error from libxml | 5
libxml_set_streams_context() | Set the streams context for the next libxml document load or write | 5
 | Disable libxml errors and allow user to fetch error information as needed | 5

PHP libxml Constants

Function | Description | PHP
LIBXML_COMPACT | Set small nodes allocation optimization. This may improve the application performance | 5
LIBXML_DTDATTR | Set default DTD attributes | 5
LIBXML_DTDLOAD | Load external subset | 5
LIBXML_DTDVALID | Validate with the DTD | 5
LIBXML_NOBLANKS | Remove blank nodes | 5
LIBXML_NOCDATA | Set CDATA as text nodes | 5
LIBXML_NOEMPTYTAG | Change empty tags (e.g. <br/> to <br></br>), only available in the DOMDocument->save() and DOMDocument->saveXML() functions | 5
LIBXML_NOENT | Substitute entities | 5
LIBXML_NOERROR | Do not show error reports | 5
LIBXML_NONET | Stop network access while loading documents | 5
LIBXML_NOWARNING | Do not show warning reports | 5
LIBXML_NOXMLDECL | Drop the XML declaration when saving a document | 5
LIBXML_NSCLEAN | Remove excess namespace declarations | 5
LIBXML_XINCLUDE | Use XInclude substitution | 5
LIBXML_ERR_ERROR | Get recoverable errors | 5
LIBXML_ERR_FATAL | Get fatal errors | 5
LIBXML_ERR_NONE | Get no errors | 5
LIBXML_ERR_WARNING | Get simple warnings | 5
LIBXML_VERSION | Get libxml version (e.g. 20605 or 20617) | 5
LIBXML_DOTTED_VERSION | Get dotted libxml version (e.g. 2.6.5 or 2.6.17) | 5


PHP libxml_clear_errors() Function

Definition and Usage

The libxml_clear_errors() function clears the libxml error buffer

Syntax

libxml_clear_errors()

Example

<?php

libxml_clear_errors()

?>


PHP libxml_get_errors() Function

Definition and Usage

The libxml_get_errors() function gets errors from the the libxml error buffer

This function returns an array of error objects, and an empty array if there are no errors in the libxml error buffer.

Syntax

libxml_get_errors()

Example

<?php

libxml_get_errors()

?>


PHP libxml_get_last_error() Function

Definition and Usage

The libxml_get_last_error() function gets the last error from the libxml error buffer

This function returns an error object on success, and FALSE on failure or if there are no errors in the libxml error buffer.

Syntax

libxml_get_last_error()

Example

<?php

libxml_get_last_error()

?>


PHP libxml_use_internal_errors() Function

Definition and Usage

The libxml_use_internal_errors() function disables standard libxml errors and enables user error handling.

This function returns the previous value of the use_lib_errors parameter.

Syntax

libxml_use_internal_errors(user_errors)

Parameter | Description
user_errors | Optional. Specifies if user error handling should be enabled. Default is FALSE

Example

<?php

libxml_use_internal_errors()

?>


PHP link() Function

Definition and Usage

The link() function creates a hard link from the existing target with the specified name link.

This function returns TRUE on success, or FALSE on failure.

Syntax

link(target,link)

Parameter | Description
target | Required.
link | Required.

Tips and Notes

Note: This is not an HTML link, but a link in the filesystem.

Note: This function does not work on Windows platforms.

Note: This function will not work on remote files.


PHP linkinfo() Function

Definition and Usage

The linkinfo() function returns information about a hard link.

This function returns a device ID, or FALSE on failure.

Syntax

linkinfo(path)

Parameter | Description
path | Required. Specifies the path to check

Tips and Notes

Note: This is not an HTML link, but a link in the filesystem.

Note: This function is not implemented on Windows.


PHP list() Function

Definition and Usage

The list() function is used to assign values to a list of variables in one operation.

Syntax

list(var1,var2...)

Parameter | Description
var1 | Required. The first variable to assign a value to
var2 | Optional. More variables to assign values to

Tips and Notes

Note: This function only works on numerical arrays.

Example 1

<?php

$my_array = array("Dog","Cat","Horse");

list($a, $b, $c) = $my_array;

echo "I have several animals, a $a, a $b and a $c.";

?>

The output of the code above will be:

I have several animals, a Dog, a Cat and a Horse.

Example 2

<?php

$my_array = array("Dog","Cat","Horse");

list($a, , $c) = $my_array;

echo "Here I only use the $a and $c variables.";

?>

The output of the code above will be:

Here I only use the Dog and Horse variables.


PHP localtime() function

Definition and Usage

The localtime() function returns an array that contains the time components of a Unix timestamp.

Syntax

localtime(timestamp,is_associative)

Parameter

Description

timestamp

Optional. Specifies the date or time to be formatted. If no timestamp is specified, it uses the current local time.

is_associative

Optional. Specifies whether to return an associative or indexed array. If set to false the array returned is an indexed array. If set to true then the array returned is an associative array.

The keys of the associative array are:

· [tm_sec] - seconds
· [tm_min] - minutes
· [tm_hour] - hour
· [tm_mday] - day of the month
· [tm_mon] - month of the year (January=0)
· [tm_year] - Years since 1900
· [tm_wday] - Day of the week (Sunday=0)
· [tm_yday] - Day of the year
· [tm_isdst] - Is daylight savings time in effect

Example

Example without and with associative arrays:

<?php

print_r(localtime());

echo("<br /><br />");

print_r(localtime(time(),true));

?>

The output of the code above could be:

Array

(

[0] => 28

[1] => 35

[2] => 13

[3] => 25

[4] => 0

[5] => 106

[6] => 3

[7] => 24

[8] => 0

)

Array

(

[tm_sec] => 28

[tm_min] => 35

[tm_hour] => 13

[tm_mday] => 25

[tm_mon] => 0

[tm_year] => 106

[tm_wday] => 3

[tm_yday] => 24

[tm_isdst] => 0

)


PHP log() function

Definition and Usage

The log() function returns the natural logarithm (base E) of a number.

Syntax

log(x,base)

Parameter | Description
x | Required. A number
base | Optional. If the base parameter is specified, log() returns logbase x. Note: The base parameter became available in PHP 4.

Tips and Notes

Note: If the parameter x is negative, -1.#IND is returned.

Example

In the following example we will use the log() function on different numbers:

<?php

echo(log(2.7183) . "<br />");

echo(log(2) . "<br />");

echo(log(1) . "<br />");

echo(log(0) . "<br />");

echo(log(-1))

?>

The output of the code above will be:

1.00000668491

0.69314718056

0

-1.#INF

-1.#IND


PHP log10() function

Definition and Usage

The log10() function returns the base-10 logarithm of a number.

Syntax

log10(x)

Parameter | Description
x | Required. A number

Tips and Notes

Note: If the parameter x is negative, -1.#IND is returned.

Example

In the following example we will use the log10() function on different numbers:

<?php

echo(log10(2.7183) . "<br />");

echo(log10(2) . "<br />");

echo(log10(1) . "<br />");

echo(log10(0) . "<br />");

echo(log10(-1))

?>

The output of the code above will be:

0.434297385125

0.301029995664

0

-1.#INF

-1.#IND


PHP log1p() function

Definition and Usage

The log1p() function returns log(1+x), computed in a way that is accurate even when the value of x is close to zero.

Syntax

log1p(x)

Parameter | Description
x | Required. A number

Tips and Notes

Note: This function is EXPERIMENTAL. This means that the behavior of this function and the name of this function may change without notice in a future version of PHP!


PHP Looping

Looping statements in PHP are used to execute the same block of code a specified number of times.

Looping

Very often when you write code, you want the same block of code to run a number of times. You can use looping statements in your code to perform this.

In PHP we have the following looping statements:

· while - loops through a block of code if and as long as a specified condition is true
· do...while - loops through a block of code once, and then repeats the loop as long as a special condition is true
· for - loops through a block of code a specified number of times
· foreach - loops through a block of code for each element in an array

The while Statement

The while statement will execute a block of code if and as long as a condition is true.

Syntax

while (condition)

code to be executed;

Example

The following example demonstrates a loop that will continue to run as long as the variable i is less than, or equal to 5. i will increase by 1 each time the loop runs:

<html>

<body>

<?php

$i=1;

while($i<=5)

{

echo "The number is " . $i . "<br />";

$i++;

}

?>

</body>

</html>

The do...while Statement

The do...while statement will execute a block of code at least once - it then will repeat the loop as long as a condition is true.

Syntax

do

{

code to be executed;

}

while (condition);

Example

The following example will increment the value of i at least once, and it will continue incrementing the variable i as long as it has a value of less than 5:

<html>

<body>

<?php

$i=0;

do

{

$i++;

echo "The number is " . $i . "<br />";

}

while ($i<5);

?>

</body>

</html>

The for Statement

The for statement is used when you know how many times you want to execute a statement or a list of statements.

Syntax

for (initialization; condition; increment)

{

code to be executed;

}

Note: The for statement has three parameters. The first parameter initializes variables, the second parameter holds the condition, and the third parameter contains the increments required to implement the loop. If more than one variable is included in the initialization or the increment parameter, they should be separated by commas. The condition must evaluate to true or false.

Example

The following example prints the text "Hello World!" five times:

<html>

<body>

<?php

for ($i=1; $i<=5; $i++)

{

echo "Hello World!<br />";

}

?>

</body>

</html>

The foreach Statement

The foreach statement is used to loop through arrays.

For every loop, the value of the current array element is assigned to $value (and the array pointer is moved by one) - so on the next loop, you'll be looking at the next element.

Syntax

foreach (array as value)

{

  code to be executed;

}

Example

The following example demonstrates a loop that will print the values of the given array:

<html>

<body>

<?php

$arr=array("one", "two", "three");

foreach ($arr as $value)

{

echo "Value: " . $value . "<br />";

}

?>

</body>

</html>


PHP lstat() Function

Definition and Usage

The lstat() function returns information about a file or symbolic link.

This function returns an array with the following elements:

· [0] or [dev] - Device number
· [1] or [ino] - Inode number
· [2] or [mode] - Inode protection mode
· [3] or [nlink] - Number of links
· [4] or [uid] - User ID of owner
· [5] or [gid] - Group ID of owner
· [6] or [rdev] - Inode device type
· [7] or [size] - Size in bytes
· [8] or [atime] - Last access (as Unix timestamp)
· [9] or [mtime] - Last modified (as Unix timestamp)
· [10] or [ctime] - Last inode change (as Unix timestamp)
· [11] or [blksize] - Blocksize of filesystem IO (if supported)
· [12] or [blocks] - Number of blocks allocated

Syntax

lstat(file)

Parameter | Description
file | Required. Specifies the file to check

Tips and Notes

Note: The results from this function will differ from server to server. The array may contain the number index, the name index, or both.

Note: The result of this function are cached. Use clearstatcache() to clear the cache.

Tip: This function is similar to stat(), except that if the file parameter is a symbolic link, the status of the symlink is returned (not the status of the file pointed to by the symlink).

Example

<?php

print_r(lstat("test.txt"));

?>

The output of the code above could be:

Array

(

[0] => 0

[1] => 0

[2] => 33206

[3] => 1

[4] => 0

[5] => 0

[6] => 0

[7] => 92

[8] => 1141633430

[9] => 1141298003

[10] => 1138609592

[11] => -1

[12] => -1

[dev] => 0

[ino] => 0

[mode] => 33206

[nlink] => 1

[uid] => 0

[gid] => 0

[rdev] => 0

[size] => 92

[atime] => 1141633430

[mtime] => 1141298003

[ctime] => 1138609592

[blksize] => -1

[blocks] => -1

)


PHP ltrim() Function

Definition and Usage

The ltrim() function will remove whitespaces or other predefined character from the left side of a string.

Syntax

ltrim(string,charlist)

Parameter

Description

string

Required. Specifies the string to check

charlist

Optional. Specifies which characters to remove from the string. If omitted, all of the following characters are removed:

· "\0" - NULL
· "\t" - tab
· "\n" - new line
· "\x0B" - vertical tab
· "\r" - carriage return
· " " - ordinary white space

Example 1

<html>

<body>

<?php

$str = "   Hello World!";

echo "Without ltrim: " . $str;

echo "<br />";

echo "With ltrim: " . ltrim($str);

?>

<body>

<html>

The browser output of the code above will be:

Without ltrim: Hello World!

With ltrim: Hello World!

If you select "View source" in the browser window, you will see the following HTML:

<html>

<body>

Without ltrim:     Hello World!<br />With ltrim: Hello World!

</body>

</html>

Example 2

<?php

$str = "\r\nHello World!";

echo "Without ltrim: " . $str;

echo "<br />";

echo "With ltrim: " . ltrim($str);

?>

The browser output of the code above will be:

Without ltrim: Hello World!

With ltrim: Hello World!

If you select "View source" in the browser window, you will see the following HTML:

<html>

<body>

Without ltrim:

Hello World!<br />With ltrim: Hello World!

</body>

</html>


PHP Mail

PHP Sending E-mails

PHP allows you to send e-mails directly from a script.

The PHP mail() Function

The PHP mail() function is used to send emails from inside a script.

Syntax

mail(to,subject,message,headers,parameters)

Parameter | Description
to | Required. Specifies the receiver / receivers of the email
subject | Required. Specifies the subject of the email. Note: This parameter cannot contain any newline characters
message | Required. Defines the message to be sent. Each line should be separated with a LF (\n). Lines should not exceed 70 characters
headers | Optional. Specifies additional headers, like From, Cc, and Bcc. The additional headers should be separated with a CRLF (\r\n)
parameters | Optional. Specifies an additional parameter to the sendmail program

Note: For the mail functions to be available, PHP requires an installed and working email system. The program to be used is defined by the configuration settings in the php.ini file. Read more in our .

PHP Simple E-Mail

The simplest way to send an email with PHP is to send a text email.

In the example below we first declare the variables ($to, $subject, $message, $from, $headers), then we use the variables in the mail() function to send an e-mail:

<?php

$to = "someone@example.com";

$subject = "Test mail";

$message = "Hello! This is a simple email message.";

$from = "someonelse@example.com";

$headers = "From: $from";

mail($to,$subject,$message,$headers);

echo "Mail Sent.";

?>

PHP Mail Form

With PHP, you can create a feedback-form on your website. The example below sends a text message to a specified e-mail address:

<html>

<body>

<?php

if (isset($_REQUEST['email']))

//if "email" is filled out, send email

{

//send email

$email = $_REQUEST['email'] ;

$subject = $_REQUEST['subject'] ;

$message = $_REQUEST['message'] ;

mail( "someone@example.com", "Subject: $subject",

$message, "From: $email" );

echo "Thank you for using our mail form";

}

else

//if "email" is not filled out, display the form

{

echo "<form method='post' action='mailform.php'>

Email: <input name='email' type='text' /><br />

Subject: <input name='subject' type='text' /><br />

Message:<br />

<textarea name='message' rows='15' cols='40'>

</textarea><br />

<input type='submit' />

</form>";

}

?>

</body>

</html>

This is how the example above works:

· First, check if the email input field is filled out
· If it is not set (like when the page is first visited); output the HTML form
· If it is set (after the form is filled out); send the email from the form
· When submit is pressed after the form is filled out, the page reloads, sees that the email input is set, and sends the email

PHP Mail Reference

For more information about the PHP mail() function, visit our PHP Mail Reference.


PHP Mail Functions

PHP Mail Introduction

The mail() function allows you to send emails directly from a script.

Requirements

For the mail functions to be available, PHP requires an installed and working email system. The program to be used is defined by the configuration settings in the php.ini file.

Installation

The mail functions are part of the PHP core. There is no installation needed to use these functions.

Runtime Configuration

The behavior of the mail functions is affected by settings in the php.ini file.

Mail configuration options:

Name | Default | Description | Changeable
SMTP | "localhost" | Windows only: The DNS name or IP address of the SMTP server | PHP_INI_ALL
smtp_port | "25" | Windows only: The SMTP port number. Available since PHP 4.3 | PHP_INI_ALL
sendmail_from | NULL | Windows only: Specifies the "from" address to be used in email sent from PHP | PHP_INI_ALL
sendmail_path | NULL | Unix systems only: Specifies where the sendmail program can be found (usually /usr/sbin/sendmail or /usr/lib/sendmail) | PHP_INI_SYSTEM

PHP Mail Functions

PHP: indicates the earliest version of PHP that supports the function.

Function | Description | PHP
ezmlm_hash() | Calculates the hash value needed by the EZMLM mailing list system | 3
mail() | Allows you to send emails directly from a script | 3

PHP Mail Constants

None.


PHP mail() Function

Definition and Usage

The mail() function allows you to send emails directly from a script.

This function returns TRUE if the email was successfully accepted for delivery, otherwise it returns FALSE.

Syntax

mail(to,subject,message,headers,parameters)

Parameter

Description

to

Required. Specifies the receiver / receivers of the email

subject

Required. Specifies the subject of the email. Note: This parameter cannot contain any newline characters

message

Required. Defines the message to be sent. Each line should be separated with a LF (\n). Lines should not exceed 70 characters.

Windows note: If a full stop is found on the beginning of a line in the message, it might be removed. To solve this problem, replace the full stop with a double dot:

<?php

$txt = str_replace("\n.", "\n..", $txt);

?>

headers

Optional. Specifies additional headers, like From, Cc, and Bcc. The additional headers should be separated with a CRLF (\r\n).

Note: When sending an email, it must contain a From header. This can be set with this parameter or in the php.ini file.

parameters

Optional. Specifies an additional parameter to the sendmail program (the one defined in the sendmail_path configuration setting). (i.e. this can be used to set the envelope sender address when using sendmail with the -f sendmail option)

Tips and Notes

Note: Keep in mind that just because the email was accepted for delivery, it does NOT mean the email is actually sent and received.

Example 1

Send a simple email:

<?php

$txt = "First line of text\nSecond line of text";

// Use wordwrap() if lines are longer than 70 characters

$txt = wordwrap($txt,70);

// Send email

mail("somebody@example.com","My subject",$txt);

?>

Example 2

Send an email with extra headers:

<?php

$to = "somebody@example.com";

$subject = "My subject";

$txt = "Hello world!";

$headers = "From: webmaster@example.com" . "\r\n" .

"CC: somebodyelse@example.com";

mail($to,$subject,$txt,$headers);

?>

Example 3

Send an HTML email:

<?php

$to = "somebody@example.com, somebodyelse@example.com";

$subject = "HTML email";

$message = "

<html>

<head>

<title>HTML email</title>

</head>

<body>

<p>This email contains HTML Tags!</p>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>John</td>

<td>Doe</td>

</tr>

</table>

</body>

</html>

";

// Always set content-type when sending HTML email

$headers = "MIME-Version: 1.0" . "\r\n";

$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";

// More headers

$headers .= 'From: <webmaster@example.com>' . "\r\n";

$headers .= 'Cc: myboss@example.com' . "\r\n";

mail($to,$subject,$message,$headers);

?>


PHP max() function

Definition and Usage

The max() function returns the number with the highest value of two specified numbers.

Syntax

max(x,y)

Parameter | Description
x | Required. A number
y | Required. A number

Example

In this example we will show how to use max() to return the number with the highest value of two specified numbers:

<?php

echo(max(5,7) . "<br />");

echo(max(-3,5) . "<br />");

echo(max(-3,-5) . "<br />");

echo(max(7.25,7.30))

?>

The output of the code above will be:

7

5

-3

7.3


PHP md5() Function

Definition and Usage

The md5() function calculates the MD5 hash of a string.

The md5() function uses the RSA Data Security, Inc. MD5 Message-Digest Algorithm.

From RFC 1321 - The MD5 Message-Digest Algorithm: "The MD5 message-digest algorithm takes as input a message of arbitrary length and produces as output a 128-bit "fingerprint" or "message digest" of the input. The MD5 algorithm is intended for digital signature applications, where a large file must be "compressed" in a secure manner before being encrypted with a private (secret) key under a public-key cryptosystem such as RSA."

This function returns the calculated MD5 hash on success, or FALSE on failure.

Syntax

md5(string,raw)

Parameter

Description

string

Required. The string to be calculated

raw

Optional. Specifies hex or binary output format:

· TRUE - Raw 16 character binary format
· FALSE - Default. 32 character hex number

Note: This parameter was added in PHP 5.0

Example 1

<?php

$str = "Hello";

echo md5($str);

?>

The output of the code above will be:

8b1a9953c4611296a827abf8c47804d7

Example 2

In this example we will print the result of md5() and then test it:

<?php

$str = "Hello";

echo md5($str);

if (md5($str) == '8b1a9953c4611296a827abf8c47804d7')

{

echo "<br />Hello world!";

exit;

}

?>

The output of the code above will be:

8b1a9953c4611296a827abf8c47804d7

Hello world!


PHP md5_file() Function

Definition and Usage

The md5_file() function calculates the MD5 hash of a file.

The md5_file() function uses the RSA Data Security, Inc. MD5 Message-Digest Algorithm.

From RFC 1321 - The MD5 Message-Digest Algorithm: "The MD5 message-digest algorithm takes as input a message of arbitrary length and produces as output a 128-bit "fingerprint" or "message digest" of the input. The MD5 algorithm is intended for digital signature applications, where a large file must be "compressed" in a secure manner before being encrypted with a private (secret) key under a public-key cryptosystem such as RSA."

This function returns the calculated MD5 hash on success, or FALSE on failure.

Syntax

md5_file(file,raw)

Parameter

Description

file

Required. The file to be calculated

raw

Optional. Specifies hex or binary output format:

· TRUE - Raw 16 character binary format
· FALSE - Default. 32 character hex number

Note: This parameter was added in PHP 5.0

Example 1

<?php

$filename = "test.txt";

$md5file = md5_file($filename);

echo $md5file;

?>

The output of the code above will be:

5d41402abc4b2a76b9719d911017c592

Example 2

Store the MD5 hash of "test.txt" in a file:

<?php

$md5file = md5_file("test.txt");

file_put_contents("md5file.txt",$md5file);

?>

In this example we will test if "test.txt" has been changed (that is if the MD5 hash has been changed):

<?php

$md5file = file_get_contents("md5file.txt");

if (md5_file("test.txt") == $md5file)

{

echo "The file is ok.";

}

else

{

echo "The file has been changed.";

}

?>

The output of the code above could be:

The file is ok.


PHP metaphone() Function

Definition and Usage

The metaphone() function calculates the metaphone key of a string.

A metaphone key represents how a string sounds if said by an English speaking person.

The metaphone() function can be used for spelling applications.

This function returns the metaphone key of the string on success, or FALSE on failure.

Syntax

metaphone(string,length)

Parameter | Description
string | Required. Specifies the string to check
length | Optional. Specifies the maximum length of the metaphone key

Tips and Notes

Note: The metaphone() function creates the same key for similar sounding words.

Note: The generated metaphone keys vary in length.

Tip: metaphone() is more accurate than the soundex() function, because metaphone() knows the basic rules of English pronunciation.

Example 1

<?php

echo metaphone("world");

?>

The output of the code above will be:

WRLT

Example 2

In this example we use the metaphone() function on two similar sounding words:

<?php

$str = "Sun";

$str2 = "Son";

echo metaphone($str);

echo "<br />";

echo metaphone($str2);

?>

The output of the code above will be:

SN

SN


PHP microtime() function

Definition and Usage

The microtime() function returns the current Unix timestamp with microseconds.

Syntax

microtime(get_as_float)

Parameter | Description
get_as_float | Optional. When set to true it specifies that the function should return a float, instead of a string

Tips and Notes

Note: This function returns the string "microsec sec", where sec is the number of seconds since the Unix Epoch (0:00:00 January 1, 1970 GMT), and microsec is the microseconds part. Notice that both parts are returned in units of seconds.

Note: The get_as_float parameter was added to PHP 5!

Example

<?php

echo(microtime());

?>

The output of the code above could be:

0.25139300 1138197510


PHP min() function

Definition and Usage

The min() function returns the number with the lowest value of two specified numbers.

Syntax

min(x,y)

Parameter | Description
x | Required. A number
y | Required. A number

Example

In this example we will show how to use min() to return the number with the lowest value of two specified numbers:

<?php

echo(min(5,7) . "<br />");

echo(min(-3,5) . "<br />");

echo(min(-3,-5) . "<br />");

echo(min(7.25,7.30))

?>

The output of the code above will be:

5

-3

-5

7.25


PHP Misc. Functions

PHP Miscellaneous Introduction

The misc. functions were only placed here because none of the other categories seemed to fit.

Installation

The misc functions are part of the PHP core. There is no installation needed to use these functions.

Runtime Configuration

The behavior of the misc functions is affected by settings in the php.ini file.

Misc. configuration options:

Name | Default | Description | Changeable
ignore_user_abort | "0" | FALSE indicates that scripts will be terminated as soon as they try to output something after a client has aborted their connection | PHP_INI_ALL
highlight.string | "#DD0000" | Color for highlighting a string in PHP syntax | PHP_INI_ALL
highlight.comment | "#FF8000" | Color for highlighting PHP comments | PHP_INI_ALL
highlight.keyword | "#007700" | Color for syntax highlighting PHP keywords (e.g. parenthesis and semicolon) | PHP_INI_ALL
highlight.bg | "#FFFFFF" | Color for background | PHP_INI_ALL
highlight.default | "#0000BB" | Default color for PHP syntax | PHP_INI_ALL
highlight.html | "#000000" | Color for HTML code | PHP_INI_ALL
browscap | NULL | Name and location of browser-capabilities file (e.g. browscap.ini) | PHP_INI_SYSTEM

PHP Misc. Functions

PHP: indicates the earliest version of PHP that supports the function.

Function | Description | PHP
connection_aborted() | Checks whether the client has disconnected | 3
connection_status() | Returns the current connection status | 3
connection_timeout() | Deprecated in PHP 4.0.5 | 3
constant() | Returns the value of a constant | 4
define() | Defines a constant | 3
defined() | Checks whether a constant exists | 3
die() | Prints a message and exits the current script | 3
eval() | Evaluates a string as PHP code | 3
 | Prints a message and exits the current script | 3
get_browser() | Returns the capabilities of the user's browser | 3
highlight_file() | Outputs a file with the PHP syntax highlighted | 4
 | Outputs a string with the PHP syntax highlighted | 4
ignore_user_abort() | Sets whether a remote client can abort the running of a script | 3
pack() | Packs data into a binary string | 3
php_check_syntax() | Deprecated in PHP 5.0.5 | 5
 | Returns the source code of a file with PHP comments and whitespace removed | 5
 | Alias of highlight_file() | 4
sleep() | Delays code execution for a number of seconds | 3
time_nanosleep() | Delays code execution for a number of seconds and nanoseconds | 5
time_sleep_until() | Delays code execution until a specified time | 5
uniqid() | Generates a unique ID | 3
 | Unpacks data from a binary string | 3
usleep() | Delays code execution for a number of microseconds | 3

PHP Misc. Constants

PHP: indicates the earliest version of PHP that supports the constant.

Constant | Description | PHP
CONNECTION_ABORTED |  |
CONNECTION_NORMAL |  |
CONNECTION_TIMEOUT |  |
__COMPILER_HALT_OFFSET__ |  | 5


PHP mkdir() Function

Definition and Usage

The mkdir() function creates a directory.

This function returns TRUE on success, or FALSE on failure.

Syntax

mkdir(path,mode,recursive,context)

Parameter

Description

path

Required. Specifies the name of the directory to create

mode

Optional. Specifies permissions. By default, the mode is 0777 (widest possible access).

The mode parameter consists of four numbers:

· The first number is always zero
· The second number specifies permissions for the owner
· The third number specifies permissions for the owner's user group
· The fourth number specifies permissions for everybody else

Possible values (to set multiple permissions, add up the following numbers):

· 1 = execute permissions
· 2 = write permissions
· 4 = read permissions

recursive

Optional. Specifies if the recursive mode is set (added in PHP 5)

context

Optional. Specifies the context of the file handle. Context is a set of options that can modify the behavior of a stream (added in PHP 5)

Tips and Notes

Note: The mode parameters is ignored on Windows platforms.

Example

<?php

mkdir("testing");

?>


PHP mkdir() Function

PHP rmdir() Function

Definition and Usage

The rmdir() function removes an empty directory.

This function returns TRUE on success, or FALSE on failure.

Syntax

rmdir(dir,context)

Parameter | Description
dir | Required. Specifies the directory to be removed
context | Optional. Specifies the context of the file handle. Context is a set of options that can modify the behavior of a stream

Example

<?php

$path = "images";

if(!rmdir($path))

{

echo ("Could not remove $path");

}

?>


PHP mktime() function

Definition and Usage

The mktime() function returns the Unix timestamp for a date.

This timestamp contains the number of seconds between the Unix Epoch (January 1 1970 00:00:00 GMT) and the time specified.

Syntax

mktime(hour,minute,second,month,day,year,is_dst)

Parameter | Description
hour | Optional. Specifies the hour
minute | Optional. Specifies the minute
second | Optional. Specifies the second
month | Optional. Specifies the numerical month
day | Optional. Specifies the day
year | Optional. Specifies the year. The valid range for year is on some systems between 1901 and 2038. However this limitation is overcome in PHP 5
is_dst | Optional. Set this parameter to 1 if the time is during daylight savings time (DST), 0 if it is not, or -1 (the default) if it is unknown. If it's unknown, PHP tries to find out itself (which may cause unexpected results). Note: This parameter became deprecated in PHP 5. The new timezone handling features should be used instead.

Tips and Notes

Note: If the arguments are invalid, the function returns false (PHP versions before 5.1 returns -1).

Example

The mktime() function is useful for doing date arithmetic and validation. It will automatically calculate the correct value for out-of-range input:

<?php

echo(date("M-d-Y",mktime(0,0,0,12,36,2001))."<br />");

echo(date("M-d-Y",mktime(0,0,0,14,1,2001))."<br />");

echo(date("M-d-Y",mktime(0,0,0,1,1,2001))."<br />");

echo(date("M-d-Y",mktime(0,0,0,1,1,99))."<br />");

?>

The output of the code above would be:

Jan-05-2002

Feb-01-2002

Jan-01-2001

Jan-01-1999


PHP money_format() Function

Definition and Usage

The money_format() function returns a string formatted as a currency string.

This function inserts a formatted number where there is a percent (%) sign in the main string.

Syntax

money_format(string,number)

Parameter

Description

string

Required. Specifies the string to be formatted and how to format the variables in it.

Possible format values:

Padding and Flags:

· =f - Specifies the character (f) to be used as padding (Example: %=t this uses "t" as padding). Default is space
· ^ - Removes the use of grouping characters
· + or ( - Specifies how to show positive and negative numbers. If "+" is used, the local setting for + and - will be used (usually a sign in front of negative numbers, and nothing in front of positive numbers). If "(" is used, negative numbers are enclosed in parenthesis. Default is "+"
· ! - Stops the use of currency symbols in the output string
· - If "-" is used, all fields are left-justified. Default is right-justified

Field width:

· x - Specifies the minimum field width (x). Default is 0
· #x - Specifies the maximum number (x) of digits expected to the left of the decimal point. This is used to keep formatted output aligned in the same columns. If the number of digits are bigger than x, this specification is ignored
· .x - Specifies the maximum number (x) of digits expected to the right of the decimal point. If x is 0, the decimal point and the digits to it's right will not be shown. Default is local settings

Conversion characters:

· i - The number is formatted to international currency format
· n - The number is formatted to national currency format
· % - Returns the % character

Note: If multiple format values are used, they must be in the same order as shown above.

Note: This function is affected by local settings.

number

Required. The number to be inserted at the %-sign in the format string

Tips and Notes

Note: The money_format() function does not work on Windows platforms.

Example 1

International en_US format:

<?php

$number = 1234.56;

setlocale(LC_MONETARY, "en_US");

echo money_format("The price is %i", $number);

?>

The output of the code above will be:

The price is USD 1,234.56

Example 2

National Norwegian format with 2 decimals:

<?php

$number = 1234.56;

setlocale(LC_MONETARY, "no_NO");

echo money_format("%.2n", $number);

?>

The output of the code above will be:

NOK 1.234,56

Example 3

Negative number, US national format with () to indicate negative numbers and 2 digits of right precision and "*" as fill character:

<?php

$number = -1234.5672;

echo money_format("%=*(#10.2n", $number);

?>

The output of the code above will be:

($********1,234.57)


PHP move_uploaded_file() Function

Definition and Usage

The move_uploaded_file() function moves an uploaded file to a new location.

This function returns TRUE on success, or FALSE on failure.

Syntax

move_uploaded_file(file,newloc)

Parameter | Description
file | Required. Specifies the file to be moved
newloc | Required. Specifies the new location for the file

Tips and Notes

Note: This function only works on files uploaded via HTTP POST.

Note: If the destination file already exists, it will be overwritten.


PHP mt_getrandmax() function

Definition and Usage

The mt_getrandmax() function returns the largest possible value that can be returned by the mt_rand() function.

Syntax

mt_getrandmax()

Example

<?php

echo mt_getrandmax();

?>

The output of the code above could be:

2147483647


PHP mt_rand() function

Definition and Usage

The mt_rand() function returns a random integer using the Mersenne Twister algorithm.

If this function is called without parameters, it returns a pseudo-random value between 0 and RAND_MAX.

If you want a random number between 10 and 100 (inclusive), use mt_rand (10,100).

Syntax

mt_rand(min,max)

Parameter | Description
min,max | Optional. Specifies the range the random number should lie within

Tips and Notes

Tip: This function produces a better random value four times faster than rand()!

Note: In PHP 4.2.0 and later, there is no need to seed the random generator with mt_srand(). This is done automatically.

Example

In this example we will return some random numbers:

<?php

echo(mt_rand() . "<br />");

echo(mt_rand() . "<br />");

echo(mt_rand(10,100))

?>

The output of the code above could be:

1150905288

613289478

21


PHP MySQL Connect to a Database

The free MySQL Database is very often used with PHP.

Connecting to a MySQL Database

Before you can access and work with data in a database, you must create a connection to the database.

In PHP, this is done with the mysql_connect() function.

Syntax

mysql_connect(servername,username,password);

Parameter | Description
servername | Optional. Specifies the server to connect to. Default value is "localhost:3306"
username | Optional. Specifies the username to log in with. Default value is the name of the user that owns the server process
password | Optional. Specifies the password to log in with. Default is ""

Note: There are more available parameters, but the ones listed above are the most important. Visit our full PHP MySQL Reference for more details.

Example

In the following example we store the connection in a variable ($con) for later use in the script. The "die" part will be executed if the connection fails:

<?php

$con = mysql_connect("localhost","peter","abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

// some code

?>

Closing a Connection

The connection will be closed as soon as the script ends. To close the connection before, use the mysql_close() function.

<?php

$con = mysql_connect("localhost","peter","abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

// some code

mysql_close($con);

?>


PHP MySQL Create Database and Tables

A database holds one or multiple tables.

Create a Database

The CREATE DATABASE statement is used to create a database in MySQL.

Syntax

CREATE DATABASE database_name

To get PHP to execute the statement above we must use the mysql_query() function. This function is used to send a query or command to a MySQL connection.

Example

In the following example we create a database called "my_db":

<?php

$con = mysql_connect("localhost","peter","abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

if (mysql_query("CREATE DATABASE my_db",$con))

{

echo "Database created";

}

else

{

echo "Error creating database: " . mysql_error();

}

mysql_close($con);

?>

Create a Table

The CREATE TABLE statement is used to create a database table in MySQL.

Syntax

CREATE TABLE table_name

(

column_name1 data_type,

column_name2 data_type,

column_name3 data_type,

.......

)

We must add the CREATE TABLE statement to the mysql_query() function to execute the command.

Example

The following example shows how you can create a table named "Person", with three columns. The column names will be "FirstName", "LastName" and "Age":

<?php

$con = mysql_connect("localhost","peter","abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

// Create database

if (mysql_query("CREATE DATABASE my_db",$con))

{

echo "Database created";

}

else

{

echo "Error creating database: " . mysql_error();

}

// Create table in my_db database

mysql_select_db("my_db", $con);

$sql = "CREATE TABLE Person

(

FirstName varchar(15),

LastName varchar(15),

Age int

)";

mysql_query($sql,$con);

mysql_close($con);

?>

Important: A database must be selected before a table can be created. The database is selected with the mysql_select_db() function.

Note: When you create a database field of type varchar, you must specify the maximum length of the field, e.g. varchar(15).

MySQL Data Types

Below is the different MySQL data types that can be used:

Numeric Data Types | Description
int(size) smallint(size) tinyint(size) mediumint(size) bigint(size) | Hold integers only. The maximum number of digits can be specified in the size parameter
decimal(size,d) double(size,d) float(size,d) | Hold numbers with fractions. The maximum number of digits can be specified in the size parameter. The maximum number of digits to the right of the decimal is specified in the d parameter

Textual Data Types | Description
char(size) | Holds a fixed length string (can contain letters, numbers, and special characters). The fixed size is specified in parenthesis
varchar(size) | Holds a variable length string (can contain letters, numbers, and special characters). The maximum size is specified in parenthesis
tinytext | Holds a variable string with a maximum length of 255 characters
text blob | Holds a variable string with a maximum length of 65535 characters
mediumtext mediumblob | Holds a variable string with a maximum length of 16777215 characters
longtext longblob | Holds a variable string with a maximum length of 4294967295 characters

Date Data Types | Description
date(yyyy-mm-dd) datetime(yyyy-mm-dd hh:mm:ss) timestamp(yyyymmddhhmmss) time(hh:mm:ss) | Holds date and/or time

Misc. Data Types | Description
enum(value1,value2,ect) | ENUM is short for ENUMERATED list. Can store one of up to 65535 values listed within the ( ) brackets. If a value is inserted that is not in the list, a blank value will be inserted
set | SET is similar to ENUM. However, SET can have up to 64 list items and can store more than one choice

Primary Keys and Auto Increment Fields

Each table should have a primary key field.

A primary key is used to uniquely identify the rows in a table. Each primary key value must be unique within the table. Furthermore, the primary key field cannot be null because the database engine requires a value to locate the record.

The primary key field is always indexed. There is no exception to this rule! You must index the primary key field so the database engine can quickly locate rows based on the key's value.

The following example sets the personID field as the primary key field. The primary key field is often an ID number, and is often used with the AUTO_INCREMENT setting. AUTO_INCREMENT automatically increases the value of the field by 1 each time a new record is added. To ensure that the primary key field cannot be null, we must add the NOT NULL setting to the field.

Example

$sql = "CREATE TABLE Person

(

personID int NOT NULL AUTO_INCREMENT,

PRIMARY KEY(personID),

FirstName varchar(15),

LastName varchar(15),

Age int

)";

mysql_query($sql,$con);


PHP MySQL Delete From

The DELETE FROM statement is used to delete rows from a database table.

Delete Data In a Database

The DELETE FROM statement is used to delete records from a database table.

Syntax

<

DELETE FROM table_name

WHERE column_name = some_value

Note: SQL statements are not case sensitive. DELETE FROM is the same as delete from.

To get PHP to execute the statement above we must use the mysql_query() function. This function is used to send a query or command to a MySQL connection.

Example

Earlier in the tutorial we created a table named "Person". Here is how it looks:

FirstName | LastName | Age
Peter | Griffin | 35
Glenn | Quagmire | 33

The following example deletes all the records in the "Person" table where LastName='Griffin':

<?php

$con = mysql_connect("localhost","peter","abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

mysql_select_db("my_db", $con);

mysql_query("DELETE FROM Person WHERE LastName='Griffin'");

mysql_close($con);

?>

After the deletion, the table will look like this:

FirstName | LastName | Age
Glenn | Quagmire | 33


PHP MySQL Functions

PHP MySQL Introduction

The MySQL functions allows you to access MySQL database servers.

Installation

For the MySQL functions to be available, you must compile PHP with MySQL support.

For compiling, use --with-mysql=DIR (the optional DIR points to the MySQL directory).

Note: For full functionality of MySQL versions greater than 4.1., use the MySQLi extension instead. If you would like to install both the mysql extension and the mysqli extension you should use the same client library to avoid any conflicts.

Installation on Linux Systems

PHP 5+: MySQL and the MySQL library is not enabled by default. Use the --with-mysql=DIR configure option to include MySQL support and download headers and libraries from www.mysql.com.

Installation on Windows Systems

PHP 5+: MySQL is not enabled by default, so the php_mysql.dll must be enabled inside of php.ini. Also, PHP needs access to the MySQL client library. A file named libmysql.dll is included in the Windows PHP distribution, and in order for PHP to talk to MySQL this file needs to be available to the Windows systems PATH.

To enable any PHP extension, the PHP extension_dir setting (in the php.ini file) should be set to the directory where the PHP extensions are located. An example extension_dir value is c:\php\ext.

Note: If you get the following error when starting the web server: "Unable to load dynamic library './php_mysql.dll'", this is because php_mysql.dll or libmysql.dll cannot be found by the system.

Runtime Configuration

The behavior of the MySQL functions is affected by settings in the php.ini file.

MySQL configuration options:

Name | Default | Description | Changeable
mysql.allow_persistent | "1" | Whether or not to allow persistent connections | PHP_INI_SYSTEM
mysql.max_persistent | "-1" | The maximum number of persistent connections per process | PHP_INI_SYSTEM
mysql.max_links | "-1" | The maximum number of connections per process (persistent connections included) | PHP_INI_SYSTEM
mysql.trace_mode | "0" | Trace mode. When set to "1", warnings and SQL-errors will be displayed. Available since PHP 4.3 | PHP_INI_ALL
mysql.default_port | NULL | The default TCP port number to use | PHP_INI_ALL
mysql.default_socket | NULL | The default socket name to use. Available since PHP 4.0.1 | PHP_INI_ALL
mysql.default_host | NULL | The default server host to use (doesn't apply in SQL safe mode) | PHP_INI_ALL
mysql.default_user | NULL | The default user name to use (doesn't apply in SQL safe mode) | PHP_INI_ALL
mysql.default_password | NULL | The default password to use (doesn't apply in SQL safe mode) | PHP_INI_ALL
mysql.connect_timeout | "60" | Connection timeout in seconds | PHP_INI_ALL

Resource Types

There are two resource types used in the MySQL extension. The first one is the link_identifier for a database connection, the second is a resource which holds the result of a query.

Note: Most MySQL functions accept link_identifier as the last optional parameter. If it is not provided, the last opened connection is used.

PHP MySQL Functions

PHP: indicates the earliest version of PHP that supports the function.

Function | Description | PHP
mysql_affected_rows() | Returns the number of affected rows in the previous MySQL operation | 3
mysql_change_user() | Deprecated. Changes the user of the current MySQL connection | 3
 | Returns the name of the character set for the current connection | 4
mysql_close() | Closes a non-persistent MySQL connection | 3
mysql_connect() | Opens a non-persistent MySQL connection | 3
mysql_create_db() | Deprecated. Creates a new MySQL database. Use mysql_query() instead | 3
mysql_data_seek() | Moves the record pointer | 3
mysql_db_name() | Returns a database name from a call to mysql_list_dbs() | 3
mysql_db_query() | Deprecated. Sends a MySQL query. Use mysql_select_db() and mysql_query() instead | 3
mysql_drop_db() | Deprecated. Deletes a MySQL database. Use mysql_query() instead | 3
mysql_errno() | Returns the error number of the last MySQL operation | 3
mysql_error() | Returns the error description of the last MySQL operation | 3
mysql_escape_string() | Deprecated. Escapes a string for use in a mysql_query. Use mysql_real_escape_string() instead | 4
mysql_fetch_array() | Returns a row from a recordset as an associative array and/or a numeric array | 3
mysql_fetch_assoc() | Returns a row from a recordset as an associative array | 4
 | Returns column info from a recordset as an object | 3
mysql_fetch_lengths() | Returns the length of the contents of each field in a result row | 3
mysql_fetch_object() | Returns a row from a recordset as an object | 3
mysql_fetch_row() | Returns a row from a recordset as a numeric array | 3
mysql_field_flags() | Returns the flags associated with a field in a recordset | 3
mysql_field_len() | Returns the maximum length of a field in a recordset | 3
 | Returns the name of a field in a recordset | 3
mysql_field_seek() | Moves the result pointer to a specified field | 3
mysql_field_table() | Returns the name of the table the specified field is in | 3
 | Returns the type of a field in a recordset | 3
mysql_free_result() | Free result memory | 3
 | Returns MySQL client info | 4
mysql_get_host_info() | Returns MySQL host info | 4
mysql_get_proto_info() | Returns MySQL protocol info | 4
mysql_get_server_info() | Returns MySQL server info | 4
mysql_info() | Returns information about the last query | 4
mysql_insert_id() | Returns the AUTO_INCREMENT ID generated from the previous INSERT operation | 3
 | Lists available databases on a MySQL server | 3
mysql_list_fields() | Deprecated. Lists MySQL table fields. Use mysql_query() instead | 3
mysql_list_processes() | Lists MySQL processes | 4
mysql_list_tables() | Deprecated. Lists tables in a MySQL database. Use mysql_query() instead | 3
mysql_num_fields() | Returns the number of fields in a recordset | 3
 | Returns the number of rows in a recordset | 3
 | Opens a persistent MySQL connection | 3
mysql_ping() | Pings a server connection or reconnects if there is no connection | 4
mysql_query() | Executes a query on a MySQL database | 3
mysql_real_escape_string() | Escapes a string for use in SQL statements | 4
mysql_result() | Returns the value of a field in a recordset | 3
mysql_select_db() | Sets the active MySQL database | 3
mysql_stat() | Returns the current system status of the MySQL server | 4
mysql_tablename() | Deprecated. Returns the table name of field. Use mysql_query() instead | 3
 | Returns the current thread ID | 4
mysql_unbuffered_query() | Executes a query on a MySQL database (without fetching / buffering the result) | 4

PHP MySQL Constants

Since PHP 4.3 it has been possible to specify additional flags for the mysql_connect() and mysql_pconnect() functions:

PHP: indicates the earliest version of PHP that supports the constant.

Constant | Description | PHP
MYSQL_CLIENT_COMPRESS | Use compression protocol | 4.3
MYSQL_CLIENT_IGNORE_SPACE | Allow space after function names | 4.3
MYSQL_CLIENT_INTERACTIVE | Allow interactive timeout seconds of inactivity before closing the connection | 4.3
MYSQL_CLIENT_SSL | Use SSL encryption (only available with version 4+ of the MySQL client library) | 4.3

The mysql_fetch_array() function uses a constant for the different types of result arrays. The following constants are defined:

Constant | Description | PHP
MYSQL_ASSOC | Columns are returned into the array with the fieldname as the array index |
MYSQL_BOTH | Columns are returned into the array having both a numerical index and the fieldname as the array index |
MYSQL_NUM | Columns are returned into the array having a numerical index (index starts at 0) |


PHP MySQL Insert Into

The INSERT INTO statement is used to insert new records into a database table.

Insert Data Into a Database Table

The INSERT INTO statement is used to add new records to a database table.

Syntax

INSERT INTO table_name

VALUES (value1, value2,....)

You can also specify the columns where you want to insert the data:

INSERT INTO table_name (column1, column2,...)

VALUES (value1, value2,....)

Note: SQL statements are not case sensitive. INSERT INTO is the same as insert into.

To get PHP to execute the statements above we must use the mysql_query() function. This function is used to send a query or command to a MySQL connection.

Example

In the previous chapter we created a table named "Person", with three columns; "Firstname", "Lastname" and "Age". We will use the same table in this example. The following example adds two new records to the "Person" table:

<?php

$con = mysql_connect("localhost","peter","abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

mysql_select_db("my_db", $con);

mysql_query("INSERT INTO person (FirstName, LastName, Age)

VALUES ('Peter', 'Griffin', '35')");

mysql_query("INSERT INTO person (FirstName, LastName, Age)

VALUES ('Glenn', 'Quagmire', '33')");

mysql_close($con);

?>

Insert Data From a Form Into a Database

Now we will create an HTML form that can be used to add new records to the "Person" table.

Here is the HTML form:

<html>

<body>

<form action="insert.php" method="post">

Firstname: <input type="text" name="firstname" />

Lastname: <input type="text" name="lastname" />

Age: <input type="text" name="age" />

<input type="submit" />

</form>

</body>

</html>

When a user clicks the submit button in the HTML form in the example above, the form data is sent to "insert.php". The "insert.php" file connects to a database, and retrieves the values from the form with the PHP $_POST variables. Then, the mysql_query() function executes the INSERT INTO statement, and a new record will be added to the database table.

Below is the code in the "insert.php" page:

<?php

$con = mysql_connect("localhost","peter","abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

mysql_select_db("my_db", $con);

$sql="INSERT INTO person (FirstName, LastName, Age)

VALUES

('$_POST[firstname]','$_POST[lastname]','$_POST[age]')";

if (!mysql_query($sql,$con))

{

die('Error: ' . mysql_error());

}

echo "1 record added";

mysql_close($con)

?>


PHP MySQL Introduction

MySQL is the most popular open source database server.

What is MySQL?

MySQL is a database. A database defines a structure for storing information.

In a database, there are tables. Just like HTML tables, database tables contain rows, columns, and cells.

Databases are useful when storing information categorically. A company may have a database with the following tables: "Employees", "Products", "Customers" and "Orders".

Database Tables

A database most often contains one or more tables. Each table has a name (e.g. "Customers" or "Orders"). Each table contains records (rows) with data.

Below is an example of a table called "Persons":

LastName | FirstName | Address | City
Hansen | Ola | Timoteivn 10 | Sandnes
Svendson | Tove | Borgvn 23 | Sandnes
Pettersen | Kari | Storgt 20 | Stavanger

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

Queries

A query is a question or a request.

With MySQL, we can query a database for specific information and have a recordset returned.

Look at the following query:

SELECT LastName FROM Persons

The query above selects all the data in the LastName column in the Persons table, and will return a recordset like this:

LastName

Hansen

Svendson

Pettersen

Download MySQL Database

If you don't have a PHP server with a MySQL Database, you can download MySQL for free here: http://www.mysql.com/downloads/index.html

Facts About MySQL Database

One great thing about MySQL is that it can be scaled down to support embedded database applications. Perhaps it is because of this reputation that many people believe that MySQL can only handle small to medium-sized systems.

The truth is that MySQL is the de-facto standard database for web sites that support huge volumes of both data and end users (like Friendster, Yahoo, Google). Look at for an overview of companies that use MySQL.


PHP MySQL Order By Keyword

The ORDER BY keyword is used to sort the data in a recordset.

The ORDER BY Keyword

The ORDER BY keyword is used to sort the data in a recordset.

Syntax

SELECT column_name(s)

FROM table_name

ORDER BY column_name

Note: SQL statements are not case sensitive. ORDER BY is the same as order by.

Example

The following example selects all the data stored in the "Person" table, and sorts the result by the "Age" column:

<?php

$con = mysql_connect("localhost","peter","abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

mysql_select_db("my_db", $con);

$result = mysql_query("SELECT * FROM person ORDER BY age");

while($row = mysql_fetch_array($result))

{

echo $row['FirstName'];

echo " " . $row['LastName'];

echo " " . $row['Age'];

echo "<br />";

}

mysql_close($con);

?>

The output of the code above will be:

Glenn Quagmire 33

Peter Griffin 35

Sort Ascending or Descending

If you use the ORDER BY keyword, the sort-order of the recordset is ascending by default (1 before 9 and "a" before "p").

Use the DESC keyword to specify a descending sort-order (9 before 1 and "p" before "a"):

SELECT column_name(s)

FROM table_name

ORDER BY column_name DESC

Order by Two Columns

It is possible to order by more than one column. When ordering by more than one column, the second column is only used if the values in the first column are identical:

SELECT column_name(s)

FROM table_name

ORDER BY column_name1, column_name2


PHP MySQL Select

The SELECT statement is used to select data from a database.

Select Data From a Database Table

The SELECT statement is used to select data from a database.

Syntax

SELECT column_name(s)

FROM table_name

Note: SQL statements are not case sensitive. SELECT is the same as select.

To get PHP to execute the statement above we must use the mysql_query() function. This function is used to send a query or command to a MySQL connection.

Example

The following example selects all the data stored in the "Person" table (The * character selects all of the data in the table):

<?php

$con = mysql_connect("localhost","peter","abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

mysql_select_db("my_db", $con);

$result = mysql_query("SELECT * FROM person");

while($row = mysql_fetch_array($result))

{

echo $row['FirstName'] . " " . $row['LastName'];

echo "<br />";

}

mysql_close($con);

?>

The example above stores the data returned by the mysql_query() function in the $result variable. Next, we use the mysql_fetch_array() function to return the first row from the recordset as an array. Each subsequent call to mysql_fetch_array() returns the next row in the recordset. The while loop loops through all the records in the recordset. To print the value of each row, we use the PHP $row variable ($row['FirstName'] and $row['LastName']).

The output of the code above will be:

Peter Griffin

Glenn Quagmire

Display the Result in an HTML Table

The following example selects the same data as the example above, but will display the data in an HTML table:

<?php

$con = mysql_connect("localhost","peter","abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

mysql_select_db("my_db", $con);

$result = mysql_query("SELECT * FROM person");

echo "<table border='1'>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>";

while($row = mysql_fetch_array($result))

{

echo "<tr>";

echo "<td>" . $row['FirstName'] . "</td>";

echo "<td>" . $row['LastName'] . "</td>";

echo "</tr>";

}

echo "</table>";

mysql_close($con);

?>

The output of the code above will be:

Firstname | Lastname
Glenn | Quagmire
Peter | Griffin


PHP MySQL Update

The UPDATE statement is used to modify data in a database table.

Update Data In a Database

The UPDATE statement is used to modify data in a database table.

Syntax

UPDATE table_name

SET column_name = new_value

WHERE column_name = some_value

Note: SQL statements are not case sensitive. UPDATE is the same as update.

To get PHP to execute the statement above we must use the mysql_query() function. This function is used to send a query or command to a MySQL connection.

Example

Earlier in the tutorial we created a table named "Person". Here is how it looks:

FirstName | LastName | Age
Peter | Griffin | 35
Glenn | Quagmire | 33

The following example updates some data in the "Person" table:

<?php

$con = mysql_connect("localhost","peter","abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

mysql_select_db("my_db", $con);

mysql_query("UPDATE Person SET Age = '36'

WHERE FirstName = 'Peter' AND LastName = 'Griffin'");

mysql_close($con);

?>

After the update, the "Person" table will look like this:

FirstName | LastName | Age
Peter | Griffin | 36
Glenn | Quagmire | 33


PHP MySQL Where Clause

PHP MySQL The Where Clause

To select only data that matches a specified criteria, add a WHERE clause to the SELECT statement.

The WHERE clause

To select only data that matches a specific criteria, add a WHERE clause to the SELECT statement.

Syntax

SELECT column FROM table

WHERE column operator value

The following operators can be used with the WHERE clause:

Operator | Description
= | Equal
!= | Not equal
> | Greater than
< | Less than
>= | Greater than or equal
<= | Less than or equal
BETWEEN | Between an inclusive range
LIKE | Search for a pattern

Note: SQL statements are not case sensitive. WHERE is the same as where.

To get PHP to execute the statement above we must use the mysql_query() function. This function is used to send a query or command to a MySQL connection.

Example

The following example will select all rows from the "Person" table, where FirstName='Peter':

<?php

$con = mysql_connect("localhost","peter","abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

mysql_select_db("my_db", $con);

$result = mysql_query("SELECT * FROM person

WHERE FirstName='Peter'");

while($row = mysql_fetch_array($result))

{

echo $row['FirstName'] . " " . $row['LastName'];

echo "<br />";

}

?>

The output of the code above will be:

Peter Griffin


PHP mysql_affected_rows() Function

Definition and Usage

The mysql_affected_rows() function returns the number of affected rows in the previous MySQL operation.

This function returns the number of affected rows on success, or -1 if the last operation failed.

Syntax

mysql_affected_rows(connection)

Parameter | Description
connection | Optional. Specifies the MySQL connection. If not specified, the last connection opened by mysql_connect() or mysql_pconnect() is used.

Example

<?php

$con = mysql_connect("localhost","mysql_user","mysql_pwd");

if (!$con)

{

die("Could not connect: " . mysql_error());

}

mysql_select_db("mydb");

mysql_query("DELETE FROM mytable WHERE id < 5");

$rc = mysql_affected_rows();

echo "Records deleted: " . $rc;

mysql_close($con);

?>

The output of the code above could be:

Records deleted: 4


PHP mysql_client_encoding() Function

Definition and Usage

The mysql_client_encoding() function returns the name of the character set for the current connection.

Syntax

mysql_client_encoding(connection)

Parameter | Description
connection | Optional. Specifies the MySQL connection. If not specified, the last connection opened by mysql_connect() or mysql_pconnect() is used.

Example

<?php

$con = mysql_connect("localhost","mysql_user","mysql_pwd");

if (!$con)

{

die("Could not connect: " . mysql_error());

}

$charset = mysql_client_encoding($con);

echo "The current character set is: $charset";

mysql_close($con);

?>

The output of the code above could be:

The current character set is: latin1


PHP mysql_close() Function

Definition and Usage

The mysql_close() function closes a non-persistent MySQL connection.

This function returns TRUE on success, or FALSE on failure.

Syntax

mysql_close(connection)

Parameter | Description
connection | Optional. Specifies the MySQL connection to close. If not specified, the last connection opened by mysql_connect() is used.

Tips and Notes

Tip: Using mysql_close() isn't required, as non-persistent connections are automatically closed at the end of the script.

Example

<?php

$con = mysql_connect("localhost","mysql_user","mysql_pwd");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

// some code

mysql_close($con);

?>


PHP mysql_connect() Function

Definition and Usage

The mysql_connect() function opens a non-persistent MySQL connection.

This function returns the connection on success, or FALSE and an error on failure. You can hide the error output by adding an '@' in front of the function name.

Syntax

mysql_connect(server,user,pwd,newlink,clientflag)

Parameter

Description

server

Optional. Specifies the server to connect to (can also include a port number. e.g. "hostname:port" or a path to a local socket for the localhost). Default value is "localhost:3306"

user

Optional. Specifies the username to log in with. Default value is the name of the user that owns the server process

pwd

Optional. Specifies the password to log in with. Default is ""

newlink

Optional. If a second call is made to mysql_connect() with the same arguments, no new connection will be established; instead, the identifier of the already opened connection will be returned

clientflag

Optional. Can be a combination of the following constants:

· MYSQL_CLIENT_SSL - Use SSL encryption
· MYSQL_CLIENT_COMPRESS - Use compression protocol
· MYSQL_CLIENT_IGNORE_SPACE - Allow space after function names
· MYSQL_CLIENT_INTERACTIVE - Allow interactive timeout seconds of inactivity before closing the connection

Tips and Notes

Tip: The connection will be closed as soon as the script ends. To close the connection before, use mysql_close().

Tip: To establish a persistent MySQL connection, use mysql_pconnect() instead.

Example

<?php

$con = mysql_connect("localhost","mysql_user","mysql_pwd");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

// some code

mysql_close($con);

?>


PHP mysql_data_seek() Function

Definition and Usage

The mysql_data_seek() function moves the internal row pointer.

The internal row pointer is the current row position in a result returned by the mysql_query() function.

This function returns TRUE on success, or FALSE on failure.

Syntax

mysql_data_seek(data,row)

Parameter | Description
data | Required. Specifies which data pointer to use. The data pointer is the result from the mysql_query() function
row | Required. Specifies which record to move to. 0 indicates the first record

Tips and Notes

Note: This function can only be used with mysql_query(), and not mysql_unbuffered_query().

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db("test_db",$con);

$sql = "SELECT * from Person";

$result = mysql_query($sql,$con);

print_r(mysql_fetch_row($result));

mysql_data_seek($result,3);

print_r(mysql_fetch_row($result));

mysql_close($con);

?>

The output of the code above could be:

Array

(

[0] => Refsnes

[1] => Kai Jim

[2] => Taugata

)

Array

(

[0] => Refsnes

[1] => Ståle

[2] => Sandnes

)


PHP mysql_db_name() Function

Definition and Usage

The mysql_db_name() function finds the database name from a call to the mysql_list_dbs() function.

This function returns the database name on success, or FALSE on failure.

Syntax

mysql_db_name(list,row,field)

Parameter | Description
list | Required. Specifies result pointer from the mysql_list_dbs() function
row | Required. Specifies what row-index in the result pointer to return. Starts at zero.
field | Optional. Specifies the field name

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_list = mysql_list_dbs($con);

$i = 0;

$db_count = mysql_num_rows($db_list);

while ($i < $db_count)

{

echo mysql_db_name($db_list, $i) . "<br />";

$i++;

}

mysql_close($con);

?>

The output of the code above could be:

mysql

customers

movies


PHP mysql_error() Function

Definition and Usage

The mysql_error() function returns the error description of the last MySQL operation.

This function returns an empty string ("") if no error occurs.

Syntax

mysql_error(connection)

Parameter | Description
connection | Optional. Specifies the MySQL connection. If not specified, the last connection opened by mysql_connect() or mysql_pconnect() is used.

Example

In this example we will try to log on to a MySQL server with the wrong username and password:

<?php

$con = mysql_connect("localhost","wrong_user","wrong_pwd");

if (!$con)

{

die(mysql_error());

}

mysql_close($con);

?>

The output of the code above could be:

Access denied for user 'wrong_user'@'localhost'

(using password: YES)


PHP mysql_fetch_array() Function

Definition and Usage

The mysql_fetch_array() function returns a row from a recordset as an associative array and/or a numeric array.

This function gets a row from the mysql_query() function and returns an array on success, or FALSE on failure or when there are no more rows.

Syntax

mysql_fetch_array(data,array_type)

Parameter

Description

data

Required. Specifies which data pointer to use. The data pointer is the result from the mysql_query() function

array_type

Optional. Specifies what kind of array to return.

Possible values:

· MYSQL_ASSOC - Associative array
· MYSQL_NUM - Numeric array
· MYSQL_BOTH - Default. Both associative and numeric array

Tips and Notes

Note: After the data is retrieved, this function moves to the next row in the recordset. Each subsequent call to mysql_fetch_array() returns the next row in the recordset.

Tip: Field names returned by this function are case-sensitive.

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db("test_db",$con);

$sql = "SELECT * from Person WHERE Lastname='Refsnes'";

$result = mysql_query($sql,$con);

print_r(mysql_fetch_array($result));

mysql_close($con);

?>

The output of the code above could be:

Array

(

[0] => Refsnes

[LastName] => Refsnes

[1] => Kai Jim

[FirstName] => Kai Jim

[2] => Taugata 2

[Address] => Taugata 2

[3] => 22

[Age] => 22

)


PHP mysql_fetch_assoc() Function

Definition and Usage

The mysql_fetch_assoc() function returns a row from a recordset as an associative array.

This function gets a row from the mysql_query() function and returns an array on success, or FALSE on failure or when there are no more rows.

Syntax

mysql_fetch_assoc(data)

Parameter | Description
data | Required. Specifies which data pointer to use. The data pointer is the result from the mysql_query() function

Tips and Notes

Note: After the data is retrieved, this function moves to the next row in the recordset. Each subsequent call to mysql_fetch_assoc() returns the next row in the recordset.

Tip: Field names returned by this function are case-sensitive.

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db("test_db",$con);

$sql = "SELECT * from Person WHERE Lastname='Refsnes'";

$result = mysql_query($sql,$con);

print_r(mysql_fetch_assoc($result));

mysql_close($con);

?>

The output of the code above could be:

Array

(

[LastName] => Refsnes

[FirstName] => Kai Jim

[Address] => Taugata 2

[Age] => 22

)


PHP mysql_fetch_field() Function

Definition and Usage

The mysql_fetch_field() function returns an object containing information of a field from a recordset.

This function gets field data from the mysql_query() function and returns an object on success, or FALSE on failure or when there are no more rows.

Possible return values:

· name - Field name
· table - The table the field belongs to
· def - Default value for the field
· max_length - Maximum field length
· not_null - 1 if the field cannot be NULL
· primary_key - 1 if the field is a primary key
· unique_key - 1 if the field is a unique key
· multiple_key - 1 if the field is a non-unique key
· numeric - 1 if the field is numeric
· blob - 1 if the field is a BLOB
· type - Field type
· unsigned - 1 if the field is unsigned
· zerofill - 1 if the field is zero-filled

Syntax

mysql_fetch_field(data,field_offset)

Parameter | Description
data | Required. Specifies which data pointer to use. The data pointer is the result from the mysql_query() function
field_offset | Optional. Specifies which field to start returning. 0 indicates the first field. If this parameter is not set, it will retrieve the next field

Tips and Notes

Note: Each subsequent call to mysql_fetch_field() returns the next field in the recordset.

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db("test_db",$con);

$sql = "SELECT * from Person";

$result = mysql_query($sql,$con);

while ($property = mysql_fetch_field($result))

{

echo "Field name: " . $property->name . "<br />";

echo "Table name: " . $property->table . "<br />";

echo "Default value: " . $property->def . "<br />";

echo "Max length: " . $property->max_length . "<br />";

echo "Not NULL: " . $property->not_null . "<br />";

echo "Primary Key: " . $property->primary_key . "<br />";

echo "Unique Key: " . $property->unique_key . "<br />";

echo "Mutliple Key: " . $property->multiple_key . "<br />";

echo "Numeric Field: " . $property->numeric . "<br />";

echo "BLOB: " . $property->blob . "<br />";

echo "Field Type: " . $property->type . "<br />";

echo "Unsigned: " . $property->unsigned . "<br />";

echo "Zero-filled: " . $property->zerofill . "<br /><br />";

}

mysql_close($con);

?>

The output of the code above could be:

Field name: LastName

Table name: Person

Default value:

Max length: 8

Not NULL: 0

Primary Key: 0

Unique Key: 0

Mutliple Key: 0

Numeric Field: 0

BLOB: 0

Field Type: string

Unsigned: 0

Zero-filled: 0

Field name: FirstName

Table name: Person

Default value:

Max length: 7

Not NULL: 0

Primary Key: 0

Unique Key: 0

Mutliple Key: 0

Numeric Field: 0

BLOB: 0

Field Type: string

Unsigned: 0

Zero-filled: 0

Field name: Address

Table name: Person

Default value:

Max length: 9

Not NULL: 0

Primary Key: 0

Unique Key: 0

Mutliple Key: 0

Numeric Field: 0

BLOB: 0

Field Type: string

Unsigned: 0

Zero-filled: 0

Field name: Age

Table name: Person

Default value:

Max length: 2

Not NULL: 0

Primary Key: 0

Unique Key: 0

Mutliple Key: 0

Numeric Field: 1

BLOB: 0

Field Type: int

Unsigned: 0

Zero-filled: 0


PHP mysql_fetch_lengths() Function

Definition and Usage

The mysql_fetch_lengths() function returns the length of the contents of each field in a row.

The row is retrieved by mysql_fetch_array(), mysql_fetch_assoc(), mysql_fetch_object(), or mysql_fetch_row().

This function returns a numeric array on success, or FALSE on failure or when there are no more rows.

Syntax

mysql_fetch_lengths(data)

Parameter | Description
data | Required. Specifies which data pointer to use. The data pointer is the result from the mysql_query() function

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db("test_db",$con);

$sql = "SELECT * from Person WHERE Lastname='Refsnes'";

$result = mysql_query($sql,$con);

print_r(mysql_fetch_row($result));

print_r(mysql_fetch_lengths($result));

mysql_close($con);

?>

The output of the code above could be:

Array

(

[0] => Refsnes

[1] => Kai Jim

[2] => Taugata 2

[3] => 22

)

Array

(

[0] => 7

[1] => 7

[2] => 9

[3] => 2

)


PHP mysql_fetch_object() Function

Definition and Usage

The mysql_fetch_object() function returns a row from a recordset as an object.

This function gets a row from the mysql_query() function and returns an object on success, or FALSE on failure or when there are no more rows.

Syntax

mysql_fetch_object(data)

Parameter | Description
data | Required. Specifies which data pointer to use. The data pointer is the result from the mysql_query() function

Tips and Notes

Note: Each subsequent call to mysql_fetch_object() returns the next row in the recordset.

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db("test_db",$con);

$sql = "SELECT * from Person";

$result = mysql_query($sql,$con);

while ($row = mysql_fetch_object($result))

{

echo $row->FirstName . "<br />";

}

mysql_close($con);

?>

The output of the code above could be:

Kai Jim

Ståle

Hege


PHP mysql_fetch_row() Function

Definition and Usage

The mysql_fetch_row() function returns a row from a recordset as a numeric array.

This function gets a row from the mysql_query() function and returns an array on success, or FALSE on failure or when there are no more rows.

Syntax

mysql_fetch_row(data)

Parameter | Description
data | Required. Specifies which data pointer to use. The data pointer is the result from the mysql_query() function

Tips and Notes

Note: After the data is retrieved, this function moves to the next row in the recordset. Each subsequent call to mysql_fetch_assoc() returns the next row in the recordset.

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db("test_db",$con);

$sql = "SELECT * from Person WHERE Lastname='Refsnes'";

$result = mysql_query($sql,$con);

print_r(mysql_fetch_row($result));

mysql_close($con);

?>

The output of the code above could be:

Array

(

[0] => Refsnes

[1] => Kai Jim

[2] => Taugata 2

[3] => 22

)


PHP mysql_field_len() Function

Definition and Usage

The mysql_field_len() function returns the maximum length of a field in a recordset.

Returns the length of the field on success, or FALSE on failure.

Syntax

mysql_field_len(data,field_offset)

Parameter | Description
data | Required. Specifies which data pointer to use. The data pointer is the result from the mysql_query() function
field_offset | Required. Specifies which field to start returning. 0 indicates the first field

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db("test_db",$con);

$sql = "SELECT * from Person";

$result = mysql_query($sql,$con);

$length = mysql_field_len($result, 0);

echo $length;

mysql_close($con);

?>

The output of the code above could be:

20


PHP mysql_field_name() Function

Definition and Usage

The mysql_field_name() function returns the name of a field in a recordset.

Returns the field name on success, or FALSE on failure.

Syntax

mysql_field_name(data,field_offset)

Parameter | Description
data | Required. Specifies which data pointer to use. The data pointer is the result from the mysql_query() function
field_offset | Required. Specifies which field to start returning. 0 indicates the first field

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db("test_db",$con);

$sql = "SELECT * from Person";

$result = mysql_query($sql,$con);

$name = mysql_field_name($result, 0);

echo $name;

mysql_close($con);

?>

The output of the code above could be:

LastName


PHP mysql_field_seek() Function

Definition and Usage

The mysql_field_seek() function jumps to a specified field in a recordset.

This function returns TRUE on success, or FALSE and a warning on failure.

Syntax

mysql_field_seek(data,field_offset)

Parameter | Description
data | Required. Specifies which data pointer to use. The data pointer is the result from the mysql_query() function
field_offset | Required. Specifies which field to jump to. 0 indicates the first field

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db("test_db",$con);

$sql = "SELECT * from Person";

$result = mysql_query($sql,$con);

// Jump to the fourth field

mysql_field_seek($result,3);

print_r(mysql_fetch_field($result));

mysql_close($con);

?>

The output of the code above could be:

stdClass Object

(

[name] => Age

[table] => Person

[def] =>

[max_length] => 2

[not_null] => 0

[primary_key] => 0

[multiple_key] => 0

[unique_key] => 0

[numeric] => 1

[blob] => 0

[type] => int

[unsigned] => 0

[zerofill] => 0

)


PHP mysql_field_table() Function

Definition and Usage

The mysql_field_table() function returns the name of the table where a specified field is located.

Returns the table name of a specified field name on success, or FALSE on failure.

Syntax

mysql_field_table(data,field_offset)

Parameter | Description
data | Required. Specifies which data pointer to use. The data pointer is the result from the mysql_query() function
field_offset | Required. Specifies which field to start on. 0 indicates the first field

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db("test_db",$con);

$sql = "SELECT * from Person";

$result = mysql_query($sql,$con);

$table = mysql_field_table($result, 0);

echo $table;

mysql_close($con);

?>

The output of the code above could be:

Person


PHP mysql_field_type() Function

Definition and Usage

The mysql_field_type() function returns the type of a field in a recordset.

Returns the type of the specified field on success, or FALSE on failure.

Syntax

mysql_field_type(data,field_offset)

Parameter | Description
data | Required. Specifies which data pointer to use. The data pointer is the result from the mysql_query() function
field_offset | Required. Specifies which field to start on. 0 indicates the first field

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db("test_db",$con);

$sql = "SELECT * from Person";

$result = mysql_query($sql,$con);

$type = mysql_field_type($result, 0);

echo $type;

mysql_close($con);

?>

The output of the code above could be:

string


PHP mysql_free_result() Function

Definition and Usage

The mysql_free_result() function frees memory used by a result handle.

This function returns TRUE on success, or FALSE on failure.

Syntax

mysql_free_result(data)

Parameter | Description
data | Required. Specifies which result handle to free. The result handle is the return from the mysql_query() function

Tips and Notes

Tip: PHP automatically releases the memory used by result handles at the end of the script. However, this function can be useful when you want to free up memory between large queries.

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db("test_db",$con);

$sql = "SELECT * from Person";

$result = mysql_query($sql,$con);

print_r(mysql_fetch_row($result));

// Free memory

mysql_free_result($result);

$sql = "SELECT * from Customers";

$result = mysql_query($sql,$con);

print_r(mysql_fetch_row($result));

mysql_close($con);

?>


PHP mysql_get_client_info() Function

Definition and Usage

The mysql_get_client_info() function gets information about the MySQL client.

This function returns the MySQL client version number on success, or FALSE on failure.

Syntax

mysql_get_client_info()

Example

<?php

echo "MySQL client info: " . mysql_get_client_info();

?>

The output of the code above could be:

MySQL client info: 5.0.18


PHP mysql_get_host_info() Function

Definition and Usage

The mysql_get_host_info() function gets information about the MySQL host.

This function returns the type of MySQL connection currently in use, or FALSE on failure.

Syntax

mysql_get_host_info(connection)

Parameter | Description
connection | Optional. Specifies the MySQL connection. If not specified, the last connection opened by mysql_connect() or mysql_pconnect() is used.

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

echo "MySQL host info: " . mysql_get_host_info($con);

?>

The output of the code above could be:

MySQL host info: localhost via TCP/IP


PHP mysql_get_proto_info() Function

Definition and Usage

The mysql_get_proto_info() function gets information about the MySQL protocol.

This function returns the MySQL protocol version on success, or FALSE on failure.

Syntax

mysql_get_proto_info(connection)

Parameter | Description
connection | Optional. Specifies the MySQL connection. If not specified, the last connection opened by mysql_connect() or mysql_pconnect() is used.

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

echo "MySQL protocol info: " . mysql_get_proto_info($con);

?>

The output of the code above could be:

MySQL protocol info: 10


PHP mysql_get_server_info() Function

Definition and Usage

The mysql_get_server_info() function gets information about the MySQL server.

This function returns the MySQL server version on success, or FALSE on failure.

Syntax

mysql_get_server_info(connection)

Parameter | Description
connection | Optional. Specifies the MySQL connection. If not specified, the last connection opened by mysql_connect() or mysql_pconnect() is used.

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

echo "MySQL server info: " . mysql_get_server_info($con);

?>

The output of the code above could be:

MySQL server info: 5.0.18-nt


PHP mysql_info() Function

Definition and Usage

The mysql_info() function returns information about the last query.

This function returns information about the statement on success, or FALSE on failure.

Syntax

mysql_info(connection)

Parameter | Description
connection | Optional. Specifies the MySQL connection. If not specified, the last connection opened by mysql_connect() or mysql_pconnect() is used.

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db("test_db",$con);

$sql = "INSERT INTO person VALUES ('John','Doe','Utah','17')";

$result = mysql_query($sql,$con);

$info = mysql_info($con);

echo $info;

mysql_close($con);

?>

The output of the code above could be:

String format: Records: 15 Duplicates: 0 Warnings: 0


PHP mysql_insert_id() Function

Definition and Usage

The mysql_insert_id() function returns the AUTO_INCREMENT ID generated from the previous INSERT operation.

This function returns 0 if the previous operation does not generate an AUTO_INCREMENT ID, or FALSE on MySQL connection failure.

Syntax

mysql_insert_id(connection)

Parameter | Description
connection | Optional. Specifies the MySQL connection. If not specified, the last connection opened by mysql_connect() or mysql_pconnect() is used.

Tips and Notes

Note: Be sure to call mysql_insert_id() immediately after a query to get the correct value.

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db("test_db",$con);

$sql = "INSERT INTO person VALUES ('Børge','Refsnes','Sandnes','17')";

$result = mysql_query($sql,$con);

echo "ID of last inserted record is: " . mysql_insert_id());

mysql_close($con);

?>

The output of the code above could be:

ID of last inserted record is: 5


PHP mysql_list_dbs() Function

Definition and Usage

The mysql_list_dbs() function finds the available databases on a MySQL server for a given connection.

This function returns a result pointer containing the available databases on success, or FALSE on failure.

Syntax

mysql_list_dbs(connection)

Parameter | Description
connection | Optional. Specifies the MySQL connection. If not specified, the last connection opened by mysql_connect() or mysql_pconnect() is used.

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_list = mysql_list_dbs($con);

while ($db = mysql_fetch_object($db_list))

{

echo $db->Database . "<br />";

}

mysql_close($con);

?>

The output of the code above could be:

mysql

test

test_db


PHP mysql_list_processes() Function

Definition and Usage

The mysql_list_processes() function finds current MySQL connection processes.

This function returns a result pointer containing the current processes on success, or FALSE on failure.

Syntax

mysql_list_processes(connection)

Parameter | Description
connection | Optional. Specifies the MySQL connection. If not specified, the last connection opened by mysql_connect() or mysql_pconnect() is used.

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$my_list = mysql_list_processes($con);

while ($row = mysql_fetch_assoc($my_list))

{

print_r($row);

}

mysql_close($con);

?>

The output of the code above could be:

Array

(

[Id] => 2

[User] => peter

[Host] => localhost:1038

[db] =>

[Command] => Processlist

[Time] => 0

[State] =>

[Info] =>

)


PHP mysql_num_fields() Function

Definition and Usage

The mysql_num_fields() function returns the number of fields in a recordset.

This function returns FALSE on failure.

Syntax

mysql_num_fields(data)

Parameter | Description
data | Required. Specifies which data pointer to use. The data pointer is the result from the mysql_query() function

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db("test_db",$con);

$sql = "SELECT * FROM person";

$result = mysql_query($sql,$con);

echo mysql_num_fields($result);

mysql_close($con);

?>

The output of the code above could be:

4


PHP mysql_num_rows() Function

Definition and Usage

The mysql_num_rows() function returns the number of rows in a recordset.

This function returns FALSE on failure.

Syntax

mysql_num_rows(data)

Parameter | Description
data | Required. Specifies which data pointer to use. The data pointer is the result from the mysql_query() function

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db("test_db",$con);

$sql = "SELECT * FROM person";

$result = mysql_query($sql,$con);

echo mysql_num_rows($result);

mysql_close($con);

?>

The output of the code above could be:

4


PHP mysql_pconnect() Function

Definition and Usage

The mysql_pconnect() function opens a persistent MySQL connection.

This function returns the connection on success, or FALSE and an error on failure. You can hide the error output by adding an '@' in front of the function name.

mysql_pconnect() is much like mysql_connect(), but with two major differences:

· This function will try to find a connection that's already open, with the same host, username and password. If one is found, this will be returned instead of opening a new connection
· The connection will not be closed when the execution of the script ends (mysql_close() will not close connection opened by mysql_pconnect()). It will stay open for future use

Syntax

mysql_pconnect(server,user,pwd,clientflag)

Parameter

Description

server

Optional. Specifies the server to connect to (can also include a port number. e.g. "hostname:port" or a path to a local socket for the localhost). Default value is "localhost:3306"

user

Optional. Specifies the username to log in with. Default value is the name of the user that owns the server process

pwd

Optional. Specifies the password to log in with. Default is ""

clientflag

Optional. Can be a combination of the following constants:

· MYSQL_CLIENT_SSL - Use SSL encryption
· MYSQL_CLIENT_COMPRESS - Use compression protocol
· MYSQL_CLIENT_IGNORE_SPACE - Allow space after function names
· MYSQL_CLIENT_INTERACTIVE - Allow interactive timeout seconds of inactivity before closing the connection

Tips and Notes

Tip: To establish a non-persistent MySQL connection, use mysql_connect() instead.

Example

<?php

$con = mysql_pconnect("localhost","mysql_user","mysql_pwd");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

?>


PHP mysql_ping() Function

Definition and Usage

The mysql_ping() function pings a server connection or reconnects to it if there is no connection.

This function returns TRUE if there is a connection, or FALSE on failure.

Syntax

mysql_ping(connection)

Parameter | Description
connection | Optional. Specifies the MySQL connection. If not specified, the last connection opened by mysql_connect() or mysql_pconnect() is used.

Tips and Notes

Note: This function can be used by scripts that remain idle for a long time.

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db("test_db", $con);

$sql = "SELECT * from Person";

$result = mysql_query($sql,$link);

mysql_ping();

// some code

mysql_close($con);

?>


PHP mysql_real_escape_string() Function

Definition and Usage

The mysql_real_escape_string() function escapes special characters in a string for use in an SQL statement

The following characters are affected:

· \x00
· \n
· \r
· \
· '
· "
· \x1a

This function returns the escaped string on success, or FALSE on failure.

Syntax

mysql_real_escape_string(string,connection)

Parameter | Description
string | Required. Specifies the string to be escaped
connection | Optional. Specifies the MySQL connection. If not specified, the last connection opened by mysql_connect() or mysql_pconnect() is used.

Tips and Notes

Note: Use this function to prevent database attack!

Example 1

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

// some code to get username and password

// escape username and password for use in SQL

$user = mysql_real_escape_string($user);

$pwd = mysql_real_escape_string($pwd));

$sql = "SELECT * FROM users WHERE

user='" . $user . "' AND password='" . $pwd . "'"

// more code

mysql_close($con);

?>

Example 2

Database attack. This example demonstrates what could happen if we do not use the mysql_real_escape_string() function on the username and password:

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$sql = "SELECT * FROM users

WHERE user='{$_POST['user']}'

AND password='{$_POST['pwd']}'";

mysql_query($sql);

// We didn't check username and password.

// Could be anything the user wanted! Example:

$_POST['user'] = 'john';

$_POST['pwd'] = "' OR ''='";

// some code

mysql_close($con);

?>

The SQL sent would be:

SELECT * FROM users

WHERE user='john' AND password='' OR ''=''

This means that anyone could log in without a valid password!

Example 3

The correct way to do it to prevent database attack:

<?php

function check_input($value)

{

// Stripslashes

if (get_magic_quotes_gpc())

{

$value = stripslashes($value);

}

// Quote if not a number

if (!is_numeric($value))

{

$value = "'" . mysql_real_escape_string($value) . "'";

}

return $value;

}

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

// Make a safe SQL

$user = check_input($_POST['user']);

$pwd = check_input($_POST['pwd']);

$sql = "SELECT * FROM users WHERE

user=$user AND password=$pwd";

mysql_query($sql);

mysql_close($con);

?>


PHP mysql_result() Function

Definition and Usage

The mysql_result() function returns the value of a field in a recordset.

This function returns the field value on success, or FALSE on failure.

Syntax

mysql_result(data,row,field)

Parameter | Description
data | Required. Specifies which result handle to use. The data pointer is the return from the mysql_query() function
row | Required. Specifies which row number to get. Row numbers start at 0
field | Optional. Specifies which field to get. Can be field offset, field name or table.fieldname. If this parameter is not defined mysql_result() gets the first field from the specified row

Tips and Notes

Note: This function is slower than mysql_fetch_row(), mysql_fetch_array(), mysql_fetch_assoc() and mysql_fetch_object().

Note: This function should not be used together with mysql_fetch_row(), mysql_fetch_array(), mysql_fetch_assoc() or mysql_fetch_object().

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db("test_db", $con);

$sql = "SELECT * from Person";

$result = mysql_query($sql,$con);

echo mysql_result($result,0);

mysql_close($con);

?>

The output of the code above could be:

Refsnes


PHP mysql_select_db() Function

Definition and Usage

The mysql_select_db() function sets the active MySQL database.

This function returns TRUE on success, or FALSE on failure.

Syntax

mysql_select_db(database,connection)

Parameter | Description
database | Required. Specifies the database to select.
connection | Optional. Specifies the MySQL connection. If not specified, the last connection opened by mysql_connect() or mysql_pconnect() is used.

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db("test_db", $con);

if (!$db_selected)

{

die ("Can\'t use test_db : " . mysql_error());

}

mysql_close($con);

?>


PHP mysql_stat() Function

Definition and Usage

The mysql_stat() function returns the current system status of the MySQL server.

This function returns status on success, or NULL on failure.

Syntax

mysql_stat(connection)

Parameter | Description
connection | Optional. Specifies the MySQL connection. If not specified, the last connection opened by mysql_connect() or mysql_pconnect() is used.

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

$db_selected = mysql_select_db("test_db", $con);

echo mysql_stat();

?>

The output of the code above could be:

Uptime: 99410 Threads: 1 Questions: 162

Slow queries: 0 Opens: 0 Flush tables: 1

Open tables: 0 Queries per second avg: 0.002


PHP mysql_thread_id() Function

Definition and Usage

The mysql_thread_id() function returns the current thread ID.

This function returns the thread ID on success, or FALSE failure.

Syntax

mysql_thread_id(connection)

Parameter | Description
connection | Optional. Specifies the MySQL connection. If not specified, the last connection opened by mysql_connect() or mysql_pconnect() is used.

Tips and Notes

Note: Each MySQL connection has a different thread ID.

Example

<?php

$con = mysql_connect("localhost", "peter", "abc123");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

echo mysql_thread_id();

mysql_close($con);

?>

The output of the code above could be:

25


PHP mysql_unbuffered_query() Function

Definition and Usage

The mysql_unbuffered_query() function executes a query on a MySQL database.

Unlike mysql_query(), this function does not fetch and buffer the recordset automatically. This saves some memory with large SQL queries, and you can start working on the result set immediately after the first row has been retrieved.

This function returns the query handle for SELECT queries, TRUE/FALSE for other queries, or FALSE on failure.

Syntax

mysql_unbuffered_query(query,connection)

Parameter | Description
query | Required. Specifies the SQL query to send (should not end with a semicolon)
connection | Optional. Specifies the MySQL connection. If not specified, the last connection opened by mysql_connect() or mysql_pconnect() is used.

Tips and Notes

Note: The benefits of mysql_unbuffered_query() come at a cost: You cannot use mysql_num_rows() and mysql_data_seek() on a result set returned from mysql_unbuffered_query().

Example

<?php

$con = mysql_connect("localhost","mysql_user","mysql_pwd");

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

// Large query

$sql = "SELECT * FROM Person";

mysql_unbuffered_query($sql,$con);

// start working with data

mysql_close($con);

?>


PHP natcasesort() Function

Definition and Usage

The natcasesort() function sorts an array by using a "natural order" algorithm. The values keep their original keys.

In a natural algorithm, the number 2 is less than the number 10. In computer sorting, 10 is less than 2, because the first number in "10" is less than 2.

This function is case-insensitive.

This function returns TRUE on success, or FALSE on failure.

Syntax

natcasesort(array)

Parameter | Description
array | Required. Specifies the array to sort

Example

<?php

$temp_files = array("temp15.txt","Temp10.txt",

"temp1.txt","Temp22.txt","temp2.txt");

natsort($temp_files);

echo "Natural order: ";

print_r($temp_files);

echo "<br />";

natcasesort($temp_files);

echo "Natural order case insensitve: ";

print_r($temp_files);

?>

The output of the code above will be:

Natural order:

Array

(

[0] => Temp10.txt

[1] => Temp22.txt

[2] => temp1.txt

[4] => temp2.txt

[3] => temp15.txt

)

Natural order case insensitve:

Array

(

[2] => temp1.txt

[4] => temp2.txt

[0] => Temp10.txt

[3] => temp15.txt

[1] => Temp22.txt

)


PHP natsort() Function

Definition and Usage

The natsort() function sorts an array by using a "natural order" algorithm. The values keep their original keys.

In a natural algorithm, the number 2 is less than the number 10. In computer sorting, 10 is less than 2, because the first number in "10" is less than 2.

This function returns TRUE on success, or FALSE on failure.

Syntax

natsort(array)

Parameter | Description
array | Required. Specifies the array to sort

Example

<?php

$temp_files = array("temp15.txt","temp10.txt",

"temp1.txt","temp22.txt","temp2.txt");

sort($temp_files);

echo "Standard sorting: ";

print_r($temp_files);

echo "<br />";

natsort($temp_files);

echo "Natural order: ";

print_r($temp_files);

?>

The output of the code above will be:

Standard sorting: Array

(

[0] => temp1.txt

[1] => temp10.txt

[2] => temp15.txt

[3] => temp2.txt

[4] => temp22.txt

)

Natural order: Array

(

[0] => temp1.txt

[3] => temp2.txt

[1] => temp10.txt

[2] => temp15.txt

[4] => temp22.txt

)


PHP next() Function

Definition and Usage

The next() function moves the internal pointer to, and outputs, the next element in the array.

This function returns the value of the next element in the array on success, or FALSE if there are no more elements.

Syntax

next(array)

Parameter | Description
array | Required. Specifies the array to use

Tips and Notes

Note: This function returns FALSE on empty elements or elements with no value.

Example

<?php

$people = array("Peter", "Joe", "Glenn", "Cleveland");

echo current($people) . "<br />";

echo next($people);

?>

The output of the code above will be:

Peter

Joe


PHP nl_langinfo() Function

Definition and Usage

The nl_langinfo() function returns specific local information.

This function returns the specific information on success, or FALSE on failure.

Syntax

nl_langinfo(element)

Parameter

Description

element

Required. Specifies which element to return. Must be one of the following elements:

Time and Calendar:

· ABDAY_(1-7) - Abbreviated name of the numbered day of the week
· DAY_(1-7) - Name of the numbered day of the week (DAY_1 = Sunday)
· ABMON_(1-12) - Abbreviated name of the numbered month of the year
· MON_(1-12) - Name of the numbered month of the year
· AM_STR - String for Ante meridian
· PM_STR - String for Post meridian
· D_T_FMT - String that can be used as the format string for strftime() to represent time and date
· D_FMT - String that can be used as the format string for strftime() to represent date
· T_FMT - String that can be used as the format string for strftime() to represent time
· T_FMT_AMPM - String that can be used as the format string for strftime() to represent time in 12-hour format with ante/post meridian
· ERA - Alternate era
· ERA_YEAR - Year in alternate era format
· ERA_D_T_FMT - Date and time in alternate era format (string can be used in strftime())
· ERA_D_FMT - Date in alternate era format (string can be used in strftime())
· ERA_T_FMT - Time in alternate era format (string can be used in strftime())

Monetary Category:

· INT_CURR_SYMBOL - Currency symbol (example: USD)
· CURRENCY_SYMBOL - Currency symbol (example: $)
· CRNCYSTR - Same as CURRENCY_SYMBOL
· MON_DECIMAL_POINT - Monetary decimal point character
· MON_THOUSANDS_SEP - Monetary thousands separator
· POSITIVE_SIGN - Positive value character
· NEGATIVE_SIGN -Negative value character
· MON_GROUPING - Array displaying how monetary numbers are grouped (example: 1 000 000)
· INT_FRAC_DIGITS - International fractional digits
· FRAC_DIGITS - Local fractional digits
· P_CS_PRECEDES - True (1) if currency symbol is placed in front of a positive value, False (0) if it is placed behind
· P_SEP_BY_SPACE - True (1) if there is a spaces between the currency symbol and a positive value, False (0) otherwise
· N_CS_PRECEDES - True (1) if currency symbol is placed in front of a negative value, False (0) if it is placed behind
· N_SEP_BY_SPACE - True (1) if there is a spaces between the currency symbol and a negative value, False (0) otherwise
· P_SIGN_POSN - Formatting setting. Possible return values:
o 0 - Parentheses surround the quantity and currency symbol
o 1 - The sign string is placed in front of the quantity and currency symbol
o 2 - The sign string is placed after the quantity and currency symbol
o 3 - The sign string is placed immediately in front of the currency symbol
o 4 - The sign string is placed immediately after the currency symbol
· N_SIGN_POSN - Formatting setting. Possible return values:
o 0 - Parentheses surround the quantity and currency symbol
o 1 - The sign string is placed in front of the quantity and currency symbol
o 2 - The sign string is placed after the quantity and currency symbol
o 3 - The sign string is placed immediately in front of the currency symbol
o 4 - The sign string is placed immediately after the currency symbol

Numeric Category:

· DECIMAL_POINT - Decimal point character
· RADIXCHAR - Same as DECIMAL_POINT
· THOUSANDS_SEP - Separator character for thousands
· THOUSEP - Same as THOUSANDS_SEP
· GROUPING - Array displaying how numbers are grouped (example: 1 000 000)

Messaging Category:

· YESEXPR - Regex string for matching 'yes' input
· NOEXPR - Regex string for matching 'no' input
· YESSTR - Output string for 'yes'
· NOSTR - Output string for 'no'

Code set Category:

· CODESET Return a string with the name of the character encoding.

Tips and Notes

Note: This function does not work on Windows platforms.

Tip: Unlike the localeconv() function, which returns all local formatting information, the nl_langinfo() function returns specific information.


PHP nl2br() Function

Definition and Usage

The nl2br() function inserts HTML line breaks (<br />) in front of each newline (\n) in a string.

Syntax

nl2br(string)

Parameter | Description
string | Required. Specifies the string to check

Tips and Notes

Note: Before PHP 4.0.5, the nl2br() function inserted <br>. After PHP 4.0.5 it inserts the XHTML compliant <br />.

Example

<?php

echo nl2br("One line.\nAnother line.");

?>

The output of the code above will be:

One line.

Another line.

The HTML source code will look like this:

One line.<br />

Another line.


PHP number_format() Function

Definition and Usage

The number_format() function formats a number with grouped thousands.

Syntax

number_format(number,decimals,decimalpoint,separator)

Parameter | Description
number | Required. The number to be formatted. If no other parameters are set, the number will be formatted without decimals and with comma (,) as the thousands separator.
decimals | Optional. Specifies how many decimals. If this parameter is set, the number will be formatted with a dot (.) as decimal point.
decimalpoint | Optional. Specifies what string to use for decimal point.
separator | Optional. Specifies what string to use for thousands separator. Only the first character of separator is used. For example, "xxx" will give the same output as "x". Note: If this parameter is given, all other parameters are required as well.

Tips and Notes

Note: This function supports one, two, or four parameters (not three).

Example

<?php

echo number_format("1000000");

echo "<br />";

echo number_format("1000000",2);

echo "<br />";

echo number_format("1000000",2,",",".");

?>

The output of the code above will be:

1,000,000

1,000,000.00

1.000.000,00


PHP octdec() function

Definition and Usage

The octdec() function converts an octal number to a decimal number.

Syntax

octdec(oct_number)

Parameter | Description
oct_number | Required. Specifies the octal number to convert

Example

<?php

echo octdec("36") . "<br />";

echo octdec("12") . "<br />";

echo octdec("3063") . "<br />";

echo octdec("106");

?>

The output of the code above will be:

30

10

1587

70


PHP opendir() Function

Definition and Usage

The opendir() function opens a directory handle to be used by the closedir(), readdir(), and rewinddir() functions.

This function returns a directory stream on success and FALSE and an error on failure. You can hide the error output by adding an '@' in front of the function name.

Syntax

opendir(directory,context)

Parameter | Description
directory | Required. Specifies the directory to stream
context | Optional. Specifies the context of the directory handle. Context is a set of options that can modify the behavior of a stream

Tips and Notes

Note: From PHP 5 the directory parameter supports the ftp:// URL wrapper.

Example 1

<?php

//Open images directory

$dir = opendir("images");

//List files in images directory

while (($file = readdir($dir)) !== false)

{

echo "filename: " . $file . "<br />";

}

closedir($dir);

?>

The output of the code above could be:

filename: .

filename: ..

filename: cat.gif

filename: dog.gif

filename: food

filename: horse.gif

Example 2

This example hides the error if opendir() fails:

<?php

//Open images directory

$dir = @ opendir("images");

//List files in images directory

while (($file = readdir($dir)) !== false)

{

echo "filename: " . $file . "<br />";

}

closedir($dir);

?>

The output of the code above could be:

filename: .

filename: ..

filename: cat.gif

filename: dog.gif

filename: food

filename: horse.gif


PHP Operators

Operators are used to operate on values.

PHP Operators

This section lists the different operators used in PHP.

Arithmetic Operators

Operator | Description | Example | Result
+ | Addition | x=2 x+2 | 4
- | Subtraction | x=2 5-x | 3
* | Multiplication | x=4 x*5 | 20
/ | Division | 15/5 5/2 | 3 2.5
% | Modulus (division remainder) | 5%2 10%8 10%2 | 1 2 0
++ | Increment | x=5 x++ | x=6
-- | Decrement | x=5 x-- | x=4

Assignment Operators

Operator | Example | Is The Same As
= | x=y | x=y
+= | x+=y | x=x+y
-= | x-=y | x=x-y
*= | x*=y | x=x*y
/= | x/=y | x=x/y
%= | x%=y | x=x%y

Comparison Operators

Operator | Description | Example
== | is equal to | 5==8 returns false
!= | is not equal | 5!=8 returns true
> | is greater than | 5>8 returns false
< | is less than | 5<8 returns true
>= | is greater than or equal to | 5>=8 returns false
<= | is less than or equal to | 5<=8 returns true

Logical Operators

Operator | Description | Example
&& | and | x=6 y=3 (x < 10 && y > 1) returns true
|| | or | x=6 y=3 (x==5 || y==5) returns false
! | not | x=6 y=3 !(x==y) returns true


PHP ord() Function

Definition and Usage

The ord() function returns the ASCII value of the first character of a string.

Syntax

ord(string)

Parameter | Description
string | Required. The string to get an ASCII value from

Example

<?php

echo ord("h")."<br />";

echo ord("hello")."<br />";

?>

The output of the code above will be:

104

104


PHP pack() Function

Definition and Usage

The pack() function packs data into a binary string.

Syntax

pack(format,args+)

Parameter

Description

format

Required. Specifies the format to use when packing data.

Possible values:

· a - NUL-padded string
· A - SPACE-padded string
· h - Hex string, low nibble first
· H - Hex string, high nibble first
· c - signed char
· C - unsigned char
· s - signed short (always 16 bit, machine byte order)
· S - unsigned short (always 16 bit, machine byte order)
· n - unsigned short (always 16 bit, big endian byte order)
· v - unsigned short (always 16 bit, little endian byte order)
· i - signed integer (machine dependent size and byte order)
· I - unsigned integer (machine dependent size and byte order)
· l - signed long (always 32 bit, machine byte order)
· L - unsigned long (always 32 bit, machine byte order)
· N - unsigned long (always 32 bit, big endian byte order)
· V - unsigned long (always 32 bit, little endian byte order)
· f - float (machine dependent size and representation)
· d - double (machine dependent size and representation)
· x - NUL byte
· X - Back up one byte
· @ - NUL-fill to absolute position

args+

Optional. Specifies one or more arguments to be packed

Example 1

<?php

echo pack("C3",80,72,80);

?>

The output of the code above will be:

PHP

Example 2

<?php

echo pack("C*",80,72,80);

?>

The output of the code above will be:

PHP


PHP parse_str() Function

Definition and Usage

The parse_str() function parses a query string into variables.

Syntax

parse_str(string,array)

Parameter | Description
string | Required. Specifies the string to parse
array | Optional. Specifies the name of an array to store the variables. This parameter indicates that the variables will be stored in an array. Note: This parameter was added in PHP 4.0.3

Tips and Notes

Note: If the array parameter is not set, variables set by this function will overwrite existing variables of the same name.

Note: The magic_quotes_gpc setting in the php.ini file affects the output of this function. If enabled, the variables are converted by addslashes() before parsed by parse_str().

Example 1

<?php

parse_str("id=23&name=Kai%20Jim");

echo $id."<br />";

echo $name;

?>

The output of the code above will be:

23

Kai Jim

Example 2

<?php

parse_str("id=23&name=Kai%20Jim",$myArray);

print_r($myArray);

?>

The output of the code above will be:

Array

(

[id] => 23

[name] => Kai Jim

)


PHP pathinfo() Function

Definition and Usage

The pathinfo() function returns an array that contains information about a path.

The following array elements are returned:

· [dirname]
· [basename]
· [extension]

Syntax

pathinfo(path,options)

Parameter

Description

path

Required. Specifies the path to check

options

Optional. Specifies which array elements to return. Default is all

Possible values:

· PATHINFO_DIRNAME - return only dirname
· PATHINFO_BASENAME - return only basename
· PATHINFO_EXTENSION - return only extension

Tips and Notes

Note: The pathinfo() function returns a string if not all elements are requested.

Example 1

<?php

print_r(pathinfo("/testweb/test.txt"));

?>

The output of the code above will be:

Array

(

[dirname] => /testweb

[basename] => test.txt

[extension] => txt

)

Example 2

<?php

print_r(pathinfo("/testweb/test.txt",PATHINFO_BASENAME));

?>

The output of the code above will be:

test.txt


PHP pclose() Function

Definition and Usage

The pclose() function closes a pipe opened by popen().

This function returns FALSE on failure.

Syntax

pclose(pipe)

Parameter | Description
pipe | Required. Specifies the pipe opened by popen()

Example

<?php

$file = popen("/bin/ls","r");

//some code to be executed

pclose($file);

?>


PHP pi() function

Definition and Usage

The pi() function returns the value of PI.

Syntax

pi()

Tips and Notes

Tip: The named constant M_PI, yields identical results to pi().

Example

<?php

echo pi();

?>

The output of the code above will be:

3.14159265359


PHP popen() Function

Definition and Usage

The popen() function opens a pipe to the program specified in the command parameter.

This function returns FALSE if an error occurs.

Syntax

popen(command,mode)

Parameter

Description

command

Required. Specifies the command to execute

mode

Required. Specifies the connection mode.

Possible values:

· r: Read only
· w: Write only (opens and clears existing file or creates a new file)

Example

<?php

$file = popen("/bin/ls","r");

//some code to be executed

pclose($file);

?>


PHP pos() Function

Definition and Usage

The pos() function returns the value of the current element in an array.

This function is an alias of the current() function.

Syntax

pos(array)

Parameter | Description
array | Required. Specifies the array to use

Tips and Notes

Note: This function returns FALSE on empty elements or elements with no value.

Tip: This function does not move the arrays internal pointer. To do this, use the next() and prev() functions.

Example 1

<?php

$people = array("Peter", "Joe", "Glenn", "Cleveland");

echo pos($people) . "<br />";

?>

The output of the code above will be:

Peter


PHP $_POST

The $_POST variable is used to collect values from a form with method="post".

The $_POST Variable

The $_POST variable is an array of variable names and values sent by the HTTP POST method.

The $_POST variable is used to collect values from a form with method="post". Information sent from a form with the POST method is invisible to others and has no limits on the amount of information to send.

Example

<form action="welcome.php" method="post">

Enter your name: <input type="text" name="name" />

Enter your age: <input type="text" name="age" />

<input type="submit" />

</form>

When the user clicks the "Submit" button, the URL will not contain any form data, and will look something like this:

http://www.w3schools.com/welcome.php

The "welcome.php" file can now use the $_POST variable to catch the form data (notice that the names of the form fields will automatically be the ID keys in the $_POST array):

Welcome <?php echo $_POST["name"]; ?>.<br />

You are <?php echo $_POST["age"]; ?> years old!

Why use $_POST?

· Variables sent with HTTP POST are not shown in the URL
· Variables have no length limit

However, because the variables are not displayed in the URL, it is not possible to bookmark the page.

The $_REQUEST Variable

The PHP $_REQUEST variable contains the contents of both $_GET, $_POST, and $_COOKIE.

The PHP $_REQUEST variable can be used to get the result from form data sent with both the GET and POST methods.

Example

Welcome <?php echo $_REQUEST["name"]; ?>.<br />

You are <?php echo $_REQUEST["age"]; ?> years old!


PHP pow() function

Definition and Usage

The pow() function raises the first argument to the power of the second argument, and returns the result.

Syntax

pow(x,y)

Parameter | Description
x | Required. Specifies the number to be raised
y | Required. The power to which to raise the number

Example

<?php

echo pow(4,2) . "<br />";

echo pow(6,2) . "<br />";

echo pow(-6,2) . "<br />";

echo pow(-6,-2) . "<br />";

echo pow(-6,5.5);

?>

The output of the code above will be:

16

36

36

0.0277777777778

-1.#IND


PHP prev() Function

Definition and Usage

The prev() function moves the internal pointer to, and outputs, the previous element in the array.

This function returns the value of the previous element in the array on success, or FALSE if there are no more elements.

Syntax

prev(array)

Parameter | Description
array | Required. Specifies the array to use

Tips and Notes

Note: This function returns FALSE on empty elements or elements with no value.

Example

<?php

$people = array("Peter", "Joe", "Glenn", "Cleveland");

echo current($people) . "<br />";

echo next($people) . "<br />";

echo prev($people);

?>

The output of the code above will be:

Peter

Joe

Peter


PHP print() Function

Definition and Usage

The print() function outputs one or more strings.

Syntax

print(strings)

Parameter | Description
strings | Required. One or more strings to be sent to the output

Tips and Notes

Note: The print() function is not actually a function, so you are not required to use parentheses with it.

Tip: The print() function is slightly slower than echo().

Example 1

<?php

$str = "Who's Kai Jim?";

print $str;

print "<br />";

print $str."<br />I don't know!";

?>

The output of the code above will be:

Who's Kai Jim?

Who's Kai Jim?

I don't know!

Example 2

<?php

print "This text

spans multiple

lines.";

?>

The output of the code above will be:

This text spans multiple lines.

Example 3

Difference of single and double quotes. Single quotes will print the variable name, not the value:

<?php

$color = "red";

print "Roses are $color";

print "<br />";

print 'Roses are $color';

?>

The output of the code above will be:

Roses are red

Roses are $color


PHP printf() Function

Definition and Usage

The printf() function outputs a formatted string.

The arg1, arg2, ++ parameters will be inserted at percent (%) signs in the main string. This function works "step-by-step". At the first % sign, arg1 is inserted, at the second % sign, arg2 is inserted, etc.

Syntax

printf(format,arg1,arg2,arg++)

Parameter

Description

format

Required. Specifies the string and how to format the variables in it.

Possible format values:

· %% - Returns a percent sign
· %b - Binary number
· %c - The character according to the ASCII value
· %d - Signed decimal number
· %e - Scientific notation (e.g. 1.2e+2)
· %u - Unsigned decimal number
· %f - Floating-point number (local settings aware)
· %F - Floating-point number (not local settings aware)
· %o - Octal number
· %s - String
· %x - Hexadecimal number (lowercase letters)
· %X - Hexadecimal number (uppercase letters)

Additional format values. These are placed between the % and the letter (example %.2f):

· + (Forces both + and - in front of numbers. By default, only negative numbers are marked)
· ' (Specifies what to use as padding. Default is space. Must be used together with the width specifier. Example: %'x20s (this uses "x" as padding)
· - (Left-justifies the variable value)
· [0-9] (Specifies the minimum width held of to the variable value)
· .[0-9] (Specifies the number of decimal digits or maximum string length)

Note: If multiple additional format values are used, they must be in the same order as above.

arg1

Required. The argument to be inserted at the first %-sign in the format string

arg2

Optional. The argument to be inserted at the second %-sign in the format string

arg++

Optional. The argument to be inserted at the third, fourth, etc. %-sign in the format string

Tips and Notes

Note: If there are more % signs than arguments, you must use placeholders. A placeholder is inserted after the % sign, and consists of the argument- number and "\$". See example three.

Tip: Related functions: fprintf(), sprintf(), vfprintf(), vprintf(), and vsprintf().

Example 1

<?php

$str = "Hello";

$number = 123;

printf("%s world. Day number %u",$str,$number);

?>

The output of the code above will be:

Hello world. Day number 123

Example 2

<?php

$number = 123;

printf("%f",$number);

?>

The output of the code above will be:

123.000000

Example 3

Use of placeholders:

<?php

$number = 123;

printf("With 2 decimals: %1\$.2f

<br />With no decimals: %1\$u",$number);

?>

The output of the code above will be:

With 2 decimals: 123.00

With no decimals: 123


PHP Quiz

You can test your PHP skills with W3Schools' Quiz.

The Test

The test contains 20 questions and there is no time limit.

The test is not official, it's just a nice way to see how much you know, or don't know, about PHP.

Your Score Will be Counted

You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 20 points.

Good luck! PHP Quiz


PHP quoted_printable_decode() Function

Definition and Usage

The quoted_printable_decode() function decodes a quoted-printable string to an 8-bit ASCII string.

Syntax

quoted_printable_decode(string)

Parameter | Description
string | Required. Specifies the quoted-printable string to be decoded

Tips and Notes

Tip: Data encoded in quoted-printable are unlikely to be modified by mail transport. A text which is entirely US-ASCII may be encoded in quoted-printable to ensure the integrity of the data should the message pass through a character-translating, or line-wrapping gateway.

Example

<?php

$str = "Hello=0Aworld.";

echo quoted_printable_decode($str);

?>

The output of the code above will be:

Hello world.

The HTML source of the code above will be:

Hello

world.


PHP quotemeta() Function

Definition and Usage

The quotemeta() function adds backslashes in front of some predefined characters in a string.

The predefined characters are:

· period (.)
· backslash (\)
· plus sign (+)
· asterisk (*)
· question mark (?)
· brackets ([])
· caret (^)
· dollar sign ($)
· parenthesis (())

Syntax

quotemeta(string)

Parameter | Description
string | Required. Specifies the string to check

Tips and Notes

Tip: This function can be used to escape characters with special meanings, such as ( ), [ ], and * in SQL.

Example

<?php

$str = "Hello world. (can you hear me?)";

echo quotemeta($str);

?>

The output of the code above will be:

Hello world\. \(can you hear me\?\)


PHP rad2deg() function

Definition and Usage

The rad2deg() function converts a radian number to its degree.

Syntax

rad2deg(radian_number)

Parameter | Description
radian_number | Required. Specifies the radian number to convert

Example

<?php

$rad = M_PI;

$deg = rad2deg($rad);

echo "$rad radians is equal to $deg degrees";

?>

The output of the code above will be:

3.14159265359 radians is equal to 180 degrees


PHP rand() function

Definition and Usage

The rand() function generates a random integer.

If this function is called without parameters, it returns a random integer between 0 and RAND_MAX.

If you want a random number between 10 and 100 (inclusive), use rand (10,100).

Syntax

rand(min,max)

Parameter | Description
min,max | Optional. Specifies the range the random number should lie within

Tips and Notes

Note: On some platforms (such as Windows) RAND_MAX is only 32768. So, if you require a range larger than 32768, you can specify min and max, or use the mt_rand() function instead.

Note: In PHP 4.2.0 and later, there is no need to seed the random generator with srand(). This is done automatically.

Tip: The mt_rand() function generates a better random value than this function!

Example

In this example we will return some random numbers:

<?php

echo(rand() . "<br />");

echo(rand() . "<br />");

echo(rand(10,100))

?>

The output of the code above could be:

17757

3794

97


PHP range() Function

Definition and Usage

The range() function creates an array containing a range of elements.

This function returns an array of elements from low to high.

Syntax

range(low,high,step)

Parameter | Description
low | Required. Specifies the lowest value of the array
high | Required. Specifies the highest value of the array
step | Optional. Specifies the increment used in the range. Default is 1 Note: This parameter was added in PHP 5

Tips and Notes

Note: If the low parameter is higher than the high parameter, the range array will be from high to low.

Example 1

<?php

$number = range(0,5);

print_r ($number);

?>

The output of the code above will be:

Array

(

[0] => 0

[1] => 1

[2] => 2

[3] => 3

[4] => 4

[5] => 5

)

Example 2

<?php

$number = range(0,50,10);

print_r ($number);

?>

The output of the code above will be:

Array

(

[0] => 0

[1] => 10

[2] => 20

[3] => 30

[4] => 40

[5] => 50

)

Example 3

<?php

$letter = range("a","d");

print_r ($letter);

?>

The output of the code above will be:

Array

(

[0] => a

[1] => b

[2] => c

[3] => d

)


PHP readdir() Function

Definition and Usage

The readdir() function returns an entry from a directory handle opened by opendir().

This function returns a filename on success and FALSE on failure.

Syntax

readdir(dir_stream)

Parameter | Description
dir_stream | Required. Specifies the directory handle to use

Example

<?php

//Open images directory

$dir = opendir("images");

//List files in images directory

while (($file = readdir($dir)) !== false)

{

echo "filename: " . $file . "<br />";

}

closedir($dir);

?>

The output of the code above could be:

filename: .

filename: ..

filename: cat.gif

filename: dog.gif

filename: food

filename: horse.gif


PHP readfile() Function

Definition and Usage

The readfile() function reads a file and writes it to the output buffer.

This function returns the number of bytes read on success, or FALSE and an error on failure. You can hide the error output by adding an '@' in front of the function name.

Syntax

readfile(filename,include_path,context)

Parameter | Description
filename | Required. Specifies the file to read
include_path | Optional. Set this parameter to '1' if you want to search for the file in the include_path (in php.ini) as well
context | Optional. Specifies the context of the file handle. Context is a set of options that can modify the behavior of a stream

Tips and Notes

Tip: You can use a URL as a filename with this function if the fopen wrappers have been enabled in the php.ini file.

Example

<?php

echo readfile("test.txt");

?>

The output of the code above will be:

There are two lines in this file.

This is the last line.

57


PHP readlink() Function

Definition and Usage

The readlink() function returns the target of a symbolic link.

This function returns the target of the link on success, or FALSE on failure.

Syntax

readlink(linkpath)

Parameter | Description
linkpath | Required. Specifies the link path to check

Tips and Notes

Note: This function is not implemented on Windows platforms.

Example

<?php

echo readlink("/user/testlink");

?>


PHP realpath() Function

Definition and Usage

The realpath() function returns the absolute pathname.

This function removes all symbolic links (like '/./', '/../' and extra '/') and returns the absolute pathname.

This function returns FALSE on failure.

Syntax

realpath(path)

Parameter | Description
path | Required. Specifies the path to check

Example

<?php

echo realpath("test.txt");

?>

The output of the code above will be:

C:\Inetpub\testweb\test.txt


PHP registerXPathNamespace() Function

Definition and Usage

The registerXPathNamespace() registers a namespace context for the next XPath query.

This function is useful if a namespace prefix is changed in an XML document. The registerXPathNamespace() function will create a prefix for specified namespace, so that the affected XML nodes can be accessed without altering the application code too much.

Syntax

class SimpleXMLElement

{

string registerXPathNamespace(prefix,ns)

}

Parameter | Description
prefix | Required. Specifies the namespace prefix
ns | Required. Specifies the namespace URL. This must match a namespace in the XML document.

Example

XML File

<?xml version="1.0" encoding="ISO-8859-1"?>

<note xmlns:b="http://www.w3schools.com/example/">

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<b:body>Don't forget me this weekend!</b:body>

</note>

PHP Code

<?php

$xml = simplexml_load_file("test.xml");

$xml->registerXPathNamespace("msg",

"http://www.w3schools.com/example/");

$result = $xml->xpath("msg:body");

foreach ($result as $message)

{

echo $message;

}

?>

The output of the code above will be:

Don't forget me this weekend!


PHP rename() Function

Definition and Usage

The rename() function renames a file or directory.

This function returns TRUE on success, or FALSE on failure.

Syntax

rename(oldname,newname,context)

Parameter | Description
oldname | Required. Specifies the file or directory to be renamed
newname | Required. Specifies the new name of the file or directory
context | Optional. Specifies the context of the file handle. Context is a set of options that can modify the behavior of a stream

Example

<?php

rename("images","pictures");

?>


PHP reset() Function

Definition and Usage

The reset() function moves the internal pointer to the first element of the array.

This function returns the value of the first element in the array on success, or FALSE on failure.

Syntax

reset(array)

Parameter | Description
array | Required. Specifies the array to use

Example

<?php

$people = array("Peter", "Joe", "Glenn", "Cleveland");

echo current($people) . "<br />";

echo next($people) . "<br />";

echo reset($people);

?>

The output of the code above will be:

Peter

Joe

Peter


PHP restore_error_handler() Function

Definition and Usage

The restore_error_handler() function restores the previous error handler.

This function is used to restore the previous error handler after changing it with the set_error_handler() function.

This function always returns TRUE.

Syntax

restore_error_handler()

Tips and Notes

Tip: The previous error handler could be the built in error handler or a user-defined function.

Example

<?php

//custom error handler function

function customError($errno, $errstr, $errfile, $errline)

{

echo "<b>Custom error:</b> [$errno] $errstr<br />";

echo " Error on line $errline in $errfile<br />";

}

//set user-defined error handler

set_error_handler("customError");

$test=2;

//trigger error

if ($test>1)

{

trigger_error("A custom error has been triggered");

}

//restore built-in error handler

restore_error_handler();

//trigger error again

if ($test>1)

{

trigger_error("A custom error has been triggered");

}

?>

The output of the code above should be something like this:

Custom error: [1024] A custom error has been triggered

Error on line 14 in C:\webfolder\test.php

Notice: A custom error has been triggered in

C:\webfolder\test.php on line 21


PHP restore_exception_handler() Function

Definition and Usage

The restore_exception_handler() function restores the previous exception handler.

This function is used to restore the previous exception handler after changing it with the set_exception_handler() function.

This function always returns TRUE.

Syntax

restore_exception_handler()

Tips and Notes

Tip: The previous exception handler could be the built in exception handler or a user-defined function.

Example

<?php

restore_exception_handler();

throw new Exception('Uncaught Exception occured');

?>

The output of the code above should be something like this:

Fatal error: Uncaught exception 'Exception' with message

'Uncaught Exception occured' in C:\webfolder\test.php:4

Stack trace: #0 {main} thrown in C:\webfolder\test.php on line 4


PHP rewind() Function

Definition and Usage

The rewind() function "rewinds" the position of the file pointer to the beginning of the file.

This function returns TRUE on success, or FALSE on failure.

Syntax

rewind(file)

Parameter | Description
file | Required. Specifies the open file

Example

<?php

$file = fopen("test.txt","r");

//Change position of file pointer

fseek($file,"15");

//Set file pointer to 0

rewind($file);

fclose($file);

?>


PHP rewinddir() Function

Definition and Usage

The rewinddir() function resets the directory handle opened by opendir().

This function returns nothing.

Syntax

rewinddir(dir_stream)

Parameter | Description
dir_stream | Required. Specifies the directory handle to use

Tips and Notes

Tip: This function re-reads the directory, and can be used to check for changes in a directory.

Example 1

<?php

//Open images directory

$dir = opendir("images");

//List files in images directory

while (($file = readdir($dir)) !== false)

{

echo "filename: " . $file . "<br />";

}

//Resets the directory stream

rewinddir($dir);

//Code to check for changes

closedir($dir);

?>


PHP round() function

Definition and Usage

The round() function rounds a number to the nearest integer.

Syntax

round(x,prec)

Parameter | Description
x | Required. The number to be round
prec | Optional. The number of digits after the decimal point

Example

In this example we will round different numbers with the round() function:

<?php

echo(round(0.60) . "<br />");

echo(round(0.50) . "<br />");

echo(round(0.49) . "<br />");

echo(round(-4.40) . "<br />");

echo(round(-4.60))

?>

The output of the code above will be:

1

1

0

-4

-5


PHP rsort() Function

Definition and Usage

The rsort() function sorts an array by the values in reverse order.

This function assigns new keys for the elements in the array. Existing keys will be removed.

This function returns TRUE on success, or FALSE on failure.

Syntax

rsort(array,sorttype)

Parameter

Description

array

Required. Specifies the array to sort

sorttype

Optional. Specifies how to sort the array values. Possible values:

· SORT_REGULAR - Default. Treat values as they are (don't change types)
· SORT_NUMERIC - Treat values numerically
· SORT_STRING - Treat values as strings
· SORT_LOCALE_STRING - Treat values as strings, based on local settings

Example

<?php

$my_array = array("a" => "Dog", "b" => "Cat", "c" => "Horse");

rsort($my_array);

print_r($my_array);

?>

The output of the code above will be:

Array

(

[0] => Horse

[1] => Dog

[2] => Cat

)


PHP rtrim() Function

Definition and Usage

The rtrim() function will remove whitespaces or other predefined character from the right side of a string.

Syntax

rtrim(string,charlist)

Parameter

Description

string

Required. Specifies the string to check

charlist

Optional. Specifies which characters to remove from the string. If omitted, all of the following characters are removed:

· "\0" - NULL
· "\t" - tab
· "\n" - new line
· "\x0B" - vertical tab
· "\r" - carriage return
· " " - ordinary white space

Example 1

<html>

<body>

<?php

$str = "Hello World!    ";

echo "Without rtrim: " . $str;

echo "<br />";

echo "With rtrim: " . rtrim($str);

?>

<body>

<html>

The browser output of the code above will be:

Without rtrim: Hello World!

With rtrim: Hello World!

If you select "View source" in the browser window, you will see the following HTML:

<html>

<body>

Without rtrim: Hello World!    <br />With rtrim: Hello World!

</body>

</html>

Example 2

<?php

$str = "Hello World!\r\n";

echo "Without rtrim: " . $str;

echo "<br />";

echo "With rtrim: " . rtrim($str);

?>

The browser output of the code above will be:

Without rtrim: Hello World!

With rtrim: Hello World!

If you select "View source" in the browser window, you will see the following HTML:

<html>

<body>

Without rtrim: Hello World!

<br />With rtrim: Hello World!

</body>

</html>


PHP scandir() Function

Definition and Usage

The scandir() function returns an array of files and directories inside a specified path.

This function returns an array on success and FALSE and a warning on failure.

Syntax

scandir(directory,sort,context)

Parameter | Description
directory | Required. Specifies the directory to scan
sort | Optional. Specifies the sort order. Default is 0 (ascending). If set to 1, it indicates descending order
context | Optional. Specifies the context of the directory handle. Context is a set of options that can modify the behavior of a stream

Example

<?php

print_r(scandir("images"));

?>

The output of the code above will be:

Array

(

[0] => .

[1] => ..

[2] => dog.jpg

[3] => house.jpg

[4] => logo.gif

)


PHP Secure E-mail

PHP Secure E-mails

There is a weakness in the PHP e-mail script in the previous chapter.

PHP E-mail Injections

First, look at the PHP code from the previous chapter:

<html>

<body>

<?php

if (isset($_REQUEST['email']))

//if "email" is filled out, send email

{

//send email

$email = $_REQUEST['email'] ;

$subject = $_REQUEST['subject'] ;

$message = $_REQUEST['message'] ;

mail("someone@example.com", "Subject: $subject",

$message, "From: $email" );

echo "Thank you for using our mail form";

}

else

//if "email" is not filled out, display the form

{

echo "<form method='post' action='mailform.php'>

Email: <input name='email' type='text' /><br />

Subject: <input name='subject' type='text' /><br />

Message:<br />

<textarea name='message' rows='15' cols='40'>

</textarea><br />

<input type='submit' />

</form>";

}

?>

</body>

</html>

The problem with the code above is that unauthorized users can insert data into the mail headers via the input form.

What happens if the user adds the following text to the email input field in the form?

someone@example.com%0ACc:person2@example.com

%0ABcc:person3@example.com,person3@example.com,

anotherperson4@example.com,person5@example.com

%0ABTo:person6@example.com

The mail() function puts the text above into the mail headers as usual, and now the header has an extra Cc:, Bcc:, and To: field. When the user clicks the submit button, the e-mail will be sent to all of the addresses above!

PHP Stopping E-mail Injections

The best way to stop e-mail injections is to validate the input.

The code below is the same as in the previous chapter, but now we have added an input validator that checks the email field in the form:

<html>

<body>

<?php

function spamcheck($field)

{

//eregi() performs a case insensitive regular expression match

if(eregi("to:",$field) || eregi("cc:",$field))

  {

  return TRUE;

  }

else

  {

  return FALSE;

  }

}

//if "email" is filled out, send email

if (isset($_REQUEST['email']))

{

//check if the email address is invalid

$mailcheck = spamcheck($_REQUEST['email']);

if ($mailcheck==TRUE)

  {

  echo "Invalid input";

  }

else

  {

  //send email

  $email = $_REQUEST['email'] ;

  $subject = $_REQUEST['subject'] ;

  $message = $_REQUEST['message'] ;

  mail("someone@example.com", "Subject: $subject",

  $message, "From: $email" );

  echo "Thank you for using our mail form";

  }

}

else

//if "email" is not filled out, display the form

{

echo "<form method='post' action='mailform.php'>

Email: <input name='email' type='text' /><br />

Subject: <input name='subject' type='text' /><br />

Message:<br />

<textarea name='message' rows='15' cols='40'>

</textarea><br />

<input type='submit' />

</form>";

}

?>

</body>

</html>


PHP Sessions

A PHP session variable is used to store information about, or change settings for a user session. Session variables hold information about one single user, and are available to all pages in one application.

PHP Session Variables

When you are working with an application, you open it, do some changes and then you close it. This is much like a Session. The computer knows who you are. It knows when you start the application and when you end. But on the internet there is one problem: the web server does not know who you are and what you do because the HTTP address doesn't maintain state.

A PHP session solves this problem by allowing you to store user information on the server for later use (i.e. username, shopping items, etc). However, session information is temporary and will be deleted after the user has left the website. If you need a permanent storage you may want to store the data in a database.

Sessions work by creating a unique id (UID) for each visitor and store variables based on this UID. The UID is either stored in a cookie or is propagated in the URL.

Starting a PHP Session

Before you can store user information in your PHP session, you must first start up the session.

Note: The session_start() function must appear BEFORE the <html> tag:

<?php session_start(); ?>

<html>

<body>

</body>

</html>

The code above will register the user's session with the server, allow you to start saving user information, and assign a UID for that user's session.

Storing a Session Variable

The correct way to store and retrieve session variables is to use the PHP $_SESSION variable:

<?php

session_start();

// store session data

$_SESSION['views']=1;

?>

<html>

<body>

<?php

//retrieve session data

echo "Pageviews=". $_SESSION['views'];

?>

</body>

</html>

Output:

Pageviews=1

In the example below, we create a simple page-views counter. The isset() function checks if the "views" variable has already been set. If "views" has been set, we can increment our counter. If "views" doesn't exist, we create a "views" variable, and set it to 1:

<?php

session_start();

if(isset($_SESSION['views']))

$_SESSION['views']=$_SESSION['views']+1;

else

$_SESSION['views']=1;

echo "Views=". $_SESSION['views'];

?>

Destroying a Session

If you wish to delete some session data, you can use the unset() or the session_destroy() function.

The unset() function is used to free the specified session variable:

<?php

unset($_SESSION['views']);

?>

You can also completely destroy the session by calling the session_destroy() function:

<?php

session_destroy();

?>

Note: session_destroy() will reset your session and you will lose all your stored session data.


PHP set_error_handler() Function

Definition and Usage

The set_error_handler() function sets a user-defined function to handle errors.

This function is used to create your own way of handling errors during runtime.

This function returns the old error handler, or NULL on failure.

Syntax

set_error_handler(error_function,error_types)

Parameter | Description
error_function | Required. Specifies the function to be run at errors
error_types | Optional. Specifies on which errors report levels the user-defined error will be shown. Default is "E_ALL". See table below for possible error report levels

error_function

Syntax

error_function(error_level,error_message,

error_file,error_line,error_context)

Parameter | Description
error_level | Required. Specifies the error report level for the user-defined error. Must be a value number. See table below for possible error report levels
error_message | Required. Specifies the error message for the user-defined error
error_file | Optional. Specifies the filename in which the error occurred
error_line | Optional. Specifies the line number in which the error occurred
error_context | Optional. Specifies an array that points to the active symbol table at the point the error occurred. In other words, error_context will contain an array of every variable that existed in the scope the error was triggered in

Error Report levels

Value | Constant | Description
2 | E_WARNING | Non-fatal run-time errors. Execution of the script is not halted
8 | E_NOTICE | Run-time notices. The script found something that might be an error, but could also happen when running a script normally
256 | E_USER_ERROR | Fatal user-generated error. This is like an E_ERROR set by the programmer using the PHP function trigger_error()
512 | E_USER_WARNING | Non-fatal user-generated warning. This is like an E_WARNING set by the programmer using the PHP function trigger_error()
1024 | E_USER_NOTICE | User-generated notice. This is like an E_NOTICE set by the programmer using the PHP function trigger_error()
4096 | E_RECOVERABLE_ERROR | Catchable fatal error. This is like an E_ERROR but can be caught by a user defined handle (see also set_error_handler())
8191 | E_ALL | All errors and warnings, except level E_STRICT (E_STRICT will be part of E_ALL as of PHP 6.0)

Tips and Notes

Tip: The standard PHP error handler is completely bypassed if this function is used, and the user-defined error handler must terminate the script (die() ) if necessary

Note: If errors occur before the script is executed the custom error handler cannot be used since it is not registered at that time

Example

<?php

//error handler function

function customError($errno, $errstr, $errfile, $errline)

{

echo "<b>Custom error:</b> [$errno] $errstr<br />";

echo " Error on line $errline in $errfile<br />";

echo "Ending Script";

die();

}

//set error handler

set_error_handler("customError");

$test=2;

//trigger error

if ($test>1)

{

trigger_error("A custom error has been triggered");

}

?>

The output of the code above should be something like this:

Custom error: [1024] A custom error has been triggered

Error on line 19 in C:\webfolder\test.php

Ending Script


PHP set_exception_handler() Function

Definition and Usage

The set_error_handler() function sets a user-defined function to handle exceptions.

This function is used to create a way of handling exceptions during runtime.

This function returns the old exception handler, or NULL on failure or if no previous handler is defined.

Syntax

set_error_handler(exception_function)

Parameter | Description
exception_function | Required. Specifies the function to be called when an uncaught exception occurs. This function must be defined before calling the set_exception_handler() function. The exception handler function requires one parameter, which is the exception object that was thrown

Tips and Notes

Tip: The script will stop executing after the exception handler is called.

Example

<?php

function myException($exception)

{

echo "<b>Exception:</b> " , $exception->getMessage();

}

set_exception_handler('myException');

throw new Exception('Uncaught Exception occurred');

?>

The output of the code above should be something like this:

Exception: Uncaught Exception occurred


PHP set_file_buffer() Function

Definition and Usage

The set_file_buffer() function sets the buffer size of an open file.

Output using fwrite() is normally buffered at 8K. So, if two processes writes to the same file, each will write up to 8K before pausing, and allow the other to write. If buffer is 0, write operations are unbuffered (meaning that the first write process will be completed before allowing other processes to write).

This function returns 0 on success, otherwise it returns EOF.

Syntax

set_file_buffer(file,buffer)

Parameter | Description
file | Required. Specifies the open file
buffer | Required. Specifies the buffer size in bytes

Tips and Notes

Tip: This function is an alias of stream_set_write_buffer().

Example

Create an unbuffered stream:

<?php

$file = fopen("test.txt","w");

if ($file)

{

set_file_buffer($file,0);

fwrite($file,"Hello World. Testing!");

fclose($file);

}

?>


PHP setcookie() Function

Definition and Usage

The setcookie() function sends an HTTP cookie to a client.

A cookie is a variable, sent by the server to the browser. A cookie is typically a small text file that the server embeds on the user's computer. Each time the same computer requests a page with a browser, it will send the cookie too.

The name of the cookie is automatically assigned to a variable of the same name. For example, if a cookie was sent with the name "user", a variable is automatically created called $user, containing the cookie value.

A cookie must be assigned before any other output is sent to the client.

This function returns TRUE on success or FALSE on failure.

Syntax

setcookie(name,value,expire,path,domain,secure)

Parameter | Description
name | Required. Specifies the name of the cookie
value | Required. Specifies the value of the cookie
expire | Optional. Specifies when the cookie expires. time()+3600*24*30 will set the cookie to expire in 30 days. If this parameter is not set, the cookie will expire at the end of the session (when the browser closes).
path | Optional. Specifies the server path of the cookie If set to "/", the cookie will be available within the entire domain. If set to "/test/", the cookie will only be available within the test directory and all sub-directories of test. The default value is the current directory that the cookie is being set in.
domain | Optional. Specifies the domain name of the cookie. To make the cookie available on all subdomains of example.com then you'd set it to ".example.com". Setting it to www.example.com will make the cookie only available in the www subdomain
secure | Optional. Specifies whether or not the cookie should only be transmitted over a secure HTTPS connection. TRUE indicates that the cookie will only be set if a secure connection exists. Default is FALSE.

Tips and Notes

Tip: The value of a cookie named "user" can be accessed by $HTTP_COOKIE_VARS["user"] or by $_COOKIE["user"].

Note: The value of the cookie will automatically be URL encoded when you send the cookie (and automatically decoded when received). If you don't want this, you can use setrawcookie() instead.

Example 1

Set and send cookie examples:

<?php

$value = "my cookie value";

// send a simple cookie

setcookie("TestCookie",$value);

?>

<html>

<body>

...

...

<?php

$value = "my cookie value";

// send a cookie that expires in 24 hours

setcookie("TestCookie",$value, time()+3600*24);

?>

<html>

<body>

...

...

Example 2

Different ways of retrieving the value of the cookie (after the cookie has been set):

<html>

<body>

<?php

// Print individual cookies

echo $_COOKIE["TestCookie"];

echo "<br />";

echo $HTTP_COOKIE_VARS["TestCookie"];

echo "<br />";

// Print all cookies

print_r($_COOKIE);

?>

</body>

</html>

The output of the code above will be:

my cookie value

my cookie value

Array ([TestCookie] => my cookie value)

Example 3

Delete a cookie by setting the expiration date to a date/time in the past:

<?php

// Set the expiration date to one hour ago

setcookie ("TestCookie", "", time() - 3600);

?>

<html>

<body>

...

...

Example 4

Create an array cookie:

<?php

setcookie("cookie[three]","cookiethree");

setcookie("cookie[two]","cookietwo");

setcookie("cookie[one]","cookieone");

// print cookies (after reloading page)

if (isset($_COOKIE["cookie"]))

{

foreach ($_COOKIE["cookie"] as $name => $value)

  {

  echo "$name : $value <br />";

  }

}

?>

<html>

<body>

...

...

The output of the code above will be:

three : cookiethree

two : cookietwo

one : cookieone


PHP setlocale() Function

Definition and Usage

The setlocale() function sets locale information.

Locale information is language, monetary, time and other information specific for a geographical area.

This function returns the current locale settings, or FALSE on failure.

Syntax

setlocale(constant,location)

Parameter

Description

constant

Required. Specifies what locale information should be set.

Available constants:

· LC_ALL - All of the below
· LC_COLLATE - Sort order
· LC_CTYPE - Character classification and conversion (e.g. all characters should be lower or upper-case)
· LC_MESSAGES - System message formatting
· LC_MONETARY - Monetary/currency formatting
· LC_NUMERIC - Numeric formatting
· LC_TIME - Date and time formatting

location

Required. Specifies what country/region to set the locale information to. Can be a string or an array. If the location is an array, setlocale() will try each array element until it finds a valid language or region code. This is very useful if a region is known under different names on different systems.

Note: Here you can find language and region codes.

Tips and Notes

Note: The setlocale() function changes the locale only for the current script.

Tip: The locale information can be set to system default with setlocale(LC_ALL,NULL)

Example

In this example we will set the locale to US English and then back to default again:

<?php

echo setlocale(LC_ALL,"En-Us");

echo "<br />";

echo setlocale(LC_ALL,NULL);

?>

The output of the code above will be:

English_United States.1252

Norwegian (Bokmål)_Norway.1252


PHP setrawcookie() Function

Definition and Usage

The setrawcookie() function sends an HTTP cookie without URL encoding the cookie value.

A cookie is a variable, sent by the server to the browser. A cookie is typically a small text file that the server embeds on the user's computer. Each time the same computer requests a page with a browser, it will send the cookie too.

The name of the cookie is automatically assigned to a variable of the same name. For example, if a cookie was sent with the name "user", a variable is automatically created called $user, containing the cookie value.

A cookie must be assigned before any other output is sent to the client.

This function returns TRUE on success or FALSE on failure.

Syntax

setrawcookie(name,value,expire,path,domain,secure)

Parameter | Description
name | Required. Specifies the name of the cookie
value | Required. Specifies the value of the cookie
expire | Optional. Specifies when the cookie expires. time()+3600*24*30 will set the cookie to expire in 30 days. If this parameter is not set, the cookie will expire at the end of the session (when the browser closes).
path | Optional. Specifies the server path of the cookie If set to "/", the cookie will be available within the entire domain. If set to "/test/", the cookie will only be available within the test directory and all sub-directories of test. The default value is the current directory that the cookie is being set in.
domain | Optional. Specifies the domain name of the cookie. To make the cookie available on all subdomains of example.com then you'd set it to ".example.com". Setting it to www.example.com will make the cookie only available in the www subdomain
secure | Optional. Specifies whether or not the cookie should only be transmitted over a secure HTTPS connection. TRUE indicates that the cookie will only be set if a secure connection exists. Default is FALSE.

Tips and Notes

Tip: The value of a cookie named "user" can be accessed by $HTTP_COOKIE_VARS["user"] or by $_COOKIE["user"].

Note: The setrawcookie() function is exactly the same as setcookie() except that the cookie value will not be automatically URL encoded when sent to the client.

Example 1

Set and send cookie examples:

<?php

$value = "my cookie value";

// send a simple cookie

setrawcookie("TestCookie",$value);

?>

<html>

<body>

...

...

<?php

$value = "my cookie value";

// send a cookie that expires in 24 hours

setrawcookie("TestCookie",$value, time()+3600*24);

?>

<html>

<body>

...

...

Example 2

Different ways of retrieving the value of the cookie (after the cookie has been set):

<html>

<body>

<?php

// Print individual cookies

echo $_COOKIE["TestCookie"];

echo "<br />";

echo $HTTP_COOKIE_VARS["TestCookie"];

echo "<br />";

// Print all cookies

print_r($_COOKIE);

?>

</body>

</html>

The output of the code above will be:

my cookie value

my cookie value

Array ([TestCookie] => my cookie value)

Example 3

Delete a cookie by setting the expiration date to a date/time in the past:

<?php

// Set the expiration date to one hour ago

setrawcookie ("TestCookie", "", time() - 3600);

?>

<html>

<body>

...

...

Example 4

Create an array cookie:

<?php

setrawcookie("cookie[three]","cookiethree");

setrawcookie("cookie[two]","cookietwo");

setrawcookie("cookie[one]","cookieone");

// print cookies (after reloading page)

if (isset($_COOKIE["cookie"]))

{

foreach ($_COOKIE["cookie"] as $name => $value)

  {

  echo "$name : $value <br />";

  }

}

?>

<html>

<body>

...

...

The output of the code above will be:

three : cookiethree

two : cookietwo

one : cookieone


PHP sha1() Function

Definition and Usage

The sha1() function calculates the SHA-1 hash of a string.

The sha1() function uses the US Secure Hash Algorithm 1.

From RFC 3174 - The US Secure Hash Algorithm 1: "SHA-1 produces a 160-bit output called a message digest. The message digest can then, for example, be input to a signature algorithm which generates or verifies the signature for the message. Signing the message digest rather than the message often improves the efficiency of the process because the message digest is usually much smaller in size than the message. The same hash algorithm must be used by the verifier of a digital signature as was used by the creator of the digital signature."

This function returns the calculated SHA-1 hash on success, or FALSE on failure.

Syntax

sha1(string,raw)

Parameter

Description

string

Required. The string to be calculated

raw

Optional. Specify hex or binary output format:

· TRUE - Raw 20 character binary format
· FALSE - Default. 40 character hex number

Note: This parameter was added in PHP 5.0

Example 1

<?php

$str = 'Hello';

echo sha1($str);

?>

The output of the code above will be:

f7ff9e8b7bb2e09b70935a5d785e0cc5d9d0abf0

Example 2

In this example we will print the result of sha1() and then test it:

<?php

$str = 'Hello';

echo sha1($str);

if (sha1($str) == 'f7ff9e8b7bb2e09b70935a5d785e0cc5d9d0abf0')

{

echo "<br />Hello world!";

exit;

}

?>

The output of the code above will be:

f7ff9e8b7bb2e09b70935a5d785e0cc5d9d0abf0

Hello world!


PHP sha1_file() Function

Definition and Usage

The sha1_file() function calculates the SHA-1 hash of a file.

The sha1_file() function uses the US Secure Hash Algorithm 1.

From RFC 3174 - The US Secure Hash Algorithm 1: "SHA-1 produces a 160-bit output called a message digest. The message digest can then, for example, be input to a signature algorithm which generates or verifies the signature for the message. Signing the message digest rather than the message often improves the efficiency of the process because the message digest is usually much smaller in size than the message. The same hash algorithm must be used by the verifier of a digital signature as was used by the creator of the digital signature."

This function returns the calculated SHA-1 hash on success, or FALSE on failure.

Syntax

sha1_file(file,raw)

Parameter

Description

file

Required. The file to be calculated

raw

Optional. Specifies hex or binary output format:

· TRUE - Raw 20 character binary format
· FALSE - Default. 40 character hex number

Note: This parameter was added in PHP 5.0

Example 1

<?php

$filename = "test.txt";

$sha1file = sha1_file($filename);

echo $sha1file;

?>

The output of the code above will be:

aaf4c61ddcc5e8a2dabede0f3b482cd9aea9434d

Example 2

Store the SHA-1 hash of "test.txt" in a file:

<?php

$sha1file = sha1_file("test.txt");

file_put_contents("sha1file.txt",$sha1file);

?>

In this example we will test if "test.txt" has been changed (that is if the SHA-1 hash has been changed):

<?php

$sha1file = file_get_contents("sha1file.txt");

if (sha1_file("test.txt") == $sha1file)

{

echo "The file is ok.";

}

else

{

echo "The file has been changed.";

}

?>

The output of the code above could be:

The file is ok.


PHP show_source() Function

Definition and Usage

The show_source() function outputs a file with the PHP syntax highlighted. The syntax is highlighted by using HTML tags.

The colors used for highlighting can be set in the php.ini file or with the ini_set() function.

This function returns TRUE on success, or FALSE on failure.

show_source() is an alias of highlight_file().

Syntax

show_source(filename,return)

Parameter | Description
filename | Required. Specifies the file to display
return | Optional. If this parameter is set to TRUE, this function will return the highlighted code as a string, instead of printing it out. Default is FALSE

Tips and Notes

Note: When using this function, the entire file will be displayed - including passwords and any other sensitive information!

Example

"test.php":

<html>

<body>

<?php

show_source("test.php");

?>

</body>

</html>

The output of the code above could be:

<html>

<body>

<?php

show_source("test.php");

?>

</body>

</html>

and, if you select "View source" in the browser window, it will look something like this:

<html>

<body>

<code>

<span style="color: #000000">&lt;html&gt;

<br />

&lt;body&gt;

<br />

<span style="color: #0000BB">&lt;?php

<br />show_source</span>

<span style="color: #007700">(</span>

<span style="color: #DD0000">"test.php"</span>

<span style="color: #007700">);<br /></span>

<span style="color: #0000BB">?&gt;<br /></span>

&lt;/body&gt;

<br />

&lt;/html&gt;</span>

</code>

</body>

</html>


PHP shuffle() Function

Definition and Usage

The shuffle() function randomizes the order of the elements in the array.

This function assigns new keys for the elements in the array. Existing keys will be removed.

This function returns TRUE on success, or FALSE on failure.

Syntax

shuffle(array)

Parameter | Description
array | Required. Specifies the array to use

Example

<?php

$my_array = array("a" => "Dog", "b" => "Cat", "c" => "Horse");

shuffle($my_array);

print_r($my_array);

?>

The output of the code above could be:

Array ( [0] => Cat [1] => Horse [2] => Dog )


PHP similar_text() Function

Definition and Usage

The similar_text() function returns the number of matching characters of two strings.

It can also calculate the similarity of the two strings in percent.

Syntax

similar_text(string1,string2,percent)

Parameter | Description
string1 | Required. Specifies the first string to be compared
string2 | Required. Specifies the second string to be compared
percent | Optional. Specifies a variable name for storing the similarity in percent

Tips and Notes

Note: The levenshtein() function is faster than the similar_text() function. However, the similar_text() function will give you a more accurate result with less modifications needed.

Example 1

<?php

echo similar_text("Hello World","Hello Peter");

?>

The output of the code above will be:

7

Example 2

<?php

similar_text("Hello World","Hello Peter",$percent);

echo $percent;

?>

The output of the code above will be:

63.6363636364


PHP SimpleXML Functions

PHP SimpleXML Introduction

The SimpleXML functions lets you convert XML to an object.

This object can be processed, like any other object, with normal property selectors and array iterators.

Some of these functions requires the newest PHP build.

Installation

The SimpleXML functions are part of the PHP core. There is no installation needed to use these functions.

PHP SimpleXML Functions

PHP: indicates the earliest version of PHP that supports the function.

Function | Description | PHP
__construct() | Creates a new SimpleXMLElement object | 5
addAttribute() | Adds an attribute to the SimpleXML element | 5
addChild() | Adds a child element the SimpleXML element | 5
asXML() | Gets an XML string from a SimpleXML element | 5
attributes() | Gets a SimpleXML element's attributes | 5
children() | Gets the children of a specified node | 5
getDocNamespaces() | Gets namespaces of an XML document | 5
getName() | Gets the name of a SimpleXML element | 5
 | Gets namespaces from XML data | 5
registerXPathNamespace() | Creates a namespace context for the next XPath query | 5
simplexml_import_dom | Gets a SimpleXMLElement object from a DOM node. | 5
simplexml_load_file | Gets a SimpleXMLElement object from an XML document | 5
simplexml_load_string | Gets a SimpleXMLElement object from an XML string | 5
xpath() | Runs an XPath query on XML data | 5

PHP SimpleXML Constants

None


PHP simplexml_import_dom() Function

Definition and Usage

The simplexml_import_dom() converts a DOM node to a SimpleXMLElement object.

This function returns FALSE on failure.

Syntax

simplexml_import_dom(data,class)

Parameter | Description
data | Required. Specifies the DOM node to use
class | Optional. Specifies the class of the new object

Example

<?php

$dom = new domDocument;

$dom->loadXML('<note><from>Jani</from></note>');

$xml = simplexml_import_dom($dom);

echo $xml->from;

?>

The output of the code above will be:

Jani


PHP simplexml_load_file() Function

Definition and Usage

The simplexml_load_file() function loads an XML document into an object.

This function returns FALSE on failure.

Syntax

simplexml_load_file(file,class,options,ns,is_prefix)

Parameter

Description

file

Required. Specifies the XML document to use

class

Optional. Specifies the class of the new object

options

Optional. Specifies additional Libxml parameters. Is set by specifying the option and 1 or 0 (TRUE or FALSE, e.g. LIBXML_NOBLANKS(1))

Possible values:

· LIBXML_COMPACT - Set small nodes allocation optimization. This may improve the application performance
· LIBXML_DTDATTR - Set default DTD attributes
· LIBXML_DTDLOAD - Load external subset
· LIBXML_DTDVALID - Validate with the DTD
· LIBXML_NOBLANKS - Remove blank nodes
· LIBXML_NOCDATA - Set CDATA as text nodes
· LIBXML_NOEMPTYTAG - Change empty tags (e.g. <br/> to <br></br>), only available in the DOMDocument->save() and DOMDocument->saveXML() functions
· LIBXML_NOENT - Substitute entities
· LIBXML_NOERROR - Do not show error reports
· LIBXML_NONET - Stop network access while loading documents
· LIBXML_NOWARNING - Do not show warning reports
· LIBXML_NOXMLDECL - Drop the XML declaration when saving a document
· LIBXML_NSCLEAN - Remove excess namespace declarations
· LIBXML_XINCLUDE - Use XInclude substitution
· LIBXML_ERR_ERROR - Get recoverable errors
· LIBXML_ERR_FATAL - Get fatal errors
· LIBXML_ERR_NONE - Get no errors
· LIBXML_ERR_WARNING - Get simple warnings
· LIBXML_VERSION - Get libxml version (e.g. 20605 or 20617)
· LIBXML_DOTTED_VERSION - Get dotted libxml version (e.g. 2.6.5 or 2.6.17)

ns

Optional

is_prefix

Optional

Example

XML File

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

PHP Code

<?php

if (file_exists('test.xml'))

{

$xml = simplexml_load_file('test.xml');

var_dump($xml);

}

else

{

exit('Error.');

}

?>

The output of the code above will be:

object(SimpleXMLElement)#1 (4)

{

["to"]=> string(4) "Tove"

["from"]=> string(4) "Jani"

["heading"]=> string(8) "Reminder"

["body"]=> string(29) "Don't forget me this weekend!"

}


PHP simplexml_load_string() Function

Definition and Usage

The simplexml_load_string() function loads an XML string into an object.

This function returns FALSE on failure.

Syntax

simplexml_load_string(string,class,options,ns,is_prefix)

Parameter

Description

string

Required. Specifies the XML string to use

class

Optional. Specifies the class of the new object

options

Optional. Specifies additional Libxml parameters. Is set by specifying the option and 1 or 0 (TRUE or FALSE, e.g. LIBXML_NOBLANKS(1))

Possible values:

· LIBXML_COMPACT - Set small nodes allocation optimization. This may improve the application performance
· LIBXML_DTDATTR - Set default DTD attributes
· LIBXML_DTDLOAD - Load external subset
· LIBXML_DTDVALID - Validate with the DTD
· LIBXML_NOBLANKS - Remove blank nodes
· LIBXML_NOCDATA - Set CDATA as text nodes
· LIBXML_NOEMPTYTAG - Change empty tags (e.g. <br/> to <br></br>), only available in the DOMDocument->save() and DOMDocument->saveXML() functions
· LIBXML_NOENT - Substitute entities
· LIBXML_NOERROR - Do not show error reports
· LIBXML_NONET - Stop network access while loading documents
· LIBXML_NOWARNING - Do not show warning reports
· LIBXML_NOXMLDECL - Drop the XML declaration when saving a document
· LIBXML_NSCLEAN - Remove excess namespace declarations
· LIBXML_XINCLUDE - Use XInclude substitution
· LIBXML_ERR_ERROR - Get recoverable errors
· LIBXML_ERR_FATAL - Get fatal errors
· LIBXML_ERR_NONE - Get no errors
· LIBXML_ERR_WARNING - Get simple warnings
· LIBXML_VERSION - Get libxml version (e.g. 20605 or 20617)
· LIBXML_DOTTED_VERSION - Get dotted libxml version (e.g. 2.6.5 or 2.6.17)

ns

Optional

is_prefix

Optional

Example

<?php

$xmlstring = <<<XML

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

XML;

$xml = simplexml_load_string($xmlstring);

var_dump($xml);

?>

The output of the code above will be:

object(SimpleXMLElement)#1 (4)

{

["to"]=> string(4) "Tove"

["from"]=> string(4) "Jani"

["heading"]=> string(8) "Reminder"

["body"]=> string(29) "Don't forget me this weekend!"

}


PHP sin() function

Definition and Usage

The sin() function returns the sine of a number.

Syntax

sin(x)

Parameter | Description
x | Required. A number

Tips and Notes

Note: The sin() function returns a numeric value between -1 and 1, which represents the sine of the parameter x.

Example

In the following example we will return the sine of different numbers:

<?php

echo(sin(3) . "<br />");

echo(sin(-3) . "<br />");

echo(sin(0) . "<br />");

echo(sin(M_PI) . "<br />");

echo(sin(M_PI_2))

?>

The output of the code above will be:

0.14112000806

-0.14112000806

0

1.22460635382E-016

1


PHP sinh() function

Definition and Usage

The sinh() function returns the hyperbolic sine of a number (equivalent to (exp(x) - exp(-x)) / 2).

Syntax

sinh(x)

Parameter | Description
x | Required. A number

Example

In the following example we will return the hyperbolic sine of different numbers:

<?php

echo(sinh(3) . "<br />");

echo(sinh(-3) . "<br />");

echo(sinh(0) . "<br />");

echo(sinh(M_PI) . "<br />");

echo(sinh(M_PI_2))

?>

The output of the code above will be:

10.0178749274

-10.0178749274

0

11.5487393573

2.30129890231


PHP sizeof() Function

Definition and Usage

The sizeof() function counts the elements of an array, or the properties of an object.

This function is an alias of the count() function.

Syntax

sizeof(array1,array2)

Parameter

Description

array

Required. Specifies the array or object to count.

mode

Optional. Specifies the mode of the function. Possible values:

· 0 - Default. Does not detect multidimensional arrays (arrays within arrays)
· 1 - Detects multidimensional arrays

Note: This parameter was added in PHP 4.2

Tips and Notes

Note: This function may return 0 if a variable isn't set, but it may also return 0 if a variable contains an empty array. The isset() function can be used to test if a variable is set.

Example

<?php

$people = array("Peter", "Joe", "Glenn", "Cleveland");

$result = sizeof($people);

echo $result;

?>

The output of the code above will be:

4


PHP sleep() Function

Definition and Usage

The sleep() function delays execution of the current script for a specified number of seconds.

Syntax

sleep(seconds)

Parameter | Description
seconds | Required. Specifies the number of seconds to delay the script

Example

<?php

echo date('h:i:s') . "<br />";

//sleep for 10 seconds

sleep(10);

//start again

echo date('h:i:s');

?>

The output of the code above will be something like this:

11:00:07

11:00:17


PHP sort() Function

Definition and Usage

The sort() function sorts an array by the values.

This function assigns new keys for the elements in the array. Existing keys will be removed.

This function returns TRUE on success, or FALSE on failure.

Syntax

sort(array,sorttype)

Parameter

Description

array

Required. Specifies the array to sort

sorttype

Optional. Specifies how to sort the array values. Possible values:

· SORT_REGULAR - Default. Treat values as they are (don't change types)
· SORT_NUMERIC - Treat values numerically
· SORT_STRING - Treat values as strings
· SORT_LOCALE_STRING - Treat values as strings, based on local settings

Example

<?php

$my_array = array("a" => "Dog", "b" => "Cat", "c" => "Horse");

sort($my_array);

print_r($my_array);

?>

The output of the code above will be:

Array

(

0] => Cat

[1] => Dog

[2] => Horse

)


PHP soundex() Function

Definition and Usage

The soundex() function calculates the soundex key of a string.

A soundex key is a four character long alphanumeric string that represent English pronunciation of a word.

The soundex() function can be used for spelling applications.

This function returns the soundex key of the string on success, or FALSE on failure.

Syntax

soundex(string)

Parameter | Description
string | Required. Specifies the string to check

Tips and Notes

Note: The soundex() function creates the same key for similar sounding words.

Tip: metaphone() is more accurate than soundex(), because metaphone() knows the basic rules of English pronunciation.

Example 1

<?php

$str = "hello";

echo soundex($str);

?>

The output of the code above will be:

H400

Example 2

In this example we use the soundex() function on two similar sounding words:

<?php

$str = "Sun";

$str2 = "Son";

echo soundex($str);

echo "<br />";

echo soundex($str2);

?>

The output of the code above will be:

S500

S500


PHP sprintf() Function

Definition and Usage

The sprintf() function writes a formatted string to a variable.

The arg1, arg2, ++ parameters will be inserted at percent (%) signs in the main string. This function works "step-by-step". At the first % sign, arg1 is inserted, at the second % sign, arg2 is inserted, etc.

Syntax

sprintf(format,arg1,arg2,arg++)

Parameter

Description

format

Required. Specifies the string and how to format the variables in it.

Possible format values:

· %% - Returns a percent sign
· %b - Binary number
· %c - The character according to the ASCII value
· %d - Signed decimal number
· %e - Scientific notation (e.g. 1.2e+2)
· %u - Unsigned decimal number
· %f - Floating-point number (local settings aware)
· %F - Floating-point number (not local settings aware)
· %o - Octal number
· %s - String
· %x - Hexadecimal number (lowercase letters)
· %X - Hexadecimal number (uppercase letters)

Additional format values. These are placed between the % and the letter (example %.2f):

· + (Forces both + and - in front of numbers. By default, only negative numbers are marked)
· ' (Specifies what to use as padding. Default is space. Must be used together with the width specifier. Example: %'x20s (this uses "x" as padding)
· - (Left-justifies the variable value)
· [0-9] (Specifies the minimum width held of to the variable value)
· .[0-9] (Specifies the number of decimal digits or maximum string length)

Note: If multiple additional format values are used, they must be in the same order as above.

arg1

Required. The argument to be inserted at the first %-sign in the format string

arg2

Optional. The argument to be inserted at the second %-sign in the format string

arg++

Optional. The argument to be inserted at the third, fourth, etc. %-sign in the format string

Tips and Notes

Note: If there are more % signs than arguments, you must use placeholders. A placeholder is inserted after the % sign, and consists of the argument- number and "\$". See example three.

Tip: Related functions: fprintf(), printf(), vfprintf(), vprintf(), and vsprintf().

Example 1

<?php

$str = "Hello";

$number = 123;

$txt = sprintf("%s world. Day number %u",$str,$number);

echo $txt;

?>

The output of the code above will be:

Hello world. Day number 123

Example 2

<?php

$number = 123;

$txt = sprintf("%f",$number);

echo $txt;

?>

The output of the code above will be:

123.000000

Example 3

Use of placeholders:

<?php

$number = 123;

$txt = sprintf("With 2 decimals: %1\$.2f

<br />With no decimals: %1\$u",$number);

echo $txt;

?>

The output of the code above will be:

With 2 decimals: 123.00

With no decimals: 123


PHP sqrt() function

Definition and Usage

The sqrt() function returns the square root of a number.

Syntax

sqrt(x)

Parameter | Description
x | Required. A number

Tips and Notes

Note: The sqrt() function will return -1.#IND if the parameter x is a negative number.

Example

In this example we will get the square root of different numbers:

<?php

echo(sqrt(0) . "<br />");

echo(sqrt(1) . "<br />");

echo(sqrt(9) . "<br />");

echo(sqrt(0.64) . "<br />");

echo(sqrt(-9))

?>

The output of the code above will be:

0

1

3

0.8

-1.#IND


PHP srand() function

Definition and Usage

The srand() function seeds the random number generator for rand().

This function should be called only once per script, and it must be called before any calls to rand().

Syntax

srand(seed)

Parameter | Description
seed | Optional. Seed number for the random number generator. If omitted, a random value is used.

Tips and Notes

Note: In PHP 4.2.0 and later, there is no need to seed the random generator with srand(). This is done automatically.

Tip: The greater the randomness of the seed, the more random number you'll get. A suitable number to seed this function with, is mktime().

Example

In this example we will seed the random number generator:

<?php

srand(mktime());

echo(rand());

?>

The output of the code above could be:

14054


PHP sscanf() Function

Definition and Usage

The sscanf() function parses input from a string according to a specified format. The sscanf() function parses a string into variables based on the format string.

If only two parameters are passed to this function, the data will be returned as an array. Otherwise, if optional parameters are passed, the data parsed are stored in them. If there are more specifiers than variables to contain them, an error occurs. However, if there are less specifiers than variables, the extra variables contain NULL.

Syntax

sscanf(string,format,arg1,arg2,arg++)

Parameter

Description

string

Required. Specifies the string to read

format

Required. Specifies the format to use.

Possible format values:

· %% - Returns a percent sign
· %b - Binary number
· %c - The character according to the ASCII value
· %d - Signed decimal number
· %e - Scientific notation (e.g. 1.2e+2)
· %u - Unsigned decimal number
· %f - Floating-point number (local settings aware)
· %F - Floating-point number (not local settings aware)
· %o - Octal number
· %s - String
· %x - Hexadecimal number (lowercase letters)
· %X - Hexadecimal number (uppercase letters)

Additional format values. These are placed between the % and the letter (example %.2f):

· + (Forces both + and - in front of numbers. By default, only negative numbers are marked)
· ' (Specifies what to use as padding. Default is space. Must be used together with the width specifier. Example: %'x20s (this uses "x" as padding)
· - (Left-justifies the variable value)
· [0-9] (Specifies the minimum width held of to the variable value)
· .[0-9] (Specifies the number of decimal digits or maximum string length)

Note: If multiple additional format values are used, they must be in the same order as above.

arg1

Optional. The first variable to store data in

arg2

Optional. The second variable to store data in

arg++

Optional. The third, fourth, and so on, to store data in

Example 1

<?php

$string = "age:30 weight:60kg";

sscanf($string,"age:%d weight:%dkg",$age,$weight);

// show types and values

var_dump($age,$weight);

?>

The output of the code above will be:

int(30)

int(60)


PHP stat() Function

Definition and Usage

The stat() function returns information about a file.

This function returns an array with the following elements:

· [0] or [dev] - Device number
· [1] or [ino] - Inode number
· [2] or [mode] - Inode protection mode
· [3] or [nlink] - Number of links
· [4] or [uid] - User ID of owner
· [5] or [gid] - Group ID of owner
· [6] or [rdev] - Inode device type
· [7] or [size] - Size in bytes
· [8] or [atime] - Last access (as Unix timestamp)
· [9] or [mtime] - Last modified (as Unix timestamp)
· [10] or [ctime] - Last inode change (as Unix timestamp)
· [11] or [blksize] - Blocksize of filesystem IO (if supported)
· [12] or [blocks] - Number of blocks allocated

Syntax

stat(file)

Parameter | Description
file | Required. Specifies the file to check

Tips and Notes

Note: The results from this function will differ from server to server. The array may contain the number index, the name index, or both.

Note: The result of this function are cached. Use clearstatcache() to clear the cache.

Tip: This function is similar to fstat(), except that with this function the file does not have to be open.

Example

<?php

$file = fopen("test.txt","r");

print_r(stat($file));

fclose($file);

?>

The output of the code above could be:

Array

(

[0] => 0

[1] => 0

[2] => 33206

[3] => 1

[4] => 0

[5] => 0

[6] => 0

[7] => 92

[8] => 1141633430

[9] => 1141298003

[10] => 1138609592

[11] => -1

[12] => -1

[dev] => 0

[ino] => 0

[mode] => 33206

[nlink] => 1

[uid] => 0

[gid] => 0

[rdev] => 0

[size] => 92

[atime] => 1141633430

[mtime] => 1141298003

[ctime] => 1138609592

[blksize] => -1

[blocks] => -1

)


PHP str_ireplace() Function

Definition and Usage

The str_ireplace() function replaces some characters with some other characters in a string.

This function works by the following rules:

· If the string to be searched is an array, it returns an array
· If the string to be searched is an array, find and replace is performed with every array element
· If both find and replace are arrays, and replace has fewer elements than find, an empty string will be used as replace
· If find is an array and replace is a string, the replace string will be used for every find value

Syntax

str_ireplace(find,replace,string,count)

Parameter | Description
find | Required. Specifies the value to find
replace | Required. Specifies the value to replace the value in find
string | Required. Specifies the string to be searched
count | Optional. A variable that counts the number of replacements

Tips and Notes

Note: This function is case-insensitive. Use str_replace() to perform a case-sensitive search.

Note: This function is binary-safe.

Example 1

<?php

echo str_ireplace("WORLD","Peter","Hello world!");

?>

The output of the code above will be:

Hello Peter!

Example 2

In this example we will demonstrate str_ireplace() with an array and a count variable:

<?php

$arr = array("blue","red","green","yellow");

print_r(str_ireplace("RED","pink",$arr,$i));

echo "Replacements: $i";

?>

The output of the code above will be:

Array

(

[0] => blue

[1] => pink

[2] => green

[3] => yellow

)

Replacements: 1

Example 3

In this example we will demonstrate str_ireplace() with less elements in replace than find:

<?php

$find = array("HELLO","WORLD");

$replace = array("B");

$arr = array("Hello","world","!");

print_r(str_ireplace($find,$replace,$arr));

?>

The output of the code above will be:

Array

(

[0] => B

[1] =>

[2] => !

)


PHP str_pad() Function

Definition and Usage

The str_pad() function pads a string to a new length.

Syntax

str_pad(string,length,pad_string,pad_type)

Parameter

Description

string

Required. Specifies the string to pad

length

Required. Specifies the new string length. If this value is less than the original length of the string, nothing will be done

pad_string

Optional. Specifies the string to use for padding. Default is whitespace

pad_type

Optional. Specifies what side to pad the string.

Possible values:

· STR_PAD_BOTH - Pad to both sides of the string. If not an even number, the right side gets the extra padding
· STR_PAD_LEFT - Pad to the left side of the string
· STR_PAD_RIGHT - Pad to the right side of the string. This is default

Example 1

<?php

$str = "Hello World";

echo str_pad($str,20,".");

?>

The output of the code above will be:

Hello World.........

Example 2

<?php

$str = "Hello World";

echo str_pad($str,20,".",STR_PAD_LEFT);

?>

The output of the code above will be:

.........Hello World

Example 3

<?php

$str = "Hello World";

echo str_pad($str,20,".:",STR_PAD_BOTH);

?>

The output of the code above will be:

.:.:Hello World.:.:.


PHP str_repeat() Function

Definition and Usage

The str_repeat() function repeats a string a specified number of times.

Syntax

str_repeat(string,repeat)

Parameter | Description
string | Required. Specifies the string to repeat
repeat | Required. Specifies the number of times the string will be repeated. Must be greater or equal to 0

Example

<?php

echo str_repeat(".",13);

?>

The output of the code above will be:

.............


PHP str_replace() Function

Definition and Usage

The str_replace() function replaces some characters with some other characters in a string.

This function works by the following rules:

· If the string to be searched is an array, it returns an array
· If the string to be searched is an array, find and replace is performed with every array element
· If both find and replace are arrays, and replace has fewer elements than find, an empty string will be used as replace
· If find is an array and replace is a string, the replace string will be used for every find value

Syntax

str_replace(find,replace,string,count)

Parameter | Description
find | Required. Specifies the value to find
replace | Required. Specifies the value to replace the value in find
string | Required. Specifies the string to be searched
count | Optional. A variable that counts the number of replacements

Tips and Notes

Note: This function is case-sensitive. Use str_ireplace() to perform a case-insensitive search.

Note: This function is binary-safe.

Example 1

<?php

echo str_replace("world","Peter","Hello world!");

?>

The output of the code above will be:

Hello Peter!

Example 2

In this example we will demonstrate str_replace() with an array and a count variable:

<?php

$arr = array("blue","red","green","yellow");

print_r(str_replace("red","pink",$arr,$i));

echo "Replacements: $i";

?>

The output of the code above will be:

Array

(

[0] => blue

[1] => pink

[2] => green

[3] => yellow

)

Replacements: 1

Example 3

In this example we will demonstrate str_replace() with less elements in replace than find:

<?php

$find = array("Hello","world");

$replace = array("B");

$arr = array("Hello","world","!");

print_r(str_replace($find,$replace,$arr));

?>

The output of the code above will be:

Array

(

[0] => B

[1] =>

[2] => !

)


PHP str_rot13() Function

Definition and Usage

The str_rot13() function performs the ROT13 encoding on a string.

The ROT13 encoding shifts every letter 13 places in the alphabet. Numeric and non-alphabetical characters remains untouched.

Syntax

str_rot13(string)

Parameter | Description
string | Required. Specifies the string to encode

Tips and Notes

Tip: Encoding and decoding are done by the same function. If you pass an encoded string as argument, the original string will be returned.

Example

In this example we will encode and decode a string using the str_rot13() function:

<?php

echo str_rot13("Hello World");

echo "<br />";

echo str_rot13("Uryyb Jbeyq");

?>

The output of the code above will be:

Uryyb Jbeyq

Hello World


PHP str_shuffle() Function

Definition and Usage

The str_shuffle() function randomly shuffles all the characters of a string.

Syntax

str_shuffle(string)

Parameter | Description
string | Required. Specifies the string to shuffle

Example

<?php

echo str_shuffle("Hello World");

?>

The output of the code above could be:

H leooWlrld


PHP str_split() Function

Definition and Usage

The str_split() function splits a string into an array.

Syntax

str_split(string,length)

Parameter | Description
string | Required. Specifies the string to split
length | Optional. Specifies the length of each array element. Default is 1

Tips and Notes

Note: If length is less than 1, the str_split() function will return FALSE.

Note: If length is larger than the length of string, the entire string will be returned as the only element of the array.

Example 1

<?php

print_r(str_split("Hello"));

?>

The output of the code above will be:

Array

(

[0] => H

[1] => e

[2] => l

[3] => l

[4] => o

)

Example 2

<?php

print_r(str_split("Hello",3));

?>

The output of the code above will be:

Array

(

[0] => Hel

[1] => lo

)


PHP str_word_count() Function

Definition and Usage

The str_word_count() function counts the number of words in a string.

Syntax

str_word_count(string,return,char)

Parameter

Description

string

Required. Specifies the string to check

return

Optional. Specifies the return value of the str_word_count() function.

Possible values:

· 0 - Default. Returns the number of words found
· 1 - Returns an array with the words from the string
· 2 - Returns an array where the key is the position of the word in the string, and value is the actual word

char

Optional. Specifies special characters to be considered as words.

Note: This parameter was added in PHP 5.1

Example 1

<?php

echo str_word_count("Hello world!");

?>

The output of the code above will be:

2

Example 2

<?php

print_r(str_word_count("Hello world!",1));

?>

The output of the code above will be:

Array

(

[0] => Hello

[1] => world

)

Example 3

<?php

print_r(str_word_count("Hello world!",2));

?>

The output of the code above will be:

Array

(

[0] => Hello

[6] => world

)

Example 4

str_word_count() without and with the char parameter:

<?php

print_r(str_word_count("Hello world & good morning!",1));

print_r(str_word_count("Hello world & good morning!",1,"&"));

?>

The output of the code above will be:

Array

(

[0] => Hello

[1] => world

[2] => good

[3] => morning

)

Array

(

[0] => Hello

[1] => world

[2] => &

[3] => good

[4] => morning

)


PHP strcasecmp() Function

Definition and Usage

The strcasecmp() function compares two strings.

This function returns:

· 0 - if the two strings are equal
· <0 - if string1 is less than string2
· >0 - if string1 is greater than string2

Syntax

strcasecmp(string1,string2)

Parameter | Description
string1 | Required. Specifies the first string to compare
string2 | Required. Specifies the second string to compare

Tips and Notes

Tip: The strcasecmp() function is binary safe and case-insensitive.

Example

<?php

echo strcasecmp("Hello world!","HELLO WORLD!");

?>

The output of the code above will be:

0


PHP strchr() Function

Definition and Usage

The strchr() function searches for the first occurrence of a string inside another string.

This function returns the rest of the string (from the matching point), or FALSE, if the string to search for is not found.

This function is an alias of the strstr() function.

Syntax

strchr(string,search)

Parameter | Description
string | Required. Specifies the string to search
search | Required. Specifies the string to search for. If this parameter is a number, it will search for the character matching the ASCII value of the number

Tips and Notes

Note: This function is binary safe.

Note: This function is case-sensitive. For a case-insensitive search, use stristr().

Example 1

<?php

echo strchr("Hello world!","world");

?>

The output of the code above will be:

world!

Example 2

In this example we will search a string for the ASCII value of "o":

<?php

echo strchr("Hello world!",111);

?>

The output of the code above will be:

o world!


PHP strcmp() Function

Definition and Usage

The strcmp() function compares two strings.

This function returns:

· 0 - if the two strings are equal
· <0 - if string1 is less than string2
· >0 - if string1 is greater than string2

Syntax

strcmp(string1,string2)

Parameter | Description
string1 | Required. Specifies the first string to compare
string2 | Required. Specifies the second string to compare

Tips and Notes

Note: The strcmp() function is binary safe and case-sensitive.

Example

<?php

echo strcmp("Hello world!","Hello world!");

?>

The output of the code above will be:

0


PHP strcoll() Function

Definition and Usage

The strcoll() function compares two strings.

This function returns:

· 0 - if the two strings are equal
· <0 - if string1 is less than string2
· >0 - if string1 is greater than string2

The comparison of the strings may vary depending on the locale settings (A<a or A>a).

Syntax

strcoll(string1,string2)

Parameter | Description
string1 | Required. Specifies the first string to compare
string2 | Required. Specifies the second string to compare

Tips and Notes

Note: The strcoll() is case-sensitive but not binary safe.

Note: If the current locale is C or POSIX, this function works the same way as strcmp().

Example

<?php

setlocale (LC_COLLATE, 'NL');

echo strcoll("Hello World!","Hello WORLD!");

echo "<br />";

setlocale (LC_COLLATE, 'en_US');

echo strcoll("Hello World!","Hello WORLD!");

?>

The output of the code above will be:

-1

1


PHP strcspn() Function

Definition and Usage

The strcspn() function returns the number of characters found in a string before any part of the specified characters are found.

Syntax

strcspn(string,char,start,length)

Parameter | Description
string | Required. Specifies the string to search
char | Required. Specifies the characters to search for
start | Optional. Specifies where in string to start Note: This parameter was added in PHP 4.3
length | Optional. Specifies the length of the string (how much of the string to search) Note: This parameter was added in PHP 4.3

Tips and Notes

Note: This function is binary safe.

Example

<?php

echo strcspn("Hello world!","w");

?>

The output of the code above will be:

6


PHP strftime() function

Definition and Usage

The strftime() function formats a local time or date according to locale settings.

Syntax

strftime(format,timestamp)

Parameter

Description

format

Required. Specifies how to return the result:

· %a - abbreviated weekday name
· %A - full weekday name
· %b - abbreviated month name
· %B - full month name
· %c - preferred date and time representation
· %C - century number (the year divided by 100, range 00 to 99)
· %d - day of the month (01 to 31)
· %D - same as %m/%d/%y
· %e - day of the month (1 to 31)
· %g - like %G, but without the century
· %G - 4-digit year corresponding to the ISO week number (see %V).
· %h - same as %b
· %H - hour, using a 24-hour clock (00 to 23)
· %I - hour, using a 12-hour clock (01 to 12)
· %j - day of the year (001 to 366)
· %m - month (01 to 12)
· %M - minute
· %n - newline character
· %p - either am or pm according to the given time value
· %r - time in a.m. and p.m. notation
· %R - time in 24 hour notation
· %S - second
· %t - tab character
· %T - current time, equal to %H:%M:%S
· %u - weekday as a number (1 to 7), Monday=1. Warning: In Sun Solaris Sunday=1
· %U - week number of the current year, starting with the first Sunday as the first day of the first week
· %V - The ISO 8601 week number of the current year (01 to 53), where week 1 is the first week that has at least 4 days in the current year, and with Monday as the first day of the week
· %W - week number of the current year, starting with the first Monday as the first day of the first week
· %w - day of the week as a decimal, Sunday=0
· %x - preferred date representation without the time
· %X - preferred time representation without the date
· %y - year without a century (range 00 to 99)
· %Y - year including the century
· %Z or %z - time zone or name or abbreviation
· %% - a literal % character

timestamp

Optional. Specifies the date or time to be formatted. If no timestamp is specified, it uses the current local time.

Tips and Notes

Tip: This function is identical to gmstrftime() except that the time returned is local time.

Example

Example of both strftime() and gmstrftime():

<?php

echo(strftime("%b %d %Y %X", mktime(20,0,0,12,31,98))."<br />");

echo(gmstrftime("%b %d %Y %X", mktime(20,0,0,12,31,98))."<br />");

//Print the current date, time, and time zone.

echo(gmstrftime("It is %a on %b %d, %Y, %X time zone: %Z",time()));

?>

The output of the code above could be:

Dec 31 1998 20:00:00

Dec 31 1998 19:00:00

It is Wed on Jan 25, 2006, 11:32:10 time zone: W. Europe Standard Time


PHP String Functions

PHP String Introduction

The string functions allow you to manipulate strings.

Installation

The string functions are part of the PHP core. There is no installation needed to use these functions.

PHP String Functions

PHP: indicates the earliest version of PHP that supports the function.

Function | Description | PHP
addcslashes() | Returns a string with backslashes in front of the specified characters | 4
 | Returns a string with backslashes in front of predefined characters | 3
 | Converts a string of ASCII characters to hexadecimal values | 3
chop() | Alias of rtrim() | 3
chr() | Returns a character from a specified ASCII value | 3
chunk_split() | Splits a string into a series of smaller parts | 3
convert_cyr_string() | Converts a string from one Cyrillic character-set to another | 3
 | Decodes a uuencoded string | 5
 | Encodes a string using the uuencode algorithm | 5
count_chars() | Returns how many times an ASCII character occurs within a string and returns the information | 4
crc32() | Calculates a 32-bit CRC for a string | 4
crypt() | One-way string encryption (hashing) | 3
 | Outputs strings | 3
explode() | Breaks a string into an array | 3
fprintf() | Writes a formatted string to a specified output stream | 5
 | Returns the translation table used by htmlspecialchars() and htmlentities() | 4
hebrev() | Converts Hebrew text to visual text | 3
hebrevc() | Converts Hebrew text to visual text and new lines (\n) into <br /> | 3
html_entity_decode() | Converts HTML entities to characters | 4
htmlentities() | Converts characters to HTML entities | 3
htmlspecialchars_decode() | Converts some predefined HTML entities to characters | 5
 | Converts some predefined characters to HTML entities | 3
 | Returns a string from the elements of an array | 3
join() | Alias of implode() | 3
levenshtein() | Returns the Levenshtein distance between two strings | 3
localeconv() | Returns locale numeric and monetary formatting information | 4
ltrim() | Strips whitespace from the left side of a string | 3
md5() | Calculates the MD5 hash of a string | 3
md5_file() | Calculates the MD5 hash of a file | 4
metaphone() | Calculates the metaphone key of a string | 4
money_format() | Returns a string formatted as a currency string | 4
nl_langinfo() | Returns specific local information | 4
nl2br() | Inserts HTML line breaks in front of each newline in a string | 3
 | Formats a number with grouped thousands | 3
ord() | Returns the ASCII value of the first character of a string | 3
parse_str() | Parses a query string into variables | 3
print() | Outputs a string | 3
printf() | Outputs a formatted string | 3
quoted_printable_decode() | Decodes a quoted-printable string | 3
 | Quotes meta characters | 3
rtrim() | Strips whitespace from the right side of a string | 3
setlocale() | Sets locale information | 3
 | Calculates the SHA-1 hash of a string | 4
sha1_file() | Calculates the SHA-1 hash of a file | 4
similar_text() | Calculates the similarity between two strings | 3
soundex() | Calculates the soundex key of a string | 3
sprintf() | Writes a formatted string to a variable | 3
sscanf() | Parses input from a string according to a format | 4
str_ireplace() | Replaces some characters in a string (case-insensitive) | 5
 | Pads a string to a new length | 4
str_repeat() | Repeats a string a specified number of times | 4
str_replace() | Replaces some characters in a string (case-sensitive) | 3
str_rot13() | Performs the ROT13 encoding on a string | 4
str_shuffle() | Randomly shuffles all characters in a string | 4
str_split() | Splits a string into an array | 5
str_word_count() | Count the number of words in a string | 4
strcasecmp() | Compares two strings (case-insensitive) | 3
 | Finds the first occurrence of a string inside another string (alias of strstr()) | 3
strcmp() | Compares two strings (case-sensitive) | 3
 | Locale based string comparison | 4
 | Returns the number of characters found in a string before any part of some specified characters are found | 3
strip_tags() | Strips HTML and PHP tags from a string | 3
stripcslashes() | Unquotes a string quoted with addcslashes() | 4
stripslashes() | Unquotes a string quoted with addslashes() | 3
stripos() | Returns the position of the first occurrence of a string inside another string (case-insensitive) | 5
stristr() | Finds the first occurrence of a string inside another string (case-insensitive) | 3
strlen() | Returns the length of a string | 3
strnatcasecmp() | Compares two strings using a "natural order" algorithm (case-insensitive) | 4
strnatcmp() | Compares two strings using a "natural order" algorithm (case-sensitive) | 4
strncasecmp() | String comparison of the first n characters (case-insensitive) | 4
 | String comparison of the first n characters (case-sensitive) | 4
strpbrk() | Searches a string for any of a set of characters | 5
strpos() | Returns the position of the first occurrence of a string inside another string (case-sensitive) | 3
strrchr() | Finds the last occurrence of a string inside another string | 3
strrev() | Reverses a string | 3
 | Finds the position of the last occurrence of a string inside another string (case-insensitive) | 5
 | Finds the position of the last occurrence of a string inside another string (case-sensitive) | 3
strspn() | Returns the number of characters found in a string that contains only characters from a specified charlist | 3
strstr() | Finds the first occurrence of a string inside another string (case-sensitive) | 3
 | Splits a string into smaller strings | 3
strtolower() | Converts a string to lowercase letters | 3
strtoupper() | Converts a string to uppercase letters | 3
 | Translates certain characters in a string | 3
substr() | Returns a part of a string | 3
 | Compares two strings from a specified start position (binary safe and optionally case-sensitive) | 5
substr_count() | Counts the number of times a substring occurs in a string | 4
substr_replace() | Replaces a part of a string with another string | 4
trim() | Strips whitespace from both sides of a string | 3
ucfirst() | Converts the first character of a string to uppercase | 3
ucwords() | Converts the first character of each word in a string to uppercase | 3
 | Writes a formatted string to a specified output stream | 5
 | Outputs a formatted string | 4
 | Writes a formatted string to a variable | 4
 | Wraps a string to a given number of characters | 4

PHP String Constants

PHP: indicates the earliest version of PHP that supports the constant.

Constant | Description | PHP
CRYPT_SALT_LENGTH | Contains the length of the default encryption method for the system. For standard DES encryption, the length is 2 |
CRYPT_STD_DES | Set to 1 if the standard DES-based encryption with a 2 character salt is supported, 0 otherwise |
CRYPT_EXT_DES | Set to 1 if the extended DES-based encryption with a 9 character salt is supported, 0 otherwise |
CRYPT_MD5 | Set to 1 if the MD5 encryption with a 12 character salt starting with $1$ is supported, 0 otherwise |
CRYPT_BLOWFISH | Set to 1 if the Blowfish encryption with a 16 character salt starting with $2$ or $2a$ is supported, 0 otherwise0 |
HTML_SPECIALCHARS |  |
HTML_ENTITIES |  |
ENT_COMPAT |  |
ENT_QUOTES |  |
ENT_NOQUOTES |  |
CHAR_MAX |  |
LC_CTYPE |  |
LC_NUMERIC |  |
LC_TIME |  |
LC_COLLATE |  |
LC_MONETARY |  |
LC_ALL |  |
LC_MESSAGES |  |
STR_PAD_LEFT |  |
STR_PAD_RIGHT |  |
STR_PAD_BOTH |  |


PHP strip_tags() Function

Definition and Usage

The strip_tags() function strips a string from HTML, XML, and PHP tags.

Syntax

strip_tags(string,allow)

Parameter | Description
string | Required. Specifies the string to check
allow | Optional. Specifies allowable tags. These tags will not be removed

Tips and Notes

Note: HTML comments are always stripped. This cannot be changed with the allow parameter.

Example 1

<?php

echo strip_tags("Hello <b>world!</b>");

?>

The output of the code above will be:

Hello world!

Example 2

<?php

echo strip_tags("Hello <b><i>world!</i></b>","<b>");

?>

The output of the code above will be:

Hello world!


PHP strip_whitespace() Function

Definition and Usage

The strip_whitespace() function returns the source code of the specified file with PHP comments and whitespace removed.

This function returns an empty string on failure.

Syntax

strip_whitespace(filename)

Parameter | Description
filename | Required. Specifies the file to strip

Tips and Notes

Note: This function only returns an empty string on versions before PHP 5.0.1.

Example

"test.php":

<?php

// PHP comment

/*

*  Another PHP comment

*/

echo php_strip_whitespace      ("test.php");

?>

If you select "View source" in the browser window, it will look like this:

<?php

echo php_strip_whitespace ("test.php"); ?>


PHP stripcslashes() Function

Definition and Usage

The stripcslashes() function removes backslashes added by the addcslashes() function.

Syntax

stripcslashes(string)

Parameter | Description
string | Required. Specifies the string to check

Tips and Notes

Tip: This function can be used to clean up a string retrieved from a database.

Example

<?php

echo stripcslashes("Hello, \my na\me is Kai Ji\m.");

?>

The output of the code above will be:

Hello, my name is Kai Jim.


PHP stripos() Function

Definition and Usage

The stripos() function returns the position of the first occurrence of a string inside another string.

If the string is not found, this function returns FALSE.

Syntax

stripos(string,find,start)

Parameter | Description
string | Required. Specifies the string to search
find | Required. Specifies the string to find
start | Optional. Specifies where to begin the search

Tips and Notes

Note: The stripos() function is case-insensitive.

Example

<?php

echo stripos("Hello world!","WO");

?>

The output of the code above will be:

6


PHP stripslashes() Function

Definition and Usage

The stripslashes() function removes backslashes added by the addslashes() function.

Syntax

stripslashes(string)

Parameter | Description
string | Required. Specifies the string to check

Tips and Notes

Tip: This function can be used to clean up data retrieved from a database or from an HTML form.

Example

<?php

echo stripslashes("Who\'s Kai Jim?");

?>

The output of the code above will be:

Who's Kai Jim?


PHP stristr() Function

Definition and Usage

The stristr() function searches for the first occurrence of a string inside another string.

This function returns the rest of the string (from the matching point), or FALSE, if the string to search for is not found.

Syntax

stristr(string,search)

Parameter | Description
string | Required. Specifies the string to search
search | Required. Specifies the string to search for. If this parameter is a number, it will search for the character matching the ASCII value of the number

Tips and Notes

Note: This function is binary safe.

Note: This function is case-insensitive. For a case-sensitive search, use strstr().

Example 1

<?php

echo stristr("Hello world!","WORLD");

?>

The output of the code above will be:

world!

Example 2

In this example we will search a string for the ASCII value of "o":

<?php

echo stristr("Hello world!",111);

?>

The output of the code above will be:

o world!


PHP strlen() Function

Definition and Usage

The strlen() function returns the length of a string.

Syntax

strlen(string)

Parameter | Description
string | Required. Specifies the string to check

Example

<?php

echo strlen("Hello world!");

?>

The output of the code above will be:

12


PHP strnatcasecmp() Function

Definition and Usage

The strnatcasecmp() function compares two strings using a "natural" algorithm.

In a natural algorithm, the number 2 is less than the number 10. In computer sorting, 10 is less than 2, because the first number in "10" is less than 2.

This function returns:

· 0 - if the two strings are equal
· <0 - if string1 is less than string2
· >0 - if string1 is greater than string2

Syntax

strnatcasecmp(string1,string2)

Parameter | Description
string1 | Required. Specifies the first string to compare
string2 | Required. Specifies the second string to compare

Tips and Notes

Note: The strnatcasecmp() is case-insensitive.

Example

<?php

echo strnatcasecmp("2Hello world!","10Hello world!");

echo "<br />";

echo strnatcasecmp("10Hello world!","2Hello world!");

?>

The output of the code above will be:

-1

1


PHP strnatcmp() Function

Definition and Usage

The strnatcmp() function compares two strings using a "natural" algorithm.

In a natural algorithm, the number 2 is less than the number 10. In computer sorting, 10 is less than 2, because the first number in "10" is less than 2.

This function returns:

· 0 - if the two strings are equal
· <0 - if string1 is less than string2
· >0 - if string1 is greater than string2

Syntax

strnatcmp(string1,string2)

Parameter | Description
string1 | Required. Specifies the first string to compare
string2 | Required. Specifies the second string to compare

Tips and Notes

Note: The strnatcmp() is case-sensitive.

Example

<?php

echo strnatcmp("2Hello world!","10Hello world!");

echo "<br />";

echo strnatcmp("10Hello world!","2Hello world!");

?>

The output of the code above will be:

-1

1


PHP strncasecmp() Function

Definition and Usage

The strncasecmp() function compares two strings.

This function returns:

· 0 - if the two strings are equal
· <0 - if string1 is less than string2
· >0 - if string1 is greater than string2

Syntax

strncasecmp(string1,string2,length)

Parameter | Description
string1 | Required. Specifies the first string to compare
string2 | Required. Specifies the second string to compare
length | Required. Specify the number of characters from each string to be used in the comparison

Tips and Notes

Note: The strncasecmp() is binary safe and case-insensitive.

Example

<?php

echo strncasecmp("Hello world!","hello earth!",6);

?>

The output of the code above will be:

0


PHP strncmp() Function

Definition and Usage

The strncmp() function compares two strings.

This function returns:

· 0 - if the two strings are equal
· <0 - if string1 is less than string2
· >0 - if string1 is greater than string2

Syntax

strncmp(string1,string2,length)

Parameter | Description
string1 | Required. Specifies the first string to compare
string2 | Required. Specifies the second string to compare
length | Required. Specify the number of characters from each string to be used in the comparison

Tips and Notes

Note: The strncmp() is binary safe and case-sensitive.

Example

<?php

echo strncmp("Hello world!","hello earth!",6);

?>

The output of the code above will be:

0


PHP strpbrk() Function

Definition and Usage

The strpbrk() function searches a string for any of the specified characters.

This function returns the rest of the string from where it found the first occurrence of a specified character, otherwise it returns FALSE.

Syntax

strpbrk(string,charlist)

Parameter | Description
string | Required. Specifies the string to search
charlist | Required. Specifies the characters to find

Tips and Notes

Note: This function is case-sensitive.

Example

<?php

echo strpbrk("Hello world!","oe");

?>

The output of the code above will be:

ello world!


PHP strpos() Function

Definition and Usage

The strpos() function returns the position of the first occurrence of a string inside another string.

If the string is not found, this function returns FALSE.

Syntax

strpos(string,find,start)

Parameter | Description
string | Required. Specifies the string to search
find | Required. Specifies the string to find
start | Optional. Specifies where to begin the search

Tips and Notes

Note: The strpos() function is case-sensitive.

Example

<?php

echo strpos("Hello world!","wo");

?>

The output of the code above will be:

6


PHP strptime() function

Definition and Usage

The strftime() function parses a time/date generated with strftime().

This function returns an array with the date parsed. The meaning of the returning array keys are:

· [tm_sec] - seconds (0-61)
· [tm_min] - minutes (0-59)
· [tm_hour] - hour (0-23)
· [tm_mday] - day of the month (1-31)
· [tm_mon] - months since January (0-11)
· [tm_year] - years since 1900
· [tm_wday] - days since Sunday (0-6)
· [tm_yday] - days since January 1 (0-365)
· [unparsed] - the date part which was not recognized using the specified format, if any

Syntax

strptime(date,format)

Parameter

Description

date

Required. The string to parse (e.g. returned from strftime())

format

Required. Specifies the format used in the date:

· %a - abbreviated weekday name
· %A - full weekday name
· %b - abbreviated month name
· %B - full month name
· %c - preferred date and time representation
· %C - century number (the year divided by 100, range 00 to 99)
· %d - day of the month (01 to 31)
· %D - same as %m/%d/%y
· %e - day of the month (1 to 31)
· %g - like %G, but without the century
· %G - 4-digit year corresponding to the ISO week number (see %V).
· %h - same as %b
· %H - hour, using a 24-hour clock (00 to 23)
· %I - hour, using a 12-hour clock (01 to 12)
· %j - day of the year (001 to 366)
· %m - month (01 to 12)
· %M - minute
· %n - newline character
· %p - either am or pm according to the given time value
· %r - time in a.m. and p.m. notation
· %R - time in 24 hour notation
· %S - second
· %t - tab character
· %T - current time, equal to %H:%M:%S
· %u - weekday as a number (1 to 7), Monday=1. Warning: In Sun Solaris Sunday=1
· %U - week number of the current year, starting with the first Sunday as the first day of the first week
· %V - The ISO 8601 week number of the current year (01 to 53), where week 1 is the first week that has at least 4 days in the current year, and with Monday as the first day of the week
· %W - week number of the current year, starting with the first Monday as the first day of the first week
· %w - day of the week as a decimal, Sunday=0
· %x - preferred date representation without the time
· %X - preferred time representation without the date
· %y - year without a century (range 00 to 99)
· %Y - year including the century
· %Z or %z - time zone or name or abbreviation
· %% - a literal % character

Tips and Notes

Note: This function is not implemented on Windows platforms.

Example

Example of both strftime() and strptime():

<?php

$format="%d/%m/%Y %H:%M:%S";

$strf=strftime($format);

echo("$strf");

print_r(strptime($strf,$format));

?>

The output of the code above could be:

03/10/2005 13:23:44

Array

(

[tm_sec] => 44

[tm_min] => 23

[tm_hour] => 13

[tm_mday] => 3

[tm_mon] => 9

[tm_year] => 105

[tm_wday] => 0

[tm_yday] => 276

[unparsed] =>

)


PHP strrchr() Function

Definition and Usage

The strrchr() function finds the position of the last occurrence of a string within another string, and returns all characters from this position to the end of the string.

If char cannot be found, this function returns FALSE.

Syntax

strrchr(string,char)

Parameter | Description
string | Required. Specifies the string to search
char | Required. Specifies the string to find. If this is a number, it will search for the character matching the ASCII value of that number

Tips and Notes

Tip: This function is binary safe.

Example 1

<?php

echo strrchr("Hello world!","world");

?>

The output of the code above will be:

world!

Example 2

In this example we will search a string for the ASCII value of "o":

<?php

echo strrchr("Hello world!",111);

?>

The output of the code above will be:

orld!


PHP strrev() Function

Definition and Usage

The strrev() function reverses a string.

Syntax

strrev(string)

Parameter | Description
string | Required. Specifies the string to reverse

Example

<?php

echo strrev("Hello World!");

?>

The output of the code above will be:

!dlroW olleH


PHP strripos() Function

Definition and Usage

The strripos() function finds the position of the last occurrence of a string inside another string.

This function returns the position on success, otherwise it returns FALSE.

Syntax

strripos(string,find,start)

Parameter | Description
string | Required. Specifies the string to search
find | Required. Specifies the string to find
start | Optional. Specifies where to begin the search

Tips and Notes

Note: The strripos() function is case-insensitive.

Example

<?php

echo strripos("Hello world!","WO");

?>

The output of the code above will be:

6


PHP strrpos() Function

Definition and Usage

The strrpos() function finds the position of the last occurrence of a string inside another string.

This function returns the position on success, otherwise it returns FALSE.

Syntax

strrpos(string,find,start)

Parameter | Description
string | Required. Specifies the string to search
find | Required. Specifies the string to find
start | Optional. Specifies where to begin the search

Tips and Notes

Note: The strrpos() function is case-sensitive.

Example

<?php

echo strrpos("Hello world!","wo");

?>

The output of the code above will be:

6


PHP strspn() Function

Definition and Usage

The strspn() function returns the number of characters found in the string that contains only characters from the charlist.

Syntax

strspn(string,charlist,start,length)

Parameter | Description
string | Required. Specifies the string to search
charlist | Required. Specifies the characters to find
start | Optional. Specifies where in the string to start
length | Optional. Defines the length of the string

Tips and Notes

Note: This function is binary safe.

Example 1

<?php

echo strspn("Hello world!","kHlleo");

?>

The output of the code above will be:

5

Example 2

<?php

echo strspn("abcdefand","abc");

?>

The output of the code above will be:

3


PHP strstr() Function

Definition and Usage

The strstr() function searches for the first occurrence of a string inside another string.

This function returns the rest of the string (from the matching point), or FALSE, if the string to search for is not found.

Syntax

strstr(string,search)

Parameter | Description
string | Required. Specifies the string to search
search | Required. Specifies the string to search for. If this parameter is a number, it will search for the character matching the ASCII value of the number

Tips and Notes

Note: This function is binary safe.

Note: This function is case-sensitive. For a case-insensitive search, use stristr().

Example 1

<?php

echo strstr("Hello world!","world");

?>

The output of the code above will be:

world!

Example 2

In this example we will search a string for the ASCII value of "o":

<?php

echo strstr("Hello world!",111);

?>

The output of the code above will be:

o world!


PHP strtok() Function

Definition and Usage

The strtok() function splits a string into smaller strings.

Syntax

strtok(string,split)

Parameter | Description
string | Required. Specifies the string to split
split | Required. Specifies one or more split characters

Example

In the example below, note that it is only the first call to strtok() that uses the string argument. After the first call, this function only needs the split argument, as it keeps track of where it is in the current string. To tokenize a new string, call strtok() with the string argument again:

<?php

$string = "Hello world. Beautiful day today.";

$token = strtok($string, " ");

while ($token !== false)

{

echo "$token<br />";

$token = strtok(" ");

}

?>

The output of the code above will be:

Hello

world.

Beautiful

day

today.


PHP strtolower() Function

Definition and Usage

The strtolower() function converts a string to lowercase.

Syntax

strtolower(string)

Parameter | Description
string | Required. Specifies the string to convert

Example

<?php

echo strtolower("Hello WORLD.");

?>

The output of the code above will be:

hello world.


PHP strtotime() function

Definition and Usage

The strtotime() function parses an English textual date or time into a Unix timestamp (the number of seconds since January 1 1970 00:00:00 GMT).

Syntax

strtotime(time,now)

Parameter | Description
time | Required. Specifies the time string to parse
now | Optional. Specifies the timestamp used to calculate the returned value. If this parameter is omitted, current time is used

Tips and Notes

Note: If the year is specified in a two-digit format, values between 0-69 are mapped to 2000-2069 and values between 70-100 are mapped to 1970-2000.

Note: In PHP 5.1.0 this function returns false on failure (earlier versions returns -1).

Example

<?php

echo(strtotime("now") . "<br />");

echo(strtotime("3 October 2005") . "<br />");

echo(strtotime("+5 hours") . "<br />");

echo(strtotime("+1 week") . "<br />");

echo(strtotime("+1 week 3 days 7 hours 5 seconds") . "<br />");

echo(strtotime("next Monday") . "<br />");

echo(strtotime("last Sunday"));

?>

The output of the code above could be:

1138614504

1128290400

1138632504

1139219304

1139503709

1139180400

1138489200


PHP strtoupper() Function

Definition and Usage

The strtoupper() function converts a string to uppercase.

Syntax

strtoupper(string)

Parameter | Description
string | Required. Specifies the string to convert

Example

<?php

echo strtoupper("Hello WORLD!");

?>

The output of the code above will be:

HELLO WORLD!


PHP strtr() Function

Definition and Usage

The strtr() function translates certain characters in a string.

Syntax

strtr(string,from,to)

or

strtr(string,array)

Parameter | Description
string | Required. Specifies the string to translate
from | Required (unless array is used). Specifies what characters to change
to | Required (unless array is used). Specifies what characters to change into
array | Required (unless to and from is used). An array containing what to change from as key, and what to change to as value

Tips and Notes

Note: If from and to are different length, both will be formatted to the length of the shortest.

Example 1

<?php

echo strtr("Hilla Warld","ia","eo");

?>

The output of the code above will be:

Hello World

Example 2

<?php

$arr = array("Hello" => "Hi", "world" => "earth");

echo strtr("Hello world",$arr);

?>

The output of the code above will be:

Hi earth


PHP substr() Function

Definition and Usage

The substr() function returns a part of a string.

Syntax

substr(string,start,length)

Parameter

Description

string

Required. Specifies the string to return a part of

start

Required. Specifies where to start in the string

· A positive number - Start at a specified position in the string
· A negative number - Start at a specified position from the end of the string
· 0 - Start at the first character in string

length

Optional. Specifies the length of the returned string. Default is to the end of the string.

· A positive number - The length to be returned from the start parameter
· Negative number - The length to be returned from the end of the string

Tips and Notes

Note: If start is a negative number and length is less than or equal to start, length becomes 0.

Example 1

<?php

echo substr("Hello world!",6);

?>

The output of the code above will be:

world!

Example 2

<?php

echo substr("Hello world!",6,5);

?>

The output of the code above will be:

world


PHP substr_compare() Function

Definition and Usage

The substr_compare() function compares two strings from a specified start position.

This function returns:

· 0 - if the two strings are equal
· <0 - if string1 (from startpos) is less than string2
· >0 - if string1 (from startpos) is greater than string2

If length is equal or greater than length of string1, this function returns FALSE.

Syntax

substr_compare(string1,string2,startpos,length,case)

Parameter | Description
string1 | Required. Specifies the first string to compare
string2 | Required. Specifies the second string to compare
startpos | Required. Specifies where to start searching in string1
length | Optional. Specifies how much of string1 to search
case | Optional. Specifies whether or not to perform a case-sensitive search. Default is FALSE (case-sensitive)

Tips and Notes

Tip: This function is binary safe and optionally case-sensitive.

Example 1

<?php

echo substr_compare("Hello world","Hello world",0);

?>

The output of the code above will be:

0

Example 2

<?php

echo substr_compare("Hello world","world",6);

?>

The output of the code above will be:

0

Example 3

<?php

echo substr_compare("Hello world","WORLD",6,TRUE);

?>

The output of the code above will be:

0


PHP substr_count() Function

Definition and Usage

The substr_count() function counts the number of times a substring occurs in a string.

Syntax

substr_count(string,substring,start,length)

Parameter | Description
string | Required. Specifies the string to check
substring | Required. Specifies the string to search for
start | Optional. Specifies where in string to start searching
length | Optional. Specifies the length of the search

Example

<?php

echo substr_count("Hello world. The world is nice","world");

?>

The output of the code above will be:

2


PHP substr_replace() Function

Definition and Usage

The substr_replace() function replaces a part of a string with another string.

Syntax

substr_replace(string,replacement,start,length)

Parameter

Description

string

Required. Specifies the string to check

replacement

Required. Specifies the string to insert

start

Required. Specifies where to start replacing in the string

· A positive number - Start replacing at the specified position in the string
· Negative number - Start replacing at the specified position from the end of the string
· 0 - Start replacing at the first character in the string

length

Optional. Specifies how many characters should be replaced. Default is the same length as the string.

· A positive number - The length of string to be replaced
· A negative number - How many characters should be left at end of string after replacing
· 0 - Insert instead of replace

Tips and Notes

Note: If start is a negative number and length is less than or equal to start, length becomes 0.

Example

<?php

echo substr_replace("Hello world","earth",6);

?>

The output of the code above will be:

Hello earth


PHP Switch Statement

The Switch statement in PHP is used to perform one of several different actions based on one of several different conditions.

The Switch Statement

If you want to select one of many blocks of code to be executed, use the Switch statement.

The switch statement is used to avoid long blocks of if..elseif..else code.

Syntax

switch (expression)

{

case label1:

code to be executed if expression = label1;

break;

case label2:

code to be executed if expression = label2;

break;

default:

code to be executed

if expression is different

from both label1 and label2;

}

Example

This is how it works:

· A single expression (most often a variable) is evaluated once
· The value of the expression is compared with the values for each case in the structure
· If there is a match, the code associated with that case is executed
· After a code is executed, break is used to stop the code from running into the next case
· The default statement is used if none of the cases are true

<html>

<body>

<?php

switch ($x)

{

case 1:

echo "Number 1";

break;

case 2:

echo "Number 2";

break;

case 3:

echo "Number 3";

break;

default:

echo "No number between 1 and 3";

}

?>

</body>

</html>


PHP symlink() Function

Definition and Usage

The symlink() function creates a symbolic link from the existing target with the specified name link.

This function returns TRUE on success, or FALSE on failure.

Syntax

link(target,link)

Parameter | Description
target | Required.
link | Required.

Tips and Notes

Note: This is not an HTML link, but a link in the filesystem.

Note: This function does not work on Windows platforms.


PHP Syntax

You cannot view the PHP source code by selecting "View source" in the browser - you will only see the output from the PHP file, which is plain HTML. This is because the scripts are executed on the server before the result is sent back to the browser.

Basic PHP Syntax

A PHP scripting block always starts with <?php and ends with ?>. A PHP scripting block can be placed anywhere in the document.

On servers with shorthand support enabled you can start a scripting block with <? and end with ?>.

However, for maximum compatibility, we recommend that you use the standard form (<?php) rather than the shorthand form.

<?php

?>

A PHP file normally contains HTML tags, just like an HTML file, and some PHP scripting code.

Below, we have an example of a simple PHP script which sends the text "Hello World" to the browser:

<html>

<body>

<?php

echo "Hello World";

?>

</body>

</html>

Each code line in PHP must end with a semicolon. The semicolon is a separator and is used to distinguish one set of instructions from another.

There are two basic statements to output text with PHP: echo and print. In the example above we have used the echo statement to output the text "Hello World".

Comments in PHP

In PHP, we use // to make a single-line comment or /* and */ to make a large comment block.

<html>

<body>

<?php

//This is a comment

/*

This is

a comment

block

*/

?>

</body>

</html>


PHP tan() function

Definition and Usage

The tan() function returns a number that represents the tangent of an angle.

Syntax

tan(x)

Parameter | Description
x | Required. A number

Example

In this example we will get the tangent of different numbers:

<?php

echo(tan(M_PI_4) . "<br />");

echo(tan(0.50) . "<br />");

echo(tan(-0.50) . "<br />");

echo(tan(5) . "<br />");

echo(tan(10) . "<br />");

echo(tan(-5) . "<br />");

echo(tan(-10))

?>

The output of the code above will be:

1

0.546302489844

-0.546302489844

-3.38051500625

0.648360827459

3.38051500625

-0.648360827459


PHP tempnam() Function

Definition and Usage

The tempnam() function creates a temporary file with a unique filename in the specified directory.

This function returns the new temporary filename, or FALSE on failure.

Syntax

tempnam(dir,prefix)

Parameter | Description
dir | Required. Specifies the directory of where to create the temp file
prefix | Required. Specifies the start of the filename

Tips and Notes

Note: If the specified directory does not exist, tempnam() may generate a file in the system's temporary directory.

Tip: See also tmpfile()

Example

<?php

echo tempnam("C:\inetpub\testweb","TMP0");

?>

The output of the code above could be:

C:\inetpub\testweb\TMP1.tmp


PHP time() function

Definition and Usage

The time() function returns the current time as a Unix timestamp (the number of seconds since January 1 1970 00:00:00 GMT).

Syntax

time(void)

Parameter | Description
void | Optional.

Tips and Notes

Note: Calling this function is identical to calling mktime() with no parameters, or calling date("U").

Example

<?php

$t=time();

echo($t . "<br />");

echo(date("D F d Y",$t));

?>

The output of the code above could be:

1138618081

Mon January 30 2006


PHP time_nanosleep() Function

Definition and Usage

The time_nanosleep() function delays execution of the current script for a specified number of seconds and nanoseconds.

This function returns TRUE on success, or FALSE on failure.

Syntax

time_nanosleep(seconds,nanoseconds)

Parameter | Description
seconds | Required. Specifies the number of seconds to delay the script
nanoseconds | Required. Specifies the number of nanoseconds to delay the script (must be less than 1,000,000,000)

Tips and Notes

Note: This function is not implemented on Windows platforms.

Example

<?php

if (time_nanosleep(3,500000000) === true)

{

echo "Slept for three and a half a second";

}

?>


PHP time_sleep_until() Function

Definition and Usage

The time_sleep_until() function delays execution of the current script until the specified time.

This function returns TRUE on success, or FALSE on failure.

Syntax

time_sleep_until(timestamp)

Parameter | Description
timestamp | Required. Specifies the time to wake

Tips and Notes

Note: This function does not work on Windows platforms.

Example

<?php

// wake up ten seconds from now

time_sleep_until(time()+10);

?>


PHP tmpfile() Function

Definition and Usage

The tmpfile() function creates a temporary file with a unique name in read-write (w+) mode.

Syntax

tmpfile()

Tips and Notes

Note: The temporary file is automatically removed when it is closed with fclose(), or when the script ends.

Tip: See also tempnam()

Example

<?php

$temp = tmpfile();

fwrite($temp, "Testing, testing.");

//Rewind to the start of file

rewind($temp);

//Read 1k from file

echo fread($temp,1024);

//This removes the file

fclose($temp);

?>

The output of the code above will be:

Testing, testing.


PHP touch() Function

Definition and Usage

The touch() function sets the access and modification time of the specified file.

This function returns TRUE on success, or FALSE on failure.

Syntax

touch(filename,time,atime)

Parameter | Description
filename | Required. Specifies the file to touch
time | Optional. Sets the time. The current system time is set by default
atime | Optional. Sets the access time. Default is the current system time if no parameters are set, or the same as the time parameter if that parameter is set

Tips and Notes

Note: If the specified file does not exist, it will be created.

Example

<?php

touch("test.txt");

?>


PHP trigger_error() Function

Definition and Usage

The trigger_error() function creates a user-defined error message.

The trigger_error() function is used to trigger an error message at a user-specified condition. It can be used with the built-in error handler, or with a user defined function set by the set_error_handler() function.

This function is useful when you need a user-defined message to a specified condition when running a script runtime.

This function returns FALSE if a non valid error type is specified, and TRUE otherwise.

Syntax

trigger_error(error_message,error_types)

Parameter

Description

error_message

Required. Specifies the error message. Limited to 1024 characters in length

error_types

Optional. Specifies the error type for this error message.

Possible error types:

· E_USER_ERROR - Fatal user-generated run-time error. Errors that can not be recovered from. Execution of the script is halted
· E_USER_WARNING - Non-fatal user-generated run-time warning. Execution of the script is not halted
· E_USER_NOTICE - Default. User-generated run-time notice. The script found something that might be an error, but could also happen when running a script normally

Example

<?php

$test=2;

if ($test>1)

{

trigger_error("A custom error has been triggered");

}

?>

The output of the code above should be something like this:

Notice: A custom error has been triggered

in C:\webfolder\test.php on line 6


PHP trim() Function

Definition and Usage

The trim() function removes whitespaces and other predefined characters from both sides of a string.

Syntax

trim(string,charlist)

Parameter

Description

string

Required. Specifies the string to check

charlist

Optional. Specifies which characters to remove from the string. If omitted, all of the following characters are removed:

· "\0" - NULL
· "\t" - tab
· "\n" - new line
· "\x0B" - vertical tab
· "\r" - carriage return
· " " - ordinary white space

Example 1

<html>

<body>

<?php

$str = "   Hello World!    ";

echo "Without trim: " . $str;

echo "<br />";

echo "With trim: " . trim($str);

?>

<body>

<html>

The browser output of the code above will be:

Without trim: Hello World!

With trim: Hello World!

If you select "View source" in the browser window, you will see the following HTML:

<html>

<body>

Without trim:     Hello World!    <br />With trim: Hello World!

</body>

</html>

Example 2

<?php

$str = "\r\nHello World!\r\n";

echo "Without trim: " . $str;

echo "<br />";

echo "With trim: " . trim($str);

?>

The browser output of the code above will be:

Without trim: Hello World!

With trim: Hello World!

If you select "View source" in the browser window, you will see the following HTML:

<html>

<body>

Without trim:

Hello World!

<br />With trim: Hello World!

</body>

</html>


PHP Tutorial

PHP Tutorial

php2

PHP is a powerful server-side scripting language for creating dynamic and interactive websites.

PHP is the widely-used, free, and efficient alternative to competitors such as Microsoft's ASP. PHP is perfectly suited for Web development and can be embedded directly into the HTML code.

The PHP syntax is very similar to Perl and C. PHP is often used together with Apache (web server) on various operating systems. It also supports ISAPI and can be used with Microsoft's IIS on Windows.

Start learning PHP!

PHP References

At W3Schools you will find complete references of all PHP functions:

· Array functions
· Calendar functions
· Date functions
· Directory functions
·
·
· HTTP functions
· LibXML functions
· Mail functions
· Math functions
· Misc functions
· MySQL functions
· SimpleXML functions
· String functions
·
· Zip functions


PHP uasort() Function

Definition and Usage

The uasort() function sorts an array by a user defined comparison function.

This function does not assigns new keys for the elements in the array.

This function returns TRUE on success, or FALSE on failure.

This function is useful for sorting with custom algorithms.

Syntax

uasort(array,sorttype)

Parameter

Description

array

Required. Specifies the array to sort

function

Required. A user specified function.

The function must return -1, 0, or 1 for this method to work correctly. It should be written to accept two parameters to compare, and it should work something like this:

· If a = b, return 0
· If a > b, return 1
· If a < b, return -1

Example

<?php

function my_sort($a, $b)

{

if ($a == $b) return 0;

return ($a > $b) ? -1 : 1;

}

$people = array("Swanson" => "Joe",

"Griffin" => "Peter", "Quagmire" => "Glenn",

"swanson" => "joe", "griffin" => "peter",

"quagmire" => "glenn");

uasort($people, "my_sort");

print_r ($people);

?>

The output of the code above will be:

Array

(

[griffin] => peter

[swanson] => joe

[quagmire] => glenn

[Griffin] => Peter

[Swanson] => Joe

[Quagmire] => Glenn

)


PHP ucfirst() Function

Definition and Usage

The ucfirst() function converts the first character of a string to uppercase.

Syntax

ucfirst(string)

Parameter | Description
string | Required. Specifies the string to convert

Example

<?php

echo ucfirst("hello world");

?>

The output of the code above will be:

Hello world


PHP ucwords() Function

Definition and Usage

The ucwords() function converts the first character of each word in a string to uppercase.

Syntax

ucwords(string)

Parameter | Description
string | Required. Specifies the string to convert

Example

<?php

echo ucwords("hello world");

?>

The output of the code above will be:

Hello World


PHP uksort() Function

Definition and Usage

The uksort() function sorts an array by the element keys using user defined comparison function.

This function returns TRUE on success, or FALSE on failure.

This function is useful for sorting with custom algorithms.

Syntax

uksort(array,sorttype)

Parameter

Description

array

Required. Specifies the array to sort

function

Required. A user specified function.

The function must return -1, 0, or 1 for this method to work correctly. It should be written to accept two parameters to compare, and it should work something like this:

· If a = b, return 0
· If a > b, return 1
· If a < b, return -1

Example

<?php

function my_sort($a, $b)

{

if ($a == $b) return 0;

return ($a > $b) ? -1 : 1;

}

$people = array("Swanson" => "Joe",

"Griffin" => "Peter", "Quagmire" => "Glenn",

"swanson" => "joe", "griffin" => "peter",

"quagmire" => "glenn");

uksort($people, "my_sort");

print_r ($people);

?>

The output of the code above will be:

Array

(

[swanson] => joe

[quagmire] => glenn

[griffin] => peter

[Swanson] => Joe

[Quagmire] => Glenn

[Griffin] => Peter

)


PHP umask() Function

Definition and Usage

The umask() function changes the file permissions for files.

This function sets PHP's umask to mask & 0777 and returns the old umask. However, if you call umask() without any arguments, it returns the current umask.

Syntax

umask(mask)

Parameter

Description

mask

Optional. Specifies the new permissions. Default is 0777

The mode parameter consists of four numbers:

· The first number is always zero
· The second number specifies permissions for the owner
· The third number specifies permissions for the owner's user group
· The fourth number specifies permissions for everybody else

Possible values (to set multiple permissions, add up the following numbers):

· 1 = execute permissions
· 2 = write permissions
· 4 = read permissions


PHP uniqid() Function

Definition and Usage

The uniqid() function generates a unique ID based on the microtime (current time in microseconds).

Syntax

uniqid(prefix,more_entropy)

Parameter | Description
prefix | Optional. Specifies a prefix to the unique ID (useful if two scripts generate ids at exactly the same microsecond) Note: This parameter became optional in PHP 5
more_entropy | Optional. Specifies more entropy at the end of the return value. This will make the result more unique. When set to TRUE, the return string will be 23 characters. Default is FALSE, and the return string will be 13 characters long

Tips and Notes

Note: The generated ID from this function is not optimal, because it is based on the system time. To generate an extremely difficult to predict ID, use the md5() function (can be found in the String reference).

Example

<?php

echo uniqid();

?>

The output of the code above could be:

4415297e3af8c


PHP UnixToJD() function

Definition and Usage

The UnixToJD() function returns the Julian day count for a Unix timestamp (Gregorian seconds since midnight of January 1, 1970), or for the current day if no timestamp is given.

Syntax

unixtojd(timestamp)

Parameter | Description
timestamp | Optional.

Tips and Notes

Note: Unix timestamps indicate the number of seconds from midnight of January 1, 1970 on the Gregorian calendar, not the Julian Calendar.

Example

<?php

echo(unixtojd());

?>

The output of the code above could be:

2453755


PHP unlink() Function

Definition and Usage

The unlink() function deletes a file.

This function returns TRUE on success, or FALSE on failure.

Syntax

unlink(filename,context)

Parameter | Description
filename | Required. Specifies the file to delete
context | Optional. Specifies the context of the file handle. Context is a set of options that can modify the behavior of a stream

Example

<?php

$file = "test.txt";

if (!unlink($file))

{

echo ("Error deleting $file");

}

else

{

echo ("Deleted $file");

}

?>


PHP unpack() Function

Definition and Usage

The unpack() function unpacks data from a binary string.

This function returns an array on success, or FALSE on failure.

Syntax

unpack(format,data)

Parameter

Description

format

Required. Specifies the format to use when unpacking data.

Possible values:

· a - NUL-padded string
· A - SPACE-padded string
· h - Hex string, low nibble first
· H - Hex string, high nibble first
· c - signed char
· C - unsigned char
· s - signed short (always 16 bit, machine byte order)
· S - unsigned short (always 16 bit, machine byte order)
· n - unsigned short (always 16 bit, big endian byte order)
· v - unsigned short (always 16 bit, little endian byte order)
· i - signed integer (machine dependent size and byte order)
· I - unsigned integer (machine dependent size and byte order)
· l - signed long (always 32 bit, machine byte order)
· L - unsigned long (always 32 bit, machine byte order)
· N - unsigned long (always 32 bit, big endian byte order)
· V - unsigned long (always 32 bit, little endian byte order)
· f - float (machine dependent size and representation)
· d - double (machine dependent size and representation)
· x - NUL byte
· X - Back up one byte
· @ - NUL-fill to absolute position

data

Required. Specifies the binary data to be unpacked

Example 1

<?php

$data = "PHP";

print_r(unpack("C*",$data));

?>

The output of the code above will be:

Array

(

[1] => 80

[2] => 72

[3] => 80

)

Example 2

<?php

$data = "PHP";

print_r(unpack("C*myint",$data));

?>

The output of the code above will be:

Array

(

[myint1] => 80

[myint2] => 72

[myint3] => 80

)

Example 3

<?php

$bin = pack("c2n2",0x1234,0x5678,65,66);

print_r(unpack("c2chars/n2int",$bin));

?>

The output of the code above will be:

Array

(

[chars1] => 52

[chars2] => 120

[int1] => 65

[int2] => 66

)


PHP user_error() Function

Definition and Usage

The user_error() function creates a user-defined error message.

The user_error() function is used to trigger an error message at a user-specified condition. It can be used with the built-in error handler, or with a user defined function set by the set_error_handler() function.

This function is useful when you need a user-defined message to a specified condition when running a script runtime.

This function returns FALSE if a non valid error type is specified, and TRUE otherwise.

This function is an alias of the trigger_error() function.

Syntax

user_error(error_message,error_types)

Parameter

Description

error_message

Required. Specifies the error message. Limited to 1024 characters in length

error_types

Optional. Specifies the error type for this error message.

Possible error types:

· E_USER_ERROR - Fatal user-generated run-time error. Errors that can not be recovered from. Execution of the script is halted
· E_USER_WARNING - Non-fatal user-generated run-time warning. Execution of the script is not halted
· E_USER_NOTICE - Default. User-generated run-time notice. The script found something that might be an error, but could also happen when running a script normally

Example

<?php

$test=2;

if ($test>1)

{

user_error("A custom error has been triggered");

}

?>

The output of the code above should be something like this:

Notice: A custom error has been triggered

in C:\webfolder\test.php on line 6


PHP usleep() Function

Definition and Usage

The usleep() function delays execution of the current script for a specified number of microseconds (a microsecond equals one millionth of a second).

Syntax

usleep(microseconds)

Parameter | Description
microseconds | Required. Specifies the number of microseconds to delay the script

Tips and Notes

Note: This function did not work on Windows platforms until PHP 5.

Example

<?php

echo date('h:i:s') . "<br />";

//sleep for 10 seconds

usleep(10000000);

//start again

echo date('h:i:s');

?>

The output of the code above will be something like this:

09:23:14

09:23:24


PHP usort() Function

Definition and Usage

The usort() function sorts an array by a user defined comparison function.

This function assigns new keys for the elements in the array. Existing keys will be removed.

This function returns TRUE on success, or FALSE on failure.

This function is useful for sorting with custom algorithms.

Syntax

usort(array,sorttype)

Parameter

Description

array

Required. Specifies the array to sort

function

Required. A user specified function.

The function must return -1, 0, or 1 for this method to work correctly. It should be written to accept two parameters to compare, and it should work something like this:

· If a = b, return 0
· If a > b, return 1
· If a < b, return -1

Example

<?php

function my_sort($a, $b)

{

if ($a == $b) return 0;

return ($a > $b) ? -1 : 1;

}

$arr = array("Peter", "glenn","Cleveland",

"peter","cleveland", "Glenn");

usort($arr, "my_sort");

print_r ($arr);

?>

The output of the code above will be:

Array

(

[0] => peter

[1] => glenn

[2] => cleveland

[3] => Peter

[4] => Glenn

[5] => Cleveland

)


PHP utf8_decode() Function

Definition and Usage

The utf8_decode() function decodes a UTF-8 string to ISO-8859-1.

This function decodes a string, previously encoded with the utf8_encode() function, back to ISO-8859-1.

This function returns the decoded string on success, or FALSE on failure.

Syntax

utf8_decode(string)

Parameter | Description
string | Required. Specifies the string to decode


PHP utf8_encode() Function

Definition and Usage

The utf8_encode() function encodes an ISO-8859-1 string to UTF-8.

Unicode is a universal standard, and has been developed to describe all possible characters of all languages plus a lot of symbols with one unique number for each character/symbol.

However, it is not always possible to transfer a Unicode character to another computer reliably. UTF-8 has been developed to transfer a Unicode character from one computer to another

This function returns the encoded string on success, or FALSE on failure.

Syntax

utf8_encode(string)

Parameter | Description
string | Required. Specifies the string to encode


PHP Variables

Variables are used for storing values, such as numbers, strings or function results, so that they can be used many times in a script.

Variables in PHP

All variables in PHP start with a $ sign symbol. Variables may contain strings, numbers, or arrays.

Below, the PHP script assigns the string "Hello World" to a variable called $txt:

<html>

<body>

<?php

$txt="Hello World";

echo $txt;

?>

</body>

</html>

To concatenate two or more variables together, use the dot (.) operator:

<html>

<body>

<?php

$txt1="Hello World";

$txt2="1234";

echo $txt1 . " " . $txt2 ;

?>

</body>

</html>

The output of the script above will be: "Hello World 1234".

Variable Naming Rules

· A variable name must start with a letter or an underscore "_"
· A variable name can only contain alpha-numeric characters and underscores (a-Z, 0-9, and _ )
· A variable name should not contain spaces. If a variable name should be more than one word, it should be separated with underscore ($my_string), or with capitalization ($myString)


PHP vfprintf() Function

Definition and Usage

The vfprintf() function writes a formatted string to a specified output stream (example: file or database).

Unlike fprintf(), the arguments in vfprintf(), are placed in an array. The array elements will be inserted at the percent (%) signs in the main string. This function works "step-by-step". At the first % sign, the first array element is inserted, at the second % sign, the second array element is inserted, etc.

The vfprintf() function returns the length of the written string.

Syntax

vfprintf(stream,format,argarray)

Parameter

Description

stream

Required. Specifies where to write/output the string

format

Required. Specifies the string and how to format the variables in it.

Possible format values:

· %% - Returns a percent sign
· %b - Binary number
· %c - The character according to the ASCII value
· %d - Signed decimal number
· %e - Scientific notation (e.g. 1.2e+2)
· %u - Unsigned decimal number
· %f - Floating-point number (local settings aware)
· %F - Floating-point number (not local settings aware)
· %o - Octal number
· %s - String
· %x - Hexadecimal number (lowercase letters)
· %X - Hexadecimal number (uppercase letters)

Additional format values. These are placed between the % and the letter (example %.2f):

· + (Forces both + and - in front of numbers. By default, only negative numbers are marked)
· ' (Specifies what to use as padding. Default is space. Must be used together with the width specifier. Example: %'x20s (this uses "x" as padding)
· - (Left-justifies the variable value)
· [0-9] (Specifies the minimum width held of to the variable value)
· .[0-9] (Specifies the number of decimal digits or maximum string length)

Note: If multiple additional format values are used, they must be in the same order as above.

argarray

Required. An array with arguments to be inserted at the % signs in the format string

Tips and Notes

Note: If there are more % signs than arguments, you must use placeholders. A placeholder is inserted after the % sign, and consists of the argument- number and "\$". See example three.

Tip: Related functions: fprintf(), printf(), sprintf(), vprintf(), and vsprintf().

Example 1

<?php

$str = "Hello";

$number = 123;

$file = fopen("test.txt","w");

echo vfprintf($file,"%s world. Day number %u",array($str,$number));

?>

The output of the code above will be:

27

The following text will be written to the file "test.txt":

Hello world. Day number 123

Example 2

<?php

$num1 = 123;

$num2 = 456;

$file = fopen("test.txt","w");

vfprintf($file,"%f%f",array($num1,$num2));

?>

The following text will be written to the file "test.txt":

123.000000456.000000

Example 3

Use of placeholders:

<?php

$number = 123;

$file = fopen("test.txt","w");

vfprintf($file,"With 2 decimals: %1\$.2f

\nWith no decimals: %1\$u",array($number));

?>

The following text will be written to the file "test.txt":

With 2 decimals: 123.00

With no decimals: 123


PHP vprintf() Function

Definition and Usage

The vprintf() function outputs a formatted string.

Unlike printf(), the arguments in vprintf(), are placed in an array. The array elements will be inserted at the percent (%) signs in the main string. This function works "step-by-step". At the first % sign, the first array element is inserted, at the second % sign, the second array element is inserted, etc.

Syntax

vprintf(format,argarray)

Parameter

Description

format

Required. Specifies the string and how to format the variables in it.

Possible format values:

· %% - Returns a percent sign
· %b - Binary number
· %c - The character according to the ASCII value
· %d - Signed decimal number
· %e - Scientific notation (e.g. 1.2e+2)
· %u - Unsigned decimal number
· %f - Floating-point number (local settings aware)
· %F - Floating-point number (not local settings aware)
· %o - Octal number
· %s - String
· %x - Hexadecimal number (lowercase letters)
· %X - Hexadecimal number (uppercase letters)

Additional format values. These are placed between the % and the letter (example %.2f):

· + (Forces both + and - in front of numbers. By default, only negative numbers are marked)
· ' (Specifies what to use as padding. Default is space. Must be used together with the width specifier. Example: %'x20s (this uses "x" as padding)
· - (Left-justifies the variable value)
· [0-9] (Specifies the minimum width held of to the variable value)
· .[0-9] (Specifies the number of decimal digits or maximum string length)

Note: If multiple additional format values are used, they must be in the same order as above.

argarray

Required. An array with arguments to be inserted at the % signs in the format string

Tips and Notes

Note: If there are more % signs than arguments, you must use placeholders. A placeholder is inserted after the % sign, and consists of the argument- number and "\$". See example three.

Tip: Related functions: fprintf(), printf(), sprintf(), vfprintf(), and vsprintf().

Example 1

<?php

$str = "Hello";

$number = 123;

vprintf("%s world. Day number %u",array($str,$number));

?>

The output of the code above will be:

Hello world. Day number 123

Example 2

<?php

$num1 = 123;

$num2 = 456;

vprintf("%f%f",array($num1,$num2));

?>

The output of the code above will be:

123.000000456.000000

Example 3

Use of placeholders:

<?php

$number = 123;

vprintf("With 2 decimals: %1\$.2f

<br />With no decimals: %1\$u",array($number));

?>

The output of the code above will be:

With 2 decimals: 123.00

With no decimals: 123


PHP vsprintf() Function

Definition and Usage

The vsprintf() function writes a formatted string to a variable.

Unlike sprintf(), the arguments in vsprintf(), are placed in an array. The array elements will be inserted at the percent (%) signs in the main string. This function works "step-by-step". At the first % sign, the first array element is inserted, at the second % sign, the second array element is inserted, etc.

Syntax

vsprintf(format,argarray)

Parameter

Description

format

Required. Specifies the string and how to format the variables in it.

Possible format values:

· %% - Returns a percent sign
· %b - Binary number
· %c - The character according to the ASCII value
· %d - Signed decimal number
· %e - Scientific notation (e.g. 1.2e+2)
· %u - Unsigned decimal number
· %f - Floating-point number (local settings aware)
· %F - Floating-point number (not local settings aware)
· %o - Octal number
· %s - String
· %x - Hexadecimal number (lowercase letters)
· %X - Hexadecimal number (uppercase letters)

Additional format values. These are placed between the % and the letter (example %.2f):

· + (Forces both + and - in front of numbers. By default, only negative numbers are marked)
· ' (Specifies what to use as padding. Default is space. Must be used together with the width specifier. Example: %'x20s (this uses "x" as padding)
· - (Left-justifies the variable value)
· [0-9] (Specifies the minimum width held of to the variable value)
· .[0-9] (Specifies the number of decimal digits or maximum string length)

Note: If multiple additional format values are used, they must be in the same order as above.

argarray

Required. An array with arguments to be inserted at the % signs in the format string

Tips and Notes

Note: If there are more % signs than arguments, you must use placeholders. A placeholder is inserted after the % sign, and consists of the argument- number and "\$". See example three.

Tip: Related functions: fprintf(), printf(), sprintf(), vfprintf(), and vprintf().

Example 1

<?php

$str = "Hello";

$number = 123;

$txt = vsprintf("%s world. Day number %u",array($str,$number));

echo $txt;

?>

The output of the code above will be:

Hello world. Day number 123

Example 2

<?php

$num1 = 123;

$num2 = 456;

$txt = vsprintf("%f%f",array($num1,$num2));

echo $txt;

?>

The output of the code above will be:

123.000000456.000000

Example 3

Use of placeholders:

<?php

$number = 123;

$txt = vsprintf("With 2 decimals: %1\$.2f

<br />With no decimals: %1\$u",array($number));

echo $txt;

?>

The output of the code above will be:

With 2 decimals: 123.00

With no decimals: 123


PHP wordwrap() Function

Definition and Usage

The wordwrap() function wraps a string into new lines when it reaches a specific length.

This function returns the string broken into lines on success, or FALSE on failure.

Syntax

wordwrap(string,width,break,cut)

Parameter | Description
string | Required. Specifies the string to break up into lines
width | Optional. Specifies the maximum line width. Default is 75
break | Optional. Specifies the characters to use as break. Default is "\n"
cut | Optional. Specifies whether words longer than the specified width should be wrapped. Default is FALSE (no-wrap)

Tips and Notes

Note: This function may leave white spaces at the beginning of a line.

Example 1

<?php

$str = "An example on a long word is: Supercalifragulistic";

echo wordwrap($str,15);

?>

The browser output of the code above will be:

An example on a long word is: Supercalifragulistic

If you select "View source" in the browser window, you will see the following HTML:

<html>

<body>

An example on a

long word is:

Supercalifragulistic

</body>

</html>

Example 2

<?php

$str = "An example on a long word is: Supercalifragulistic";

echo wordwrap($str,15,"<br />\n");

?>

The output of the code above will be:

An example on a

long word is:

Supercalifragulistic

Example 3

<?php

$str = "An example on a long word is: Supercalifragulistic";

echo wordwrap($str,15,"<br />\n",TRUE);

?>

The output of the code above will be:

An example on a

long word is:

Supercalifragul

istic


PHP XML DOM

The built-in DOM parser makes it possible to process XML documents in PHP.

What is DOM?

The W3C DOM provides a standard set of objects for HTML and XML documents, and a standard interface for accessing and manipulating them.

The W3C DOM is separated into different parts (Core, XML, and HTML) and different levels (DOM Level 1/2/3):

* Core DOM - defines a standard set of objects for any structured document

* XML DOM - defines a standard set of objects for XML documents

* HTML DOM - defines a standard set of objects for HTML documents

If you want to learn more about the XML DOM, please visit our XML DOM tutorial.

XML Parsing

To read and update - create and manipulate - an XML document, you will need an XML parser.

There are two basic types of XML parsers:

· Tree-based parser: This parser transforms an XML document into a tree structure. It analyzes the whole document, and provides access to the tree elements
· Event-based parser: Views an XML document as a series of events. When a specific event occurs, it calls a function to handle it

The DOM parser is an tree-based parser.

Look at the following XML document fraction:

<?xml version="1.0" encoding="ISO-8859-1"?>

<from>Jani</from>

The XML DOM sees the XML above as a tree structure:

· Level 1: XML Document
· Level 2: Root element: <from>
· Level 3: Text element: "Jani"

Installation

The DOM XML parser functions are part of the PHP core. There is no installation needed to use these functions.

An XML File

The XML file below will be used in our example:

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

Load and Output XML

We want to initialize the XML parser, load the xml, and output it:

Example

<?php

$xmlDoc = new DOMDocument();

$xmlDoc->load("note.xml");

print $xmlDoc->saveXML();

?>

The output of the code above will be:

Tove Jani Reminder Don't forget me this weekend!

If you select "View source" in the browser window, you will see the following HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

The example above creates a DOMDocument-Object and loads the XML from "note.xml" into it.

Then the saveXML() function to puts the internal XML document into a string, so that we can print it.

Looping through XML

We want to initialize the XML parser, load the XML, and loop through all elements of the <note> element:

Example

<?php

$xmlDoc = new DOMDocument();

$xmlDoc->load("note.xml");

$x = $xmlDoc->documentElement;

foreach ($x->childNodes AS $item)

{

print $item->nodeName . " = " . $item->nodeValue . "<br />";

}

?>

The output of the code above will be:

#text =

to = Tove

#text =

from = Jani

#text =

heading = Reminder

#text =

body = Don't forget me this weekend!

#text =

In the example above you see that there are empty text nodes between each element.

When XML generates, it often contains white-spaces between the nodes. The XML DOM parser treats these as ordinary elements, and if you are not aware of them, they sometimes cause problems.

If you want to learn more about the XML DOM, please visit our XML DOM tutorial.


PHP XML Expat Parser

The built-in Expat parser makes it possible to process XML documents in PHP.

What is XML?

XML is used to describe data and to focus on what data is. An XML file describes the structure of the data.

In XML, no tags are predefined. You must define your own tags.

If you want to learn more about XML, please visit our XML tutorial.

What is Expat?

To read and update - create and manipulate - an XML document, you will need an XML parser.

There are two basic types of XML parsers:

· Tree-based parser: This parser transforms an XML document into a tree structure. It analyzes the whole document, and provides access to the tree elements. e.g. the Document Object Model (DOM)
· Event-based parser: Views an XML document as a series of events. When a specific event occurs, it calls a function to handle it

The Expat parser is an event-based parser.

Event-based parsers focus on the content of the XML documents, not their structure. Because of this, event-based parsers can access data faster than tree-based parsers.

Look at the following XML fraction:

<from>Jani</from>

An event-based parser reports the XML above as a series of three events:

· Start element: from
· Start CDATA section, value: Jani
· Close element: from

The XML example above contains well-formed XML. However, the example is not valid XML, because there is no Document Type Definition (DTD) associated with it.

However, this makes no difference when using the Expat parser. Expat is a non-validating parser, and ignores any DTDs.

As an event-based, non-validating XML parser, Expat is fast and small, and a perfect match for PHP web applications.

Note: XML documents must be well-formed or Expat will generate an error.

Installation

The XML Expat parser functions are part of the PHP core. There is no installation needed to use these functions.

An XML File

The XML file below will be used in our example:

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

Initializing the XML Parser

We want to initialize the XML parser in PHP, define some handlers for different XML events, and then parse the XML file.

Example

<?php

//Initialize the XML parser

$parser=xml_parser_create();

//Function to use at the start of an element

function start($parser,$element_name,$element_attrs)

{

switch($element_name)

  {

  case "NOTE":

  echo "-- Note --<br />";

  break;

  case "TO":

  echo "To: ";

  break;

  case "FROM":

  echo "From: ";

  break;

  case "HEADING":

  echo "Heading: ";

  break;

  case "BODY":

  echo "Message: ";

  }

}

//Function to use at the end of an element

function stop($parser,$element_name)

{

echo "<br />";

}

//Function to use when finding character data

function char($parser,$data)

{

echo $data;

}

//Specify element handler

xml_set_element_handler($parser,"start","stop");

//Specify data handler

xml_set_character_data_handler($parser,"char");

//Open XML file

$fp=fopen("test.xml","r");

//Read data

while ($data=fread($fp,4096))

{

xml_parse($parser,$data,feof($fp)) or

die (sprintf("XML Error: %s at line %d",

xml_error_string(xml_get_error_code($parser)),

xml_get_current_line_number($parser)));

}

//Free the XML parser

xml_parser_free($parser);

?>

The output of the code above will be:

-- Note --

To: Tove

From: Jani

Heading: Reminder

Message: Don't forget me this weekend!

How it works:

1. Initialize the XML parser with the xml_parser_create() function
2. Create functions to use with the different event handlers
3. Add the xml_set_element_handler() function to specify which function will be executed when the parser encounters the opening and closing tags
4. Add the xml_set_character_data_handler() function to specify which function will execute when the parser encounters character data
5. Parse the file "test.xml" with the xml_parse() function
6. In case of an error, add xml_error_string() function to convert an XML error to a textual description
7. Call the xml_parser_free() function to release the memory allocated with the xml_parser_create() function

More PHP Expat Parser

For more information about the PHP Expat functions, visit our PHP XML Parser Reference.


PHP XML Functions

PHP XML Parser Functions

PHP XML Parser Introduction

The XML functions lets you parse, but not validate, XML documents.

XML is a data format for standardized structured document exchange. More information on XML can be found in our XML Tutorial.

This extension uses the Expat XML parser.

Expat is an event-based parser, it views an XML document as a series of events. When an event occurs, it calls a specified function to handle it.

Expat is a non-validating parser, and ignores any DTDs linked to a document. However, if the document is not well formed it will end with an error message.

Because it is an event-based, non validating parser, Expat is fast and well suited for web applications.

The XML parser functions lets you create XML parsers and define handlers for XML events.

Installation

The XML functions are part of the PHP core. There is no installation needed to use these functions.

PHP XML Parser Functions

PHP: indicates the earliest version of PHP that supports the function.

Function | Description | PHP
utf8_decode() | Decodes an UTF-8 string to ISO-8859-1 | 3
utf8_encode() | Encodes an ISO-8859-1 string to UTF-8 | 3
 | Gets an error string from the XML parser | 3
 | Gets the current byte index from the XML parser | 3
xml_get_current_column_number() | Gets the current column number from the XML parser | 3
 | Gets the current line number from the XML parser | 3
xml_get_error_code() | Gets an error code from the XML parser | 3
xml_parse() | Parses an XML document | 3
 | Parse XML data into an array | 3
xml_parser_create_ns() | Create an XML parser with namespace support | 4
xml_parser_create() | Create an XML parser | 3
xml_parser_free() | Free an XML parser | 3
xml_parser_get_option() | Get options from an XML parser | 3
 | Set options in an XML parser | 3
xml_set_character_data_handler() | Set handler function for character data | 3
xml_set_default_handler() | Set default handler function | 3
xml_set_element_handler() | Set handler function for start and end element of elements | 3
xml_set_end_namespace_decl_handler() | Set handler function for the end of namespace declarations | 4
xml_set_external_entity_ref_handler() | Set handler function for external entities | 3
xml_set_notation_decl_handler() | Set handler function for notation declarations | 3
xml_set_object() | Use XML Parser within an object | 4
xml_set_processing_instruction_handler() | Set handler function for processing instruction | 3
xml_set_start_namespace_decl_handler() | Set handler function for the start of namespace declarations | 4
 | Set handler function for unparsed entity declarations | 3

PHP XML Parser Constants

Constant

XML_ERROR_NONE (integer)

XML_ERROR_NO_MEMORY (integer)

XML_ERROR_SYNTAX (integer)

XML_ERROR_NO_ELEMENTS (integer)

XML_ERROR_INVALID_TOKEN (integer)

XML_ERROR_UNCLOSED_TOKEN (integer)

XML_ERROR_PARTIAL_CHAR (integer)

XML_ERROR_TAG_MISMATCH (integer)

XML_ERROR_DUPLICATE_ATTRIBUTE (integer)

XML_ERROR_JUNK_AFTER_DOC_ELEMENT (integer)

XML_ERROR_PARAM_ENTITY_REF (integer)

XML_ERROR_UNDEFINED_ENTITY (integer)

XML_ERROR_RECURSIVE_ENTITY_REF (integer)

XML_ERROR_ASYNC_ENTITY (integer)

XML_ERROR_BAD_CHAR_REF (integer)

XML_ERROR_BINARY_ENTITY_REF (integer)

XML_ERROR_ATTRIBUTE_EXTERNAL_ENTITY_REF (integer)

XML_ERROR_MISPLACED_XML_PI (integer)

XML_ERROR_UNKNOWN_ENCODING (integer)

XML_ERROR_INCORRECT_ENCODING (integer)

XML_ERROR_UNCLOSED_CDATA_SECTION (integer)

XML_ERROR_EXTERNAL_ENTITY_HANDLING (integer)

XML_OPTION_CASE_FOLDING (integer)

XML_OPTION_TARGET_ENCODING (integer)

XML_OPTION_SKIP_TAGSTART (integer)

XML_OPTION_SKIP_WHITE (integer)


PHP XML SimpleXML

PHP SimpleXML

SimpleXML handles the most common XML tasks and leaves the rest for other extensions.

What is SimpleXML?

SimpleXML is new in PHP 5. It is an easy way of getting an element's attributes and text, if you know the XML document's layout.

Compared to DOM or the Expat parser, SimpleXML just takes a few lines of code to read text data from an element.

SimpleXML converts the XML document into an object, like this:

· Elements - Are converted to single attributes of the SimpleXMLElement object. When there's more than one element on one level, they're placed inside an array
· Attributes - Are accessed using associative arrays, where an index corresponds to the attribute name
· Element Data - Text data from elements are converted to strings. If an element has more than one text node, they will be arranged in the order they are found

SimpleXML is fast and easy to use when performing basic tasks like:

· Reading XML files
· Extracting data from XML strings
· Editing text nodes or attributes

However, when dealing with advanced XML, like namespaces, you are better off using the Expat parser or the XML DOM.

Installation

As of PHP 5.0, the SimpleXML functions are part of the PHP core. There is no installation needed to use these functions.

Using SimpleXML

Below is an XML file:

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

We want to output the element names and data from the XML file above.

Here's what to do:

1. Load the XML file
2. Get the name of the first element
3. Create a loop that will trigger on each child node, using the children() function
4. Output the element name and data for each child node

Example

<?php

$xml = simplexml_load_file("test.xml");

echo $xml->getName() . "<br />";

foreach($xml->children() as $child)

{

echo $child->getName() . ": " . $child . "<br />";

}

?>

The output of the code above will be:

note

to: Tove

from: Jani

heading: Reminder

body: Don't forget me this weekend!

More PHP SimpleXML

For more information about the PHP SimpleXML functions, visit our PHP SimpleXML Reference.


PHP xml_error_string() Function

Definition and Usage

The xml_error_string() function gets the XML parser error description.

This function returns the error description on success, or FALSE on failure.

Syntax

xml_error_string(errorcode)

Parameter | Description
errorcode | Required. Specifies error code to use. The error code is the return value from the xml_get_error_code() function

Example

<?php

//invalid xml file

$xmlfile = 'test.xml';

$xmlparser = xml_parser_create();

// open a file and read data

$fp = fopen($xmlfile, 'r');

while ($xmldata = fread($fp, 4096))

{

// parse the data chunk

if (!xml_parse($xmlparser,$xmldata,feof($fp)))

  {

  die( print "ERROR: "

  . xml_error_string(xml_get_error_code($xmlparser))

  . "<br />"

  . "Line: "

  . xml_get_current_line_number($xmlparser)

  . "<br />"

  . "Column: "

  . xml_get_current_column_number($xmlparser)

  . "<br />");

  }

}

xml_parser_free($xmlparser);

?>

The output of the code above could be:

ERROR: Mismatched tag

Line: 5

Column: 41


PHP xml_get_current_byte_index() Function

Definition and Usage

The xml_get_current_byte_index() function gets the byte index for an XML parser.

This function returns the current byte index on success, or FALSE on failure.

Syntax

xml_get_current_byte_index(parser)

Parameter | Description
parser | Required. Specifies XML parser to use

Example

<?php

//invalid xml file

$xmlfile = 'test.xml';

$xmlparser = xml_parser_create();

// open a file and read data

$fp = fopen($xmlfile, 'r');

while ($xmldata = fread($fp, 4096))

{

// parse the data chunk

if (!xml_parse($xmlparser,$xmldata,feof($fp)))

  {

  die( print "ERROR: "

  . xml_error_string(xml_get_error_code($xmlparser))

  . "<br />"

  . "Line: "

  . xml_get_current_line_number($xmlparser)

  . "<br />"

  . "Column: "

  . xml_get_current_column_number($xmlparser)

  . "<br />"

  . "Byte Index: "

  . xml_get_current_byte_index($xmlparser)

  . "<br />");

  }

}

xml_parser_free($xmlparser);

?>

The output of the code above could be:

ERROR: Mismatched tag

Line: 5

Column: 41

Byte Index: 72


PHP xml_get_current_column_number() Function

Definition and Usage

The xml_get_current_column_number() function gets the current column number for an XML parser.

This function returns the current column number on success, or FALSE on failure.

Syntax

xml_get_current_column_number(parser)

Parameter | Description
parser | Required. Specifies XML parser to use

Example

<?php

//invalid xml file

$xmlfile = 'test.xml';

$xmlparser = xml_parser_create();

// open a file and read data

$fp = fopen($xmlfile, 'r');

while ($xmldata = fread($fp, 4096))

{

// parse the data chunk

if (!xml_parse($xmlparser,$xmldata,feof($fp)))

  {

  die( print "ERROR: "

  . xml_error_string(xml_get_error_code($xmlparser))

  . "<br />"

  . "Line: "

  . xml_get_current_line_number($xmlparser)

  . "<br />"

  . "Column: "

  . xml_get_current_column_number($xmlparser)

  . "<br />");

  }

}

xml_parser_free($xmlparser);

?>

The output of the code above could be:

ERROR: Mismatched tag

Line: 5

Column: 41


PHP xml_get_current_line_number() Function

Definition and Usage

The xml_get_current_line_number() function gets the current line number for an XML parser.

This function returns the current line number on success, or FALSE on failure.

Syntax

xml_get_current_line_number(parser)

Parameter | Description
parser | Required. Specifies XML parser to use

Example

<?php

//invalid xml file

$xmlfile = 'test.xml';

$xmlparser = xml_parser_create();

// open a file and read data

$fp = fopen($xmlfile, 'r');

while ($xmldata = fread($fp, 4096))

{

// parse the data chunk

if (!xml_parse($xmlparser,$xmldata,feof($fp)))

  {

  die( print "ERROR: "

  . xml_error_string(xml_get_error_code($xmlparser))

  . "<br />"

  . "Line: "

  . xml_get_current_line_number($xmlparser)

  . "<br />"

  . "Column: "

  . xml_get_current_column_number($xmlparser)

  . "<br />");

  }

}

xml_parser_free($xmlparser);

?>

The output of the code above could be:

ERROR: Mismatched tag

Line: 5

Column: 41


PHP xml_get_error_code() Function

Definition and Usage

The xml_get_error_code() function gets the XML parser error code.

This function returns the error code on success, or FALSE on failure.

Syntax

xml_get_error_code(parser)

Parameter | Description
parser | Required. Specifies XML parser to use

Example

<?php

//invalid xml file

$xmlfile = 'test.xml';

$xmlparser = xml_parser_create();

// open a file and read data

$fp = fopen($xmlfile, 'r');

while ($xmldata = fread($fp, 4096))

{

// parse the data chunk

if (!xml_parse($xmlparser,$xmldata,feof($fp)))

  {

  die( print "ERROR: "

  . xml_error_string(xml_get_error_code($xmlparser))

  . "<br />"

  . "Line: "

  . xml_get_current_line_number($xmlparser)

  . "<br />"

  . "Column: "

  . xml_get_current_column_number($xmlparser)

  . "<br />");

  }

}

xml_parser_free($xmlparser);

?>

The output of the code above could be:

ERROR: 76

Line: 5

Column: 41


PHP xml_parse() Function

Definition and Usage

The xml_parse() function parses an XML document.

This function returns TRUE on success, or FALSE on failure.

Syntax

xml_parse(parser,xml,end)

Parameter

Description

parser

Required. Specifies XML parser to use

xml

Required. Specifies XML data to parse

end

Optional. If this parameter is TRUE, the data in the "xml" parameter is the last piece of data sent in this parse.

Note: Entity errors are reported at the end of the parse. And will only show if the "end" parameter is TRUE

Tips and Notes

Tip: To create an XML parser, use the xml_parser_create() function.

Example 1

XML File

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

PHP Code

<?php

$parser=xml_parser_create();

function char($parser,$data)

{

echo $data;

}

xml_set_character_data_handler($parser,"char");

$fp=fopen("test.xml","r");

while ($data=fread($fp,4096))

{

xml_parse($parser,$data,feof($fp)) or

die (sprintf("XML Error: %s at line %d",

xml_error_string(xml_get_error_code($parser)),

xml_get_current_line_number($parser)));

}

xml_parser_free($parser);

?>

The output of the code above will be:

Tove Jani Reminder Don't forget me this weekend!

Example 2

Using the same XML file but displaying the XML data in another way:

<?php

$parser=xml_parser_create();

function start($parser,$element_name,$element_attrs)

{

switch($element_name)

  {

  case "NOTE":

  echo "-- Note --<br />";

  break;

  case "TO":

  echo "To: ";

  break;

  case "FROM":

  echo "From: ";

  break;

  case "HEADING":

  echo "Heading: ";

  break;

  case "BODY":

  echo "Message: ";

  }

}

function stop($parser,$element_name)

{

echo "<br />";

}

function char($parser,$data)

{

echo $data;

}

xml_set_element_handler($parser,"start","stop");

xml_set_character_data_handler($parser,"char");

$fp=fopen("test.xml","r");

while ($data=fread($fp,4096))

{

xml_parse($parser,$data,feof($fp)) or

die (sprintf("XML Error: %s at line %d",

xml_error_string(xml_get_error_code($parser)),

xml_get_current_line_number($parser)));

}

xml_parser_free($parser);

?>

The output of the code above will be:

-- Note --

To: Tove

From: Jani

Heading: Reminder

Message: Don't forget me this weekend!


PHP xml_parse_into_struct() Function

Definition and Usage

The xml_parse_into_struct() function parses XML data into an array.

This function parses the XML data into 2 arrays:

· Value array - containing the data from the parsed XML
· Index array - containing pointers to the location of the values in the Value array

This function returns 1 on success, or 0 on failure.

Syntax

xml_parse_into_struct(parser,xml,value_arr,index_arr)

Parameter | Description
parser | Required. Specifies XML parser to use
xml | Required. Specifies XML data to parse
value_arr | Required. Specifies the target array for the XML data
index_arr | Optional. Specifies the target array for index data

Tips and Notes

Note: The xml_parse_into_struct() function returns 1 for success and 0 for failure. This is not the same as TRUE and FALSE.

Example

XML File

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

PHP Code

<?php

//invalid xml file

$xmlfile = 'test.xml';

$xmlparser = xml_parser_create();

// open a file and read data

$fp = fopen($xmlfile, 'r');

$xmldata = fread($fp, 4096);

xml_parse_into_struct($xmlparser,$xmldata,$values);

xml_parser_free($xmlparser);

print_r($values);

?>

The output of the code above will be:

Array

(

[0] => Array

(

[tag] => NOTE

[type] => open

[level] => 1

[value] =>

)

[1] => Array

  (

  [tag] => TO

  [type] => complete

  [level] => 2

  [value] => Tove

  )

[2] => Array

(

[tag] => NOTE

[value] =>

[type] => cdata

[level] => 1

)

[3] => Array

  (

  [tag] => FROM

  [type] => complete

  [level] => 2

  [value] => Jani

  )

[4] => Array

(

[tag] => NOTE

[value] =>

[type] => cdata

[level] => 1

)

[5] => Array

  (

  [tag] => HEADING

  [type] => complete

  [level] => 2

  [value] => Reminder

  )

[6] => Array

(

[tag] => NOTE

[value] =>

[type] => cdata

[level] => 1

)

[7] => Array

  (

  [tag] => BODY

  [type] => complete

  [level] => 2

  [value] => Don't forget me this weekend!

  )

[8] => Array

(

[tag] => NOTE

[value] =>

[type] => cdata

[level] => 1

)

[9] => Array

(

[tag] => NOTE

[type] => close

[level] => 1

)

)


PHP xml_parser_create() Function

Definition and Usage

The xml_parser_create() function creates an XML parser.

This function returns a resource handle to be used by other XML functions on success, or FALSE on failure.

Syntax

xml_parser_create(encoding)

Parameter

Description

encoding

Optional. Specifies the output encoding. Default in PHP 5.0.2 and newer is UTF-8

Possible values:

· ISO-8859-1
· UTF-8
· US-ASCII.

Note: In PHP 5, the input encoding is automatically detected. In PHP 4 and older versions, this paramterer specifies the character encoding for the input and output

Note: In PHP 5.0.0 and 5.0.1, default output charset is ISO-8859-1

Tips and Notes

Tip: To free the xml parser, use the xml_parser_free() function.

Tip: To create an XML parser with namespace support, use the xml_parser_create_ns() function instead.

Example

<?php

$xmlparser = xml_parser_create();

xml_parser_free($xmlparser);

?>


PHP xml_parser_create_ns() Function

Definition and Usage

The xml_parser_create_ns() function creates an XML parser with namespace support.

This function returns a resource handle to be used by other XML functions on success, or FALSE on failure.

Syntax

xml_parser_create_ns(encoding,separator)

Parameter

Description

encoding

Optional. Specifies the output encoding. Default in PHP 5.0.2 and newer is UTF-8

Possible values:

· ISO-8859-1
· UTF-8
· US-ASCII.

Note: In PHP 5, the input encoding is automatically detected. In PHP 4 and older versions, this paramterer specifies the character encoding for the input and output.

Note: In PHP 5.0.0 and 5.0.1, default output charset is ISO-8859-1.

separator

Optional. Specifies the output separator for tag name and namespace. Default is " : "

Tips and Notes

Tip: To free the xml parser, use the xml_parser_free() function.

Tip: To create an XML parser without namespace support, use the xml_parser_create() function instead.

Example

<?php

$xmlparser = xml_parser_create_ns();

xml_parser_free($xmlparser);

?>


PHP xml_parser_free() Function

Definition and Usage

The xml_parser_free() function frees an an XML parser.

This function returns TRUE on success, or FALSE on failure.

Syntax

xml_parser_free(parser)

Parameter | Description
parser | Required. Specifies XML parser to free

Tips and Notes

Tip: To create an XML parser use the xml_parser_create() function.

Example

<?php

$xmlparser = xml_parser_create();

xml_parser_free($xmlparser);

?>


PHP xml_parser_get_option() Function

Definition and Usage

The xml_parser_get_option() function gets options from an XML parser.

This function returns the options value on success, or FALSE and an error on failure.

Syntax

xml_parser_get_option(parser,option,value)

Parameter

Description

parser

Required. Specifies XML parser to use

option

Required. Specifies option to get. Possible values:

· XML_OPTION_CASE_FOLDING - Specifies if case-folding is enabled. Enabled by default. Can be 1 (TRUE) or 0 (FALSE)
· XML_OPTION_TARGET_ENCODING - Specifies which target encoding to use in this XML parser. By default, it is set to the same as the xml_parser_create() function. Supported target encodings are ISO-8859-1, US-ASCII and UTF-8.

Example

<?php

$xmlparser = xml_parser_create();

echo xml_parser_get_option($xmlparser, XML_OPTION_CASE_FOLDING);

xml_parser_free($xmlparser);

?>


PHP xml_parser_set_option() Function

Definition and Usage

The xml_parser_set_option() function sets options in an XML parser.

This function returns TRUE on success, or FALSE on failure.

Syntax

xml_parser_set_option(parser,option,value)

Parameter

Description

parser

Required. Specifies XML parser to use

option

Required. Specifies option to set. Possible values:

· XML_OPTION_CASE_FOLDING - Specifies if case-folding is enabled. Enabled by default. Can be 1 (TRUE) or 0 (FALSE)
· XML_OPTION_SKIP_TAGSTART - Specifies how many characters should be skipped in the beginning of a tag name
· XML_OPTION_SKIP_WHITE - Specifies whether to skip values consisting of whitespace characters. Can be 1 (TRUE) or 0 (FALSE)
· XML_OPTION_TARGET_ENCODING - Specifies which target encoding to use in this XML parser. By default, it is set to the same as the xml_parser_create() function. Supported target encodings are ISO-8859-1, US-ASCII and UTF-8.

value

Required. Specifies options new value

Example

<?php

$xmlparser = xml_parser_create();

xml_parser_set_option($xmlparser, XML_OPTION_SKIP_WHITE, 1);

xml_parser_free($xmlparser);

?>


PHP xml_set_default_handler() Function

Definition and Usage

The xml_set_default_handler() function sets the default data handler for the XML parser.

This function specifies what function to be called whenever the parser finds data in the XML file.

This function returns TRUE on success, or FALSE on failure.

Syntax

xml_set_default_handler(parser,handler)

Parameter | Description
parser | Required. Specifies XML parser to use
handler | Required. Specifies a function to be used as an event handler

The Function specified by the "handler" parameter must have two parameters:

Parameter | Description
parser | Required. Specifies a variable containing the XML parser calling the handler
data | Required. Specifies a variable containing the data from the XML file as a string

Tips and Notes

Note: The data_handler parameter can also be an array containing an object reference and a method name.

Example

XML File

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

PHP Code

<?php

$parser=xml_parser_create();

function default($parser,$data)

{

echo $data;

}

xml_set_default_handler($parser,"default");

$fp=fopen("test.xml","r");

while ($data=fread($fp,4096))

{

xml_parse($parser,$data,feof($fp)) or

die (sprintf("XML Error: %s at line %d",

xml_error_string(xml_get_error_code($parser)),

xml_get_current_line_number($parser)));

}

xml_parser_free($parser);

?>

The output of the code above will be:

Tove Jani Reminder Don't forget me this weekend!

If you select "View source" in the browser window, you will see the following HTML:

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>


PHP xml_set_element_handler() Function

Definition and Usage

The xml_set_element_handler() function specifies functions to be called at the start and end of an element in the XML document.

This function returns TRUE on success, or FALSE on failure.

Syntax

xml_set_element_handler(parser,start,end)

Parameter | Description
parser | Required. Specifies XML parser to use
start | Required. Specifies a function to be called at the start of an element
end | Required. Specifies a function to be called at the end of an element

The Function specified by the "start" parameter must have three parameters:

Parameter | Description
parser | Required. Specifies a variable containing the XML parser calling the handler
name | Required. Specifies a variable containing the name of the elements, that triggers this function, from the XML file as a string
data | Required. Specifies an array containing the elements attributes from the XML file as a string

The Function specified by the "end" parameter must have two parameters:

Parameter | Description
parser | Required. Specifies a variable containing the XML parser calling the handler
name | Required. Specifies a variable containing the name of the elements, that triggers this function, from the XML file as a string

Tips and Notes

Note: The start and end parameters can also be an array containing an object reference and a method name.

Example

<?php

$parser=xml_parser_create();

function start($parser,$element_name,$element_attrs)

{

switch($element_name)

  {

  case "NOTE":

  echo "-- Note --<br />";

  break;

  case "TO":

  echo "To: ";

  break;

  case "FROM":

  echo "From: ";

  break;

  case "HEADING":

  echo "Heading: ";

  break;

  case "BODY":

  echo "Message: ";

  }

}

function stop($parser,$element_name)

{

echo "<br />";

}

function char($parser,$data)

{

echo $data;

}

xml_set_element_handler($parser,"start","stop");

xml_set_character_data_handler($parser,"char");

$fp=fopen("test.xml","r");

while ($data=fread($fp,4096))

{

xml_parse($parser,$data,feof($fp)) or

die (sprintf("XML Error: %s at line %d",

xml_error_string(xml_get_error_code($parser)),

xml_get_current_line_number($parser)));

}

xml_parser_free($parser);

?>

The output of the code above will be:

-- Note --

To: Tove

From: Jani

Heading: Reminder

Message: Don't forget me this weekend!


PHP xml_set_external_entity_ref_handler() Function

Definition and Usage

The xml_set_external_entity_ref_handler() function specifies a function to be called when the parser finds an external entity in the XML document.

This function returns TRUE on success, or FALSE on failure.

Syntax

xml_set_external_entity_ref_handler(parser,handler)

Parameter | Description
parser | Required. Specifies XML parser to use
handler | Required. Specifies a function to be called when the parser finds an external entity

The Function specified by the "handler" parameter must have five parameters:

Parameter | Description
parser | Required. Specifies a variable containing the XML parser calling the handler
name | Required. Specifies a variable containing the name of the external entity
base | Required. Specifies the base for resolving the system identifier (system_id) of the external entity. Currently, this is always NULL
system_id | Required. Specifies the system identifier for the external entity
public_id | Required. Specifies the public identifier for the external entity

Tips and Notes

Note: The handler parameter can also be an array containing an object reference and a method name.

Example

<?php

$parser=xml_parser_create();

function char($parser,$data)

{

echo $data;

}

function ext_ent_handler($parser,$ent,$base,$sysID,$pubID)

{

echo "$ent<br />";

echo "$sysID<br />";

echo "$pubID<BR />";

}

xml_set_character_data_handler($parser,"char");

xml_set_external_entity_ref_handler($parser, "ext_ent_handler");

$fp=fopen("test.xml","r");

while ($data=fread($fp,4096))

{

xml_parse($parser,$data,feof($fp)) or

die (sprintf("XML Error: %s at line %d",

xml_error_string(xml_get_error_code($parser)),

xml_get_current_line_number($parser)));

}

xml_parser_free($parser);

?>


PHP xml_set_notation_decl_handler() Function

Definition and Usage

The xml_set_notation_decl_handler() function specifies a function to be called when the parser finds a notation declaration in the XML document.

This function returns TRUE on success, or FALSE on failure.

Syntax

xml_set_notation_decl_handler(parser,handler)

Parameter | Description
parser | Required. Specifies XML parser to use
handler | Required. Specifies a function to be when the parser finds a notation declaration

The Function specified by the "handler" parameter must have five parameters:

Parameter | Description
parser | Required. Specifies a variable containing the XML parser calling the handler
name | Required. Specifies a variable containing the name of the notation declaration
base | Required. Specifies the base for resolving the system identifier (system_id) of the notation declaration. Currently, this is always NULL
system_id | Required. Specifies a variable containing the system identifier for the notation declaration
public_id | Required. Specifies a variable containing the public identifier for the notation declaration

Tips and Notes

Note: The handler parameter can also be an array containing an object reference and a method name.

Example

<?php

$parser=xml_parser_create();

function char($parser,$data)

{

echo $data;

}

function not_decl_handler($parser,$not,$base,$sysID,$pubID)

{

echo "$not<br />";

echo "$sysID<br />";

echo "$pubID<BR />";

}

xml_set_character_data_handler($parser,"char");

xml_set_notation_decl_handler($parser, "not_decl_handler");

$fp=fopen("test.xml","r");

while ($data=fread($fp,4096))

{

xml_parse($parser,$data,feof($fp)) or

die (sprintf("XML Error: %s at line %d",

xml_error_string(xml_get_error_code($parser)),

xml_get_current_line_number($parser)));

}

xml_parser_free($parser);

?>


PHP xml_set_object() Function

Definition and Usage

The xml_set_object() function allows a parser to be used within an object.

This function returns TRUE on success, or FALSE on failure.

Syntax

xml_set_object(parser,object)

Parameter | Description
parser | Required. Specifies XML parser to use
object | Required. Specifies the object to set the parser to

Example

<?php

class XMLParser

{

var $xmlparser;

function XMLParser()

{

$this->xmlparser = xml_parser_create();

xml_set_object($this->xmlparser, $this);

xml_set_character_data_handler($this->xmlparser,"char");

xml_set_element_handler($this->xmlparser, "start_tag","end_tag");

}

function parse($data)

{

xml_parse($this->xmlparser, $data);

}

function parse_File($xmlfile)

{

$fp = fopen($xmlfile, 'r');

while ($xmldata = fread($fp, 4096))

  {

  if

  (!xml_parse($this->xmlparser, $xmldata))

    {

    //If error

    die( print "ERROR: "

    . xml_error_string(xml_get_error_code($this->xmlparser))

    . "<br />Line: "

    . xml_get_current_line_number($this->xmlparser)

    . "<br />Column: "

    . xml_get_current_column_number($this->xmlparser)

    . "<br />");

    }

  }

}

function start_tag($xmlparser, $tag, $attributes)

{

print $tag . "<br />";

}

function end_tag(){}

function char($xmlparser,$data)

{

echo $data . "<br />";

}

function close_Parser()

{

xml_parser_free($this->xmlparser);

}

}

$myxmlparser = new XMLParser();

$myxmlparser->parse_File("test.xml");

$myxmlparser->close_parser();

?>


PHP xml_set_processing_instruction_handler() Function

Definition and Usage

The xml_set_processing_instruction_handler() function specifies a function to be called when the parser finds a processing instruction in the XML document.

A processing instruction is enclosed in <? and ?> delimiters and contains a a target followed by data.

Example: In this case the processing instruction associates a style sheet with an XML document:

<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet href="default.xsl" type="text/xml"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

This function returns TRUE on success, or FALSE on failure.

Syntax

xml_set_processing_instruction_handler(parser,handler)

Parameter | Description
parser | Required. Specifies XML parser to use
handler | Required. Specifies a function to be when the parser finds a notation declaration

The Function specified by the "handler" parameter must have three parameters:

Parameter | Description
parser | Required. Specifies a variable containing the XML parser calling the handler
target | Required. Specifies a variable containing processing instruction target
data | Required. Specifies a variable containing processing instruction data

Tips and Notes

Note: The handler parameter can also be an array containing an object reference and a method name.

Example

<?php

$parser=xml_parser_create();

function char($parser,$data)

{

echo $data;

}

function pi_handler($parser, $target, $data)

{

echo "Target: $target<br />";

echo "Data: $data<br />";

}

xml_set_character_data_handler($parser,"char");

xml_set_processing_instruction_handler($parser, "pi_handler");

$fp=fopen("test.xml","r");

while ($data=fread($fp,4096))

{

xml_parse($parser,$data,feof($fp)) or

die (sprintf("XML Error: %s at line %d",

xml_error_string(xml_get_error_code($parser)),

xml_get_current_line_number($parser)));

}

xml_parser_free($parser);

?>


PHP xml_set_unparsed_entity_decl_handler() Function

Definition and Usage

The xml_set_unparsed_entity_decl_handler() function specifies a function to be called when the parser an unparsed entity in the XML document.

This function returns TRUE on success, or FALSE on failure.

Syntax

xml_set_unparsed_entity_decl_handler(parser,handler)

Parameter | Description
parser | Required. Specifies XML parser to use
handler | Required. Specifies a function to be when the parser finds a notation declaration

The Function specified by the "handler" parameter must have six parameters:

Parameter | Description
parser | Required. Specifies a variable containing the XML parser calling the handler
name | Required. Specifies a variable containing the name of the entity
base | Required. Specifies a variable containing the base for resolving the system identifier (system_id) of the entity. Currently, this is always NULL
system_id | Required. Specifies a variable containing the system identifier for the entity
public_id | Required. Specifies a variable containing the public identifier for the entity
notation | Required. Specifies a variable containing the notation identifying the data type of the entity

Tips and Notes

Note: The handler parameter can also be an array containing an object reference and a method name.

Example

<?php

$parser=xml_parser_create();

function char($parser,$data)

{

echo $data;

}

function unparsed_ent_handler($parser,$entname,

$base,$sysID,$pubID,$notname)

{

print "$entname<br />";

print "$sysID<br />";

print "$pubID<br />";

print "$notname<br />";

}

xml_set_character_data_handler($parser,"char");

xml_set_unparsed_entity_decl_handler($parser,

"unparsed_ent_handler");

$fp=fopen("test.xml","r");

while ($data=fread($fp,4096))

{

xml_parse($parser,$data,feof($fp)) or

die (sprintf("XML Error: %s at line %d",

xml_error_string(xml_get_error_code($parser)),

xml_get_current_line_number($parser)));

}

xml_parser_free($parser);

?>


PHP xpath() Function

Definition and Usage

The xpath() function runs an XPath query on the XML document.

This function returns an array of SimpleXMLElements on success, and FALSE of failure.

Syntax

class SimpleXMLElement

{

string xpath(path)

}

Parameter | Description
path | Required. Specifies what to search for in the XML document

Example

XML File

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

PHP Code

<?php

$xml = simplexml_load_file("test.xml");

$result = $xml->xpath("from");

print_r($result);

?>

The output of the code above will be:

Array

(

[0] => SimpleXMLElement Object

(

[0] => Jani

)

)


PHP Zip File Functions

PHP Zip File Introduction

The Zip files functions allows you to read ZIP files.

Installation

For the Zip file functions to work on your server, these libraries must be installed:

· The ZZIPlib library by Guido Draheim: Download the ZZIPlib
· The Zip PELC extension: Download the Zip PELC extension

Installation on Linux Systems

PHP 5+: Zip functions and the Zip library is not enabled by default and must be downloaded from the links above. Use the --with-zip=DIR configure option to include Zip support.

Installation on Windows Systems

PHP 5+: Zip functions is not enabled by default, so the php_zip.dll and the ZZIPlib library must be downloaded from the link above. php_zip.dll must be enabled inside of php.ini.

To enable any PHP extension, the PHP extension_dir setting (in the php.ini file) should be set to the directory where the PHP extensions are located. An example extension_dir value is c:\php\ext.

PHP Zip File Functions

PHP: indicates the earliest version of PHP that supports the function.

Function | Description | PHP
zip_close() | Closes a ZIP file | 4
zip_entry_close() | Closes an entry in the ZIP file | 4
zip_entry_compressedsize() | Returns the compressed size of an entry in the ZIP file | 4
zip_entry_compressionmethod() | Returns the compression method of an entry in the ZIP file | 4
zip_entry_filesize() | Returns the actual file size of an entry in the ZIP file | 4
zip_entry_name() | Returns the name of an entry in the ZIP file | 4
zip_entry_open() | Opens an entry in the ZIP file for reading | 4
zip_entry_read() | Reads from an open entry in the ZIP file | 4
zip_open() | Opens a ZIP file | 4
zip_read() | Reads the next entry in a ZIP file | 4

PHP Zip File Constants

NONE


PHP zip_close() Function

Definition and Usage

The zip_close() function closes a zip archive opened by the zip_open() function.

Syntax

zip_close(zip)

Parameter | Description
zip | Required. Specifies the zip resource to close (a zip file opened with zip_open() )

Example

<?php

$zip = zip_open("test.zip");

zip_read($zip);

// some code

zip_close($zip);

?>


PHP zip_entry_close() Function

Definition and Usage

The zip_entry_close() function closes a zip archive opened by the zip_entry_open() function.

Syntax

zip_entry_close(zip_entry)

Parameter | Description
zip_entry | Required. Specifies the zip entry resource to close (a zip entry opened with zip_read() )

Example

<?php

$zip = zip_open("test.zip");

if ($zip)

{

while ($zip_entry = zip_read($zip))

  {

  echo "<p>";

  echo "Name: " . zip_entry_name($zip_entry) . "<br />";

  if (zip_entry_open($zip, $zip_entry))

    {

    // some code

    zip_entry_close($zip_entry);

    }

  echo "</p>";

}

zip_close($zip);

}

?>


PHP zip_entry_compressedsize() Function

Definition and Usage

The zip_entry_compressedsize() function returns the compressed file size of a zip archive entry.

Syntax

zip_entry_compressedsize(zip_entry)

Parameter | Description
zip_entry | Required. Specifies the zip entry resource to read (a zip entry opened with zip_read() )

Example

<?php

$zip = zip_open("test.zip");

if ($zip)

{

while ($zip_entry = zip_read($zip))

  {

  echo "<p>";

  echo "Name: " . zip_entry_name($zip_entry) . "<br />";

  echo "Compressed Size: "

  . zip_entry_compressedsize($zip_entry);

  echo "</p>";

  }

zip_close($zip);

}

?>

The output of the code above will be:

Name: ziptest.txt

Compressed Size: 56

Name: htmlziptest.html

Compressed Size: 101


PHP zip_entry_compressionmethod() Function

Definition and Usage

The zip_entry_compressionmethod() function returns the compression method of a zip archive entry.

Syntax

zip_entry_compressionmethod(zip_entry)

Parameter | Description
zip_entry | Required. Specifies the zip entry resource to read (a zip entry opened with zip_read() )

Example

<?php

$zip = zip_open("test.zip");

if ($zip)

{

while ($zip_entry = zip_read($zip))

  {

  echo "<p>";

  echo "Name: " . zip_entry_name($zip_entry) . "<br />";

  echo "Compression Method: "

  . zip_entry_compressionmethod($zip_entry);

  echo "</p>";

  }

zip_close($zip);

}

?>

The output of the code above will be:

Name: ziptest.txt

Compression Method: deflated

Name: htmlziptest.html

Compression Method: deflated


PHP zip_entry_filesize() Function

Definition and Usage

The zip_entry_filesize() function returns the original file size (before compression) of a zip archive entry.

Syntax

zip_entry_filesize(zip_entry)

Parameter | Description
zip_entry | Required. Specifies the zip entry resource to read (a zip entry opened with zip_read() )

Example

<?php

$zip = zip_open("test.zip");

if ($zip)

{

while ($zip_entry = zip_read($zip))

  {

  echo "<p>";

  echo "Name: " . zip_entry_name($zip_entry) . "<br />";

  echo "Original size: " . zip_entry_filesize($zip_entry);

  echo "</p>";

  }

zip_close($zip);

}

?>

The output of the code above will be:

Name: ziptest.txt

Original size: 59

Name: htmlziptest.html

Original size: 124


PHP zip_entry_name() Function

Definition and Usage

The zip_entry_name() function returns the name of a zip archive entry.

Syntax

zip_entry_name(zip_entry)

Parameter | Description
zip_entry | Required. Specifies the zip entry resource to read (a zip entry opened with zip_read() )

Example

<?php

$zip = zip_open("test.zip");

if ($zip)

{

while ($zip_entry = zip_read($zip))

  {

  echo "Name: " . zip_entry_name($zip_entry) . "<br />";

  }

zip_close($zip);

}

?>

The output of the code above will be:

Name: ziptest.txt

Name: htmlziptest.html


PHP zip_entry_open() Function

Definition and Usage

The zip_entry_open() function opens a zip archive entry for reading.

This function returns TRUE on success, or FALSE on failure.

Syntax

zip_entry_open(zip,zip_entry,mode)

Parameter | Description
zip | Required. Specifies the zip resource to read (a zip file opened with zip_open() )
zip_entry | Required. Specifies the zip entry resource to open (a zip entry opened with zip_read() )
mode | Optional. Specifies the type of access you require to the zip archive. Note: In PHP 5, mode is ignored and is always "rb". This is because zip support in PHP is read only

Example

<?php

$zip = zip_open("test.zip");

if ($zip)

{

while ($zip_entry = zip_read($zip))

  {

  echo "<p>";

  echo "Name: " . zip_entry_name($zip_entry) . "<br />";

  if (zip_entry_open($zip, $zip_entry))

    {

    // some code

    }

  echo "</p>";

}

zip_close($zip);

}

?>


PHP zip_entry_read() Function

Definition and Usage

The zip_entry_read() function gets the contents from a open zip archive entry.

This function returns the content of the entry on success, or FALSE on failure.

Syntax

zip_entry_read(zip_entry,length)

Parameter | Description
zip_entry | Required. Specifies the zip entry resource to read (a zip entry opened with zip_read() )
length | Optional. Specifies the number of bytes (uncompressed size) to return. Default is 1024

Example

<?php

$zip = zip_open("test.zip");

if ($zip)

{

while ($zip_entry = zip_read($zip))

  {

  echo "<p>";

  echo "Name: " . zip_entry_name($zip_entry) . "<br />";

  if (zip_entry_open($zip, $zip_entry))

    {

    echo "File Contents:<br/>";

    $contents = zip_entry_read($zip_entry);

    echo "$contents<br />";

    zip_entry_close($zip_entry);

    }

  echo "</p>";

}

zip_close($zip);

}

?>

The output of the code depends on the contents of the zip archive:

Name: ziptest.txt

File Contents:

Hello World! This is a test for a the zip functions in PHP.

Name: htmlziptest.html

File Contents:

Hello World!

This is a test for a the zip functions in PHP.


PHP zip_open() Function

Definition and Usage

The zip_open() function opens a zip archive for reading.

This function returns a open zip file resource on success, or FALSE on failure.

Syntax

zip_open(filename)

Parameter | Description
filename | Required. Specifies filename and path of the zip file to open

Tips and Notes

Tip: The opened zip file resource can be used later with the zip_read() and zip_close() functions.

Example

<?php

$zip = zip_open("test.zip");

zip_read($zip);

// some code

zip_close($zip);

?>


PHP zip_read() Function

Definition and Usage

The zip_read() function reads the next file in a open zip archive.

This function returns a resource containing a file within the zip archive on success, or FALSE if there is no more entries to read.

Syntax

zip_read(zip)

Parameter | Description
zip | Required. Specifies the zip resource to read (a zip file opened with zip_open() )

Tips and Notes

Tip: The resource returned by zip_read() can be used by the zip_entry... functions.

Example

<?php

$zip = zip_open("test.zip");

zip_read($zip);

// some code

zip_close($zip);

?>


poll_vote.html

Result:

Yes: | poll 77%
No: | poll 23%


Web Quality Assurance Tutorial

Web Quality Assurance

Web Quality Assurance Tutorial

quality

In this tutorial you will learn how to build your web site to the highest quality.

You will learn to use the latest web standards.

You will also learn how to make your web site more accessible and more readable.

Table of Contents

Web Quality - Standards

This chapter describes the most important quality standards.

Web Quality - HTML Elements

This chapter describes the most important HTML elements.

Web Quality - Style Sheets

This chapter describes the most important CSS elements.

Web Quality - Readability

This chapter explains how to make your web pages easy to read.

This chapter explains how to make your web pages accessible to most users and browsers.

This chapter explains different quality issues regarding internationalization.


Web Quality Assurance Accessibility - WAI

Web Quality - Accessibility (WAI)

 Top Previous Next

An accessible web site is a web site that can be used by disabled users.

Disabled users are users with disabilities or bad user conditions.

The Web Accessibility Initiative - WAI

WAI (created by the World Wide Web Consortium (W3C) in 1997) is a set of guidelines intended for web developers, authors, and designers- about how to make web content accessible to people with disabilities.

The goal of these guidelines is accessibility, but they will also help make web contents available to more browsers (voice browsers, cell phones, hand-held devices), and to more users working in difficult environments (hands-free, strong light, darkness, bad sight, heavy noise).

Is WAI Important to Your Web Site?

Yes it is.

Millions of people with disabilities are surfing the Internet every day, and even more millions are using poor browser equipment, or working under difficult user environments.

If your website lacks features such as resizable fonts, images with proper text descriptions, and easy navigation, these people will not be able to access your information.

In fact: Your site violates the rights of these people.

Here are some other reasons for making your site more accessible:

· It will improve your reputation and image
· It will improve your customer satisfaction
· It will increase your number of visitors
· It will let your visitors stay longer at your site
· It will increase the number of returning visitors
· It will make your site more usable also for people with no disabilities
· It will make your site more usable for users with images turned off
· It will make your site more usable for people with older equipment
· It will let you reach the fastest growing population: older people

Use an Adjustable Font Size

Use only relative font sizes, and let the user be able to use the browser menu (View - Text Size) to change the default text size.

Can you read this?

Can you read this?

Can you read this?

Can you read this?

To change the font size, select view - text size - in your browsers menu.

Use The "alt" Attribute

The alt attribute allows you to provide a text equivalent for an image (and for some other elements).

Example:

<img src="images/bana.jpg" alt="Banana" />

Sometimes a web browser will not display your images. The reason could be one of many:

· The user has turned off the display of images
· The browser is a mini browser without image display.
· The browser is a voice browser (used by blind or poor-sighted)

If you use the "alt" attribute, most browsers will at least display or read the "alt" description.


Web Quality Assurance Elements

Web Quality - Important HTML Elements

<DOCTYPE>, <title>, and <h1> are important tags to web page quality.

The <DOCTYPE> Element

Doctype means a "document type declaration" (DTD).

All HTML and XHTML pages should use a <Doctype> element to define which HTML version it conforms to.

The doctype defines which version of HTML you are using, and gives important information to your browser so it can render your page faster and more consistently.

The doctype declaration also allows validating software to check the syntax of your page:

HTML 4.01 Strict, Transitional, Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Read more about DTD, Doctype and Page Validation at W3Schools.

The <title> Element

The <title> element is one of the most important HTML elements. Its main function is to describe the content of a web page.

Even if the title is not a visible part of your web page, it is important to the quality of your web site because it will be visible in

· search engine lists
· the windows title bar
· users bookmarks

The title should be as short and descriptive as possible.

When a user searches the internet for web sites, most search engines will display the title of your web site in the search result. Make sure the title match the content the user is looking for. Then it is more likely he will click on the link to visit your web site.

When the user is visiting your website, the title will be visible in the windows title bar. Make sure the title describes your site even when the window is minimized.

After the user has visited your website, the title of your web pages will be stored in his history folder (or even in his favorites folder). Make sure the title clearly describes your pages for a future visit.

Good title examples:

<title>HTML Tutorial</title>

<title>Introduction to XML</title>

Bad title examples:

<title>Introduction</title>

<title>Chapter 1</title>

<title>W3Schools has a collection of award winning, well organized, and easy to understand HTML, CSS, JavaScript, DHTML, XML, XHTML, WAP, ASP, SQL tutorials with lots of working examples and source code. </title>

The <h1> Element

The <h1> element is used to describe the top level header of a web page.

Because some web browsers display the <h1> element in a very large font by default, some web developers will use the <h2> element instead of the <h1> element for top level headers. This will not confuse the reader, if he is a person, but it will confuse most search engines and other software that will try to "understand" the structure of the web page.

Make sure you use <h1> for top level headers, <h2> and <h3> for lower levels.

Try to structure your web page headers after this template:

This is the main header

Some initial text

This is a level 2 header

Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences.

This is a level 3 header

Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences.

This is a level 3 header

Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences.

If you don't like the default size for headers, use styles or a style sheet to change it.


Web Quality Assurance Internationalization

Web Quality - Internationalization

The Internet is International

The Internet is International

With the Internet follows an absolute requirement to interchange data in a multiplicity of languages, which in turn utilize a bewildering number of characters.

H. Alvestrand, The Internet Engineering Task Force (IETF), January 1998.

International Character Sets

All W3C standards (since 1996), including HTML, XHTML, and XML defines an internal character set called Unicode (ISO 10646).

All modern web browsers are using this (Unicode) character internally. Most documents transmitted over the Internet do not use the Unicode character set.

Because of this, Internet clients (browsers) and Internet servers must have a way to agree about the character set used in the communication between them.

Labeling each document with the character set in use, is very important to the quality of your web site.

For your HTML and XHTML pages always use the following meta element inside the <head> element:

<meta http-equiv="Content-Type" content="text/html;charset=X" />

Replace X with the character set you use, like ISO-8859-1, UTF-8, or UTF-16.

International Dates

Don't use dates like "04-03-02".

The date above could mean the second day of March in 2004. It could also mean the fourth day of March in 2002. Or even the third day of April in 2002.

The international standard organization (ISO) has defined an international standard format for dates as "yyyy-mm-dd", where yyyy is the year, mm is the month and dd is the day.

When you use this ISO format, you can expect most visitors to understand your dates.


Web Quality Assurance Readability

Web Quality - Readability

Proper use of fonts and colors will make your website easier to read.

Mind the Color Contrasts

Black text on a white background, or white text on a black background, is best for people with viewing disabilities, and for display on bad equipment.

Grey text on a light background can give a very poor contrast:

Grey text on a white background (#EEEEEE)

Grey text on a white background (#CCCCCC)

Grey text on a white background (#AAAAAA)

Grey text on a white background (#888888)

Grey text on a white background (#666666)

Grey text on a white background (#444444)

Grey text on a white background (#222222)

Grey text on a white background (#111111)

Grey text on a dark background can also give a very poor contrast:

Grey text on a black background (#222222)

Grey text on a black background (#444444)

Grey text on a black background (#666666)

Grey text on a black background (#888888)

Grey text on a black background (#AAAAAA)

Grey text on a black background (#CCCCCC)

Grey text on a black background (#DDDDDD)

Grey text on a black background (#EEEEEE)

Some combinations - like black and red, black and blue, yellow and green - always strain the eye:

Black text on a red background

Black text on a blue background

Yellow text on a green background

And some combinations are not so bad:

Black text on a grey background

Black text on a light blue

Black text on antique white

White text on dark blue

Mind Your Letter Spacing

Text with close letter spacing presents special difficulties for readers who are visually impaired.

Text with extra letter spacing is easy to read

Text with reduced letter spacing is difficult to read

Mind Your Line Spacing

Text with good line spacing

is easy to read

Text with reduced line spacing

is difficult to read

Avoid the Fancy Fonts

This font is easy to read

This font is not

Speak Less Italian

Normal fonts are easy to read. Normal font is easy to read. Normal fonts are easy to read. Normal font is easy to read. Normal fonts are easy to read.

Italic fonts are not so easy to read. Italic font is not so easy to read. Italic fonts are not so easy to read. Italic font is not so easy to read.


Web Quality Assurance Standards

Web Quality - Standards

Writing your pages to the web standards will improve the quality of your site.

The HTML Standard

XHTML is the latest HTML standard. XHTML is a reformulation of HTML 4.01 in XML.

Writing your pages to the latest HTML 4.01 standard will bring you as close as possible to the latest XHTML standard.

Read more about XHTML.

The CSS Standard

Using Cascading Style Sheets (CSS) is the preferred way of separating content from the style in quality web pages. By using CSS you can store all the information about the style of your web pages in one single document.

All modern web browsers have support for both the CSS 1 and CSS 2 standards.

Using CSS will improve the quality of your web site and increases the readability for many different browsers. It will also greatly reduce your web site development costs.

Read more about CSS.

Web Validation

A web validator is a software program that can check your web pages against the web standards.

When you use a validator to check an HTML, XHTML or CSS document, the validator will return a list of any errors found, according to your chosen standard. Normally the validator also returns the line numbers where errors are found.

Make sure you make it a habit to validate all your web pages before publishing.

Read more about page validation.

WAI - The Web Accessibility Initiative

WAI stands for the "Web Accessibility Initiative", and is initiated by W3C.

WAI coordinates with organizations around the world to increase the accessibility of the Internet through six primary areas of work: technology, guidelines, tools, education, research, and development.

You can improve the quality of your web site, and make your information available to more people (and browsers) by writing your pages according to the WAI guidelines.

You will learn more about WAI in a later chapter of this tutorial.


Web Quality Assurance StyleSheets

Web Quality - Style Sheets

Using Style Sheets is important to web page quality.

Don't Use the Font Tag

The text size used to display information on a web page should be set using CSS (Cascading Style Sheets). Do not use the HTML <font> tag.

Using the <font> tag will increase the size of your document, and give you a nightmare every time you decide to change your standard text size.

Think of the following example:

One day you decide to change all the headers in your web to another color and another size. With CSS you can change the color and size attributes by rewriting one line of code. If you have used the <font> tag, you will have to edit the <font> tag for all the headers in all the pages of your web.

Using styles instead of <font> tags makes it much easier to give all the pages of your web a high quality and consistent look.

Don't Use Fixed Sizes

Never use fixed size values. Always use relative size values.

The most important reason for this advice is that fixed sizes can not be resized by the browser.

Your visitors will have different equipment (monitors), different viewing conditions (light), and possible disabilities (poor eyesight).

Setting your default text size to 100% (or medium), your main headers to 140% (or x-large), your sub headers to 120% (or large), as an example, will make it possible for your reader to resize your pages to their best fit.

Want to see how it works? Select view in your browsers menu, and change the text size for this page.

Adjusting the text size of a web page also changes the amount of text that will fit on a printed page.

Don't Use a Small Default Font Size

Some web sites use a small text size just to "squeeze" more text into each page, or to make the page more "stylish".

Again, visitors with different equipment, viewing conditions, and disabilities (and sometimes most people) will have difficulties reading the text.

Don't force your visitors to enlarge the text size every time they visit your site.

Always Use a Background Color

Most web pages use colors for different text elements. Both headers and links are often in a different color from the body text.

As a web designer, you should be aware of the fact that your visitors are able to change their default color preferences.

If you define colors for your web elements (like header and links), you should also define the background color.

If you don't define a background color, your web site might end up with some very bad combination of colors (like light red headers on a red background, or even worse, black text on a black background)

If you don't specify a background color, your text might be invisible.


Introduction to OWL

OWL is a language for processing web information.

What You Should Already Know

Before you study OWL you should have a basic understanding of XML, XML Namespaces and RDF.

If you want to study these subjects first, please visit:

W3Schools' XML Tutorial and RDF Tutorial.

What is OWL?

· OWL stands for Web Ontology Language
· OWL is built on top of RDF
· OWL is for processing information on the web
· OWL was designed to be interpreted by computers
· OWL was not designed for being read by people
· OWL is written in XML
· OWL has three sublanguages
· OWL is a web standard

What is Ontology?

Ontology is about the exact description of things and their relationships.

For the web, ontology is about the exact description of web information and relationships between web information.

Why OWL?

OWL is a part of the "Semantic Web Vision" - a future where:

· Web information has exact meaning
· Web information can be processed by computers
· Computers can integrate information from the web

OWL was Designed for Processing Information

OWL was designed to provide a common way to process the content of web information (instead of displaying it).

OWL was designed to be read by computer applications (instead of humans).

OWL is Different from RDF

OWL and RDF are much of the same thing, but OWL is a stronger language with greater machine interpretability than RDF.

OWL comes with a larger vocabulary and stronger syntax than RDF.

OWL Sublanguages

OWL has three sublanguages:

· OWL Lite
· OWL DL (includes OWL Lite)
· OWL Full (includes OWL DL)

OWL is Written in XML

By using XML, OWL information can easily be exchanged between different types of computers using different types of operating system and application languages.

OWL Example (Airport)

OWL Resource: http://www.daml.org/2001/10/html/airport-ont

Class: Airport

Properties:

·
· iataCode
· icaoCode
· latitude
· location
· longitude
· name

Produced using dumpont2.java

OWL is a Web Standard

OWL became a W3C (World Wide Web Consortium) Recommendation in February 2004.

A W3C Recommendation is understood by the industry and the web community as a web standard. A W3C Recommendation is a stable specification developed by a W3C Working Group and reviewed by the W3C Membership.


RDF Tutorial

RDF Tutorial

rdf

The Resource Description Framework (RDF) is a W3C standard for describing resources on the Web.

RDF is a framework for describing Web resources, such as the title, author, modification date, content, and copyright information of a Web page.

Start learning RDF!

Table of Contents

Introduction to RDF

This chapter explains what RDF is and what it can be used for.

RDF Rules

This chapter explains the syntax and terms used in RDF.

This chapter explains an RDF example.

RDF Main Elements

This chapter explains the main elements of RDF: <RDF> and <Description>.

RDF Container Elements

RDF containers are used to describe group of things. This chapter explains the container elements of RDF: <Bag>, <Seq>, and <Alt>.

RDF Collections

RDF collections are used to describe groups that contains ONLY the specified members. This chapter explains how to describe a collection.

This chapter explains the RDF Schema extension to RDF.

RDF Dublin Core Metadata Initiative (DCMI)

This chapter is about the Dublin Core Metadata Initiative (DCMI) that provides properties for describing network objects.

RDF Reference

This chapter contains a complete RDF reference.

RDF / OWL

This chapter describes the OWL language built on top of RDF.


Triples of the Data Model

Triples of the Data Model

Subject | Predicate | Object
http://www.w3schools.com/RDF | http://www.recshop.fake/siteinfo#author | "Jan Egil Refsnes"
http://www.w3schools.com/RDF | http://www.recshop.fake/siteinfo#homepage | "http://www.w3schools.com"

The original RDF/XML document

1: <?xml version="1.0"?>

2: <rdf:RDF

3: xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

4: xmlns:si="http://www.recshop.fake/siteinfo#">

5: <rdf:Description rdf:about="http://www.w3schools.com/RDF">

6: <si:author>Jan Egil Refsnes</si:author>

7: <si:homepage>http://www.w3schools.com</si:homepage>

8: </rdf:Description>

9: </rdf:RDF>

Graph of the data model


RDF Collections

RDF collections are used to describe groups that contains ONLY the specified members.

The rdf:parseType="Collection" Attribute

As seen in the previous chapter: You cannot close a container. A container says that the containing resources are members - it does not say that other members are not allowed.

RDF collections are used to describe group that contains ONLY the specified members.

A collection is described by the attribute rdf:parseType="Collection".

Example

<?xml version="1.0"?>

<rdf:RDF

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:cd="http://recshop.fake/cd#">

<rdf:Description

rdf:about="http://recshop.fake/cd/Beatles">

<cd:artist rdf:parseType="Collection">

<rdf:Description rdf:about="http://recshop.fake/cd/Beatles/George"/>

<rdf:Description rdf:about="http://recshop.fake/cd/Beatles/John"/>

<rdf:Description rdf:about="http://recshop.fake/cd/Beatles/Paul"/>

<rdf:Description rdf:about="http://recshop.fake/cd/Beatles/Ringo"/>

</cd:artist>

</rdf:Description>

</rdf:RDF>


RDF Containers

RDF Container Elements

RDF containers are used to describe group of things. For example, to list the authors of a book or to list the members in a band.

The following RDF elements are used to describe such groups: <Bag>, <Seq>, and <Alt>.

The <rdf:Bag> Element

The <rdf:Bag> element is used to describe a list of values that is intended to be unordered.

The <rdf:Bag> element may contain duplicate values.

Example

<?xml version="1.0"?>

<rdf:RDF

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:cd="http://www.recshop.fake/cd#">

<rdf:Description

rdf:about="http://www.recshop.fake/cd/Beatles">

<cd:artist>

 <rdf:Bag>

   <rdf:li>John</rdf:li>

   <rdf:li>Paul</rdf:li>

   <rdf:li>George</rdf:li>

   <rdf:li>Ringo</rdf:li>

 </rdf:Bag>

</cd:artist>

</rdf:Description>

</rdf:RDF>

The <rdf:Seq> Element

The <rdf:Seq> element is used to describe a list of values that is intended to be ordered (For example, in alphabetical order).

The <rdf:Seq> element may contain duplicate values.

Example

<?xml version="1.0"?>

<rdf:RDF

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:cd="http://www.recshop.fake/cd#">

<rdf:Description

rdf:about="http://www.recshop.fake/cd/Beatles">

<cd:artist>

 <rdf:Seq>

   <rdf:li>George</rdf:li>

   <rdf:li>John</rdf:li>

   <rdf:li>Paul</rdf:li>

   <rdf:li>Ringo</rdf:li>

 </rdf:Seq>

</cd:artist>

</rdf:Description>

</rdf:RDF>

The <rdf:Alt> Element

The <rdf:Alt> element is used to describe a list of alternative values (the user can select only one of the values).

Example

<?xml version="1.0"?>

<rdf:RDF

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:cd="http://www.recshop.fake/cd#">

<rdf:Description

rdf:about="http://www.recshop.fake/cd/Beatles">

<cd:format>

 <rdf:Alt>

   <rdf:li>CD</rdf:li>

   <rdf:li>Record</rdf:li>

   <rdf:li>Tape</rdf:li>

 </rdf:Alt>

</cd:format>

</rdf:Description>

</rdf:RDF>

RDF Terms

In the examples above we have talked about "list of values" when describing the container elements. In RDF these "list of values" are called members.

So, we have the following:

· A container is a resource that contains things
· The contained things are called members (not list of values)


RDF Dublin Core

RDF Dublin Core Metadata Initiative

The Dublin Core Metadata Initiative (DCMI) has created some predefined properties for describing documents.

The Dublin Core

RDF is metadata (data about data). RDF is used to describe information resources.

The Dublin Core is a set of predefined properties for describing documents.

The first Dublin Core properties were defined at the Metadata Workshop in Dublin, Ohio in 1995 and is currently maintained by the Dublin Core Metadata Initiative.

Property | Definition
Contributor | An entity responsible for making contributions to the content of the resource
Coverage | The extent or scope of the content of the resource
Creator | An entity primarily responsible for making the content of the resource
Format | The physical or digital manifestation of the resource
Date | A date of an event in the lifecycle of the resource
Description | An account of the content of the resource
Identifier | An unambiguous reference to the resource within a given context
Language | A language of the intellectual content of the resource
Publisher | An entity responsible for making the resource available
Relation | A reference to a related resource
Rights | Information about rights held in and over the resource
Source | A Reference to a resource from which the present resource is derived
Subject | A topic of the content of the resource
Title | A name given to the resource
Type | The nature or genre of the content of the resource

A quick look at the table above indicates that RDF is ideal for representing Dublin Core information.

RDF Example

The following example demonstrates the use of some of the Dublin Core properties in an RDF document:

<?xml version="1.0"?>

<rdf:RDF

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:dc= "http://purl.org/dc/elements/1.1/">

<rdf:Description rdf:about="http://www.w3schools.com">

<dc:title>D-Lib Program</dc:title>

<dc:description>W3Schools - Free tutorials</dc:description>

<dc:publisher>Refsnes Data as</dc:publisher>

<dc:date>1999-09-01</dc:date>

<dc:type>Web Development</dc:type>

<dc:format>text/html</dc:format>

<dc:language>en</dc:language>

</rdf:Description>

</rdf:RDF>


RDF Example

RDF Example

This is a few lines from a CD-list:

Title | Artist | Country | Company | Price | Year
Empire Burlesque | Bob Dylan | USA | Columbia | 10.90 | 1985
Hide your heart | Bonnie Tyler | UK | CBS Records | 9.90 | 1988
... |  |  |  |  |

This is a few lines of an RDF document:

<?xml version="1.0"?>

<rdf:RDF

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:cd="http://www.recshop.fake/cd#">

<rdf:Description

rdf:about="http://www.recshop.fake/cd/Empire Burlesque">

<cd:artist>Bob Dylan</cd:artist>

<cd:country>USA</cd:country>

<cd:company>Columbia</cd:company>

<cd:price>10.90</cd:price>

<cd:year>1985</cd:year>

</rdf:Description>

<rdf:Description

rdf:about="http://www.recshop.fake/cd/Hide your heart">

<cd:artist>Bonnie Tyler</cd:artist>

<cd:country>UK</cd:country>

<cd:company>CBS Records</cd:company>

<cd:price>9.90</cd:price>

<cd:year>1988</cd:year>

</rdf:Description>

.

.

.

</rdf:RDF>

The first line of the RDF document is the XML declaration. The XML declaration is followed by the root element of RDF documents: <rdf:RDF>.

The xmlns:rdf namespace, specifies that elements with the rdf prefix are from the namespace "http://www.w3.org/1999/02/22-rdf-syntax-ns#".

The xmlns:cd namespace, specifies that elements with the cd prefix are from the namespace "http://www.recshop.fake/cd#".

The <rdf:Description> element contains the description of the resource identified by the rdf:about attribute.

The elements: <cd:artist>, <cd:country>, <cd:company>, etc. are properties of the resource.

RDF Online Validator

Validation Service is useful when learning RDF. Here you can experiment with RDF files.

The online RDF Validator parses your RDF document, checks your syntax, and generates tabular and graphical views of your RDF document.

Copy and paste the example below into W3C's RDF validator:

<?xml version="1.0"?>

<rdf:RDF

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:si="http://www.recshop.fake/siteinfo#">

<rdf:Description rdf:about="http://www.w3schools.com/RDF">

  <si:author>Jan Egil Refsnes</si:author>

  <si:homepage>http://www.w3schools.com</si:homepage>

</rdf:Description>

</rdf:RDF>

When you parse the example above, the result will look something like this.


Introduction to RDF

The Resource Description Framework (RDF) is a W3C standard for describing Web resources, such as the title, author, modification date, content, and copyright information of a Web page.

What You Should Already Know

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

· HTML
· XHTML
· XML
· XML Namespaces

If you want to study these subjects first, find the tutorials on our Home page.

What is RDF?

· RDF stands for Resource Description Framework
· RDF is a framework for describing resources on the web
· RDF provides a model for data, and a syntax so that independent parties can exchange and use it
· RDF is designed to be read and understood by computers
· RDF is not designed for being displayed to people
· RDF is written in XML
· RDF is a part of the W3C's Semantic Web Activity
· RDF is a W3C Recommendation

RDF - Examples of Use

· Describing properties for shopping items, such as price and availability
· Describing time schedules for web events
· Describing information about web pages, such as content, author, created and modified date
· Describing content and rating for web pictures
· Describing content for search engines
· Describing electronic libraries

RDF is Designed to be Read by Computers

RDF was designed to provide a common way to describe information so it can be read and understood by computer applications.

RDF descriptions are not designed to be displayed on the web.

RDF is Written in XML

RDF documents are written in XML. The XML language used by RDF is called RDF/XML.

By using XML, RDF information can easily be exchanged between different types of computers using different types of operating systems and application languages.

RDF and "The Semantic Web"

The RDF language is a part of the W3C's Semantic Web Activity. W3C's "Semantic Web Vision" is a future where:

· Web information has exact meaning
· Web information can be understood and processed by computers
· Computers can integrate information from the web

RDF is a W3C Recommandation

RDF became a W3C Recommendation in February 2004.

A W3C Recommendation is understood by the industry and the web community as a web standard. A W3C Recommendation is a stable specification developed by a W3C Working Group and reviewed by the W3C Membership.

The official W3C recommendation can be found at this link:

http://www.w3.org/RDF/


RDF Main Elements

The main elements of RDF are the root element, <RDF>, and the <Description> element, which identifies a resource.

The <rdf:RDF> Element

<rdf:RDF> is the root element of an RDF document. It defines the XML document to be an RDF document. It also contains a reference to the RDF namespace:

<?xml version="1.0"?>

<rdf:RDF

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">

.

. Description goes here

.

</rdf:RDF>

The <rdf:Description> Element

The <rdf:Description> element identifies a resource with the about attribute.

The <rdf:Description> element contains elements that describe the resource:

<?xml version="1.0"?>

<rdf:RDF

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:cd="http://www.recshop.fake/cd#">

<rdf:Description

rdf:about="http://www.recshop.fake/cd/Empire Burlesque">

<cd:artist>Bob Dylan</cd:artist>

<cd:country>USA</cd:country>

<cd:company>Columbia</cd:company>

<cd:price>10.90</cd:price>

<cd:year>1985</cd:year>

</rdf:Description>

</rdf:RDF>

The elements, artist, country, company, price, and year, are defined in the http://www.recshop.fake/cd# namespace. This namespace is outside RDF (and not a part of RDF). RDF defines only the framework. The elements, artist, country, company, price, and year, must be defined by someone else (company, organization, person, etc).

Properties as Attributes

The property elements can also be defined as attributes (instead of elements):

<?xml version="1.0"?>

<rdf:RDF

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:cd="http://www.recshop.fake/cd#">

<rdf:Description

rdf:about="http://www.recshop.fake/cd/Empire Burlesque"

cd:artist="Bob Dylan" cd:country="USA"

cd:company="Columbia" cd:price="10.90"

cd:year="1985" />

</rdf:RDF>

Properties as Resources

The property elements can also be defined as resources:

<?xml version="1.0"?>

<rdf:RDF

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:cd="http://www.recshop.fake/cd#">

<rdf:Description

rdf:about="http://www.recshop.fake/cd/Empire Burlesque">

<cd:artist rdf:resource="http://www.recshop.fake/cd/dylan" />

.

.

.

.

</rdf:Description>

</rdf:RDF>

In the example above, the property artist does not have a value, but a reference to a resource containing information about the artist.


RDF Reference

The RDF Namespaces

The RDF namespace (xmlns:rdf) is:

http://www.w3.org/1999/02/22-rdf-syntax-ns#

The RDFS namespace (xmlns:rdfs ) is:

http://www.w3.org/2000/01/rdf-schema#

The RDF Extension and Mime Type

The recommended extension for RDF files is *.rdf. However, the extension *.xml is often used to provide compatibility with older xml parsers.

The registered mime type should be "application/rdf+xml".

RDFS / RDF Classes

Element | Class of | Subclass of
rdfs:Class | All classes |
rdfs:Datatype | Data types | Class
rdfs:Resource | All resources | Class
rdfs:Container | Containers | Resource
rdfs:Literal | Literal values (text and numbers) | Resource
rdf:List | Lists | Resource
rdf:Property | Properties | Resource
rdf:Statement | Statements | Resource
rdf:Alt | Containers of alternatives | Container
rdf:Bag | Unordered containers | Container
rdf:Seq | Ordered containers | Container
rdfs:ContainerMembershipProperty | Container membership properties | Property
rdf:XMLLiteral | XML literal values | Literal

RDFS / RDF Properties

Element | Domain | Range | Description
rdfs:domain | Property | Class | The domain of the resource
rdfs:range | Property | Class | The range of the resource
rdfs:subPropertyOf | Property | Property | The property is a sub property of a property
rdfs:subClassOf | Class | Class | The resource is a subclass of a class
rdfs:comment | Resource | Literal | The human readable description of the resource
rdfs:label | Resource | Literal | The human readable label (name) of the resource
rdfs:isDefinedBy | Resource | Resource | The definition of the resource
rdfs:seeAlso | Resource | Resource | The additional information about the resource
rdfs:member | Resource | Resource | The member of the resource
rdf:first | List | Resource |
rdf:rest | List | List |
rdf:subject | Statement | Resource | The subject of the resource in an RDF Statement
rdf:predicate | Statement | Resource | The predicate of the resource in an RDF Statement
rdf:object | Statement | Resource | The object of the resource in an RDF Statement
rdf:value | Resource | Resource | The property used for values
rdf:type | Resource | Class | The resource is an instance of a class

RDF Attributes

Element | Domain | Range | Description
rdf:about |  |  | Defines the resource being described
rdf:Description |  |  | Container for the description of a resource
rdf:resource |  |  | Defines a resource to identify a property
rdf:datatype |  |  | Defines the data type of an element
rdf:ID |  |  | Defines the ID of an element
rdf:li |  |  | Defines a list
rdf:_n |  |  | Defines a node
rdf:nodeID |  |  | Defines the ID of an element node
rdf:parseType |  |  | Defines how an element should be parsed
rdf:RDF |  |  | The root of an RDF document
xml:base |  |  | Defines the XML base
xml:lang |  |  | Defines the language of the element content
rdf:aboutEach |  |  | (removed)
rdf:aboutEachPrefix |  |  | (removed)
rdf:bagID |  |  | (removed)

Elements described as (removed) are removed from the latest RDF standard.


RDF Rules

RDF uses Web identifiers (URIs) to identify resources.

RDF describes resources with properties and property values.

RDF Resource, Property, and Property Value

RDF identifies things using Web identifiers (URIs), and describes resources with properties and property values.

Explanation of Resource, Property, and Property value:

· A Resource is anything that can have a URI, such as "http://www.w3schools.com/RDF"
· A Property is a Resource that has a name, such as "author" or "homepage"
· A Property value is the value of a Property, such as "Jan Egil Refsnes" or "http://www.w3schools.com" (note that a property value can be another resource)

The following RDF document could describe the resource "http://www.w3schools.com/RDF":

<?xml version="1.0"?>

<RDF>

<Description about="http://www.w3schools.com/RDF">

  <author>Jan Egil Refsnes</author>

  <homepage>http://www.w3schools.com</homepage>

</Description>

</RDF>

The example above is simplified. Namespaces are omitted.

RDF Statements

The combination of a Resource, a Property, and a Property value forms a Statement (known as the subject, predicate and object of a Statement).

Let's look at some example statements to get a better understanding:

Statement: "The author of http://www.w3schools.com/RDF is Jan Egil Refsnes".

· The subject of the statement above is: http://www.w3schools.com/RDF
· The predicate is: author
· The object is: Jan Egil Refsnes

Statement: "The homepage of http://www.w3schools.com/RDF is http://www.w3schools.com".

· The subject of the statement above is: http://www.w3schools.com/RDF
· The predicate is: homepage
· The object is: http://www.w3schools.com


RDF Schema

RDF Schema (RDFS)

 Top Previous Next

RDF Schema (RDFS) is an extension to RDF.

RDF Schema and Application Classes

RDF describes resources with classes, properties, and values.

In addition, RDF also need a way to define application-specific classes and properties. Application-specific classes and properties must be defined using extensions to RDF

One such extension is RDF Schema.

RDF Schema (RDFS)

RDF Schema does not provide actual application-specific classes and properties.

Instead RDF Schema provides the framework to describe application-specific classes and properties

Classes in RDF Schema is much like classes in object oriented programming languages. This allows resources to be defined as instances of classes, and subclasses of classes.

RDFS Example

The following example demonstrates some of the RDFS facilities:

<?xml version="1.0"?>

<rdf:RDF

xmlns:rdf= "http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"

xml:base=  "http://www.animals.fake/animals#">

<rdf:Description rdf:ID="animal">

<rdf:type

 rdf:resource="http://www.w3.org/2000/01/rdf-schema#Class"/>

</rdf:Description>

<rdf:Description rdf:ID="horse">

<rdf:type

 rdf:resource="http://www.w3.org/2000/01/rdf-schema#Class"/>

<rdfs:subClassOf rdf:resource="#animal"/>

</rdf:Description>

</rdf:RDF>

In the example above, the resource "horse" is a subclass of the class "animal".

Example Abbreviated

Since an RDFS class is an RDF resource we can abbreviate the example above by using rdfs:Class instead of rdf:Description, and drop the rdf:type information:

<?xml version="1.0"?>

<rdf:RDF

xmlns:rdf= "http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"

xml:base=  "http://www.animals.fake/animals#">

<rdfs:Class rdf:ID="animal" />

<rdfs:Class rdf:ID="horse">

<rdfs:subClassOf rdf:resource="#animal"/>

</rdfs:Class>

</rdf:RDF>

That's it!


RSS Introduction

Introduction to RSS

RSS is a method that uses XML to distribute web content on one web site, to many other web sites.

RSS allows fast browsing for news and updates.

What You Should Already Know

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

· HTML / XHTML
· XML / XML Namespaces

If you want to study these subjects first, find the tutorials on our Home page.

What is RSS?

· RSS stands for Really Simple Syndication
· RSS allows you to syndicate your site content
· RSS defines an easy way to share and view headlines and content
· RSS files can be automatically updated
· RSS allows personalized views for different sites
· RSS is written in XML

Why use RSS?

RSS was designed to show selected data.

Without RSS, users will have to check your site daily for new updates. This may be too time-consuming for many users. With an RSS feed (RSS is often called a News feed or RSS feed) they can check your site faster using an RSS aggregator (a site or program that gathers and sorts out RSS feeds).

Since RSS data is small and fast-loading, it can easily be used with services like cell phones or PDA's.

Web-rings with similar information can easily share data on their web sites to make them better and more useful.

Who Should use RSS?

Webmasters who seldom update their web sites do not need RSS!

RSS is useful for web sites that are updated frequently, like:

· News sites - Lists news with title, date and descriptions
· Companies - Lists news and new products
· Calendars - Lists upcoming events and important days
· Site changes - Lists changed pages or new pages

The Future of RSS

RSS is going to be everywhere!

Thousands of sites use RSS and more people understand its usefulness every day.

With RSS, information on the internet becomes easier to find, and web developers can spread their information more easily to special interest groups.


RSS <category> Element

Definition and Usage

The <category> element specifies one or more categories the channel or item belongs to. The <category> element can also specify the hierarchic location in a category (the value of the <category> element is then a forward-slash separated string).

The <category> element makes it possible for RSS aggregators to group sites/articles based on category.

Attributes

Tag | Description
domain | Optional. A string or URL that identifies a categorization taxonomy. Example: <category domain="syndic8">IT</category>

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<category>IT/Internet/Web development</category>

<item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

  <category>News</category>

  <category>Tutorial</category>

</item>

</channel>

</rss>

Try-It-Yourself Demos

The <

How to use the <category> element.


RSS <channel> Element

The RSS <channel> element describes the RSS feed.

The RSS <channel> Element

Look at the following RSS document:

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

</item>

</channel>

</rss>

As mentioned before, the <channel> element describes the RSS feed, and has three required child elements:

· <title> - Defines the title of the channel (e.g. W3Schools Home Page)
· <link> - Defines the hyperlink to the channel (e.g. http://www.w3schools.com)
· <description> - Describes the channel (e.g. Free web building tutorials)

The <channel> element usually contains one ore more <item> elements. Each <item> element defines an article or "story" in the RSS feed.

Furthermore, there are several optional child elements of <channel>. We will explain the most important ones below.

The <category> Element

The <category> child element is used to specify a category for your feed.

The <category> element makes it possible for RSS aggregators to group sites based on category.

The category for the RSS document above could be:

<category>Web development</category>

The <copyright> Element

The <copyright> child element notifies about copyrighted material.

The copyright for the RSS document above could be:

<copyright>2006 Refsnes Data as. All rights reserved.</copyright>

The <image> Element

The <image> child element allows an image to be displayed when aggregators present a feed.

The <image> element has three required child elements:

· <url> - Defines the URL to the image
· <title> - Defines the text to display if the image could not be shown
· <link> - Defines the hyperlink to the website that offers the channel

The image for the RSS document above could be:

<image>

<url>http://www.w3schools.com/images/logo.gif</url>

<title>W3Schools.com</title>

<link>http://www.w3schools.com</link>

</image>

The <language> Element

The <language> child element is used to specify the language used to write your document.

The <language> element makes it possible for RSS aggregators to group sites based on language.

The language for the RSS document above could be:

<language>en-us</language>

RSS <channel> Reference

Element | Description
< category> | Optional. Defines one or more categories for the feed
< cloud> | Optional. Register processes to be notified immediately of updates of the feed
< copyright> | Optional. Notifies about copyrighted material
description> | Required. Describes the channel
< docs> | Optional. Specifies an URL to the documentation of the format used in the feed
< generator> | Optional. Specifies the program used to generate the feed
image> | Optional. Allows an image to be displayed when aggregators present a feed
< | Optional. Specifies the language the feed is written in
< lastBuildDate> | Optional. Defines the last-modified date of the content of the feed
link> | Required. Defines the hyperlink to the channel
< managingEditor> | Optional. Defines the e-mail address to the editor of the content of the feed
< pubDate> | Optional. Defines the last publication date for the content of the feed
<rating> | Optional. The PICS rating of the feed
skipDays> | Optional. Specifies the days where aggregators should skip updating the feed
skipHours> | Optional. Specifies the hours where aggregators should skip updating the feed
textInput> | Optional. Specifies a text input field that should be displayed with the feed
< title> | Required. Defines the title of the channel
< ttl> | Optional. Specifies the number of minutes the feed can stay cached before refreshing it from the source
< webMaster> | Optional. Defines the e-mail address to the webmaster of the feed


RSS <cloud> Element

Definition and Usage

The <cloud> element is used to register processes with a cloud to be notified immediately of updates of the channel.

Tips and Notes

Note: Clouds can be implemented in either xml-rpc or soap.

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<cloud domain="www.w3schools.com" port="80" path="/RPC"

registerProcedure="NotifyMe" protocol="xml-rpc" />

  <item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

</item>

</channel>

</rss>


RSS <comments> element

Definition and Usage

The <comments> element allows an item to link to comments about that item.

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

  <comments>http://www.w3schools.com/rss/comments.asp</comments>

</item>

</channel>

</rss>

Try-It-Yourself Demos

The < comments> element

How to use the <comments> element.


RSS <copyright> Element

Definition and Usage

The <copyright> element is used to notify about copyrighted material.

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<copyright>2006 Refsnes Data as. All rights reserved.</copyright>

<item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

</item>

</channel>

</rss>

Try-It-Yourself Demos

The < copyright> element

How to use the <copyright> element.


RSS <docs> Element

Definition and Usage

The <docs> element specifies an URL to the documentation of the format used in the RSS document.

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<docs>http://blogs.law.harvard.edu/tech/rss</docs>

  <item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

</item>

</channel>

</rss>

Try-It-Yourself Demos

The < docs> element

How to use the <docs> element.


RSS <enclosure> Element

Definition and Usage

The <enclosure> element allows a media-file to be included with an item.

Attributes

Attribute | Description
length | Required. Defines the length (in bytes) of the media file
type | Required. Defines the type of media file
url | Required. Defines the URL to the media file

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

  <enclosure url="http://www.w3schools.com/media/3d.wmv"

  length="78645" type="video/wmv" />

</item>

</channel>

</rss>

Try-It-Yourself Demos

< enclosure> element

How to use the <enclosure> element.


RSS <generator> Element

Definition and Usage

The <generator> element specifies the program used to generate the RSS feed.

Tips and Notes

Note: This is mostly used if the feed is created with an automatic feed generator.

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<generator>Notepad</generator>

  <item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

</item>

</channel>

</rss>

Try-It-Yourself Demos

The < generator> element

How to use the <generator> element.


RSS <guid> Element

Definition and Usage

The <guid> element defines a unique identifier for the item.

Tips and Notes

Note: Aggregators must view the guid as a string. There are no rules for the syntax. It's up to the creator of the RSS document, to establish the uniqueness of the string.

Tip: GUID = Globally Unique Identifier.

Attributes

Attribute | Description
isPermaLink | Optional. If set to true, the reader may assume that it is a permalink to the item (a url that points to the full item described by the <item> element). The default value is true. If set to false, the guid may not be assumed to be a url

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

  <guid>http://www.w3schools.com/rss/item0768</guid>

</item>

</channel>

</rss>

Try-It-Yourself Demos

The < guid> element

How to use the <guid> element.


RSS History

History of RSS

RSS has been released in many different versions.

The History of RSS

· 1997 - Dave Winer develops scriptingNews. RSS was born.

· 1999 - Netscape develops RSS 0.90 (which supported scriptingNews). This was simply XML with an RDF Header.

· 1999 - Dave Winer at UserLand develops scriptingNews 2.0b1 (This included Netscape's RSS 0.90 features)

· 1999 - Netscape develops RSS 0.91. In this version they removed the RDF header, but included most features from scriptingNews 2.0b1.

· 1999 - UserLand gets rid of scriptingNews and uses only RSS 0.91

· Netscape stops their RSS development

· 2000 - UserLand releases the official RSS 0.91 specification

· 2000 - A group lead by Rael Dornfest at O'Reilly develops RSS 1.0. This format uses RDF and namespaces. This version is often confused as being a new version of 0.91, but this is a completely new format with no ties to RSS 0.91

· 2000 - Dave Winer at UserLand develops RSS 0.92

· 2002 - Dave Winer develops RSS 2.0 after leaving Userland

· 2003 - The official RSS 2.0 specification is released

What are the Differences?

RSS 1.0 is the only version that was developed using the W3C RDF (Resource Description Framework) standard.

The idea behind RDF is to help create a Semantic Web. Read more about RDF and the Semantic Web here. However, this does not matter too much for ordinary users, but by using web standards it will be easier for persons and applications to exchange data.

What RSS Version Should I Use?

RSS 0.91 and RSS 2.0 are easier to understand than RSS 1.0. Our tutorial is based on RSS 2.0.

Is There an RSS Web Standard?

There is no official standard for RSS.

· About 50 % of all RSS feeds use RSS 0.91
· About 25 % use RSS 1.0
· The last 25 % is split between RSS 0.9x versions and RSS 2.0


RSS <image> Element

Definition and Usage

The <image> element allows an image to be displayed when aggregators present a feed.

Tips and Notes

Note: The image must be of type GIF, JPEG or PNG.

Child Elements of <image>

Tag | Description
<description> | Optional. Specifies the text in the HTML title attribute of the link around the image
<height> | Optional. Defines the height of the image. Default is 31. Maximum value is 400
<link> | Required. Defines the hyperlink to the website that offers the channel
<title> | Required. Defines the text to display if the image could not be shown
<url> | Required. Specifies the URL to the image
<width> | Optional. Defines the width of the image. Default is 88. Maximum value is 144

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<image>

  <url>http://www.w3schools.com/images/logo.gif</url>

  <title>W3Schools.com</title>

  <link>http://www.w3schools.com</link>

</image>

<item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

</item>

</channel>

</rss>

Try-It-Yourself Demos

The < image> element

How to use the <image> element.


RSS <item> Element

Each <item> element defines an article or "story" in the RSS feed.

The <item> Element

Look at the following RSS document:

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

</item>

</channel>

</rss>

As mentioned before, each <item> element defines an article or "story" in the RSS feed.

The <item> element has three required child elements:

· <title> - Defines the title of the item (e.g. RSS Tutorial)
· <link> - Defines the hyperlink to the item (e.g. http://www.w3schools.com/rss)
· <description> - Describes the item (e.g. New RSS tutorial on W3Schools)

Furthermore, there are several optional child elements of <item>. We will explain the most important ones below.

The <author> Element

The <author> child element is used to specify the e-mail address of the author of an item.

Note: To prevent spam e-mails, some developers do not include the <author> element.

The author of the item in the RSS document above could be:

<author>hege@refsnesdata.no</author>

The <comments> Element

The <comments> child element allows an item to link to comments about that item.

A comment of the item in the RSS document above could be:

<comments>http://www.w3schools.com/comments</comments>

The <enclosure> Element

The <enclosure> child element allows a media-file to be included with an item.

The <enclosure> element has three required attributes:

· url - Defines the URL to the media file
· length - Defines the length (in bytes) of the media file
· type - Defines the type of media file

A media-file included in the item in the RSS document above could be:

<enclosure url="http://www.w3schools.com/rss/rss.mp3

length="5000" type="audio/mpeg" />

RSS <item> Reference

Element | Description
 | Optional. Specifies the e-mail address to the author of the item
< category> | Optional. Defines one or more categories the item belongs to
< comments> | Optional. Allows an item to link to comments about that item
description> | Required. Describes the item
< enclosure> | Optional. Allows a media file to be included with the item
< guid> | Optional. Defines a unique identifier for the item
link> | Required. Defines the hyperlink to the item
< pubDate> | Optional. Defines the last-publication date for the item
< | Optional. Specifies a third-party source for the item
< title> | Required. Defines the title of the item


RSS <language> Element

Definition and Usage

The <language> element is used to specify the language used to write your RSS document.

Tips and Notes

Tip: The <language> element makes it possible for RSS aggregators to group sites based on language.

Tip: Look a the standard language-codes

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<language>en-us</language>

<item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

</item>

</channel>

</rss>

Try-It-Yourself Demos

The < language> element

How to use the <language> element.


RSS language Element

RSS <ttl> Element

Definition and Usage

The <ttl> (ttl=time to live) element specifies the number of minutes the feed can stay cached before refreshing it from the source.

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<ttl>60</ttl>

<item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

</item>

</channel>

</rss>

Try-It-Yourself Demos

The < ttl> element

How to use the <ttl> element.


RSS <lastBuildDate> Element

Definition and Usage

The <lastBuildDate> element defines the last-modified date of the content of the feed.

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<lastBuildDate>Thu, 27 Apr 2006</lastBuildDate>

<item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

</item>

</channel>

</rss>

Try-It-Yourself Demos

The < element

How to use the <lastBuildDate> element.


RSS <managingEditor> Element

Definition and Usage

The <managingEditor> tag is used to specify an e-mail address for the editor of the content of the feed.

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<managingEditor>editor@w3schools.com</managingEditor>

<item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

</item>

</channel>

</rss>

Try-It-Yourself Demos

managingEditor> element

How to use the <managingEditor> element.


RSS <pubDate> Element

Definition and Usage

The <pubDate> element defines the last publication date for the content in the RSS feed.

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<pubDate>Thu, 27 Apr 2006</pubDate>

<item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

</item>

</channel>

</rss>

Try-It-Yourself Demos

The <

How to use the <pubDate> element.


RSS <pubDate> Element

Definition and Usage

The <pubDate> element defines the last publication date for an item.

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

  <pubDate>Thu, 27 Apr 2006</pubDate>

</item>

</channel>

</rss>

Try-It-Yourself Demos

The < pubDate> element

How to use the <pubDate> element.


RSS Publish Your Feed

Having an RSS document is not useful if other people cannot reach it.

Get Your RSS Feed Up On The Web

Now it's time to get your RSS file up on the web. Here are the steps:

1. Name your RSS file. Notice that the file must have an .xml extension.

2. Validate your RSS file (a good validator can be found at http://www.feedvalidator.org).

3. Upload the RSS file to your web directory on your web server.

4. Copy the little orange rss or xml button to your web directory.

5. Put the little orange "RSS" or "XML" button on the page where you will offer RSS to the world (e.g. on your home page). Then add a link to the button that links to the RSS file. The code will look something like this:

<a href="www.w3schools.com/rss/myfirstrss.xml">

< img src="www.w3schools.com/rss/rss.gif" width="36" height="14">

</a>.

6. Submit your RSS feed to the RSS Feed Directories (you can Google or Yahoo for "RSS Feed Directories"). Note! The URL to your feed is not your home page, it is the URL to your feed, like "http://www.w3schools.com/rss/myfirstrss.xml". Here are some free RSS aggregation services:

· Syndic8: Over 300,000 feeds listed. Register your feed here.
· Daypop: Over 50,000 feeds. Register your feed here.
· Newsisfree: Over 18,000 feeds. Register your feed here.

7. Register your feed with the major search engines:

· Yahoo - http://publisher.yahoo.com/promote.php
· Google - http://www.google.com/intl/zh-cn/webmasters/addfeed.html
· MSN - http://rss.msn.com/publisher.armx

8. Update your feed - Now you have gotten RSS feed buttons from Google, Yahoo, and MSN. Now you must make sure that you update your content frequently and that your RSS feed is constantly available.

Can I Manage my RSS Feed Myself?

The best way to ensure your RSS feed works the way you want, is to manage it yourself.

However, this can be very time consuming, especially for pages with lot of updates.

An alternative is to use a third-party automated RSS.

Automated RSS

If you don't want to update your RSS feed yourself, there are tools and services that can do it automatically for you, such as:

· MyRSSCreator - offers an automated, reliable RSS service in just 10 minutes
· FeedFire - offers free creation and distribution of RSS feeds

For users who only need an RSS feed for their personal website, some of the most popular blog (Web Log) managers that offer built-in RSS services are:

·
·


RSS Readers

An RSS Reader is used to read RSS Feeds!

RSS readers are available for many different devices and OS.

RSS Readers

There are a lot of different RSS readers. Some work as web services, and some are limited to windows (or Mac, PDA or UNIX). Here are a few I have tried and liked:

· NewsGator Online - A free online RSS reader. Includes synchronization with Outlook, viewing TV content with Media Center Edition, and publication of blogs and headlines.

· RssReader - A free Windows-based RSS reader. Supports RSS versions 0.9x, 1.0 and 2.0 and Atom 0.1, 0.2 and 0.3.

· FeedDemon - A Windows-based RSS reader. Very easy to use and has a very orderly interface. However, this is not freeware!

· - An RSS reader plug-in for Outlook or Internet Explorer. The light-version for Internet Explorer is free.

Tip: The Mozilla Firefox browser has a built-in RSS Reader. If you go to a web site that offers RSS feeds, you will see the Firefox RSS icon [image] in the address bar. Click on the icon to view a list of the different feeds. Choose the feed you want to read.

I have an RSS Reader. Now what?

Click on the little rss or xml button next to the RSS feed you want to read. Copy The URL you get in the browser window and paste it in your RSS reader.


RSS <skipDays> Element

Definition and Usage

The <skipDays> element specifies the days where aggregators should skip updating the feed.

Tips and Notes

Tip: There can be up to seven <skipDays> elements.

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<skipDays>Saturday</skipDays>

<skipDays>Sunday</skipDays>

<item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

</item>

</channel>

</rss>

Try-It-Yourself Demos

The < skipDays> element

How to use the <skipDays> element.


RSS <skipHours> Element

Definition and Usage

The <skipHours> element specifies the hours where aggregators should skip updating the feed.

Tips and Notes

Tip: There can be up to 24 <skipHours> elements.

Tip: 0 represents midnight.

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<skipHours>0</skipHours>

<skipHours>1</skipHours>

<skipHours>2</skipHours>

<skipHours>3</skipHours>

<skipHours>4</skipHours>

<skipHours>5</skipHours>

<skipHours>6</skipHours>

<skipHours>7</skipHours>

<skipHours>17</skipHours>

<skipHours>18</skipHours>

<skipHours>19</skipHours>

<skipHours>20</skipHours>

<skipHours>21</skipHours>

<skipHours>22</skipHours>

<skipHours>23</skipHours>

<item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

</item>

</channel>

</rss>

Try-It-Yourself Demos

The < element

How to use the <skipHours> element.


RSS <source> Element

Definition and Usage

The <source> element Specifies a third-party source for the item.

Attributes

Attribute | Description
url | Required. Specifies the link to the source

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

  <source url="http://www.w3schools.com">W3Schools.com</source>

</item>

</channel>

</rss>

Try-It-Yourself Demos

The < source>

How to use the <source> element.


RSS Syntax

The syntax rules of RSS 2.0 are very simple and very strict. The rules are very easy to learn, and very easy to use.

How RSS Works

RSS is used to share content between websites.

With RSS, you register your content with companies called aggregators.

So, to be a part of it: First, create an RSS document and save it with an .xml extension. Then, upload the file to your website. Next, register with an RSS aggregator. Each day the aggregator searches the registered websites for RSS documents, verifies the link, and displays information about the feed so clients can link to documents that interests them.

Tip: Read our RSS Publishing chapter to view free RSS aggregation services.

An Example RSS document

RSS documents use a self-describing and simple syntax.

Let's look at a simple RSS document:

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

</item>

<item>

  <title>XML Tutorial</title>

  <link>http://www.w3schools.com/xml</link>

  <description>New XML tutorial on W3Schools</description>

</item>

</channel>

</rss>

The first line in the document - the XML declaration - defines the XML version and the character encoding used in the document. In this case the document conforms to the 1.0 specification of XML and uses the ISO-8859-1 (Latin-1/West European) character set.

The next line is the RSS declaration which identifies that this is an RSS document (in this case, RSS version 2.0).

The next line contains the <channel> element. This element is used to describe the RSS feed.

The <channel> element has three required child elements:

· <title> - Defines the title of the channel (e.g. W3Schools Home Page)
· <link> - Defines the hyperlink to the channel (e.g. http://www.w3schools.com)
· <description> - Describes the channel (e.g. Free web building tutorials)

Each <channel> element can have one ore more <item> elements.

Each <item> element defines an article or "story" in the RSS feed.

The <item> element has three required child elements:

· <title> - Defines the title of the item (e.g. RSS Tutorial)
· <link> - Defines the hyperlink to the item (e.g. http://www.w3schools.com/rss)
· <description> - Describes the item (e.g. New RSS tutorial on W3Schools)

Finally, the two last lines close the <channel> and <rss> elements.

Comments in RSS

The syntax for writing comments in RSS is similar to that of HTML:

<!-- This is an RSS comment -->

RSS is Written in XML

Because RSS is XML, keep in mind that:

· All elements must have a closing tag
· Elements are case sensitive
· Elements must be properly nested
· Attribute values must always be quoted


RSS <textInput> Element

Definition and Usage

The <textinput> tag specifies a text input field that should be displayed with the feed.

Tips and Notes

Note: Most aggregators ignores the <textInput> element.

Child Elements of <textInput>

Tag | Description
<description> | Required. Defines a description of the text input area
<name> | Required. Defines the name of the text object in the text input area
<link> | Required. Defines the URL of the CGI script that processes the text input
<title> | Required. Defines the label of the submit button in the text input area

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<textinput>

  <description>Search Google</description>

  <title>Search</title>

  <link>http://www.google.no/search?</link>

  <name>q</name>

</textinput>

<item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

</item>

</channel>

</rss>

Try-It-Yourself Demos

The < textInput> element

How to use the <textInput> element.


RSS <title>, <link>, and <description> Elements

Definition and Usage

The <channel> element describes the RSS feed, and has three required child elements:

· <title> - Defines the title of the channel (e.g. W3Schools Home Page)
· <link> - Defines the hyperlink to the channel (e.g. http://www.w3schools.com)
· <description> - Describes the channel (e.g. Free web building tutorials)

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

</channel>

</rss>

Try-It-Yourself Demos

The < title> link> , and < description> elements

How to use the <title>, <link>, and <description> elements.


RSS <title>, <link>, and <description> Elements

Definition and Usage

Each <item> element defines an article or "story" in the RSS feed.

The <item> element has three required child elements:

· <title> - Defines the title of the item (e.g. RSS Tutorial)
· <link> - Defines the hyperlink to the item (e.g. http://www.w3schools.com/rss)
· <description> - Describes the item (e.g. New RSS tutorial on W3Schools)

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>

<rss version="2.0">

<channel>

<title>W3Schools Home Page</title>

<link>http://www.w3schools.com</link>

<description>Free web building tutorials</description>

<item>

  <title>RSS Tutorial</title>

  <link>http://www.w3schools.com/rss</link>

  <description>New RSS tutorial on W3Schools</description>

</item>

<item>

  <title>XML Tutorial</title>

  <link>http://www.w3schools.com/xml</link>

  <description>New XML tutorial on W3Schools</description>

</item>

</channel>

</rss>

Try-It-Yourself Demos

The < , < link> , and <

How to use the <title>, <link>, and <description> elements.


RSS Tutorial

easy

Choose your news

With RSS you can choose to view the news you want, the news that interest you and are relevant to your work.

spam

Remove unwanted information

With RSS you can (finally) separate wanted information from unwanted information (spam)!

traffic

Increase your site traffic

With RSS you can create your own news channel, and publish it to the Internet!

Start learning RSS now!

Table of Contents

RSS Introduction - What RSS is, and how it can be used.

RSS History - How it all started. The history of RSS.

- How to make your first RSS document.

RSS < channel> - Overview of the <channel> element. Includes full reference with Try-it-yourself examples.

RSS < item> - Overview of the <item> element. Includes full reference with Try-it-yourself examples.

RSS Publishing - How to publish your RSS document.

RSS Readers - How to read other site's RSS documents.


TryRSS Editor v1.0

[TTextAreaFormControlObj]

Edit the text above, and click on the button to see the result.


TryRSS Editor v1.0

Your browser does not support inline frames or is currently configured not to display inline frames.

[TTextAreaFormControlObj]

Edit the text above, and click on the button to see the result.


tryrss_view3752.html

W3Schools Home Page

Free web building tutorials

RSS Version: 2.0

RSS Tutorial: New RSS tutorial on W3Schools


tryrss_view4043.html

W3Schools Home Page

Free web building tutorials

RSS Version: 2.0

Mail Editor: editor@w3schools.com

RSS Tutorial: New RSS tutorial on W3Schools


tryrss_view509b.html

Free web building tutorials

RSS Version: 2.0

RSS Tutorial: New RSS tutorial on W3Schools


tryrss_view5804.html

W3Schools Home Page

Free web building tutorials

RSS Version: 2.0

RSS Tutorial: New RSS tutorial on W3Schools

Published: Thu, 27 Apr 2006


tryrss_view597b.html

W3Schools Home Page

Free web building tutorials

RSS Version: 2.0

Skip Hours: 0/1/2/3/4/5/6/7/17/18/19/20/21/22/23

RSS Tutorial: New RSS tutorial on W3Schools


tryrss_view59e8.html

W3Schools Home Page

Free web building tutorials

RSS Version: 2.0

Time to live: 60

RSS Tutorial: New RSS tutorial on W3Schools


tryrss_view712d.html

W3Schools Home Page

Free web building tutorials

Category: IT/Internet/Web development

RSS Version: 2.0

RSS Tutorial: New RSS tutorial on W3Schools

Category: News/Tutorial


tryrss_view7861.html

Free web building tutorials

RSS Version: 2.0

Mail Webmaster: webmaster@w3schools.com

RSS Tutorial: New RSS tutorial on W3Schools


tryrss_view78f7.html

W3Schools Home Page

Free web building tutorials

RSS Version: 2.0

Feed Updated: Thu, 27 Apr 2006

RSS Tutorial: New RSS tutorial on W3Schools


tryrss_view92db.html

W3Schools Home Page

Free web building tutorials

RSS Version: 2.0

RSS Tutorial: New RSS tutorial on W3Schools

XML Tutorial: New XML tutorial on W3Schools


tryrss_view94e3.html

W3Schools Home Page

Free web building tutorials

Copyright: 2006 Refsnes Data as. All rights reserved.

RSS Version: 2.0

RSS Tutorial: New RSS tutorial on W3Schools


tryrss_viewa512.html

W3Schools Home Page

Free web building tutorials

RSS Version: 2.0

Created with: Notepad

RSS Tutorial: New RSS tutorial on W3Schools


tryrss_viewa957.html

Free web building tutorials

RSS Version: 2.0

RSS Tutorial: New RSS tutorial on W3Schools

Source: W3Schools.com


tryrss_viewada5.html

W3Schools Home Page

Free web building tutorials

RSS Version: 2.0


tryrss_viewb1b7.html

W3Schools Home Page

Free web building tutorials

RSS Version: 2.0

RSS Tutorial: New RSS tutorial on W3Schools

Author: author@w3schools.com


tryrss_viewb7cc.html

W3Schools Home Page

Free web building tutorials

RSS Version: 2.0

RSS Tutorial: New RSS tutorial on W3Schools


tryrss_viewcb63.html

W3Schools Home Page

Free web building tutorials

RSS Version: 2.0

RSS Tutorial: New RSS tutorial on W3Schools

Identifier: http://www.w3schools.com/rss/item0768


tryrss_viewd1ca.html

Free web building tutorials

RSS Version: 2.0

RSS Tutorial: New RSS tutorial on W3Schools


tryrss_viewd678.html

W3Schools Home Page

Free web building tutorials

RSS Version: 2.0

Language: en-us

RSS Tutorial: New RSS tutorial on W3Schools


tryrss_viewe3cd.html

W3Schools Home Page

Free web building tutorials

RSS Version: 2.0

[TEditFormControlObj]

RSS Tutorial: New RSS tutorial on W3Schools


tryrss_viewec34.html

W3Schools Home Page

Free web building tutorials

RSS Version: 2.0

Skip Days: Saturday/Sunday

RSS Tutorial: New RSS tutorial on W3Schools


tryrss_viewf429.html

W3Schools Home Page

Free web building tutorials

RSS Version: 2.0

Channel Updated: Thu, 27 Apr 2006

RSS Tutorial: New RSS tutorial on W3Schools


Introduction to XML Schemas

Introduction to XML Schema

XML Schema is an XML-based alternative to DTD.

An XML schema describes the structure of an XML document.

The XML Schema language is also referred to as XML Schema Definition (XSD).

What You Should Already Know

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

· HTML / XHTML
· XML and XML Namespaces
· A basic understanding of DTD

If you want to study these subjects first, find the tutorials on our Home page.

What is an XML Schema?

The purpose of an XML Schema is to define the legal building blocks of an XML document, just like a DTD.

An XML Schema:

· defines elements that can appear in a document
· defines attributes that can appear in a document
· defines which elements are child elements
· defines the order of child elements
· defines the number of child elements
· defines whether an element is empty or can include text
· defines data types for elements and attributes
· defines default and fixed values for elements and attributes

XML Schemas are the Successors of DTDs

We think that very soon XML Schemas will be used in most Web applications as a replacement for DTDs. Here are some reasons:

· XML Schemas are extensible to future additions
· XML Schemas are richer and more powerful than DTDs
· XML Schemas are written in XML
· XML Schemas support data types
· XML Schemas support namespaces

XML Schema is a W3C Standard

XML Schema became a W3C Recommendation 02. May 2001.

You can read more about the XML Schema standard in our .


Why Use XML Schemas?

XML Schemas are much more powerful than DTDs.

XML Schemas Support Data Types

One of the greatest strength of XML Schemas is the support for data types.

With support for data types:

· It is easier to describe allowable document content
· It is easier to validate the correctness of data
· It is easier to work with data from a database
· It is easier to define data facets (restrictions on data)
· It is easier to define data patterns (data formats)
· It is easier to convert data between different data types

XML Schemas use XML Syntax

Another great strength about XML Schemas is that they are written in XML.

Some benefits of that XML Schemas are written in XML:

· You don't have to learn a new language
· You can use your XML editor to edit your Schema files
· You can use your XML parser to parse your Schema files
· You can manipulate your Schema with the XML DOM
· You can transform your Schema with XSLT

XML Schemas Secure Data Communication

When sending data from a sender to a receiver, it is essential that both parts have the same "expectations" about the content.

With XML Schemas, the sender can describe the data in a way that the receiver will understand.

A date like: "03-11-2004" will, in some countries, be interpreted as 3.November and in other countries as 11.March.

However, an XML element with a data type like this:

<date type="date">2004-03-11</date>

ensures a mutual understanding of the content, because the XML data type "date" requires the format "YYYY-MM-DD".

XML Schemas are Extensible

XML Schemas are extensible, because they are written in XML.

With an extensible Schema definition you can:

· Reuse your Schema in other Schemas
· Create your own data types derived from the standard types
· Reference multiple schemas in the same document

Well-Formed is not Enough

A well-formed XML document is a document that conforms to the XML syntax rules, like:

· it must begin with the XML declaration
· it must have one unique root element
· start-tags must have matching end-tags
· elements are case sensitive
· all elements must be closed
· all elements must be properly nested
· all attribute values must be quoted
· entities must be used for special characters

Even if documents are well-formed they can still contain errors, and those errors can have serious consequences.

Think of the following situation: you order 5 gross of laser printers, instead of 5 laser printers. With XML Schemas, most of these errors can be caught by your validating software.


XML Schema all Element

Definition and Usage

The all element specifies that the child elements can appear in any order and that each child element can occur zero or one time.

Element Information

· Parent elements: group, complexType, restriction (both simpleContent and complexContent), extension (both simpleContent and complexContent)

Syntax

<all

id=ID

maxOccurs=1

minOccurs=0|1

any attributes

>

(annotation?,element*)

</all>

(The ? sign declares that the element can occur zero or one time, and the * sign declares that the element can occur zero or more times inside the all element)

Attribute | Description
id | Optional. Specifies a unique ID for the element
maxOccurs | Optional. Specifies the maximum number of times the element can occur. The value must be 1.
minOccurs | Optional. Specifies the minimum number of times the element can occur. The value can be 0 or 1. Default value is 1
any attributes | Optional. Specifies any other attributes with non-schema namespace

Example 1

<xs:element name="person">

<xs:complexType>

  <xs:all>

    <xs:element name="firstname" type="xs:string"/>

    <xs:element name="lastname" type="xs:string"/>

  </xs:all>

</xs:complexType>

</xs:element>

The example above indicates that the "firstname" and the "lastname" elements can appear in any order but both elements MUST occur once and only once!

Example 2

<xs:element name="person">

<xs:complexType>

  <xs:all minOccurs="0">

    <xs:element name="firstname" type="xs:string"/>

    <xs:element name="lastname" type="xs:string"/>

  </xs:all>

</xs:complexType>

</xs:element>

The example above indicates that the "firstname" and the "lastname" elements can appear in any order and each element CAN appear zero or one time!


XML Schema annotation Element

Definition and Usage

The annotation element is a top level element that specifies schema comments. The comments serve as inline documentation.

Element Information

· Parent elements: Any element

Syntax

<annotation

id=ID

any attributes

>

(appinfo|documentation)*

</annotation>

(The * sign declares that the element can occur zero or more times inside the annotation element)

Attribute | Description
id | Optional. Specifies a unique ID for the element
any attributes | Optional. Specifies any other attributes with non-schema namespace

Example 1

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:annotation>

<xs:appInfo>W3Schools Note</xs:appInfo>

<xs:documentation xml:lang="en">

This Schema defines a W3Schools note!

</xs:documentation>

</xs:annotation>

.

.

.

</xs:schema>


XML Schema any Element

Definition and Usage

The any element enables the author to extend the XML document with elements not specified by the schema.

Element Information

· Parent elements: choice, sequence

Syntax

<any

id=ID

maxOccurs=nonNegativeInteger|unbounded

minOccurs=nonNegativeInteger

namespace=namespace

processContents=lax|skip|strict

any attributes

>

(annotation?)

</any>

(The ? sign declares that the element can occur zero or one time inside the any element)

Attribute

Description

id

Optional. Specifies a unique ID for the element

maxOccurs

Optional. Specifies the maximum number of times the any element can occur in the parent element. The value can be any number >= 0, or if you want to set no limit on the maximum number, use the value "unbounded". Default value is 1

minOccurs

Optional. Specifies the minimum number of times the any element can occur in the parent element. The value can be any number >= 0. Default value is 1

namespace

Optional. Specifies the namespaces containing the elements that can be used. Can be set to one of the following:

· ##any - elements from any namespace is allowed (this is default)
· ##other - elements from any namespace that is not the namespace of the parent element can be present
· ##local - elements must come from no namespace
· ##targetNamespace - elements from the namespace of the parent element can be present
· List of {URI references of namespaces, ##targetNamespace, ##local} - elements from a space-delimited list of the namespaces can be present

processContents

Optional. Specifies how the XML processor should handle validation against the elements specified by this any element. Can be set to one of the following:

· strict - the XML processor must obtain the schema for the required namespaces and validate the elements (this is default)
· lax - same as strict but; if the schema cannot be obtained, no errors will occur
· skip - The XML processor does not attempt to validate any elements from the specified namespaces

any attributes

Optional. Specifies any other attributes with non-schema namespace

Example 1

The following example shows a declaration for an element called "person". By using the <any> element the author can extend (after <lastname>) the content of "person" with any element:

<xs:element name="person">

<xs:complexType>

  <xs:sequence>

    <xs:element name="firstname" type="xs:string"/>

    <xs:element name="lastname" type="xs:string"/>

    <xs:any minOccurs="0"/>

  </xs:sequence>

</xs:complexType>

</xs:element>


XML Schema any Element

XSD The <any> Element

The <any> element enables us to extend the XML document with elements not specified by the schema!

The <any> Element

The <any> element enables us to extend the XML document with elements not specified by the schema.

The following example is a fragment from an XML schema called "family.xsd". It shows a declaration for the "person" element. By using the <any> element we can extend (after <lastname>) the content of "person" with any element:

<xs:element name="person">

<xs:complexType>

  <xs:sequence>

    <xs:element name="firstname" type="xs:string"/>

    <xs:element name="lastname" type="xs:string"/>

    <xs:any minOccurs="0"/>

  </xs:sequence>

</xs:complexType>

</xs:element>

Now we want to extend the "person" element with a "children" element. In this case we can do so, even if the author of the schema above never declared any "children" element.

Look at this schema file, called "children.xsd":

<?xml version="1.0" encoding="ISO-8859-1"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"

targetNamespace="http://www.w3schools.com"

xmlns="http://www.w3schools.com"

elementFormDefault="qualified">

<xs:element name="children">

<xs:complexType>

  <xs:sequence>

    <xs:element name="childname" type="xs:string"

    maxOccurs="unbounded"/>

  </xs:sequence>

</xs:complexType>

</xs:element>

</xs:schema>

The XML file below (called "Myfamily.xml"), uses components from two different schemas; "family.xsd" and "children.xsd":

<?xml version="1.0" encoding="ISO-8859-1"?>

<persons xmlns="http://www.microsoft.com"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:SchemaLocation="http://www.microsoft.com family.xsd

http://www.w3schools.com children.xsd">

<person>

<firstname>Hege</firstname>

<lastname>Refsnes</lastname>

<children>

<childname>Cecilie</childname>

</children>

</person>

<person>

<firstname>Stale</firstname>

<lastname>Refsnes</lastname>

</person>

</persons>

The XML file above is valid because the schema "family.xsd" allows us to extend the "person" element with an optional element after the "lastname" element.

The <any> and <anyAttribute> elements are used to make EXTENSIBLE documents! They allow documents to contain additional elements that are not declared in the main XML schema.


XML Schema anyAttribute Element

Definition and Usage

The anyAttribute element enables the author to extend the XML document with attributes not specified by the schema.

Element Information

· Parent elements: complexType, restriction (both simpleContent and complexContent), extension (both simpleContent and complexContent), attributeGroup

Syntax

<anyAttribute

id=ID

namespace=namespace

processContents=lax|skip|strict

any attributes

>

(annotation?)

</anyAttribute>

(The ? sign declares that the element can occur zero or one time inside the anyAttribute element)

Attribute

Description

id

Optional. Specifies a unique ID for the element

namespace

Optional. Specifies the namespaces containing the attributes that can be used. Can be set to one of the following:

· ##any - attributes from any namespace is allowed (this is default)
· ##other - attributes from any namespace that is not the namespace of the parent element can be present
· ##local - attributes must come from no namespace
· ##targetNamespace - attributes from the namespace of the parent element can be present
· List of {URI references of namespaces, ##targetNamespace, ##local} - attributes from a space-delimited list of the namespaces can be present

processContents

Optional. Specifies how the XML processor should handle validation against the elements specified by this any element. Can be set to one of the following:

· strict - the XML processor must obtain the schema for the required namespaces and validate the elements (this is default)
· lax - same as strict but; if the schema cannot be obtained, no errors will occur
· skip - The XML processor does not attempt to validate any elements from the specified namespaces

any attributes

Optional. Specifies any other attributes with non-schema namespace

Example 1

The following example shows a declaration for an element called "person". By using the <anyAttribute> element the author can add any number of attributes to the "person" element:

<xs:element name="person">

<xs:complexType>

  <xs:sequence>

    <xs:element name="firstname" type="xs:string"/>

    <xs:element name="lastname" type="xs:string"/>

  </xs:sequence>

  <xs:anyAttribute/>

</xs:complexType>

</xs:element>


XML Schema anyAttribute Element

XSD The <anyAttribute> Element

The <anyAttribute> element enables us to extend the XML document with attributes not specified by the schema!

The <anyAttribute> Element

The <anyAttribute> element enables us to extend the XML document with attributes not specified by the schema.

The following example is a fragment from an XML schema called "family.xsd". It shows a declaration for the "person" element. By using the <anyAttribute> element we can add any number of attributes to the "person" element:

<xs:element name="person">

<xs:complexType>

  <xs:sequence>

    <xs:element name="firstname" type="xs:string"/>

    <xs:element name="lastname" type="xs:string"/>

  </xs:sequence>

  <xs:anyAttribute/>

</xs:complexType>

</xs:element>

Now we want to extend the "person" element with a "gender" attribute. In this case we can do so, even if the author of the schema above never declared any "gender" attribute.

Look at this schema file, called "attribute.xsd":

<?xml version="1.0" encoding="ISO-8859-1"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"

targetNamespace="http://www.w3schools.com"

xmlns="http://www.w3schools.com"

elementFormDefault="qualified">

<xs:attribute name="gender">

<xs:simpleType>

  <xs:restriction base="xs:string">

    <xs:pattern value="male|female"/>

  </xs:restriction>

</xs:simpleType>

</xs:attribute>

</xs:schema>

The XML file below (called "Myfamily.xml"), uses components from two different schemas; "family.xsd" and "attribute.xsd":

<?xml version="1.0" encoding="ISO-8859-1"?>

<persons xmlns="http://www.microsoft.com"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:SchemaLocation="http://www.microsoft.com family.xsd

http://www.w3schools.com attribute.xsd">

<person gender="female">

<firstname>Hege</firstname>

<lastname>Refsnes</lastname>

</person>

<person gender="male">

<firstname>Stale</firstname>

<lastname>Refsnes</lastname>

</person>

</persons>

The XML file above is valid because the schema "family.xsd" allows us to add an attribute to the "person" element.

The <any> and <anyAttribute> elements are used to make EXTENSIBLE documents! They allow documents to contain additional elements that are not declared in the main XML schema.


XML Schema appInfo Element

Definition and Usage

The appInfo element specifies information to be used by the application. This element must go within an annotation element.

Element Information

· Parent elements: annotation

Syntax

<appInfo

source=anyURL

>

Any well-formed XML content

</appInfo>

Attribute | Description
source | Optional. A URI reference that specifies the source of the application information

Example 1

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:annotation>

<xs:appInfo>W3Schools Note</xs:appInfo>

<xs:documentation xml:lang="en">

This Schema defines a W3Schools note!

</xs:documentation>

</xs:annotation>

.

.

.

</xs:schema>


XML Schema attribute Element

Definition and Usage

The attribute element defines an attribute.

Element Information

· Parent elements: attributeGroup, schema, complexType, restriction (both simpleContent and complexContent), extension (both simpleContent and complexContent)

Syntax

<attribute

default=string

fixed=string

form=qualified|unqualified

id=ID

name=NCName

ref=QName

type=QName

use=optional|prohibited|required

any attributes

>

(annotation?,(simpleType?))

</attribute>

(The ? sign declares that the element can occur zero or one time inside the attribute element)

Attribute

Description

default

Optional. Specifies a default value for the attribute. Default and fixed attributes cannot both be present

fixed

Optional. Specifies a fixed value for the attribute. Default and fixed attributes cannot both be present

form

Optional. Specifies the form for the attribute. The default value is the value of the attributeFormDefault attribute of the element containing the attribute. Can be set to one of the following:

· "qualified" - indicates that this attribute must be qualified with the namespace prefix and the no-colon-name (NCName) of the attribute
· unqualified - indicates that this attribute is not required to be qualified with the namespace prefix and is matched against the (NCName) of the attribute

id

Optional. Specifies a unique ID for the element

name

Optional. Specifies the name of the attribute. Name and ref attributes cannot both be present

ref

Optional. Specifies a reference to a named attribute. Name and ref attributes cannot both be present. If ref is present, simpleType element, form, and type cannot be present

type

Optional. Specifies a built-in data type or a simple type. The type attribute can only be present when the content does not contain a simpleType element

use

Optional. Specifies how the attribute is used. Can be one of the following values:

· optional - the attribute is optional (this is default)
· prohibited - the attribute cannot be used
· required - the attribute is required

any attributes

Optional. Specifies any other attributes with non-schema namespace

Example 1

<xs:attribute name="code">

<xs:simpleType>

<xs:restriction base="xs:string">

  <xs:pattern value="[A-Z][A-Z]"/>

</xs:restriction>

</xs:simpleType>

</xs:attribute>

The example above indicates that the "code" attribute has a restriction. The only acceptable value is two of the uppercase letters from a to z.

Example 2

To declare an attribute using an existing attribute definition within a complex type, use the ref attribute:

<xs:attribute name="code">

<xs:simpleType>

  <xs:restriction base="xs:string">

    <xs:pattern value="[A-Z][A-Z]"/>

  </xs:restriction>

</xs:simpleType>

</xs:attribute>

<xs:complexType name="someComplexType">

<xs:attribute ref="code"/>

</xs:complexType>

Example 3

Attributes can have either a default value OR a fixed value specified. A default value is automatically assigned to the attribute when no other value is specified. In the following example the default value is "EN":

<xs:attribute name="lang" type="xs:string" default="EN"/>

A fixed value is also automatically assigned to the attribute when no other value is specified. But unlike default values; if you specify another value than the fixed, the document is considered invalid. In the following example the fixed value is "EN":

<xs:attribute name="lang" type="xs:string" fixed="EN"/>

Example 4

All attributes are optional by default. To explicitly specify that the attribute is optional, use the "use" attribute:

<xs:attribute name="lang" type="xs:string" use="optional"/>

To make an attribute required:

<xs:attribute name="lang" type="xs:string" use="required"/>


XML Schema attributeGroup Element

Definition and Usage

The attributeGroup element is used to group a set of attribute declarations so that they can be incorporated as a group into complex type definitions.

Element Information

· Parent elements: attributeGroup, complexType, schema, restriction (both simpleContent and complexContent), extension (both simpleContent and complexContent)

Syntax

<attributeGroup

id=ID

name=NCName

ref=QName

any attributes

>

(annotation?),((attribute|attributeGroup)*,anyAttribute?))

</attributeGroup>

(The ? sign declares that the element can occur zero or one time, and the * sign declares that the element can occur zero or more times inside the attributeGroup element)

Attribute | Description
id | Optional. Specifies a unique ID for the element
name | Optional. Specifies the name of the attribute group. Name and ref attributes cannot both be present
ref | Optional. Specifies a reference to a named attribute group. Name and ref attributes cannot both be present
any attributes | Optional. Specifies any other attributes with non-schema namespace

Example 1

<xs:attributeGroup name="personattr">

<xs:attribute name="attr1" type="string"/>

<xs:attribute name="attr2" type="integer"/>

</xs:attributeGroup>

<xs:complexType name="person">

<xs:attributeGroup ref="personattr"/>

</xs:complexType>

The example above defines an attribute group named "personattr" which is used in a complex type named "person".


XML Schema Attributes

XSD Attributes

All attributes are declared as simple types.

What is an Attribute?

Simple elements cannot have attributes. If an element has attributes, it is considered to be of a complex type. But the attribute itself is always declared as a simple type.

How to Define an Attribute?

The syntax for defining an attribute is:

<xs:attribute name="xxx" type="yyy"/>

where xxx is the name of the attribute and yyy specifies the data type of the attribute.

XML Schema has a lot of built-in data types. The most common types are:

· xs:string
· xs:decimal
· xs:integer
· xs:boolean
· xs:date
· xs:time

Example

Here is an XML element with an attribute:

<lastname lang="EN">Smith</lastname>

And here is the corresponding attribute definition:

<xs:attribute name="lang" type="xs:string"/>

Default and Fixed Values for Attributes

Attributes may have a default value OR a fixed value specified.

A default value is automatically assigned to the attribute when no other value is specified.

In the following example the default value is "EN":

<xs:attribute name="lang" type="xs:string" default="EN"/>

A fixed value is also automatically assigned to the attribute, and you cannot specify another value.

In the following example the fixed value is "EN":

<xs:attribute name="lang" type="xs:string" fixed="EN"/>

Optional and Required Attributes

Attributes are optional by default. To specify that the attribute is required, use the "use" attribute:

<xs:attribute name="lang" type="xs:string" use="required"/>

Restrictions on Content

When an XML element or attribute has a data type defined, it puts restrictions on the element's or attribute's content.

If an XML element is of type "xs:date" and contains a string like "Hello World", the element will not validate.

With XML Schemas, you can also add your own restrictions to your XML elements and attributes. These restrictions are called facets. You can read more about facets in the next chapter.


XML Schema choice Element

Definition and Usage

XML Schema choice element allows only one of the elements contained in the <choice> declaration to be present within the containing element.

Element Information

· Parent elements: group, choice, sequence, complexType, restriction (both simpleContent and complexContent), extension (both simpleContent and complexContent)

Syntax

<choice

id=ID

maxOccurs=nonNegativeInteger|unbounded

minOccurs=nonNegativeInteger

any attributes

>

(annotation?,(element|group|choice|sequence|any)*)

</choice>

(The ? sign declares that the element can occur zero or one time, and the * sign declares that the element can occur zero or more times inside the choice element)

Attribute | Description
id | Optional. Specifies a unique ID for the element
maxOccurs | Optional. Specifies the maximum number of times the choice element can occur in the parent element. The value can be any number >= 0, or if you want to set no limit on the maximum number, use the value "unbounded". Default value is 1
minOccurs | Optional. Specifies the minimum number of times the choice element can occur in the parent the element. The value can be any number >= 0. Default value is 1
any attributes | Optional. Specifies any other attributes with non-schema namespace

Example 1

<xs:element name="person">

<xs:complexType>

  <xs:choice>

    <xs:element name="employee" type="employee"/>

    <xs:element name="member" type="member"/>

  </xs:choice>

</xs:complexType>

</xs:element>

The example above defines an element named "person" which must contain either a "employee" element or a "member" element.


XML Schema Complex Elements

XSD Complex Elements

A complex element contains other elements and/or attributes.

What is a Complex Element?

A complex element is an XML element that contains other elements and/or attributes.

There are four kinds of complex elements:

· empty elements
· elements that contain only other elements
· elements that contain only text
· elements that contain both other elements and text

Note: Each of these elements may contain attributes as well!

Examples of Complex Elements

A complex XML element, "product", which is empty:

<product pid="1345"/>

A complex XML element, "employee", which contains only other elements:

<employee>

<firstname>John</firstname>

<lastname>Smith</lastname>

</employee>

A complex XML element, "food", which contains only text:

<food type="dessert">Ice cream</food>

A complex XML element, "description", which contains both elements and text:

<description>

It happened on <date lang="norwegian">03.03.99</date> ....

</description>

How to Define a Complex Element

Look at this complex XML element, "employee", which contains only other elements:

<employee>

<firstname>John</firstname>

<lastname>Smith</lastname>

</employee>

We can define a complex element in an XML Schema two different ways:

1. The "employee" element can be declared directly by naming the element, like this:

<xs:element name="employee">

<xs:complexType>

  <xs:sequence>

    <xs:element name="firstname" type="xs:string"/>

    <xs:element name="lastname" type="xs:string"/>

  </xs:sequence>

</xs:complexType>

</xs:element>

If you use the method described above, only the "employee" element can use the specified complex type. Note that the child elements, "firstname" and "lastname", are surrounded by the <sequence> indicator. This means that the child elements must appear in the same order as they are declared. You will learn more about indicators in the XSD Indicators chapter.

2. The "employee" element can have a type attribute that refers to the name of the complex type to use:

<xs:element name="employee" type="personinfo"/>

<xs:complexType name="personinfo">

<xs:sequence>

  <xs:element name="firstname" type="xs:string"/>

  <xs:element name="lastname" type="xs:string"/>

</xs:sequence>

</xs:complexType>

If you use the method described above, several elements can refer to the same complex type, like this:

<xs:element name="employee" type="personinfo"/>

<xs:element name="student" type="personinfo"/>

<xs:element name="member" type="personinfo"/>

<xs:complexType name="personinfo">

<xs:sequence>

  <xs:element name="firstname" type="xs:string"/>

  <xs:element name="lastname" type="xs:string"/>

</xs:sequence>

</xs:complexType>

You can also base a complex element on an existing complex element and add some elements, like this:

<xs:element name="employee" type="fullpersoninfo"/>

<xs:complexType name="personinfo">

<xs:sequence>

  <xs:element name="firstname" type="xs:string"/>

  <xs:element name="lastname" type="xs:string"/>

</xs:sequence>

</xs:complexType>

<xs:complexType name="fullpersoninfo">

<xs:complexContent>

  <xs:extension base="personinfo">

    <xs:sequence>

      <xs:element name="address" type="xs:string"/>

      <xs:element name="city" type="xs:string"/>

      <xs:element name="country" type="xs:string"/>

    </xs:sequence>

  </xs:extension>

</xs:complexContent>

</xs:complexType>


XML Schema Complex Type - Elements Only

XSD Complex Type - Elements Only

An "elements-only" complex type contains an element that contains only other elements.

Complex Types Containing Elements Only

An XML element, "person", that contains only other elements:

<person>

<firstname>John</firstname>

<lastname>Smith</lastname>

</person>

You can define the "person" element in a schema, like this:

<xs:element name="person">

<xs:complexType>

  <xs:sequence>

    <xs:element name="firstname" type="xs:string"/>

    <xs:element name="lastname" type="xs:string"/>

  </xs:sequence>

</xs:complexType>

</xs:element>

Notice the <xs:sequence> tag. It means that the elements defined ("firstname" and "lastname") must appear in that order inside a "person" element.

Or you can give the complexType element a name, and let the "person" element have a type attribute that refers to the name of the complexType (if you use this method, several elements can refer to the same complex type):

<xs:element name="person" type="persontype"/>

<xs:complexType name="persontype">

<xs:sequence>

  <xs:element name="firstname" type="xs:string"/>

  <xs:element name="lastname" type="xs:string"/>

</xs:sequence>

</xs:complexType>


XML Schema Complex Type - Empty Elements

XSD Complex Empty Elements

An empty complex element cannot have contents, only attributes.

Complex Empty Elements

An empty XML element:

<product prodid="1345" />

The "product" element above has no content at all. To define a type with no content, we must define a type that allows only elements in its content, but we do not actually declare any elements, like this:

<xs:element name="product">

<xs:complexType>

  <xs:complexContent>

    <xs:restriction base="xs:integer">

      <xs:attribute name="prodid" type="xs:positiveInteger"/>

    </xs:restriction>

  </xs:complexContent>

</xs:complexType>

</xs:element>

In the example above, we define a complex type with a complex content. The complexContent element signals that we intend to restrict or extend the content model of a complex type, and the restriction of integer declares one attribute but does not introduce any element content.

However, it is possible to declare the "product" element more compactly, like this:

<xs:element name="product">

<xs:complexType>

  <xs:attribute name="prodid" type="xs:positiveInteger"/>

</xs:complexType>

</xs:element>

Or you can give the complexType element a name, and let the "product" element have a type attribute that refers to the name of the complexType (if you use this method, several elements can refer to the same complex type):

<xs:element name="product" type="prodtype"/>

<xs:complexType name="prodtype">

<xs:attribute name="prodid" type="xs:positiveInteger"/>

</xs:complexType>


XML Schema Complex Type - Text Elements

XSD Complex Text-Only Elements

A complex text-only element can contain text and attributes.

Complex Text-Only Elements

This type contains only simple content (text and attributes), therefore we add a simpleContent element around the content. When using simple content, you must define an extension OR a restriction within the simpleContent element, like this:

<xs:element name="somename">

<xs:complexType>

  <xs:simpleContent>

    <xs:extension base="basetype">

      ....

      ....

    </xs:extension>

  </xs:simpleContent>

</xs:complexType>

</xs:element>

OR

<xs:element name="somename">

<xs:complexType>

  <xs:simpleContent>

    <xs:restriction base="basetype">

      ....

      ....

    </xs:restriction>

  </xs:simpleContent>

</xs:complexType>

</xs:element>

Tip: Use the extension/restriction element to expand or to limit the base simple type for the element.

Here is an example of an XML element, "shoesize", that contains text-only:

<shoesize country="france">35</shoesize>

The following example declares a complexType, "shoesize". The content is defined as an integer value, and the "shoesize" element also contains an attribute named "country":

<xs:element name="shoesize">

<xs:complexType>

  <xs:simpleContent>

    <xs:extension base="xs:integer">

      <xs:attribute name="country" type="xs:string" />

    </xs:extension>

  </xs:simpleContent>

</xs:complexType>

</xs:element>

We could also give the complexType element a name, and let the "shoesize" element have a type attribute that refers to the name of the complexType (if you use this method, several elements can refer to the same complex type):

<xs:element name="shoesize" type="shoetype"/>

<xs:complexType name="shoetype">

<xs:simpleContent>

  <xs:extension base="xs:integer">

    <xs:attribute name="country" type="xs:string" />

  </xs:extension>

</xs:simpleContent>

</xs:complexType>


XML Schema Complex Types - Mixed Content

XSD Complex Types With Mixed Content

A mixed complex type element can contain attributes, elements, and text.

Complex Types with Mixed Content

An XML element, "letter", that contains both text and other elements:

<letter>

Dear Mr.<name>John Smith</name>.

Your order <orderid>1032</orderid>

will be shipped on <shipdate>2001-07-13</shipdate>.

</letter>

The following schema declares the "letter" element:

<xs:element name="letter">

<xs:complexType mixed="true">

  <xs:sequence>

    <xs:element name="name" type="xs:string"/>

    <xs:element name="orderid" type="xs:positiveInteger"/>

    <xs:element name="shipdate" type="xs:date"/>

  </xs:sequence>

</xs:complexType>

</xs:element>

Note: To enable character data to appear between the child-elements of "letter", the mixed attribute must be set to "true". The <xs:sequence> tag means that the elements defined (name, orderid and shipdate) must appear in that order inside a "letter" element.

We could also give the complexType element a name, and let the "letter" element have a type attribute that refers to the name of the complexType (if you use this method, several elements can refer to the same complex type):

<xs:element name="letter" type="lettertype"/>

<xs:complexType name="lettertype" mixed="true">

<xs:sequence>

  <xs:element name="name" type="xs:string"/>

  <xs:element name="orderid" type="xs:positiveInteger"/>

  <xs:element name="shipdate" type="xs:date"/>

</xs:sequence>

</xs:complexType>


XML Schema complexContent Element

Definition and Usage

The complexContent element defines extensions or restrictions on a complex type that contains mixed content or elements only.

Element Information

· Parent elements: complexType

Syntax

<complexContent

id=ID

mixed=true|false

any attributes

>

(annotation?,(restriction|extension))

</complexContent>

(The ? sign declares that the element can occur zero or one time inside the complexContent element)

Attribute | Description
id | Optional. Specifies a unique ID for the element
mixed | Optional. Specifies whether character data is allowed to appear between the child elements of this complexType element. Default is false
any attributes | Optional. Specifies any other attributes with non-schema namespace

Example 1

The following example has a complex type, "fullpersoninfo", that derives from another complex type, "personinfo", by extending the inherited type with three additional elements (address, city and country):

<xs:element name="employee" type="fullpersoninfo"/>

<xs:complexType name="personinfo">

<xs:sequence>

  <xs:element name="firstname" type="xs:string"/>

  <xs:element name="lastname" type="xs:string"/>

</xs:sequence>

</xs:complexType>

<xs:complexType name="fullpersoninfo">

<xs:complexContent>

  <xs:extension base="personinfo">

    <xs:sequence>

      <xs:element name="address" type="xs:string"/>

      <xs:element name="city" type="xs:string"/>

      <xs:element name="country" type="xs:string"/>

    </xs:sequence>

  </xs:extension>

</xs:complexContent>

</xs:complexType>

In the example above the "employee" element must contain, in sequence, the following elements: "firstname", "lastname", "address", "city", and "country".


XML Schema complexType Element

Definition and Usage

The complexType element defines a complex type. A complex type element is an XML element that contains other elements and/or attributes.

Element Information

· Parent elements: element, redefine, schema

Syntax

<complexType

id=ID

name=NCName

abstract=true|false

mixed=true|false

block=(#all|list of (extension|restriction))

final=(#all|list of (extension|restriction))

any attributes

>

(annotation?,(simpleContent|complexContent|((group|all|

choice|sequence)?,((attribute|attributeGroup)*,anyAttribute?))))

</complexType>

(The ? sign declares that the element can occur zero or one time, and the * sign declares that the element can occur zero or more times inside the complexType element)

Attribute

Description

id

Optional. Specifies a unique ID for the element

name

Optional. Specifies a name for the element

abstract

Optional. Specifies whether the complex type can be used in an instance document. True indicates that an element cannot use this complex type directly but must use a complex type derived from this complex type. Default is false

mixed

Optional. Specifies whether character data is allowed to appear between the child elements of this complexType element. Default is false. If a simpleContent element is a child element, the mixed attribute is not allowed!

block

Optional. Prevents a complex type that has a specified type of derivation from being used in place of this complex type. This value can contain #all or a list that is a subset of extension or restriction:

· extension - prevents complex types derived by extension
· restriction - prevents complex types derived by restriction
· #all - prevents all derived complex types

final

Optional. Prevents a specified type of derivation of this complex type element. Can contain #all or a list that is a subset of extension or restriction.

· extension - prevents derivation by extension
· restriction - prevents derivation by restriction
· #all - prevents all derivation

any attributes

Optional. Specifies any other attributes with non-schema namespace

Example 1

The following example has an element named "note" that is of a complex type:

<xs:element name="note">

  <xs:complexType>

    <xs:sequence>

<xs:element name="to" type="xs:string"/>

<xs:element name="from" type="xs:string"/>

<xs:element name="heading" type="xs:string"/>

<xs:element name="body" type="xs:string"/>

    </xs:sequence>

  </xs:complexType>

</xs:element>

Example 2

The following example has a complex type, "fullpersoninfo", that derives from another complex type, "personinfo", by extending the inherited type with three additional elements (address, city and country):

<xs:element name="employee" type="fullpersoninfo"/>

<xs:complexType name="personinfo">

<xs:sequence>

  <xs:element name="firstname" type="xs:string"/>

  <xs:element name="lastname" type="xs:string"/>

</xs:sequence>

</xs:complexType>

<xs:complexType name="fullpersoninfo">

<xs:complexContent>

  <xs:extension base="personinfo">

    <xs:sequence>

      <xs:element name="address" type="xs:string"/>

      <xs:element name="city" type="xs:string"/>

      <xs:element name="country" type="xs:string"/>

    </xs:sequence>

  </xs:extension>

</xs:complexContent>

</xs:complexType>

In the example above the "employee" element must contain, in sequence, the following elements: "firstname", "lastname", "address", "city", and "country".


XML Schema Date/Time Datatypes

XSD Date and Time Data Types

Date and time data types are used for values that contain date and time.

Date Data Type

The date data type is used to specify a date.

The date is specified in the following form "YYYY-MM-DD" where:

· YYYY indicates the year
· MM indicates the month
· DD indicates the day

Note: All components are required!

The following is an example of a date declaration in a schema:

<xs:element name="start" type="xs:date"/>

An element in your document might look like this:

<start>2002-09-24</start>

Time Zones

To specify a time zone, you can either enter a date in UTC time by adding a "Z" behind the date - like this:

<start>2002-09-24Z</start>

or you can specify an offset from the UTC time by adding a positive or negative time behind the date - like this:

<start>2002-09-24-06:00</start>

or

<start>2002-09-24+06:00</start>

Time Data Type

The time data type is used to specify a time.

The time is specified in the following form "hh:mm:ss" where:

· hh indicates the hour
· mm indicates the minute
· ss indicates the second

Note: All components are required!

The following is an example of a time declaration in a schema:

<xs:element name="start" type="xs:time"/>

An element in your document might look like this:

<start>09:00:00</start>

Or it might look like this:

<start>09:30:10.5</start>

Time Zones

To specify a time zone, you can either enter a time in UTC time by adding a "Z" behind the time - like this:

<start>09:30:10Z</start>

or you can specify an offset from the UTC time by adding a positive or negative time behind the time - like this:

<start>09:30:10-06:00</start>

or

<start>09:30:10+06:00</start>

DateTime Data Type

The dateTime data type is used to specify a date and a time.

The dateTime is specified in the following form "YYYY-MM-DDThh:mm:ss" where:

· YYYY indicates the year
· MM indicates the month
· DD indicates the day
· T indicates the start of the required time section
· hh indicates the hour
· mm indicates the minute
· ss indicates the second

Note: All components are required!

The following is an example of a dateTime declaration in a schema:

<xs:element name="startdate" type="xs:dateTime"/>

An element in your document might look like this:

<startdate>2002-05-30T09:00:00</startdate>

Or it might look like this:

<startdate>2002-05-30T09:30:10.5</startdate>

Time Zones

To specify a time zone, you can either enter a dateTime in UTC time by adding a "Z" behind the time - like this:

<startdate>2002-05-30T09:30:10Z</startdate>

or you can specify an offset from the UTC time by adding a positive or negative time behind the time - like this:

<startdate>2002-05-30T09:30:10-06:00</startdate>

or

<startdate>2002-05-30T09:30:10+06:00</startdate>

Duration Data Type

The duration data type is used to specify a time interval.

The time interval is specified in the following form "PnYnMnDTnHnMnS" where:

· P indicates the period (required)
· nY indicates the number of years
· nM indicates the number of months
· nD indicates the number of days
· T indicates the start of a time section (required if you are going to specify hours, minutes, or seconds)
· nH indicates the number of hours
· nM indicates the number of minutes
· nS indicates the number of seconds

The following is an example of a duration declaration in a schema:

<xs:element name="period" type="xs:duration"/>

An element in your document might look like this:

<period>P5Y</period>

The example above indicates a period of five years.

Or it might look like this:

<period>P5Y2M10D</period>

The example above indicates a period of five years, two months, and 10 days.

Or it might look like this:

<period>P5Y2M10DT15H</period>

The example above indicates a period of five years, two months, 10 days, and 15 hours.

Or it might look like this:

<period>PT15H</period>

The example above indicates a period of 15 hours.

Negative Duration

To specify a negative duration, enter a minus sign before the P:

<period>-P10D</period>

The example above indicates a period of minus 10 days.

Date and Time Data Types

Name | Description
date | Defines a date value
dateTime | Defines a date and time value
duration | Defines a time interval
gDay | Defines a part of a date - the day (DD)
gMonth | Defines a part of a date - the month (MM)
gMonthDay | Defines a part of a date - the month and day (MM-DD)
gYear | Defines a part of a date - the year (YYYY)
gYearMonth | Defines a part of a date - the year and month (YYYY-MM)
time | Defines a time value

Restrictions on Date Data Types

Restrictions that can be used with Date data types:

· enumeration
· maxExclusive
· maxInclusive
· minExclusive
· minInclusive
· pattern
· whiteSpace


XML Schema documentation Element

Definition and Usage

The documentation element is used to enter text comments in a schema. This element must go inside an annotation element.

Element Information

· Parent elements: annotation

Syntax

<documentation

source=URI reference

xml:lang=language

>

Any well-formed XML content

</documentation>

Attribute | Description
source | Optional. Specifies the source of the application information
xml:lang | Optional. Specifies the language used in the contents

Example 1

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:annotation>

<xs:appInfo>W3Schools Note</xs:appInfo>

<xs:documentation xml:lang="en">

This Schema defines a W3Schools note!

</xs:documentation>

</xs:annotation>

.

.

.

</xs:schema>


XML schema Element

Definition and Usage

The schema element defines the root element of a schema.

Element Information

· Parent elements: NONE

Syntax

<schema

id=ID

attributeFormDefault=qualified|unqualified

elementFormDefault=qualified|unqualified

blockDefault=(#all|list of (extension|restriction|substitution))

finalDefault=(#all|list of (extension|restriction|list|union))

targetNamespace=anyURI

version=token

xmlns=anyURI

any attributes

>

((include|import|redefine|annotation)*,(((simpleType|complexType|

group|attributeGroup)|element|attribute|notation),annotation*)*)

</schema>

Attribute

Description

id

Optional. Specifies a unique ID for the element

attributeFormDefault

Optional. The form for attributes declared in the target namespace of this schema. The value must be "qualified" or "unqualified". Default is "unqualified". "unqualified" indicates that attributes from the target namespace are not required to be qualified with the namespace prefix. "qualified" indicates that attributes from the target namespace must be qualified with the namespace prefix

elementFormDefault

Optional. The form for elements declared in the target namespace of this schema. The value must be "qualified" or "unqualified". Default is "unqualified". "unqualified" indicates that elements from the target namespace are not required to be qualified with the namespace prefix. "qualified" indicates that elements from the target namespace must be qualified with the namespace prefix

blockDefault

Optional. Specifies the default value of the block attribute on element and complexType elements in the target namespace. The block attribute prevents a complex type (or element) that has a specified type of derivation from being used in place of this complex type. This value can contain #all or a list that is a subset of extension, restriction, or substitution:

· extension - prevents complex types derived by extension
· restriction - prevents complex types derived by restriction
· substitution - prevents substitution of elements
· #all - prevents all derived complex types

finalDefault

Optional. Specifies the default value of the final attribute on element, simpleType, and complexType elements in the target namespace. The final attribute prevents a specified type of derivation of an element, simpleType, or complexType element. For element and complexType elements, this value can contain #all or a list that is a subset of extension or restriction. For simpleType elements, this value can additionally contain list and union:

· extension - prevents derivation by extension
· restriction - prevents derivation by restriction
· list - prevents derivation by list
· union - prevents derivation by union
· #all - prevents all derivation

targetNamespace

Optional. A URI reference of the namespace of this schema

version

Optional. Specifies the version of the schema

xmlns

A URI reference that specifies one or more namespaces for use in this schema. If no prefix is assigned, the schema components of the namespace can be used with unqualified references

any attributes

Optional. Specifies any other attributes with non-schema namespace

Example 1

<?xml version="1.0"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:element name="values" type="xs:string">

</xs:schema>

Example 2

In this example, the schema components (element name, type) in the http://www.w3.org/2001/XMLSchema namespace are unqualified and those for http://www.w3schools.com/w3schoolsschema (mystring) are qualified with the wsc prefix:

<?xml version="1.0"?>

<schema xmlns="http://www.w3.org/2001/XMLSchema"

xmlns:wsc="http://www.w3schools.com/w3shoolsschema">

<element name="fname" type="wsc:mystring"/>

</schema>


XML schema Element

XSD - The <schema> Element

The <schema> element is the root element of every XML Schema.

The <schema> Element

The <schema> element is the root element of every XML Schema:

<?xml version="1.0"?>

<xs:schema>

...

...

</xs:schema>

The <schema> element may contain some attributes. A schema declaration often looks something like this:

<?xml version="1.0"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"

targetNamespace="http://www.w3schools.com"

xmlns="http://www.w3schools.com"

elementFormDefault="qualified">

...

...

</xs:schema>

The following fragment:

xmlns:xs="http://www.w3.org/2001/XMLSchema"

indicates that the elements and data types used in the schema come from the "http://www.w3.org/2001/XMLSchema" namespace. It also specifies that the elements and data types that come from the "http://www.w3.org/2001/XMLSchema" namespace should be prefixed with xs:

This fragment:

targetNamespace="http://www.w3schools.com"

indicates that the elements defined by this schema (note, to, from, heading, body.) come from the "http://www.w3schools.com" namespace.

This fragment:

xmlns="http://www.w3schools.com"

indicates that the default namespace is "http://www.w3schools.com".

This fragment:

elementFormDefault="qualified"

indicates that any elements used by the XML instance document which were declared in this schema must be namespace qualified.

Referencing a Schema in an XML Document

This XML document has a reference to an XML Schema:

<?xml version="1.0"?>

<note xmlns="http://www.w3schools.com"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://www.w3schools.com note.xsd">

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

The following fragment:

xmlns="http://www.w3schools.com"

specifies the default namespace declaration. This declaration tells the schema-validator that all the elements used in this XML document are declared in the "http://www.w3schools.com" namespace.

Once you have the XML Schema Instance namespace available:

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

you can use the schemaLocation attribute. This attribute has two values. The first value is the namespace to use. The second value is the location of the XML schema to use for that namespace:

xsi:schemaLocation="http://www.w3schools.com note.xsd"


XML Schema element Element

Definition and Usage

The element element defines an element.

Element Information

· Parent elements: schema, choice, all, sequence, group

Syntax

<element

id=ID

name=NCName

ref=QName

type=QName

substitutionGroup=QName

default=string

fixed=string

form=qualified|unqualified

maxOccurs=nonNegativeInteger|unbounded

minOccurs=nonNegativeInteger

nillable=true|false

abstract=true|false

block=(#all|list of (extension|restriction))

final=(#all|list of (extension|restriction))

any attributes

>

annotation?,((simpleType|complexType)?,(unique|key|keyref)*))

</element>

(The ? sign declares that the element can occur zero or one time, and the * sign declares that the element can occur zero or more times inside the element element)

Attribute

Description

id

Optional. Specifies a unique ID for the element

name

Optional. Specifies a name for the element. This attribute is required if the parent element is the schema element

ref

Optional. Refers to the name of another element. The ref attribute can include a namespace prefix. This attribute cannot be used if the parent element is the schema element

type

Optional. Specifies either the name of a built-in data type, or the name of a simpleType or complexType element

substitutionGroup

Optional. Specifies the name of an element that can be substituted with this element. This attribute cannot be used if the parent element is not the schema element

default

Optional. Specifies a default value for the element (can only be used if the element's content is a simple type or text only)

fixed

Optional. Specifies a fixed value for the element (can only be used if the element's content is a simple type or text only)

form

Optional. Specifies the form for the element. "unqualified" indicates that this attribute is not required to be qualified with the namespace prefix. "qualified" indicates that this attribute must be qualified with the namespace prefix. The default value is the value of the elementFormDefault attribute of the schema element. This attribute cannot be used if the parent element is the schema element

maxOccurs

Optional. Specifies the maximum number of times this element can occur in the parent element. The value can be any number >= 0, or if you want to set no limit on the maximum number, use the value "unbounded". Default value is 1. This attribute cannot be used if the parent element is the schema element

minOccurs

Optional. Specifies the minimum number of times this element can occur in the parent element. The value can be any number >= 0. Default value is 1. This attribute cannot be used if the parent element is the schema element

nillable

Optional. Specifies whether an explicit null value can be assigned to the element. True enables an instance of the element to have the null attribute set to true. The null attribute is defined as part of the XML Schema namespace for instances. Default is false

abstract

Optional. Specifies whether the element can be used in an instance document. True indicates that the element cannot appear in the instance document. Instead, another element whose substitutionGroup attribute contains the qualified name (QName) of this element must appear in this element's place. Default is false

block

Optional. Prevents an element with a specified type of derivation from being used in place of this element. This value can contain #all or a list that is a subset of extension, restriction, or equivClass:

· extension - prevents elements derived by extension
· restriction - prevents elements derived by restriction
· substitution - prevents elements derived by substitution
· #all - prevents all derived elements

final

Optional. Sets the default value of the final attribute on the element element. This attribute cannot be used if the parent element is not the schema element. This value can contain #all or a list that is a subset of extension or restriction:

· extension - prevents elements derived by extension
· restriction - prevents elements derived by restriction
· #all - prevents all derived elements

any attributes

Optional. Specifies any other attributes with non-schema namespace

Example 1

The following example is a schema with four simple elements named "fname", "lname", "age", and "dateborn", which are of type string, nonNegativeInteger, and date:

<?xml version="1.0"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:element name="fname" type="xs:string"/>

<xs:element name="lname" type="xs:string"/>

<xs:element name="age" type="xs:nonNegativeInteger"/>

<xs:element name="dateborn" type="xs:date"/>

</xs:schema>

Example 2

The following example is a schema with an element named "note" that is of a complex type. The "note" element contains four other simple elements; "to", "from", "heading", and "body":

<?xml version="1.0"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:element name="note">

  <xs:complexType>

    <xs:sequence>

<xs:element name="to" type="xs:string"/>

<xs:element name="from" type="xs:string"/>

<xs:element name="heading" type="xs:string"/>

<xs:element name="body" type="xs:string"/>

    </xs:sequence>

  </xs:complexType>

</xs:element>

</xs:schema>

Example 3

This example is equal to Example 2, but here we have chosen to use the ref attribute to refer to the element names:

<?xml version="1.0"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:element name="note">

<xs:complexType>

  <xs:sequence>

    <xs:element ref="to"/>

    <xs:element ref="from"/>

    <xs:element ref="heading"/>

    <xs:element ref="body"/>

  </xs:sequence>

</xs:complexType>

</xs:element>

<xs:element name="to" type="xs:string"/>

<xs:element name="from" type="xs:string"/>

<xs:element name="heading" type="xs:string"/>

<xs:element name="body" type="xs:string"/>

</xs:schema>


XML Schema Element Substitution

XSD Element Substitution

With XML Schemas, one element can substitute another element.

Element Substitution

Let's say that we have users from two different countries: England and Norway. We would like the ability to let the user choose whether he or she would like to use the Norwegian element names or the English element names in the XML document.

To solve this problem, we could define a substitutionGroup in the XML schema. First, we declare a head element and then we declare the other elements which state that they are substitutable for the head element.

<xs:element name="name" type="xs:string"/>

<xs:element name="navn" substitutionGroup="name"/>

In the example above, the "name" element is the head element and the "navn" element is substitutable for "name".

Look at this fragment of an XML schema:

<xs:element name="name" type="xs:string"/>

<xs:element name="navn" substitutionGroup="name"/>

<xs:complexType name="custinfo">

<xs:sequence>

  <xs:element ref="name"/>

</xs:sequence>

</xs:complexType>

<xs:element name="customer" type="custinfo"/>

<xs:element name="kunde" substitutionGroup="customer"/>

A valid XML document (according to the schema above) could look like this:

<customer>

<name>John Smith</name>

</customer>

or like this:

<kunde>

<navn>John Smith</navn>

</kunde>

Blocking Element Substitution

To prevent other elements from substituting with a specified element, use the block attribute:

<xs:element name="name" type="xs:string" block="substitution"/>

Look at this fragment of an XML schema:

<xs:element name="name" type="xs:string" block="substitution"/>

<xs:element name="navn" substitutionGroup="name"/>

<xs:complexType name="custinfo">

<xs:sequence>

  <xs:element ref="name"/>

</xs:sequence>

</xs:complexType>

<xs:element name="customer" type="custinfo" block="substitution"/>

<xs:element name="kunde" substitutionGroup="customer"/>

A valid XML document (according to the schema above) looks like this:

<customer>

<name>John Smith</name>

</customer>

BUT THIS IS NO LONGER VALID:

<kunde>

<navn>John Smith</navn>

</kunde>

Using substitutionGroup

The type of the substitutable elements must be the same as, or derived from, the type of the head element. If the type of the substitutable element is the same as the type of the head element you will not have to specify the type of the substitutable element.

Note that all elements in the substitutionGroup (the head element and the substitutable elements) must be declared as global elements, otherwise it will not work!

What are Global Elements?

Global elements are elements that are immediate children of the "schema" element! Local elements are elements nested within other elements.


XML Schema Example

An XSD Example

This chapter will demonstrate how to write an XML Schema. You will also learn that a schema can be written in different ways.

An XML Document

Let's have a look at this XML document called "shiporder.xml":

<?xml version="1.0" encoding="ISO-8859-1"?>

<shiporder orderid="889923"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="shiporder.xsd">

<orderperson>John Smith</orderperson>

<shipto>

<name>Ola Nordmann</name>

<address>Langgt 23</address>

<city>4000 Stavanger</city>

<country>Norway</country>

</shipto>

<item>

<title>Empire Burlesque</title>

<note>Special Edition</note>

<quantity>1</quantity>

<price>10.90</price>

</item>

<item>

<title>Hide your heart</title>

<quantity>1</quantity>

<price>9.90</price>

</item>

</shiporder>

The XML document above consists of a root element, "shiporder", that contains a required attribute called "orderid". The "shiporder" element contains three different child elements: "orderperson", "shipto" and "item". The "item" element appears twice, and it contains a "title", an optional "note" element, a "quantity", and a "price" element.

The line above: xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" tells the XML parser that this document should be validated against a schema. The line: xsi:noNamespaceSchemaLocation="shiporder.xsd" specifies WHERE the schema resides (here it is in the same folder as "shiporder.xml").

Create an XML Schema

Now we want to create a schema for the XML document above.

We start by opening a new file that we will call "shiporder.xsd". To create the schema we could simply follow the structure in the XML document and define each element as we find it. We will start with the standard XML declaration followed by the xs:schema element that defines a schema:

<?xml version="1.0" encoding="ISO-8859-1" ?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

...

...

</xs:schema>

In the schema above we use the standard namespace (xs), and the URI associated with this namespace is the Schema language definition, which has the standard value of http://www.w3.org/2001/XMLSchema.

Next, we have to define the "shiporder" element. This element has an attribute and it contains other elements, therefore we consider it as a complex type. The child elements of the "shiporder" element is surrounded by a xs:sequence element that defines an ordered sequence of sub elements:

<xs:element name="shiporder">

<xs:complexType>

<xs:sequence>

...

...

</xs:sequence>

...

</xs:complexType>

</xs:element>

Then we have to define the "orderperson" element as a simple type (because it does not contain any attributes or other elements). The type (xs:string) is prefixed with the namespace prefix associated with XML Schema that indicates a predefined schema data type:

<xs:element name="orderperson" type="xs:string"/>

Next, we have to define two elements that are of the complex type: "shipto" and "item". We start by defining the "shipto" element:

<xs:element name="shipto">

<xs:complexType>

<xs:sequence>

 <xs:element name="name" type="xs:string"/>

 <xs:element name="address" type="xs:string"/>

 <xs:element name="city" type="xs:string"/>

 <xs:element name="country" type="xs:string"/>

</xs:sequence>

</xs:complexType>

</xs:element>

With schemas we can define the number of possible occurrences for an element with the maxOccurs and minOccurs attributes. maxOccurs specifies the maximum number of occurrences for an element and minOccurs specifies the minimum number of occurrences for an element. The default value for both maxOccurs and minOccurs is 1!

Now we can define the "item" element. This element can appear multiple times inside a "shiporder" element. This is specified by setting the maxOccurs attribute of the "item" element to "unbounded" which means that there can be as many occurrences of the "item" element as the author wishes. Notice that the "note" element is optional. We have specified this by setting the minOccurs attribute to zero:

<xs:element name="item" maxOccurs="unbounded">

<xs:complexType>

<xs:sequence>

 <xs:element name="title" type="xs:string"/>

 <xs:element name="note" type="xs:string" minOccurs="0"/>

 <xs:element name="quantity" type="xs:positiveInteger"/>

 <xs:element name="price" type="xs:decimal"/>

</xs:sequence>

</xs:complexType>

</xs:element>

We can now declare the attribute of the "shiporder" element. Since this is a required attribute we specify use="required".

Note: The attribute declarations must always come last:

<xs:attribute name="orderid" type="xs:string" use="required"/>

Here is the complete listing of the schema file called "shiporder.xsd":

<?xml version="1.0" encoding="ISO-8859-1" ?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:element name="shiporder">

<xs:complexType>

<xs:sequence>

 <xs:element name="orderperson" type="xs:string"/>

 <xs:element name="shipto">

  <xs:complexType>

   <xs:sequence>

    <xs:element name="name" type="xs:string"/>

    <xs:element name="address" type="xs:string"/>

    <xs:element name="city" type="xs:string"/>

    <xs:element name="country" type="xs:string"/>

   </xs:sequence>

  </xs:complexType>

 </xs:element>

 <xs:element name="item" maxOccurs="unbounded">

  <xs:complexType>

   <xs:sequence>

    <xs:element name="title" type="xs:string"/>

    <xs:element name="note" type="xs:string" minOccurs="0"/>

    <xs:element name="quantity" type="xs:positiveInteger"/>

    <xs:element name="price" type="xs:decimal"/>

   </xs:sequence>

  </xs:complexType>

 </xs:element>

</xs:sequence>

<xs:attribute name="orderid" type="xs:string" use="required"/>

</xs:complexType>

</xs:element>

</xs:schema>

Divide the Schema

The previous design method is very simple, but can be difficult to read and maintain when documents are complex.

The next design method is based on defining all elements and attributes first, and then referring to them using the ref attribute.

Here is the new design of the schema file ("shiporder.xsd"):

<?xml version="1.0" encoding="ISO-8859-1" ?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<!-- definition of simple elements -->

<xs:element name="orderperson" type="xs:string"/>

<xs:element name="name" type="xs:string"/>

<xs:element name="address" type="xs:string"/>

<xs:element name="city" type="xs:string"/>

<xs:element name="country" type="xs:string"/>

<xs:element name="title" type="xs:string"/>

<xs:element name="note" type="xs:string"/>

<xs:element name="quantity" type="xs:positiveInteger"/>

<xs:element name="price" type="xs:decimal"/>

<!-- definition of attributes -->

<xs:attribute name="orderid" type="xs:string"/>

<!-- definition of complex elements -->

<xs:element name="shipto">

<xs:complexType>

<xs:sequence>

 <xs:element ref="name"/>

 <xs:element ref="address"/>

 <xs:element ref="city"/>

 <xs:element ref="country"/>

</xs:sequence>

</xs:complexType>

</xs:element>

<xs:element name="item">

<xs:complexType>

<xs:sequence>

 <xs:element ref="title"/>

 <xs:element ref="note" minOccurs="0"/>

 <xs:element ref="quantity"/>

 <xs:element ref="price"/>

</xs:sequence>

</xs:complexType>

</xs:element>

<xs:element name="shiporder">

<xs:complexType>

<xs:sequence>

 <xs:element ref="orderperson"/>

 <xs:element ref="shipto"/>

 <xs:element ref="item" maxOccurs="unbounded"/>

</xs:sequence>

<xs:attribute ref="orderid" use="required"/>

</xs:complexType>

</xs:element>

</xs:schema>

Using Named Types

The third design method defines classes or types, that enables us to reuse element definitions. This is done by naming the simpleTypes and complexTypes elements, and then point to them through the type attribute of the element.

Here is the third design of the schema file ("shiporder.xsd"):

<?xml version="1.0" encoding="ISO-8859-1" ?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:simpleType name="stringtype">

<xs:restriction base="xs:string"/>

</xs:simpleType>

<xs:simpleType name="inttype">

<xs:restriction base="xs:positiveInteger"/>

</xs:simpleType>

<xs:simpleType name="dectype">

<xs:restriction base="xs:decimal"/>

</xs:simpleType>

<xs:simpleType name="orderidtype">

<xs:restriction base="xs:string">

<xs:pattern value="[0-9]{6}"/>

</xs:restriction>

</xs:simpleType>

<xs:complexType name="shiptotype">

<xs:sequence>

<xs:element name="name" type="stringtype"/>

<xs:element name="address" type="stringtype"/>

<xs:element name="city" type="stringtype"/>

<xs:element name="country" type="stringtype"/>

</xs:sequence>

</xs:complexType>

<xs:complexType name="itemtype">

<xs:sequence>

<xs:element name="title" type="stringtype"/>

<xs:element name="note" type="stringtype" minOccurs="0"/>

<xs:element name="quantity" type="inttype"/>

<xs:element name="price" type="dectype"/>

</xs:sequence>

</xs:complexType>

<xs:complexType name="shipordertype">

<xs:sequence>

<xs:element name="orderperson" type="stringtype"/>

<xs:element name="shipto" type="shiptotype"/>

<xs:element name="item" maxOccurs="unbounded" type="itemtype"/>

</xs:sequence>

<xs:attribute name="orderid" type="orderidtype" use="required"/>

</xs:complexType>

<xs:element name="shiporder" type="shipordertype"/>

</xs:schema>

The restriction element indicates that the datatype is derived from a W3C XML Schema namespace datatype. So, the following fragment means that the value of the element or attribute must be a string value:

<xs:restriction base="xs:string">

The restriction element is more often used to apply restrictions to elements. Look at the following lines from the schema above:

<xs:simpleType name="orderidtype">

<xs:restriction base="xs:string">

<xs:pattern value="[0-9]{6}"/>

</xs:restriction>

</xs:simpleType>

This indicates that the value of the element or attribute must be a string, it must be exactly six characters in a row, and those characters must be a number from 0 to 9.


XML Schema extension Element

Definition and Usage

The extension element extends an existing simpleType or complexType element.

Element Information

· Parent elements: simpleContent, complexContent

Syntax

<extension

id=ID

base=QName

any attributes

>

(annotation?,((group|all|choice|sequence)?,

((attribute|attributeGroup)*,anyAttribute?)))

</extension>

(The ? sign declares that the element can occur zero or one time, and the * sign declares that the element can occur zero or more times inside the extension element)

Attribute | Description
id | Optional. Specifies a unique ID for the element
base | Required. Specifies the name of a built-in data type, a simpleType element, or a complexType element
any attributes | Optional. Specifies any other attributes with non-schema namespace

Example 1

The following example extends an existing simpleType by adding an attribute:

<?xml version="1.0"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:simpleType name="size">

<xs:restriction base="xs:string">

  <xs:enumeration value="small" />

  <xs:enumeration value="medium" />

  <xs:enumeration value="large" />

</xs:restriction>

</xs:simpleType>

<xs:complexType name="jeans">

<xs:simpleContent>

  <xs:extension base="size">

    <xs:attribute name="sex">

      <xs:simpleType>

        <xs:restriction base="xs:string">

          <xs:enumeration value="male" />

          <xs:enumeration value="female" />

        </xs:restriction>

      </xs:simpleType>

    </xs:attribute>

  </xs:extension>

</xs:simpleContent>

</xs:complexType>

</xs:schema>

Example 2

The following example extends an existing complexType element by adding three elements:

<?xml version="1.0"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:element name="employee" type="fullpersoninfo"/>

<xs:complexType name="personinfo">

<xs:sequence>

  <xs:element name="firstname" type="xs:string"/>

  <xs:element name="lastname" type="xs:string"/>

</xs:sequence>

</xs:complexType>

<xs:complexType name="fullpersoninfo">

<xs:complexContent>

  <xs:extension base="personinfo">

    <xs:sequence>

      <xs:element name="address" type="xs:string"/>

      <xs:element name="city" type="xs:string"/>

      <xs:element name="country" type="xs:string"/>

    </xs:sequence>

  </xs:extension>

</xs:complexContent>

</xs:complexType>

</xs:schema>


XML Schema field Element

Definition and Usage

The field element specifies an XPath expression that specifies the value used to define an identity constraint.

Element Information

· Parent elements: key, keyref, unique

Syntax

<field

id=ID

xpath=XPath expression

any attributes

>

(annotation?)

</field>

(The ? sign declares that the element can occur zero or one time inside the field element)

Attribute | Description
id | Optional. Specifies a unique ID for the element
xpath | Required. Identifies a single element or attribute whose content or value is used for the constraint
any attributes | Optional. Specifies any other attributes with non-schema namespace

Example 1

The following example shows a field element that specifies the "userID" attribute as the field to use for the identity constraint:

<xs:field xpath="@userID"/>


XML Schema group Element

Definition and Usage

The group element is used to define a group of elements to be used in complex type definitions.

Element Information

· Parent elements: schema, choice, sequence, complexType, restriction (both simpleContent and complexContent), extension (both simpleContent and complexContent)

Syntax

<group

id=ID

name=NCName

ref=QName

maxOccurs=nonNegativeInteger|unbounded

minOccurs=nonNegativeInteger

any attributes

>

(annotation?,(all|choice|sequence)?)

</group>

(The ? sign declares that the element can occur zero or one time inside the group element)

Attribute | Description
id | Optional. Specifies a unique ID for the element
name | Optional. Specifies a name for the group. This attribute is used only when the schema element is the parent of this group element. Name and ref attributes cannot both be present
ref | Optional. Refers to the name of another group. Name and ref attributes cannot both be present
maxOccurs | Optional. Specifies the maximum number of times the group element can occur in the parent element. The value can be any number >= 0, or if you want to set no limit on the maximum number, use the value "unbounded". Default value is 1
minOccurs | Optional. Specifies the minimum number of times the group element can occur in the parent element. The value can be any number >= 0. Default value is 1
any attributes | Optional. Specifies any other attributes with non-schema namespace

Example 1

The following example defines a group containing a sequence of four elements and uses the group element in a complex type definition:

<?xml version="1.0"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:group name="custGroup">

<xs:sequence>

<xs:element name="customer" type="xs:string"/>

<xs:element name="orderdetails" type="xs:string"/>

<xs:element name="billto" type="xs:string"/>

<xs:element name="shipto" type="xs:string"/>

</xs:sequence>

</xs:group>

<xs:element name="order" type="ordertype"/>

<xs:complexType name="ordertype">

<xs:group ref="custGroup"/>

<xs:attribute name="status" type="xs:string"/>

</xs:complexType>

</xs:schema>


XML Schema How To

XSD How To?

 Top Previous Next

XML documents can have a reference to a DTD or to an XML Schema.

A Simple XML Document

Look at this simple XML document called "note.xml":

<?xml version="1.0"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

A DTD File

The following example is a DTD file called "note.dtd" that defines the elements of the XML document above ("note.xml"):

<!ELEMENT note (to, from, heading, body)>

<!ELEMENT to (#PCDATA)>

<!ELEMENT from (#PCDATA)>

<!ELEMENT heading (#PCDATA)>

<!ELEMENT body (#PCDATA)>

The first line defines the note element to have four child elements: "to, from, heading, body".

Line 2-5 defines the to, from, heading, body elements to be of type "#PCDATA".

An XML Schema

The following example is an XML Schema file called "note.xsd" that defines the elements of the XML document above ("note.xml"):

<?xml version="1.0"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"

targetNamespace="http://www.w3schools.com"

xmlns="http://www.w3schools.com"

elementFormDefault="qualified">

<xs:element name="note">

  <xs:complexType>

    <xs:sequence>

<xs:element name="to" type="xs:string"/>

<xs:element name="from" type="xs:string"/>

<xs:element name="heading" type="xs:string"/>

<xs:element name="body" type="xs:string"/>

    </xs:sequence>

  </xs:complexType>

</xs:element>

</xs:schema>

The note element is a complex type because it contains other elements. The other elements (to, from, heading, body) are simple types because they do not contain other elements. You will learn more about simple and complex types in the following chapters.

A Reference to a DTD

This XML document has a reference to a DTD:

<?xml version="1.0"?>

<!DOCTYPE note SYSTEM

"http://www.w3schools.com/dtd/note.dtd">

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

A Reference to an XML Schema

This XML document has a reference to an XML Schema:

<?xml version="1.0"?>

<note

xmlns="http://www.w3schools.com"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://www.w3schools.com note.xsd">

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>


XML Schema import Element

Definition and Usage

The import element is used to add multiple schemas with different target namespace to a document.

Element Information

· Parent elements: schema

Syntax

<import

id=ID

namespace=anyURI

schemaLocation=anyURI

any attributes

>

(annotation?)

</import>

(The ? sign declares that the element can occur zero or one time inside the import element)

Attribute | Description
id | Optional. Specifies a unique ID for the element
namespace | Required. Specifies the URI of the namespace to import
schemaLocation | Optional. Specifies the URI to the schema for the imported namespace
any attributes | Optional. Specifies any other attributes with non-schema namespace

Example 1

The following example shows importing a namespace:

<?xml version="1.0"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:import namespace="http://www.w3schools.com/schema"/>

..

..

..

</xs:schema>


XML Schema include Element

Definition and Usage

The include element is used to add multiple schemas with the same target namespace to a document.

Element Information

· Parent elements: schema

Syntax

<include

id=ID

schemaLocation=anyURI

any attributes

>

(annotation?)

</include>

(The ? sign declares that the element can occur zero or one time inside the include element)

Attribute | Description
id | Optional. Specifies a unique ID for the element
schemaLocation | Required. Specifies the URI to the schema to include in the target namespace of the containing schema
any attributes | Optional. Specifies any other attributes with non-schema namespace

Example 1

With included schemas, the included files must all reference the same target namespace. If the schema target namespace don't match, the include won't work:

<?xml version="1.0"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"

targetNamespace="http://www.w3schools.com/schema">

<xs:include schemaLocation="http://www.w3schools.com/schema/customer.xsd"/>

<xs:include schemaLocation="http://www.w3schools.com/schema/company.xsd"/>

..

..

..

</xs:schema>


XML Schema Indicators

XSD Complex Types Indicators

We can control HOW elements are to be used in documents with indicators.

Indicators

There are seven indicators:

Order indicators:

· All
· Choice
· Sequence

Occurrence indicators:

· maxOccurs
· minOccurs

Group indicators:

· Group name
· attributeGroup name

Order Indicators

Order indicators are used to define the order of the elements.

All Indicator

The <all> indicator specifies that the child elements can appear in any order, and that each child element must occur only once:

<xs:element name="person">

<xs:complexType>

  <xs:all>

    <xs:element name="firstname" type="xs:string"/>

    <xs:element name="lastname" type="xs:string"/>

  </xs:all>

</xs:complexType>

</xs:element>

Note: When using the <all> indicator you can set the <minOccurs> indicator to 0 or 1 and the <maxOccurs> indicator can only be set to 1 (the <minOccurs> and <maxOccurs> are described later).

Choice Indicator

The <choice> indicator specifies that either one child element or another can occur:

<xs:element name="person">

<xs:complexType>

  <xs:choice>

    <xs:element name="employee" type="employee"/>

    <xs:element name="member" type="member"/>

  </xs:choice>

</xs:complexType>

</xs:element>

Sequence Indicator

The <sequence> indicator specifies that the child elements must appear in a specific order:

<xs:element name="person">

<xs:complexType>

  <xs:sequence>

    <xs:element name="firstname" type="xs:string"/>

    <xs:element name="lastname" type="xs:string"/>

  </xs:sequence>

</xs:complexType>

</xs:element>

Occurrence Indicators

Occurrence indicators are used to define how often an element can occur.

Note: For all "Order" and "Group" indicators (any, all, choice, sequence, group name, and group reference) the default value for maxOccurs and minOccurs is 1.

maxOccurs Indicator

The <maxOccurs> indicator specifies the maximum number of times an element can occur:

<xs:element name="person">

<xs:complexType>

  <xs:sequence>

    <xs:element name="full_name" type="xs:string"/>

    <xs:element name="child_name" type="xs:string" maxOccurs="10"/>

  </xs:sequence>

</xs:complexType>

</xs:element>

The example above indicates that the "child_name" element can occur a minimum of one time (the default value for minOccurs is 1) and a maximum of ten times in the "person" element.

minOccurs Indicator

The <minOccurs> indicator specifies the minimum number of times an element can occur:

<xs:element name="person">

<xs:complexType>

  <xs:sequence>

    <xs:element name="full_name" type="xs:string"/>

    <xs:element name="child_name" type="xs:string"

    maxOccurs="10" minOccurs="0"/>

  </xs:sequence>

</xs:complexType>

</xs:element>

The example above indicates that the "child_name" element can occur a minimum of zero times and a maximum of ten times in the "person" element.

Tip: To allow an element to appear an unlimited number of times, use the maxOccurs="unbounded" statement:

A working example:

An XML file called "Myfamily.xml":

<?xml version="1.0" encoding="ISO-8859-1"?>

<persons xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="family.xsd">

<person>

<full_name>Hege Refsnes</full_name>

<child_name>Cecilie</child_name>

</person>

<person>

<full_name>Tove Refsnes</full_name>

<child_name>Hege</child_name>

<child_name>Stale</child_name>

<child_name>Jim</child_name>

<child_name>Borge</child_name>

</person>

<person>

<full_name>Stale Refsnes</full_name>

</person>

</persons>

The XML file above contains a root element named "persons". Inside this root element we have defined three "person" elements. Each "person" element must contain a "full_name" element and it can contain up to five "child_name" elements.

Here is the schema file "family.xsd":

<?xml version="1.0" encoding="ISO-8859-1"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"

elementFormDefault="qualified">

<xs:element name="persons">

<xs:complexType>

  <xs:sequence>

    <xs:element name="person" maxOccurs="unbounded">

      <xs:complexType>

        <xs:sequence>

          <xs:element name="full_name" type="xs:string"/>

          <xs:element name="child_name" type="xs:string"

          minOccurs="0" maxOccurs="5"/>

        </xs:sequence>

      </xs:complexType>

    </xs:element>

  </xs:sequence>

</xs:complexType>

</xs:element>

</xs:schema>

Group Indicators

Group indicators are used to define related sets of elements.

Element Groups

Element groups are defined with the group declaration, like this:

<xs:group name="groupname">

...

</xs:group>

You must define an all, choice, or sequence element inside the group declaration. The following example defines a group named "persongroup", that defines a group of elements that must occur in an exact sequence:

<xs:group name="persongroup">

<xs:sequence>

  <xs:element name="firstname" type="xs:string"/>

  <xs:element name="lastname" type="xs:string"/>

  <xs:element name="birthday" type="xs:date"/>

</xs:sequence>

</xs:group>

After you have defined a group, you can reference it in another definition, like this:

<xs:group name="persongroup">

<xs:sequence>

  <xs:element name="firstname" type="xs:string"/>

  <xs:element name="lastname" type="xs:string"/>

  <xs:element name="birthday" type="xs:date"/>

</xs:sequence>

</xs:group>

<xs:element name="person" type="personinfo"/>

<xs:complexType name="personinfo">

<xs:sequence>

  <xs:group ref="persongroup"/>

  <xs:element name="country" type="xs:string"/>

</xs:sequence>

</xs:complexType>

Attribute Groups

Attribute groups are defined with the attributeGroup declaration, like this:

<xs:attributeGroup name="groupname">

...

</xs:attributeGroup>

The following example defines an attribute group named "personattrgroup":

<xs:attributeGroup name="personattrgroup">

<xs:attribute name="firstname" type="xs:string"/>

<xs:attribute name="lastname" type="xs:string"/>

<xs:attribute name="birthday" type="xs:date"/>

</xs:attributeGroup>

After you have defined an attribute group, you can reference it in another definition, like this:

<xs:attributeGroup name="personattrgroup">

<xs:attribute name="firstname" type="xs:string"/>

<xs:attribute name="lastname" type="xs:string"/>

<xs:attribute name="birthday" type="xs:date"/>

</xs:attributeGroup>

<xs:element name="person">

<xs:complexType>

  <xs:attributeGroup ref="personattrgroup"/>

</xs:complexType>

</xs:element>


XML Schema key Element

Definition and Usage

The key element specifies an attribute or element value as a key (unique, non-nullable, and always present) within the containing element in an instance document.

The key element MUST contain the following (in order):

· one and only one selector element (contains an XPath expression that specifies the set of elements across which the values specified by field must be unique)
· one or more field elements (contains an XPath expression that specifies the values that must be unique for the set of elements specified by the selector element)

Element Information

· Parent elements: element

Syntax

<key

id=ID

name=NCName

any attributes

>

(annotation?,(selector,field+))

</key>

(The ? sign declares that the element can occur zero or one time, and the + sign declares that the element must occur one or more times inside the key element)

Attribute | Description
id | Optional. Specifies a unique ID for the element
name | Required. Specifies the name of the key element
any attributes | Optional. Specifies any other attributes with non-schema namespace


XML Schema keyref Element

Definition and Usage

The keyref element specifies that an attribute or element value correspond to those of the specified key or unique element.

The keyref element MUST contain the following (in order):

· one and only one selector element (contains an XPath expression that specifies the set of elements across which the values specified by field must be unique)
· one or more field elements (contains an XPath expression that specifies the values that must be unique for the set of elements specified by the selector element)

Element Information

· Parent elements: element

Syntax

<keyref

id=ID

name=NCName

refer=QName

any attributes

>

(annotation?,(selector,field+))

</include>

(The ? sign declares that the element can occur zero or one time, and the + sign declares that the element must occur one or more times inside the keyref element)

Attribute | Description
id | Optional. Specifies a unique ID for the element
name | Required. Specifies the name of the keyref element
refer | Required. Specifies the name of a key or unique element defined in this or another schema
any attributes | Optional. Specifies any other attributes with non-schema namespace


XML Schema list Element

Definition and Usage

The list element defines a simple type element as a list of values of a specified data type.

Element Information

· Parent elements: simpleType

Syntax

<list

id=ID

itemType=QName

any attributes

>

(annotation?,(simpleType?))

</list>

(The ? sign declares that the element can occur zero or one time inside the list element)

Attribute | Description
id | Optional. Specifies a unique ID for the element
itemType | Specifies the name of a built-in data type or simpleType element defined in this or another schema. This attribute is not allowed if the content contains a simpleType element, otherwise it is required
any attributes | Optional. Specifies any other attributes with non-schema namespace

Example 1

The following example shows a simple type that is a list of integers:

<?xml version="1.0"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:element name="intvalues" type="valuelist">

<xs:simpleType name="valuelist">

<xs:list itemType="xs:integer"/>

</xs:simpleType>

</xs:schema>

The "intvalues" element in a document could look like this (notice that the list will have five list items):

<intvalues>100 34 56 -23 1567</intvalues>

Note: White space is treated as the list item separator!

Example 2

The following example shows a simple type that is a list of strings:

<?xml version="1.0"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:element name="stringvalues" type="valuelist">

<xs:simpleType name="valuelist">

<xs:list itemType="xs:string"/>

</xs:simpleType>

</xs:schema>

The "stringvalues" element in a document could look like this (notice that the list will have four list items):

<stringvalues>I love XML Schema</stringvalues>


XML Schema Miscellaneous Datatypes

XSD Miscellaneous Data Types

Other miscellaneous data types are boolean, base64Binary, hexBinary, float, double, anyURI, QName, and NOTATION.

Boolean Data Type

The boolean data type is used to specify a true or false value.

The following is an example of a boolean declaration in a schema:

<xs:attribute name="disabled" type="xs:boolean"/>

An element in your document might look like this:

<prize disabled="true">999</prize>

Note: Legal values for boolean are true, false, 1 (which indicates true), and 0 (which indicates false).

Binary Data Types

Binary data types are used to express binary-formatted data.

We have two binary data types:

· base64Binary (Base64-encoded binary data)
· hexBinary (hexadecimal-encoded binary data)

The following is an example of a hexBinary declaration in a schema:

<xs:element name="blobsrc" type="xs:hexBinary"/>

AnyURI Data Type

The anyURI data type is used to specify a URI.

The following is an example of an anyURI declaration in a schema:

<xs:attribute name="src" type="xs:anyURI"/>

An element in your document might look like this:

<pic src="http://www.w3schools.com/images/smiley.gif" />

Note: If a URI has spaces, replace them with %20.

Miscellaneous Data Types

Name | Description
anyURI |
base64Binary |
boolean |
double |
float |
hexBinary |
NOTATION |
QName |

Restrictions on Miscellaneous Data Types

Restrictions that can be used with the other data types:

· enumeration (a Boolean data type cannot use this constraint)
· length (a Boolean data type cannot use this constraint)
· maxLength (a Boolean data type cannot use this constraint)
· minLength (a Boolean data type cannot use this constraint)
· pattern
· whiteSpace


XML Schema notation Element

Definition and Usage

The notation element describes the format of non-XML data within an XML document.

Element Information

· Parent elements: schema

Syntax

<notation

id=ID

name=NCName

public=anyURI

system=anyURI

any attributes

>

(annotation?)

</notation>

(The ? sign declares that the element can occur zero or one time inside the notation element)

Attribute | Description
id | Optional. Specifies a unique ID for the element
name | Required. Specifies a name for the element
public | Required. Specifies a URI corresponding to the public identifier
system | Optional. Specifies a URI corresponding to the system identifier
any attributes | Optional. Specifies any other attributes with non-schema namespace

Example 1

The following example shows a gif and a jpeg notation using a viewer application, view.exe:

<?xml version="1.0"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:notation name="gif" public="image/gif" system="view.exe"/>

<xs:notation name="jpeg" public="image/jpeg" system="view.exe"/>

<xs:element name="image">

<xs:complexType>

  <xs:simpleContent>

    <xs:attribute name="type">

      <xs:simpleType>

        <xs:restriction base="xs:NOTATION">

          <xs:enumeration value="gif"/>

          <xs:enumeration value="jpeg"/>

        <xs:restriction>

      </xs:simpleType>

    </xs:attribute>

  </xs:simpleContent>

</xs:complexType>

</xs:element>

</xs:schema>

The "image" element in a document could look like this:

<image type="gif"></image>


XML Schema Numeric Datatypes

XSD Numeric Data Types

Decimal data types are used for numeric values.

Decimal Data Type

The decimal data type is used to specify a numeric value.

The following is an example of a decimal declaration in a schema:

<xs:element name="prize" type="xs:decimal"/>

An element in your document might look like this:

<prize>999.50</prize>

Or it might look like this:

<prize>+999.5450</prize>

Or it might look like this:

<prize>-999.5230</prize>

Or it might look like this:

<prize>0</prize>

Or it might look like this:

<prize>14</prize>

Note: The maximum number of decimal digits you can specify is 18.

Integer Data Type

The integer data type is used to specify a numeric value without a fractional component.

The following is an example of an integer declaration in a schema:

<xs:element name="prize" type="xs:integer"/>

An element in your document might look like this:

<prize>999</prize>

Or it might look like this:

<prize>+999</prize>

Or it might look like this:

<prize>-999</prize>

Or it might look like this:

<prize>0</prize>

Numeric Data Types

Note that all of the data types below derive from the Decimal data type (except for decimal itself)!

Name | Description
byte | A signed 8-bit integer
decimal | A decimal value
int | A signed 32-bit integer
integer | An integer value
long | A signed 64-bit integer
negativeInteger | An integer containing only negative values ( .., -2, -1.)
nonNegativeInteger | An integer containing only non-negative values (0, 1, 2, ..)
nonPositiveInteger | An integer containing only non-positive values (.., -2, -1, 0)
positiveInteger | An integer containing only positive values (1, 2, ..)
short | A signed 16-bit integer
unsignedLong | An unsigned 64-bit integer
unsignedInt | An unsigned 32-bit integer
unsignedShort | An unsigned 16-bit integer
unsignedByte | An unsigned 8-bit integer

Restrictions on Numeric Data Types

Restrictions that can be used with Numeric data types:

· enumeration
· fractionDigits
· maxExclusive
· maxInclusive
· minExclusive
· minInclusive
· pattern
· totalDigits
· whiteSpace


XML Schema redefine Element

Definition and Usage

The redefine element redefines simple and complex types, groups, and attribute groups from an external schema.

Element Information

· Parent elements: schema

Syntax

<redefine

id=ID

schemaLocation=anyURI

any attributes

>

(annotation|(simpleType|complexType|group|attributeGroup))*

</redefine>

Attribute | Description
id | Optional. Specifies a unique ID for the element
schemaLocation | Required. A URI to the location of a schema document
any attributes | Optional. Specifies any other attributes with non-schema namespace

Example 1

The following example shows a schema, Myschama2.xsd, with elements specified by the Myschama1.xsd. The pname type is redefined. According to this schema, elements constrained by the pname type must end with a "country" element:

Myschema1.xsd:

<?xml version="1.0"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:complexType name="pname">

<xs:sequence>

  <xs:element name="firstname"/>

  <xs:element name="lastname"/>

</xs:sequence>

</xs:complexType>

<xs:element name="customer" type="pname"/>

</xs:schema>

Myschema2.xsd:

<?xml version="1.0"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:redefine schemaLocation="Myschema1.xsd">

<xs:complexType name="pname">

  <xs:complexContent>

    <xs:extension base="pname">

      <xs:sequence>

        <xs:element name="country"/>

      </xs:sequence>

    </xs:extension>

  </xs:complexContent>

</xs:complexType>

</xs:redefine>

<xs:element name="author" type="pname"/>

</xs:schema>


XML Schema Reference

XSD Elements

Element | Explanation
 | Specifies that the child elements can appear in any order. Each child element can occur 0 or 1 time
annotation | Specifies the top-level element for schema comments
any | Enables the author to extend the XML document with elements not specified by the schema
anyAttribute | Enables the author to extend the XML document with attributes not specified by the schema
appInfo | Specifies information to be used by the application (must go inside annotation)
attribute | Defines an attribute
attributeGroup | Defines an attribute group to be used in complex type definitions
choice | Allows only one of the elements contained in the <choice> declaration to be present within the containing element
complexContent | Defines extensions or restrictions on a complex type that contains mixed content or elements only
complexType | Defines a complex type element
documentation | Defines text comments in a schema (must go inside annotation)
 | Defines an element
extension | Extends an existing simpleType or complexType element
field | Specifies an XPath expression that specifies the value used to define an identity constraint
group | Defines a group of elements to be used in complex type definitions
import | Adds multiple schemas with different target namespace to a document
 | Adds multiple schemas with the same target namespace to a document
 | Specifies an attribute or element value as a key (unique, non-nullable, and always present) within the containing element in an instance document
keyref | Specifies that an attribute or element value correspond to those of the specified key or unique element
list | Defines a simple type element as a list of values
notation | Describes the format of non-XML data within an XML document
 | Redefines simple and complex types, groups, and attribute groups from an external schema
 | Defines restrictions on a simpleType, simpleContent, or a complexContent
schema | Defines the root element of a schema
selector | Specifies an XPath expression that selects a set of elements for an identity constraint
sequence | Specifies that the child elements must appear in a sequence. Each child element can occur from 0 to any number of times
simpleContent | Contains extensions or restrictions on a text-only complex type or on a simple type as content and contains no elements
 | Defines a simple type and specifies the constraints and information about the values of attributes or text-only elements
union | Defines a simple type as a collection (union) of values from specified simple data types
 | Defines that an element or an attribute value must be unique within the scope

XSD Restrictions/Facets for Datatypes

Look at XSD Restrictions!

Constraint | Description
enumeration | Defines a list of acceptable values
fractionDigits | Specifies the maximum number of decimal places allowed. Must be equal to or greater than zero
length | Specifies the exact number of characters or list items allowed. Must be equal to or greater than zero
maxExclusive | Specifies the upper bounds for numeric values (the value must be less than this value)
maxInclusive | Specifies the upper bounds for numeric values (the value must be less than or equal to this value)
maxLength | Specifies the maximum number of characters or list items allowed. Must be equal to or greater than zero
minExclusive | Specifies the lower bounds for numeric values (the value must be greater than this value)
minInclusive | Specifies the lower bounds for numeric values (the value must be greater than or equal to this value)
minLength | Specifies the minimum number of characters or list items allowed. Must be equal to or greater than zero
pattern | Defines the exact sequence of characters that are acceptable
totalDigits | Specifies the exact number of digits allowed. Must be greater than zero
whiteSpace | Specifies how white space (line feeds, tabs, spaces, and carriage returns) is handled


XML Schema restriction Element

Definition and Usage

The restriction element defines restrictions on a simpleType, simpleContent, or complexContent definition.

Element Information

· Parent elements: simpleType, simpleContent, complexContent

Syntax

<restriction

id=ID

base=QName

any attributes

>

Content for simpleType:

(annotation?,(simpleType?,(minExclusive|minInclusive|

maxExclusive|maxInclusive|totalDigits|fractionDigits|

length|minLength|maxLength|enumeration|whiteSpace|pattern)*))

Content for simpleContent:

(annotation?,(simpleType?,(minExclusive |minInclusive|

maxExclusive|maxInclusive|totalDigits|fractionDigits|

length|minLength|maxLength|enumeration|whiteSpace|pattern)*)?,

((attribute|attributeGroup)*,anyAttribute?))

Content for complexContent:

(annotation?,(group|all|choice|sequence)?,

((attribute|attributeGroup)*,anyAttribute?))

</restriction>

(The ? sign declares that the element can occur zero or one time inside the restriction element)

Attribute | Description
id | Optional. Specifies a unique ID for the element
base | Required. Specifies the name of a built-in data type, simpleType element, or complexType element defined in this schema or another schema
any attributes | Optional. Specifies any other attributes with non-schema namespace

Example 1

This example defines an element called "age" with a restriction. The value of age can NOT be lower than 0 or greater than 100:

<xs:element name="age">

<xs:simpleType>

  <xs:restriction base="xs:integer">

    <xs:minInclusive value="0"/>

    <xs:maxInclusive value="100"/>

  </xs:restriction>

</xs:simpleType>

</xs:element>

Example 2

This example also defines an element called "initials". The "initials" element is a simple type with a restriction. The only acceptable value is THREE of the LOWERCASE OR UPPERCASE letters from a to z:

<xs:element name="initials">

<xs:simpleType>

  <xs:restriction base="xs:string">

    <xs:pattern value="[a-zA-Z][a-zA-Z][a-zA-Z]"/>

  </xs:restriction>

</xs:simpleType>

</xs:element>

Example 3

This example defines an element called "password". The "password" element is a simple type with a restriction. The value must be minimum five characters and maximum eight characters:

<xs:element name="password">

<xs:simpleType>

  <xs:restriction base="xs:string">

    <xs:minLength value="5"/>

    <xs:maxLength value="8"/>

  </xs:restriction>

</xs:simpleType>

</xs:element>

Example 4

This example shows a complex type definition using restriction. The complex type "Norwegian_customer" is derived from a general customer complex type and its country element is fixed to "Norway":

<xs:complexType name="customer">

<xs:sequence>

  <xs:element name="firstname" type="xs:string"/>

  <xs:element name="lastname" type="xs:string"/>

  <xs:element name="country" type="xs:string"/>

</xs:sequence>

</xs:complexType>

<xs:complexType name="Norwegian_customer">

<xs:complexContent>

  <xs:restriction base="customer">

    <xs:sequence>

      <xs:element name="firstname" type="xs:string"/>

      <xs:element name="lastname" type="xs:string"/>

      <xs:element name="country" type="xs:string" fixed="Norway"/>

    </xs:sequence>

  </xs:restriction>

</xs:complexContent>

</xs:complexType>


XML Schema Restrictions/Facets

XSD Restrictions/Facets

Restrictions are used to define acceptable values for XML elements or attributes. Restrictions on XML elements are called facets.

Restrictions on Values

The following example defines an element called "age" with a restriction. The value of age cannot be lower than 0 or greater than 120:

<xs:element name="age">

<xs:simpleType>

<xs:restriction base="xs:integer">

  <xs:minInclusive value="0"/>

  <xs:maxInclusive value="120"/>

</xs:restriction>

</xs:simpleType>

</xs:element>

Restrictions on a Set of Values

To limit the content of an XML element to a set of acceptable values, we would use the enumeration constraint.

The example below defines an element called "car" with a restriction. The only acceptable values are: Audi, Golf, BMW:

<xs:element name="car">

<xs:simpleType>

<xs:restriction base="xs:string">

  <xs:enumeration value="Audi"/>

  <xs:enumeration value="Golf"/>

  <xs:enumeration value="BMW"/>

</xs:restriction>

</xs:simpleType>

</xs:element>

The example above could also have been written like this:

<xs:element name="car" type="carType"/>

<xs:simpleType name="carType">

<xs:restriction base="xs:string">

  <xs:enumeration value="Audi"/>

  <xs:enumeration value="Golf"/>

  <xs:enumeration value="BMW"/>

</xs:restriction>

</xs:simpleType>

Note: In this case the type "carType" can be used by other elements because it is not a part of the "car" element.

Restrictions on a Series of Values

To limit the content of an XML element to define a series of numbers or letters that can be used, we would use the pattern constraint.

The example below defines an element called "letter" with a restriction. The only acceptable value is ONE of the LOWERCASE letters from a to z:

<xs:element name="letter">

<xs:simpleType>

<xs:restriction base="xs:string">

  <xs:pattern value="[a-z]"/>

</xs:restriction>

</xs:simpleType>

</xs:element>

The next example defines an element called "initials" with a restriction. The only acceptable value is THREE of the UPPERCASE letters from a to z:

<xs:element name="initials">

<xs:simpleType>

<xs:restriction base="xs:string">

  <xs:pattern value="[A-Z][A-Z][A-Z]"/>

</xs:restriction>

</xs:simpleType>

</xs:element>

The next example also defines an element called "initials" with a restriction. The only acceptable value is THREE of the LOWERCASE OR UPPERCASE letters from a to z:

<xs:element name="initials">

<xs:simpleType>

<xs:restriction base="xs:string">

  <xs:pattern value="[a-zA-Z][a-zA-Z][a-zA-Z]"/>

</xs:restriction>

</xs:simpleType>

</xs:element>

The next example defines an element called "choice" with a restriction. The only acceptable value is ONE of the following letters: x, y, OR z:

<xs:element name="choice">

<xs:simpleType>

<xs:restriction base="xs:string">

  <xs:pattern value="[xyz]"/>

</xs:restriction>

</xs:simpleType>

</xs:element>

The next example defines an element called "prodid" with a restriction. The only acceptable value is FIVE digits in a sequence, and each digit must be in a range from 0 to 9:

<xs:element name="prodid">

<xs:simpleType>

<xs:restriction base="xs:integer">

  <xs:pattern value="[0-9][0-9][0-9][0-9][0-9]"/>

</xs:restriction>

</xs:simpleType>

</xs:element>

Other Restrictions on a Series of Values

The example below defines an element called "letter" with a restriction. The acceptable value is zero or more occurrences of lowercase letters from a to z:

<xs:element name="letter">

<xs:simpleType>

<xs:restriction base="xs:string">

  <xs:pattern value="([a-z])*"/>

</xs:restriction>

</xs:simpleType>

</xs:element>

The next example also defines an element called "letter" with a restriction. The acceptable value is one or more pairs of letters, each pair consisting of a lower case letter followed by an upper case letter. For example, "sToP" will be validated by this pattern, but not "Stop" or "STOP" or "stop":

<xs:element name="letter">

<xs:simpleType>

<xs:restriction base="xs:string">

  <xs:pattern value="([a-z][A-Z])+"/>

</xs:restriction>

</xs:simpleType>

</xs:element>

The next example defines an element called "gender" with a restriction. The only acceptable value is male OR female:

<xs:element name="gender">

<xs:simpleType>

<xs:restriction base="xs:string">

  <xs:pattern value="male|female"/>

</xs:restriction>

</xs:simpleType>

</xs:element>

The next example defines an element called "password" with a restriction. There must be exactly eight characters in a row and those characters must be lowercase or uppercase letters from a to z, or a number from 0 to 9:

<xs:element name="password">

<xs:simpleType>

<xs:restriction base="xs:string">

  <xs:pattern value="[a-zA-Z0-9]{8}"/>

</xs:restriction>

</xs:simpleType>

</xs:element>

Restrictions on Whitespace Characters

To specify how whitespace characters should be handled, we would use the whiteSpace constraint.

This example defines an element called "address" with a restriction. The whiteSpace constraint is set to "preserve", which means that the XML processor WILL NOT remove any white space characters:

<xs:element name="address">

<xs:simpleType>

<xs:restriction base="xs:string">

  <xs:whiteSpace value="preserve"/>

</xs:restriction>

</xs:simpleType>

</xs:element>

This example also defines an element called "address" with a restriction. The whiteSpace constraint is set to "replace", which means that the XML processor WILL REPLACE all white space characters (line feeds, tabs, spaces, and carriage returns) with spaces:

<xs:element name="address">

<xs:simpleType>

<xs:restriction base="xs:string">

  <xs:whiteSpace value="replace"/>

</xs:restriction>

</xs:simpleType>

</xs:element>

This example also defines an element called "address" with a restriction. The whiteSpace constraint is set to "collapse", which means that the XML processor WILL REMOVE all white space characters (line feeds, tabs, spaces, carriage returns are replaced with spaces, leading and trailing spaces are removed, and multiple spaces are reduced to a single space):

<xs:element name="address">

<xs:simpleType>

<xs:restriction base="xs:string">

  <xs:whiteSpace value="collapse"/>

</xs:restriction>

</xs:simpleType>

</xs:element>

Restrictions on Length

To limit the length of a value in an element, we would use the length, maxLength, and minLength constraints.

This example defines an element called "password" with a restriction. The value must be exactly eight characters:

<xs:element name="password">

<xs:simpleType>

<xs:restriction base="xs:string">

  <xs:length value="8"/>

</xs:restriction>

</xs:simpleType>

</xs:element>

This example defines another element called "password" with a restriction. The value must be minimum five characters and maximum eight characters:

<xs:element name="password">

<xs:simpleType>

<xs:restriction base="xs:string">

  <xs:minLength value="5"/>

  <xs:maxLength value="8"/>

</xs:restriction>

</xs:simpleType>

</xs:element>

Restrictions for Datatypes

Constraint | Description
enumeration | Defines a list of acceptable values
fractionDigits | Specifies the maximum number of decimal places allowed. Must be equal to or greater than zero
length | Specifies the exact number of characters or list items allowed. Must be equal to or greater than zero
maxExclusive | Specifies the upper bounds for numeric values (the value must be less than this value)
maxInclusive | Specifies the upper bounds for numeric values (the value must be less than or equal to this value)
maxLength | Specifies the maximum number of characters or list items allowed. Must be equal to or greater than zero
minExclusive | Specifies the lower bounds for numeric values (the value must be greater than this value)
minInclusive | Specifies the lower bounds for numeric values (the value must be greater than or equal to this value)
minLength | Specifies the minimum number of characters or list items allowed. Must be equal to or greater than zero
pattern | Defines the exact sequence of characters that are acceptable
totalDigits | Specifies the exact number of digits allowed. Must be greater than zero
whiteSpace | Specifies how white space (line feeds, tabs, spaces, and carriage returns) is handled


XML Schema selector Element

Definition and Usage

The selector element specifies an XPath expression that selects a set of elements for an identity constraint (unique, key, and keyref elements).

Element Information

· Parent elements: key, keyref, unique

Syntax

<selector

id=ID

xpath=a subset of XPath expression

any attributes

>

(annotation?)

</selector>

(The ? sign declares that the element can occur zero or one time inside the selector element)

Attribute | Description
id | Optional. Specifies a unique ID for the element
xpath | Required. Specifies an XPath expression, relative to the element being declared, that identifies the child elements to which the identity constraint applies
any attributes | Optional. Specifies any other attributes with non-schema namespace


XML Schema sequence Element

Definition and Usage

The sequence element specifies that the child elements must appear in a sequence. Each child element can occur from 0 to any number of times.

Element Information

· Parent elements: group, choice, sequence, complexType, restriction (both simpleContent and complexContent), extension (both simpleContent and complexContent)

Syntax

<sequence

id=ID

maxOccurs=nonNegativeInteger|unbounded

minOccurs=nonNegativeInteger

any attributes

>

(annotation?,(element|group|choice|sequence|any)*)

</sequence>

(The ? sign declares that the element can occur zero or one time inside the sequence element)

Attribute | Description
id | Optional. Specifies a unique ID for the element
maxOccurs | Optional. Specifies the maximum number of times the sequence element can occur in the parent element. The value can be any number >= 0, or if you want to set no limit on the maximum number, use the value "unbounded". Default value is 1
minOccurs | Optional. Specifies the minimum number of times the sequence element can occur in the parent element. The value can be any number >= 0. Default value is 1
any attributes | Optional. Specifies any other attributes with non-schema namespace

Example 1

This example shows a declaration for an element called "personinfo", which must contain the following five elements in order; "firstname", "lastname", "address", "city", and "country":

<xs:element name="personinfo">

<xs:complexType>

  <xs:sequence>

    <xs:element name="firstname" type="xs:string"/>

    <xs:element name="lastname" type="xs:string"/>

    <xs:element name="address" type="xs:string"/>

    <xs:element name="city" type="xs:string"/>

    <xs:element name="country" type="xs:string"/>

  </xs:sequence>

</xs:complexType>

</xs:element>

Example 2

This example shows a declaration for an element called "pets" that can have zero or more of the following elements, dog and cat, in the sequence element:

<xs:element name="pets">

<xs:complexType>

  <xs:sequence minOccurs="0" maxOccurs="unbounded">

    <xs:element name="dog" type="xs:string"/>

    <xs:element name="cat" type="xs:string"/>

  </xs:sequence>

</xs:complexType>

</xs:element>


XML Schema Simple Elements

XSD Simple Elements

XML Schemas define the elements of your XML files.

A simple element is an XML element that contains only text. It cannot contain any other elements or attributes.

What is a Simple Element?

A simple element is an XML element that can contain only text. It cannot contain any other elements or attributes.

However, the "only text" restriction is quite misleading. The text can be of many different types. It can be one of the types included in the XML Schema definition (boolean, string, date, etc.), or it can be a custom type that you can define yourself.

You can also add restrictions (facets) to a data type in order to limit its content, or you can require the data to match a specific pattern.

Defining a Simple Element

The syntax for defining a simple element is:

<xs:element name="xxx" type="yyy"/>

where xxx is the name of the element and yyy is the data type of the element.

XML Schema has a lot of built-in data types. The most common types are:

· xs:string
· xs:decimal
· xs:integer
· xs:boolean
· xs:date
· xs:time

Example

Here are some XML elements:

<lastname>Refsnes</lastname>

<age>36</age>

<dateborn>1970-03-27</dateborn>

And here are the corresponding simple element definitions:

<xs:element name="lastname" type="xs:string"/>

<xs:element name="age" type="xs:integer"/>

<xs:element name="dateborn" type="xs:date"/>

Default and Fixed Values for Simple Elements

Simple elements may have a default value OR a fixed value specified.

A default value is automatically assigned to the element when no other value is specified.

In the following example the default value is "red":

<xs:element name="color" type="xs:string" default="red"/>

A fixed value is also automatically assigned to the element, and you cannot specify another value.

In the following example the fixed value is "red":

<xs:element name="color" type="xs:string" fixed="red"/>


XML Schema simpleContent Element

Definition and Usage

The simpleContent element contains extensions or restrictions on a text-only complex type or on a simple type as content and contains no elements.

Element Information

· Parent elements: complexType

Syntax

<simpleContent

id=ID

any attributes

>

(annotation?,(restriction|extension))

</simpleContent>

(The ? sign declares that the element can occur zero or one time inside the simpleContent element)

Attribute | Description
id | Optional. Specifies a unique ID for the element
any attributes | Optional. Specifies any other attributes with non-schema namespace

Example 1

Here is an example of an XML element (<shoesize>) that contains text-only:

<shoesize country="france">35</shoesize>

The following example declares a complexType, "shoesize", with its content defined as a integer data type and with a country attribute:

<xs:element name="shoesize">

<xs:complexType>

  <xs:simpleContent>

    <xs:extension base="xs:integer">

      <xs:attribute name="country" type="xs:string" />

    </xs:extension>

  </xs:simpleContent>

</xs:complexType>

</xs:element>


XML Schema simpleType Element

Definition and Usage

The simpleType element defines a simple type and specifies the constraints and information about the values of attributes or text-only elements.

Element Information

· Parent elements: attribute, element, list, restriction, schema, union

Syntax

<simpleType

id=ID

name=NCName

any attributes

>

(annotation?,(restriction|list|union))

</simpleType>

(The ? sign declares that the element can occur zero or one time inside the simpleType element)

Attribute | Description
id | Optional. Specifies a unique ID for the element
name | Specifies a name for the element. This attribute is required if the simpleType element is a child of the schema element, otherwise it is not allowed
any attributes | Optional. Specifies any other attributes with non-schema namespace

Example 1

This example defines an element called "age" that is a simple type with a restriction. The value of age can NOT be lower than 0 or greater than 100:

<xs:element name="age">

<xs:simpleType>

  <xs:restriction base="xs:integer">

    <xs:minInclusive value="0"/>

    <xs:maxInclusive value="100"/>

  </xs:restriction>

</xs:simpleType>

</xs:element>


XML Schema String Datatypes

XSD String Data Types

String data types are used for values that contains character strings.

String Data Type

The string data type can contain characters, line feeds, carriage returns, and tab characters.

The following is an example of a string declaration in a schema:

<xs:element name="customer" type="xs:string"/>

An element in your document might look like this:

<customer>John Smith</customer>

Or it might look like this:

<customer> John Smith </customer>

Note: The XML processor will not modify the value if you use the string data type.

NormalizedString Data Type

The normalizedString data type is derived from the String data type.

The normalizedString data type also contains characters, but the XML processor will remove line feeds, carriage returns, and tab characters.

The following is an example of a normalizedString declaration in a schema:

<xs:element name="customer" type="xs:normalizedString"/>

An element in your document might look like this:

<customer>John Smith</customer>

Or it might look like this:

<customer> John Smith </customer>

Note: In the example above the XML processor will replace the tabs with spaces.

Token Data Type

The token data type is also derived from the String data type.

The token data type also contains characters, but the XML processor will remove line feeds, carriage returns, tabs, leading and trailing spaces, and multiple spaces.

The following is an example of a token declaration in a schema:

<xs:element name="customer" type="xs:token"/>

An element in your document might look like this:

<customer>John Smith</customer>

Or it might look like this:

<customer> John Smith </customer>

Note: In the example above the XML processor will remove the tabs.

String Data Types

Note that all of the data types below derive from the String data type (except for string itself)!

Name | Description
ENTITIES |
ENTITY |
ID | A string that represents the ID attribute in XML (only used with schema attributes)
IDREF | A string that represents the IDREF attribute in XML (only used with schema attributes)
IDREFS |
language | A string that contains a valid language id
Name | A string that contains a valid XML name
NCName |
NMTOKEN | A string that represents the NMTOKEN attribute in XML (only used with schema attributes)
NMTOKENS |
normalizedString | A string that does not contain line feeds, carriage returns, or tabs
QName |
string | A string
token | A string that does not contain line feeds, carriage returns, tabs, leading or trailing spaces, or multiple spaces

Restrictions on String Data Types

Restrictions that can be used with String data types:

· enumeration
· length
· maxLength
· minLength
· pattern (NMTOKENS, IDREFS, and ENTITIES cannot use this constraint)
· whiteSpace


XML Schema Summary

You Have Learned XML Schema, Now What?

 Top Previous Next

XML Schema Summary

This tutorial has taught you how to describe the structure of an XML document.

You have learned how to use an XML Schema is to define the legal elements of an XML document, just like a DTD. We think that very soon XML Schemas will be used in most Web applications as a replacement for DTDs.

You have also learned that the XML Schema language is very rich. Unlike DTDs, it supports data types and namespaces.

For more information on XML Schema, please look at our XML Schema reference.

Now You Know XML Schema, What's Next?

The next step is to learn about WSDL.

WSDL is a schema-based language for describing Web services and how to access them.

WSDL describes a web service, along with the message format and protocol details for the web service.

If you want to learn more about WSDL, please visit our WSDL tutorial.


XML Schema Tutorial

XML Schema Tutorial

schema

XML Schema is an XML-based alternative to DTDs.

An XML Schema describes the structure of an XML document.

The XML Schema language is also referred to as XML Schema Definition (XSD).

In this tutorial you will learn how to read and create XML Schemas, why XML Schemas are more powerful than DTDs, and how to use the XML Schema language in your application.

Start learning XML Schema!

XML Schema Reference

At W3Schools you will find a complete list of valid XML Schema elements.


XML Schema union Element

Definition and Usage

The union element defines a simple type as a collection (union) of values from specified simple data types.

Element Information

· Parent elements: simpleType

Syntax

<union

id=ID

memberTypes="list of QNames"

any attributes

>

(annotation?,(simpleType*))

</union>

(The ? sign declares that the element can occur zero or one time inside the union element)

Attribute | Description
id | Optional. Specifies a unique ID for the element
memberTypes | Optional. Specifies a list of built-in data types or simpleType elements defined in a schema
any attributes | Optional. Specifies any other attributes with non-schema namespace

Example 1

This example shows a simple type that is a union of two simple types:

<xs:element name="jeans_size">

<xs:simpleType>

  <xs:union memberTypes="sizebyno sizebystring" />

</xs:simpleType>

</xs:element>

<xs:simpleType name="sizebyno">

<xs:restriction base="xs:positiveInteger">

  <xs:maxInclusive value="42"/>

</xs:restriction>

</xs:simpleType>

<xs:simpleType name="sizebystring">

<xs:restriction base="xs:string">

  <xs:enumeration value="small"/>

  <xs:enumeration value="medium"/>

  <xs:enumeration value="large"/>

</xs:restriction>

</xs:simpleType>


XML Schema unique Element

Definition and Usage

The unique element defines that an element or an attribute value must be unique within the scope.

The unique element MUST contain the following (in order):

· one and only one selector element (contains an XPath expression that specifies the set of elements across which the values specified by field must be unique)
· one or more field elements (contains an XPath expression that specifies the values that must be unique for the set of elements specified by the selector element)

Element Information

· Parent elements: element

Syntax

<unique

id=ID

name=NCName

any attributes

>

(annotation?,(selector,field+))

</unique>

(The ? sign declares that the element can occur zero or one time inside the unique element)

Attribute | Description
id | Optional. Specifies a unique ID for the element
name | Required. Specifies a name for the element
any attributes | Optional. Specifies any other attributes with non-schema namespace


Semantic Web

Semantic Web Tutorial

semweb

The Semantic Web = a Web with a meaning.

"If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"

Tim Berners-Lee, Weaving the Web, 1999

What Is The Semantic Web?

The word semantic stands for the meaning of. The semantic of something is the meaning of something.

The Semantic Web is a web that is able to describe things in a way that computers can understand.

· The Beatles was a popular band from Liverpool.
· John Lennon was a member of the Beatles.
· The record "Hey Jude" was recorded by the Beatles.

Sentences like these can be understood by people. But how can they be understood by computers?

Statements are built with syntax rules. The syntax of a language defines the rules for building the language statements. But how can syntax become semantic?

This is what the Semantic Web is all about. Describing things in a way that computers applications can understand.

The Semantic Web is not about links between web pages.

The Semantic Web describes the relationships between things (like A is a part of B and Y is a member of Z) and the properties of things (like size, weight, age, and price)

The Resource Description Framework

RDF (Resource Description Framework) is a markup language for describing information and resources on the web.

Putting information into RDF files, makes it possible for computer programs ("web spiders") to search, discover, pick up, collect, analyze and process information from the web.

The Semantic Web uses RDF to describe web resources.

If you want to learn more about RDF please .

How Can It Be Used?

If information about music, cars, tickets (and everything else) were stored in RDF files, intelligent web applications could collect information from many different sources, combine information, and present it to users in a meaningful way.

Information like this:

· Car prices from different resellers
· Information about medicines
· Plane schedules
· Spare parts for the industry
· Information about books (price, pages, editor, year)
· Who is who
· Dates of events
· Computer updates

Can It Be Understood?

The Semantic Web is not a very fast growing technology.

One of the reasons for that is the learning curve. RDF was developed by people with academic background in logic and artificial intelligence. For traditional developers it is not very easy to understand.

One fast growing language for building semantic web applications is RSS. If you want to learn more about RSS please read our RSS tutorial.

In the following pages of this tutorial we will concentrate on using RDF to discover the potentials of the semantic web.

Please move on to the next chapter to see a simple semantic web application example.


Semantic Web Example

The Semantic Web. A simple example application.

Buying And Selling Used Cars

Suppose a semantic web system was built to administer the selling and buying of used cars over the Internet.

The system would contain two main applications:

· One for people who wanted to buy a car
· One for people who wanted to put up a car for sale

Let's call the Internet applications for IBA (I Buy Application), and ISA (I Sell Application).

IBA - The I Buy Application

People who want to buy a car could use an IBA application much like this:

I Buy Application (IBA)

[TEditFormControlObj]

In a "real live" application you would be asked to identify yourself the first time you used it. Your ID would be stored in an RDF (Resource Description Framework) file. Your ID would identify you as a person with name, address, email, and social security number.

When you submitted the query, the application would return a list of cars for sale, and the list could be drilled down and sorted by year, price, location and availability. This information would be returned from a web spider continuously searching the web for RDF files.

ISA - The I Sell Application

People who want to sell a car could use an ISA application much like this:

I Sell Application (ISA)

[TEditFormControlObj]

When you submitted the form, the application would ask you for more information and store your ID and the information in an RDF file made available to the web.

The RDF file would contain information like:

Your ID: Name, address, email, security number.

Your selling item: type, model, picture, price, description.

Behind The Scene

Behind the scene the "ISA" application creates an RDF file with a lot of RDF pointers.

It creates an RDF pointer to a file with information about your person, an RDF pointer to information about Volvo and Volvo models, an RDF pointer to Volvo dealers and resellers, about parts, about prices, and much more.

An RDF pointer is a pointer (actually an URL) to information about things (like a knowledge database).

The beauty about this is that you don't have to describe yourself, or the car model. The RDF application will sort it out for you.

Will It Ever Work?

Chaos? Standards? What do we need? What are we waiting for?

A standard by W3C, by Microsoft, by Google?

RDF is data about web data - or metadata. Often RDF files describe other RDF files. Will it ever be possible to link all these RDF files together and build a semantic web?

No one knows, but someone will try.

Will It Work All By Itself?

I don't think the semantic web will work all by itself. It will need some help to become a reality.

It is not very likely that you will be able to sell your car just by putting your RDF file on the Internet.

The "ISA" and "IBA" applications above will have to be developed by someone. Someone will have to build a search engine database for all the items, and someone will have to develop a standards for it.

It might be eBay, it might be Microsoft, it might be Google, or someone else. But someone will.

Soon we will see marketplaces based on RDF. And one day you will be able to collect information about almost everything on the web in a standardized RDF format.

It might not be free. You might have to pay for the information, or at least for selling your products.

Publishing information about things on the Internet will be much easier than before. Maybe the RSS language (see ) will be the solution to some of the problems.

Please go to the next chapter to read more about some semantic web issues.


Semantic Web Security

Semantic Web Issues

Here is a list of issues about the semantic web.

Semantic Web Agents

The semantic web will not be searchable in free text. To search (or access) the semantic web, we will need some software to help us.

To use the semantic web, we will need "Semantic Web Agents" or "Semantic Web Services". These "Agents" or "Services" will help us to find what we are looking for on the semantic web.

On the semantic web, we would like to look for information about:

· The cheapest airline tickets
· Styling that would fit my car
· Books, films, and music CDs
· Weather forecasts
· Time schedules and calendar events
· Stock prices and exchange rates

In the future, for any information out there on the web; ask your "Semantic Web Agent".

Semantic Web Security

Can I trust a seller on the semantic web. Can I trust a buyer on the semantic web?

To solve I will need access to more RDF files:

· Credit card information
· Bank information
· Semantic records
· Social Security information
Source | Person ID | Person Name | Status
Citybank | 11223344 | John Smith | trustworthy
VISA | 11223344 | John Smith | trustworthy
Recorded | 11223344 | John Smith | unknown
US Social Security | 11223344 | John Smith | born 10-10-1962

By using RDF files like this, my "Semantic Web Agent" can determine if I can trust the person I am dealing with.

(the "Recorded" information could be supplied by Internet trading companies like eBay, Amazon or the like)

Payment

To serve the semantic web, payment methods have to be developed.

Internet accessible "Deposit Accounts" could be a solution to this.

A deposit account is an account that can only receive deposits. It could be made accessible for everyone on the Internet, and everyone could deposit money to your account only knowing your ID (or your email address, much like PayPal).

Using this payment method everyone could publish their bank account number over the Internet and sell their car without any middleman.

What will be the future of Internet banking?

OWL - Your Web Thesaurus

Scenario:

· You want to sell a book
· You open your OWL agent
· You entered “Book” in the category
· A new screen is asking you to fill out information about the book
· You fill out the ISBN number written on the book
· You select "used", and "condition as new", and hit return
· Your OWL agent automatically fills out the rest
· Author, year, pages, ...... all information is now complete
· Your OWL agent has collected all the information you needed to sell the book
· You click on Auction.

You can read more about OWL in our RDF tutorial.

Your Auction Agent

· Your Auction agent opens.
· You fill out minimum price, and click on "Submit"
· You book becomes available to all the auctions on the Internet


Web Building Tutorial

After you have studied our Web Building Tutorial, you will know how to build a professional web site.

You will also know how to prepare yourself for the future, and how to use new technologies like XHTML and XML.

Table of Contents

.

What does a Web developer have to know?

Don't skip this chapter. It is important. Read it all !

Web Design

This chapter is about how to design your web site.

Web Users

This chapter is about web users and what kind of equipment they have.

Web Standards

This chapter is about Web standards, and how to use them.

Web Page Validation

This chapter lets you validate your Web site's HTML, XHTML, CSS, XML, and WMP pages.

Web W3C

This chapter is about the World Wide Web Consortium.

How to protect your computer while surfing on the net.

This is an alphabetical list of Web Building Glossary Terms.

Web Search

This page will help you to get listed in the most popular search engines.

Web Awards

How to win an award for your Web Site.


Site Validation

HTML Validation-page


Site Building 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

tsaward

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.

dailyaward

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

wblogo4

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.

webaward2000

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.

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.

goldencrane

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.

Joke

Support: We are open 24 hours.

Customer: Eastern time?


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 Plug-In)

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.

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

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.

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.

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.

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.

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.

WML Script

Scripting language (programming language) for WML.

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.

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.

Computer Joke

Support: What kind of computer do you have?

Customer: A white one.


Site Building Search Engines

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!

· Altavista

http://www.altavista.com/addurl/

· AllTheWeb

· 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

Computer Joke

Support: Type A at the prompt.

Customer: How do you spell that?


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.

Computer Joke

Customer: Will clicking on "Remember Password" help me remember my password?


Site Validation

Web Page Validation

Validate your HTML files with W3C

Input the address of the page you want to validate in the box below:

[TEditFormControlObj]

Validate your CSS files with W3C

Input the address of the css file that you want to validate in the box below:

[TEditFormControlObj]

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:

[TEditFormControlObj]

Validate your XML files with Internet Explorer

Input the address of the page you want to validate in the box below:

[TEditFormControlObj]

Validate your WML files with Internet Explorer

Input the address of the page you want to validate in the box below:

[TEditFormControlObj]


Links to 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
·
· CSS
· XML
· XSL
· DOM

You can read more about W3C in our W3C tutorial.

W3C Resources at W3Schools

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.

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.


Introduction to SMIL

SMIL Introduction

SMIL is an easy-to-learn HTML-like language for describing audiovisual presentations.

What You Should Already Know

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

· HTML
· XHTML
· XML
· XML namespaces

If you want to study these subjects first, find the tutorials on our Home Page.

What Is SMIL?

· SMIL stands for Synchronized Multimedia Integration Language
· SMIL is pronounced "smile"
· SMIL is a language for describing audiovisual presentations
· SMIL is easy to learn and understand
· SMIL is an HTML-like language
· SMIL is written in XML
· SMIL presentations can be written using a text-editor
· SMIL is a W3C standard

A Simplified SMIL Example

<smil>

<body>

<seq repeatCount="indefinite">

  <img src="image1.jpg" dur="3s" />

  <img src="image2.jpg" dur="3s" />

</seq>

</body>

</smil>

From the example above you can see that SMIL is an XML based, easy to understand, HTML-like language that can be written using a simple text-editor.

The <smil></smil> tags defines the SMIL document. A <body> element defines the body of the presentation. A <seq> element defines a sequence to display. The repeatCount attribute defines an indefinite loop. Each <img> element has a src attribute to define the image source and a dur attribute to define the duration of the display.

What Can SMIL Do?

· SMIL can be used to create Internet or Intranet presentations
· SMIL can be used to create slide-show presentations
· SMIL has been described as the Internet answer to PowerPoint
· SMIL presentations can display multiple file types (text, video, audio...)
· SMIL presentations can display multiple files at the same time
· SMIL presentations can display files from multiple web servers
· SMIL presentations can contain links to other SMIL presentations
· SMIL presentations can contain control buttons (stop, start, next, ...)
· SMIL has functions for defining sequences and duration of elements
· SMIL has functions for defining position and visibility of elements

SMIL At W3C

W3C has been developing SMIL since 1997, as a language for choreographing multimedia presentations where audio, video, text and graphics are combined in real-time.

SMIL was presented as a working draft in November 1997.

SMIL 1.0 became a W3C Recommendation in. June 1998.

SMIL 2.0 became a W3C Recommendation in August 2001.


SMIL Files

A SMIL file describes a multimedia presentation.

SMIL Files

A SMIL file contains all the information necessary to describe a multimedia presentation.

SMIL files are stored with the file extension *.smil

A SMIL file contains the following:

· The layout of the presentation
· The timeline of the presentation
· The source of the multimedia elements

SMIL Markup

Since SMIL is based on XML, the tags are case sensitive. All SMIL tags requires lowercase letters.

A SMIL document must start with a <smil> tag and end with a </smil> closing tag. It may contain a <head> element and must contain a <body> element.

The <head> element is used to store information about the presentation layout and other meta information.

The <body> element contains the media elements.

<smil>

<body>

<seq repeatCount="indefinite">

  <img src="image1.jpg" dur="3s" />

  <img src="image2.jpg" dur="3s" />

</seq>

</body>

</smil>

How to Play a SMIL File?

To play a SMIL presentation, you will need a SMIL player. Different SMIL players can be found on the Internet:

· RealOne Platform by RealNetworks has full support for SMIL 2.0
· by Oratrix provides a SMIL 2.0 player
· SMIL Player by InterObject supports the SMIL 2.0 Basic Profile

Playing SMIL Presentations in Internet Explorer

With Internet Explorer 5.5 or later, SMIL elements can be inserted into HTML files.

This way any SMIL presentation can run over the Internet as standard HTML files.

The rest of this tutorial will use Internet Explorer 5.5 or later to demonstrate the use of the different SMIL elements.


SMIL Media

SMIL Media Elements

SMIL uses media element to describe content.

Media Elements

The following media elements can be used to include media objects in a SMIL document:

Element | Description | Ver
<animation> | Defines an animation | 1
<audio> | Defines an audio clip | 1
<brush> | Defines a brush | 1
<img> | Defines an image | 1
<param> | Defines a parameter | 1
<ref> | Defines a generic media reference | 1
<text> | Defines a text | 1
<textstream> | Defines a texstream | 1
<video> | Defines a video | 1

Media Attributes

Each media object in a SMIL document must be included using a reference (URL) in the src attribute. The src attribute is the most commonly used attribute for media elements.

The type attribute is used to define the media type. If the type attribute is omitted the application should rely on the type information communicated by the server. Developers should not rely on the file type extension to define the file type.

Attribute | Description | Ver
erase | Defines the behavior of the element after any timing is complete | 1
src | Defines the source of a media object | 1
type | Defines the media type | 1

For a full list of SMIL elements and attributes: W3Schools SMIL Reference.

The <animation> Element

The <animation> element defines a reference to an animation object stored as vector graphics or in another animated format.

The <animation> element should not be confused with the <animate> element. The <animation> element defines an animation object by reference. The <animate> elements defines the animation of other elements.

The <audio> Element

The <audio> element defines a reference to an audio object stored as recorded audio.

Example:

<html xmlns:t="urn:schemas-microsoft-com:time">

<head>

<?import namespace="t" implementation="#default#time2">

</head>

<body>

<t:audio

src="liar.wav"

repeatCount="indefinite"

type="wav" />

</body>

</html>

.

The <brush> Element

The <brush> element defines a fill color or fill pattern.

The element defines painting a color or a pattern in place of a media object.

The <img> Element

The <img> element defines a reference to an image object stored as JPG or an other image format.

Example: <img src="myimage.gif" type="GIF" />

The <param> Element

The <param> element defines a parameter to any other media element.

Example: <param name="color" value="red" />

The <ref> Element

The <ref> element defines a reference to a generic media object.

The <ref> element can be used when the media type is not well defined.

The <text> Element

The <text> element defines a reference to a text object stored as text.

The <textstream> Element

The <textstream> element defines a reference to an text object stored as a text-stream.

The <video> Element

The <video> element defines a reference to a video object stored as recorded video.

Example:

<html xmlns:t="urn:schemas-microsoft-com:time">

<head>

<?import namespace="t" implementation="#default#time2">

</head>

<body>

<t:video

src="http://www.ananova.com/about/vap_windows_check.wmv"

repeatCount="indefinite"

type="wmv" />

</body>

</html>

Click here to try it yourself.


SMIL Parallel

SMIL in Parallel

Objects inside the <par> element will be played at the same time (in parallel).

The Parallel Element <par>

The <par> element can have a number of attributes. The most common attributes are:

Attribute | Value | Description
begin | time | Sets the delay before the element is displayed
dur | time | Sets the duration for the display
endsync | "first"|"last"|id(clip) | Synchronizes the stopping of elements
repeatCount | number | Sets the number of repetitions for the display

For a full list of SMIL elements and attributes: W3Schools SMIL Reference.

Synchronization

A parallel group of clips can be stopped at the same time using the endsync attribute in the <par> tag.

endsync="first" stops all the clips in the <par> group when the shortest clip are finished regardles of any time parameters set for the other clips.

endsync="last" concludes the <par> group when all clips have finished playing. This is the default.

endsync="id(ID)" concludes the <par> group when the clip with the identified (ID) clip are finished. The ID is referring to the value of the clips id attribute.

Example: Displaying Things Simultaneously

<html xmlns:t="urn:schemas-microsoft-com:time">

<head>

<?import namespace="t" implementation="#default#time2">

<style>.t {behavior: url(#default#time2)}</style>

</head>

<body>

<par>

<t:audio

src="liar.wav"

repeatCount="indefinite"

type="wav" />

<t:seq repeatCount="indefinite">

<h2 class="t" dur="1s">

I will display for one second</h2>

<h2 class="t" dur="2s">

I will display for two seconds</h2>

</t:seq>

</par>

</body>

</html>

Click here to try it yourself.


SMIL Reference

This is a complete SMIL 2.0 Reference (under construction).

SMIL Timing Elements

Element | Description | Ver
<excl> | Defines elements to be displayed exclusively | 2
<par> | Defines elements to be displayed in parallel | 1
<seq> | Defines elements to be displayed in a sequence | 1

SMIL Timing Attributes

Attribute | Description | Ver
begin | Sets the delay before the element is displayed | 1
dur | Sets the duration for the display | 1
endsync | Synchronizes the stopping of parallel elements | 1
repeatCount | Sets the number of repetitions for the display | 1

SMIL Media Elements

Element | Description | Ver
<animation> | Defines an animation | 1
<audio> | Defines an audio clip | 1
<brush> | Defines a brush | 1
<img> | Defines an image | 1
<param> | Defines a parameter | 1
<ref> | Defines a generic media reference | 1
<text> | Defines a text | 1
<textstream> | Defines a textstream | 1
<video> | Defines a video | 1

SMIL Structure Elements

Element | Description | Ver
<body> | Defines the body of a SMIL document | 1
<smil> | Defines a SMIL document | 1


SMIL Sequences

SMIL Sequence

<seq> - the most common SMIL element - defines a sequence.

The Sequence Element <seq>

The <seq> element defines a sequence. The children elements of the <seq> element are displayed in a sequence, one after each other.

You can use the <seq> element to define a list of images to be displayed, a list of paragraphs, a list or videos, or any other elements.

The <seq> element can have a number of attributes. The most common attributes are:

Attribute | Value | Description
begin | time | Sets the delay before the element is displayed
dur | time | Sets the duration for the display
repeatCount | number | Sets the number of repetitions for the display

For a full list of SMIL elements and attributes: W3Schools SMIL Reference.

Example: Displaying a Sequence of Images

<html xmlns:t="urn:schemas-microsoft-com:time">

<head>

<?import namespace="t" implementation="#default#time2">

<style>.t {behavior: url(#default#time2)}</style>

</head>

<body>

<t:seq repeatCount="indefinite">

<img class="t" src="image1.jpg" dur="1s" />

<img class="t" src="image2.jpg" dur="1s" />

</t:seq>

</body>

</html>

Click here to try it yourself.

Example: Displaying a Sequence of Texts

<html xmlns:t="urn:schemas-microsoft-com:time">

<head>

<?import namespace="t" implementation="#default#time2">

<style>.t {behavior: url(#default#time2)}</style>

</head>

<body>

<t:seq repeatCount="indefinite">

<h2 class="t" dur="1s">

I will display for one second</h2>

<h2 class="t" dur="2s">

I will display for two seconds</h2>

<h2 class="t" dur="3s">

I will display for three seconds</h2>

</t:seq>

</body>

</html>

Click here to try it yourself.


SMIL Timing

Timing is about when to start and when to stop.

Timelines and Timing

Most SMIL element have timing attributes to define the timeline of the presentation.

Timing attributes defines the start time and the duration of an element.

The following table lists the possible time formats:

Format | Examples
hh:mm:ss.f | 1:50:00 (One hour and fifty minutes) 10:50 (Ten minutes and fifty seconds) 10.5 (Ten and a half second)
number [h|min|s|ms] | 3.5h (Three and a half hour) 3.5min (Three and a half minute) 3.5sec (Three and a half second) 35ms (Thirty-five milliseconds)
wallclock (YYY-MM-DDThh:mm:ss+zone) | wallclock(2003-08-01T12:10:30+1.00) (Ten minutes and thirty seconds past twelve, August the first 2003, coordinated universal time plus one hour)

The value "indefinite" can also be used to define never ending loops.

Duration

The duration (dur="5s") attribute of an element defines how long the element will be visible:

<html>

<head>

<style>.t {behavior: url(#default#time2)}</style>

</head>

<body>

<img class="t" src="image1.jpg" dur="5s" />

</body>

</html>

Click here to try it yourself.

When To Start?

The begin (begin="2s") defines when the element will be visible (start playing):

<html>

<head>

<style>.t {behavior: url(#default#time2)}</style>

</head>

<body>

<img class="t" src="image1.jpg" begin="2s" />

</body>

</html>

.


SMIL Transitions

Transitions can generate effects like "fading" and "wiping" to elements.

Transitions Belongs To SMIL 2.0

Transitions are new in SMIL 2.0. Transitions were not a part of the SMIL 1.0 specification.

Internet Explorer 6 supports transitions based on the SMIL 2.0 specification. Transitions are implemented with the element <transitionfilter>.

Attributes

The <transitionfilter> element can have several attributes. The most common are:

Attribute | Description | Example
type | Defines the type of transition filter (see transition filter list) | type="clockWipe"
begin | Defines when the transition should begin | begin="0s"
mode | Defines the transition mode | mode="in"
from | Defines the starting value of the transition | from="0.2"
to | Defines the ending value of the transition | to="0.8"

Transition Filters

The following transition filters can be used:

fade, barnDoorWipe, barWipe, clockWipe, ellipseWipe, fanWipe, irisWipe, pushWipe, slideWipe, snakeWipe, spiralWipe, starWipe

Example: Displaying Transitions

<html xmlns:t="urn:schemas-microsoft-com:time">

<head>

<?import namespace="t" implementation="#default#time2">

<style>.t {behavior: url(#default#time2)}</style>

</head>

<body>

<t:transitionfilter targetelement="keyb"

type="clockWipe"

begin="keyb.begin" dur="2s" />

<img id="keyb" class="t" src="pic_keyb.jpg" dur="4s"

width="128" height="107" />

</body>

</html>

In the example above the image will be displayed for 4 seconds. The transition filter will use 2 second to "clockWipe" the image into its place.

You must run Internet Explorer 6 for the sample to function.

Click here to try it yourself.


SMIL Tutorial

movie

SMIL is an easy-to-learn HTML-like language for describing audiovisual presentations.

After you have studied this tutorial you will know what SMIL is, and how to create web based multimedia presentations which integrate audio, video, images, text or any other media type.

Start learning SMIL today!

Table of Contents

Introduction to SMIL

This chapter describes what SMIL is, and how SMIL can be used.

SMIL Files

This chapter describes what a SMIL file is.

This chapter describes how SMIL can be used in HTML.

This chapter describes the future use of SMIL in XHTML.

This chapter describes how SMIL uses timing to display its elements.

SMIL Sequence

This chapter describes how SMIL displays sequences..

SMIL Parallel

This chapter describes how SMIL displays objects simultaneously.

SMIL Transition

This chapter describes how SMIL can add transitions to elements.

SMIL Media

This chapter describes how SMIL defines media elements.

SMIL Reference

This is W3Schools complete SMIL reference.


tryit_view0f18.html


tryit_view2da3.html


tryit_view5300.html


tryit_view5f8a.html


tryit_view635e.html


tryit_view8920.html


tryit_viewa174.html

I will display for one second

I will display for two seconds

I will display for three seconds


tryit_viewb9b0.html

I will display for one second

I will display for two seconds


tryit_viewfbe8.html


SOAP Introduction

Introduction to SOAP

SOAP is a simple XML based protocol to let applications exchange information over HTTP.

Or more simply: SOAP is a protocol for accessing a Web Service.

What You Should Already Know

Before you study SOAP you should have a basic understanding of XML and XML Namespaces.

If you want to study these subjects first, please read our .

What is SOAP?

· SOAP stands for Simple Object Access Protocol
· SOAP is a communication protocol
· SOAP is for communication between applications
· SOAP is a format for sending messages
· SOAP is designed to communicate via Internet
· SOAP is platform independent
· SOAP is language independent
· SOAP is based on XML
· SOAP is simple and extensible
· SOAP allows you to get around firewalls
· SOAP will be developed as a W3C standard

Why SOAP?

It is important for application development to allow Internet communication between programs.

Today's applications communicate using Remote Procedure Calls (RPC) between objects like DCOM and CORBA, but HTTP was not designed for this. RPC represents a compatibility and security problem; firewalls and proxy servers will normally block this kind of traffic.

A better way to communicate between applications is over HTTP, because HTTP is supported by all Internet browsers and servers. SOAP was created to accomplish this.

SOAP provides a way to communicate between applications running on different operating systems, with different technologies and programming languages.

Microsoft and SOAP

SOAP is a key element of Microsoft's .NET architecture for future Internet application development.

SOAP 1.1 was Proposed to W3C

UserLand, Ariba, Commerce One, Compaq, Developmentor, HP, IBM, IONA, Lotus, Microsoft, and SAP proposed to W3C, in May 2000, the SOAP Internet protocol that they hope will revolutionize application development by connecting graphic user interface desktop applications to powerful Internet servers using the standards of the Internet: HTTP and XML.

W3C is Working on SOAP 1.2

The first public Working Draft on SOAP was published from W3C in December 2001. To read more about the SOAP activities at W3C please visit our W3C tutorial.


SOAP Tutorial

SOAP Tutorial

soap3

SOAP is a simple XML-based protocol to let applications exchange information over HTTP.

In our SOAP tutorial, you will learn what SOAP is, and how it uses XML to exchange information between applications.

Start learning SOAP!

Table of Contents

Introduction to SOAP

This chapter explains what SOAP is and why SOAP is useful.

This chapter describes the building blocks of SOAP and SOAP syntax rules.

SOAP Envelope

This chapter describes the SOAP Envelope element.

This chapter describes the SOAP Header element.

This chapter describes the SOAP Body element.

SOAP Fault

This chapter describes the SOAP Fault element.

SOAP HTTP Binding

This chapter is an introduction to the SOAP HTTP binding.

SOAP Example

This chapter describes a SOAP example.

This chapter contains a summary on what you have learned in this tutorial and a recommendation on what subject you should study next.


SOAP Body Element

The mandatory SOAP Body element contains the actual SOAP message.

The SOAP Body Element

The required SOAP Body element contains the actual SOAP message intended for the ultimate endpoint of the message.

Immediate child elements of the SOAP Body element may be namespace-qualified. SOAP defines one element inside the Body element in the default namespace ("http://www.w3.org/2001/12/soap-envelope"). This is the SOAP Fault element, which is used to indicate error messages.

<?xml version="1.0"?>

<soap:Envelope

xmlns:soap="http://www.w3.org/2001/12/soap-envelope"

soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">

<soap:Body>

 <m:GetPrice xmlns:m="http://www.w3schools.com/prices">

    <m:Item>Apples</m:Item>

 </m:GetPrice>

</soap:Body>

</soap:Envelope>

The example above requests the price of apples. Note that the m:GetPrice and the Item elements above are application-specific elements. They are not a part of the SOAP standard.

A SOAP response could look something like this:

<?xml version="1.0"?>

<soap:Envelope

xmlns:soap="http://www.w3.org/2001/12/soap-envelope"

soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">

<soap:Body>

 <m:GetPriceResponse xmlns:m="http://www.w3schools.com/prices">

    <m:Price>1.90</m:Price>

 </m:GetPriceResponse>

</soap:Body>

</soap:Envelope>


SOAP Envelope Element

The mandatory SOAP Envelope element is the root element of a SOAP message.

The SOAP Envelope Element

The required SOAP Envelope element is the root element of a SOAP message. It defines the XML document as a SOAP message.

Note the use of the xmlns:soap namespace. It should always have the value of:

http://www.w3.org/2001/12/soap-envelope

and it defines the Envelope as a SOAP Envelope:

<?xml version="1.0"?>

<soap:Envelope

xmlns:soap="http://www.w3.org/2001/12/soap-envelope"

soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">

...

Message information goes here

...

</soap:Envelope>

The xmlns:soap Namespace

A SOAP message must always have an Envelope element associated with the "http://www.w3.org/2001/12/soap-envelope" namespace.

If a different namespace is used, the application must generate an error and discard the message.

The encodingStyle Attribute

The SOAP encodingStyle attribute is used to define the data types used in the document. This attribute may appear on any SOAP element, and it will apply to that element's contents and all child elements. A SOAP message has no default encoding.

Syntax

soap:encodingStyle="URI"

Example

<?xml version="1.0"?>

<soap:Envelope

xmlns:soap="http://www.w3.org/2001/12/soap-envelope"

soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">

...

Message information goes here

...

</soap:Envelope>


SOAP Example

A SOAP Example

In the example below, a GetStockPrice request is sent to a server. The request has a StockName parameter, and a Price parameter will be returned in the response. The namespace for the function is defined in "http://www.example.org/stock" address.

The SOAP request:

POST /InStock HTTP/1.1

Host: www.example.org

Content-Type: application/soap+xml; charset=utf-8

Content-Length: nnn

<?xml version="1.0"?>

<soap:Envelope

xmlns:soap="http://www.w3.org/2001/12/soap-envelope"

soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">

<soap:Body xmlns:m="http://www.example.org/stock">

<m:GetStockPrice>

    <m:StockName>IBM</m:StockName>

</m:GetStockPrice>

</soap:Body>

</soap:Envelope>

A SOAP response:

HTTP/1.1 200 OK

Content-Type: application/soap+xml; charset=utf-8

Content-Length: nnn

<?xml version="1.0"?>

<soap:Envelope

xmlns:soap="http://www.w3.org/2001/12/soap-envelope"

soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">

<soap:Body xmlns:m="http://www.example.org/stock">

  <m:GetStockPriceResponse>

    <m:Price>34.5</m:Price>

  </m:GetStockPriceResponse>

</soap:Body>

</soap:Envelope>


SOAP Fault Element

The optional SOAP Fault element is used to hold error and status information for a SOAP message.

The SOAP Fault Element

An error message from a SOAP message is carried inside a Fault element.

If a Fault element is present, it must appear as a child element of the Body element. A Fault element can only appear once in a SOAP message.

The SOAP Fault element has the following sub elements:

Sub Element | Description
<faultcode> | A code for identifying the fault
<faultstring> | A human readable explanation of the fault
<faultactor> | Information about who caused the fault to happen
<detail> | Holds application specific error information related to the Body element

SOAP Fault Codes

The faultcode values defined below must be used in the faultcode element when describing faults:

Error | Description
VersionMismatch | Found an invalid namespace for the SOAP Envelope element
MustUnderstand | An immediate child element of the Header element, with the mustUnderstand attribute set to "1", was not understood
Client | The message was incorrectly formed or contained incorrect information
Server | There was a problem with the server so the message could not proceed


SOAP Header Element

The optional SOAP Header element contains header information.

The SOAP Header Element

The optional SOAP Header element contains application specific information (like authentication, payment, etc) about the SOAP message. If the Header element is present, it must be the first child element of the Envelope element.

Note: All immediate child elements of the Header element must be namespace-qualified.

<?xml version="1.0"?>

<soap:Envelope

xmlns:soap="http://www.w3.org/2001/12/soap-envelope"

soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">

<soap:Header>

<m:Trans

xmlns:m="http://www.w3schools.com/transaction/"

soap:mustUnderstand="1">234</m:Trans>

</soap:Header>

...

...

</soap:Envelope>

The example above contains a header with a "Trans" element, a "mustUnderstand" attribute value of "1", and a value of 234.

SOAP defines three attributes in the default namespace ("http://www.w3.org/2001/12/soap-envelope"). These attributes are: actor, mustUnderstand, and encodingStyle. The attributes defined in the SOAP Header defines how a recipient should process the SOAP message.

The actor Attribute

A SOAP message may travel from a sender to a receiver by passing different endpoints along the message path. Not all parts of the SOAP message may be intended for the ultimate endpoint of the SOAP message but, instead, may be intended for one or more of the endpoints on the message path.

The SOAP actor attribute may be used to address the Header element to a particular endpoint.

Syntax

soap:actor="URI"

Example

<?xml version="1.0"?>

<soap:Envelope

xmlns:soap="http://www.w3.org/2001/12/soap-envelope"

soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">

<soap:Header>

<m:Trans

xmlns:m="http://www.w3schools.com/transaction/"

soap:actor="http://www.w3schools.com/appml/">

234

</m:Trans>

</soap:Header>

...

...

</soap:Envelope>

The mustUnderstand Attribute

The SOAP mustUnderstand attribute can be used to indicate whether a header entry is mandatory or optional for the recipient to process.

If you add "mustUnderstand="1" to a child element of the Header element it indicates that the receiver processing the Header must recognize the element. If the receiver does not recognize the element it must fail when processing the Header.

Syntax

soap:mustUnderstand="0|1"

Example

<?xml version="1.0"?>

<soap:Envelope

xmlns:soap="http://www.w3.org/2001/12/soap-envelope"

soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">

<soap:Header>

<m:Trans

xmlns:m="http://www.w3schools.com/transaction/"

soap:mustUnderstand="1">

234

</m:Trans>

</soap:Header>

...

...

</soap:Envelope>

The encodingStyle Attribute

The SOAP encodingStyle attribute is explained in the previous chapter.


SOAP HTTP Binding

The HTTP Protocol

HTTP communicates over TCP/IP. An HTTP client connects to an HTTP server using TCP. After establishing a connection, the client can send an HTTP request message to the server:

POST /item HTTP/1.1

Host: 189.123.345.239

Content-Type: text/plain

Content-Length: 200

The server then processes the request and sends an HTTP response back to the client. The response contains a status code that indicates the status of the request:

200 OK

Content-Type: text/plain

Content-Length: 200

In the example above, the server returned a status code of 200. This is the standard success code for HTTP.

If the server could not decode the request, it could have returned something like this:

400 Bad Request

Content-Length: 0

SOAP HTTP Binding

A SOAP method is an HTTP request/response that complies with the SOAP encoding rules.

HTTP + XML = SOAP

A SOAP request could be an HTTP POST or an HTTP GET request.

The HTTP POST request specifies at least two HTTP headers: Content-Type and Content-Length.

Content-Type

The Content-Type header for a SOAP request and response defines the MIME type for the message and the character encoding (optional) used for the XML body of the request or response.

Syntax

Content-Type: MIMEType; charset=character-encoding

Example

POST /item HTTP/1.1

Content-Type: application/soap+xml; charset=utf-8

Content-Length

The Content-Length header for a SOAP request and response specifies the number of bytes in the body of the request or response.

Syntax

Content-Length: bytes

Example

POST /item HTTP/1.1

Content-Type: application/soap+xml; charset=utf-8

Content-Length: 250


SOAP Summary

You Have Learned SOAP, Now What?

 Top Previous Next

SOAP Summary

This tutorial has taught you how to use SOAP to exchange information between applications over HTTP.

You have learned about the different elements and attributes in a SOAP message.

You have also learned how use SOAP as a protocol for accessing a web service.

Now You Know SOAP, What's Next?

The next step is to learn about WSDL and Web Services.

WSDL

WSDL is an XML-based language for describing Web services and how to access them.

WSDL describes a web service, along with the message format and protocol details for the web service.

If you want to learn more about WSDL, please visit our WSDL tutorial.

Web Services

Web services can convert your applications into web-applications.

By using XML, messages can be sent between applications.

If you want to learn more about web services, please visit our Web Services tutorial.


SOAP Syntax

SOAP Building Blocks

A SOAP message is an ordinary XML document containing the following elements:

· A required Envelope element that identifies the XML document as a SOAP message
· An optional Header element that contains header information
· A required Body element that contains call and response information
· An optional Fault element that provides information about errors that occurred while processing the message

All the elements above are declared in the default namespace for the SOAP envelope:

http://www.w3.org/2001/12/soap-envelope

and the default namespace for SOAP encoding and data types is:

http://www.w3.org/2001/12/soap-encoding

Syntax Rules

Here are some important syntax rules:

· A SOAP message MUST be encoded using XML
· A SOAP message MUST use the SOAP Envelope namespace
· A SOAP message MUST use the SOAP Encoding namespace
· A SOAP message must NOT contain a DTD reference
· A SOAP message must NOT contain XML Processing Instructions

Skeleton SOAP Message

<?xml version="1.0"?>

<soap:Envelope

xmlns:soap="http://www.w3.org/2001/12/soap-envelope"

soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">

<soap:Header>

...

...

</soap:Header>

<soap:Body>

...

...

<soap:Fault>

  ...

  ...

</soap:Fault>

</soap:Body>

</soap:Envelope>


SQL Introduction

Introduction to SQL

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

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 | FirstName | Address | City
Hansen | Ola | Timoteivn 10 | Sandnes
Svendson | Tove | Borgvn 23 | Sandnes
Pettersen | Kari | Storgt 20 | 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 Alias

With SQL, aliases can be used for column names and table names.

Column Name Alias

The syntax is:

SELECT column AS column_alias FROM table

Table Name Alias

The syntax is:

SELECT column FROM table AS table_alias

Example: Using a Column Alias

This table (Persons):

LastName | FirstName | Address | City
Hansen | Ola | Timoteivn 10 | Sandnes
Svendson | Tove | Borgvn 23 | Sandnes
Pettersen | Kari | Storgt 20 | Stavanger

And this SQL:

SELECT LastName AS Family, FirstName AS Name

FROM Persons

Returns this result:

Family | Name
Hansen | Ola
Svendson | Tove
Pettersen | Kari

Example: Using a Table Alias

This table (Persons):

LastName | FirstName | Address | City
Hansen | Ola | Timoteivn 10 | Sandnes
Svendson | Tove | Borgvn 23 | Sandnes
Pettersen | Kari | Storgt 20 | Stavanger

And this SQL:

SELECT LastName, FirstName

FROM Persons AS Employees

Returns this result:

Table Employees:

LastName | FirstName
Hansen | Ola
Svendson | Tove
Pettersen | Kari


SQL ALTER TABLE

ALTER TABLE

The ALTER TABLE statement is used to add or drop columns in an existing table.

ALTER TABLE table_name

ADD column_name datatype

ALTER TABLE table_name

DROP COLUMN column_name

Note: Some database systems don't allow the dropping of a column in a database table (DROP COLUMN column_name).

Person:

LastName | FirstName | Address
Pettersen | Kari | Storgt 20

Example

To add a column named "City" in the "Person" table:

ALTER TABLE Person ADD City varchar(30)

Result:

LastName | FirstName | Address | City
Pettersen | Kari | Storgt 20 |

Example

To drop the "Address" column in the "Person" table:

ALTER TABLE Person DROP COLUMN Address

Result:

LastName | FirstName | City
Pettersen | Kari |


SQL AND & OR

AND & OR

AND and OR join two or more conditions in a WHERE clause.

The AND operator displays a row if ALL conditions listed are true. The OR operator displays a row if ANY of the conditions listed are true.

Original Table (used in the examples)

LastName | FirstName | Address | City
Hansen | Ola | Timoteivn 10 | Sandnes
Svendson | Tove | Borgvn 23 | Sandnes
Svendson | Stephen | Kaivn 18 | Sandnes

Example

Use AND to display each person with the first name equal to "Tove", and the last name equal to "Svendson":

SELECT * FROM Persons

WHERE FirstName='Tove'

AND LastName='Svendson'

Result:

LastName | FirstName | Address | City
Svendson | Tove | Borgvn 23 | Sandnes

Example

Use OR to display each person with the first name equal to "Tove", or the last name equal to "Svendson":

SELECT * FROM Persons

WHERE firstname='Tove'

OR lastname='Svendson'

Result:

LastName | FirstName | Address | City
Svendson | Tove | Borgvn 23 | Sandnes
Svendson | Stephen | Kaivn 18 | Sandnes

Example

You can also combine AND and OR (use parentheses to form complex expressions):

SELECT * FROM Persons WHERE

(FirstName='Tove' OR FirstName='Stephen')

AND LastName='Svendson'

Result:

LastName | FirstName | Address | City
Svendson | Tove | Borgvn 23 | Sandnes
Svendson | Stephen | Kaivn 18 | Sandnes


SQL AVG Function

The AVG function returns the average value of a column in a selection. NULL values are not included in the calculation.

Syntax

SELECT AVG(column) FROM table

Example

This example returns the average age of the persons in the "Persons" table:

SELECT AVG(Age) FROM Persons

Result

32.67

Example

This example returns the average age for persons that are older than 20 years:

SELECT AVG(Age) FROM Persons WHERE Age>20

Result

39.5


SQL BETWEEN

BETWEEN ... AND

The BETWEEN ... AND operator selects a range of data between two values. These values can be numbers, text, or dates.

SELECT column_name FROM table_name

WHERE column_name

BETWEEN value1 AND value2

Original Table (used in the examples)

LastName | FirstName | Address | City
Hansen | Ola | Timoteivn 10 | Sandnes
Nordmann | Anna | Neset 18 | Sandnes
Pettersen | Kari | Storgt 20 | Stavanger
Svendson | Tove | Borgvn 23 | Sandnes

Example 1

To display the persons alphabetically between (and including) "Hansen" and exclusive "Pettersen", use the following SQL:

SELECT * FROM Persons WHERE LastName

BETWEEN 'Hansen' AND 'Pettersen'

Result:

LastName | FirstName | Address | City
Hansen | Ola | Timoteivn 10 | Sandnes
Nordmann | Anna | Neset 18 | Sandnes

IMPORTANT! The BETWEEN...AND operator is treated differently in different databases. With some databases a person with the LastName of "Hansen" or "Pettersen" will not be listed (BETWEEN..AND only selects fields that are between and excluding the test values). With some databases a person with the last name of "Hansen" or "Pettersen" will be listed (BETWEEN..AND selects fields that are between and including the test values). With other databases a person with the last name of "Hansen" will be listed, but "Pettersen" will not be listed (BETWEEN..AND selects fields between the test values, including the first test value and excluding the last test value). Therefore: Check how your database treats the BETWEEN....AND operator!

Example 2

To display the persons outside the range used in the previous example, use the NOT operator:

SELECT * FROM Persons WHERE LastName

NOT BETWEEN 'Hansen' AND 'Pettersen'

Result:

LastName | FirstName | Address | City
Pettersen | Kari | Storgt 20 | Stavanger
Svendson | Tove | Borgvn 23 | Sandnes


SQL COUNT DISTINCT Function

Note: The following example works with ORACLE and Microsoft SQL server but not with Microsoft Access.

The keyword DISTINCT and COUNT can be used together to count the number of distinct results.

Syntax

SELECT COUNT(DISTINCT column(s)) FROM table

Example

With this "Orders" Table:

Company | OrderNumber
Sega | 3412
W3Schools | 2312
Trio | 4678
W3Schools | 6798

Example

SELECT COUNT(Company) FROM Orders

Result:

4

Example

SELECT COUNT(DISTINCT Company) FROM Orders

Result:

3


SQL COUNT Function

The COUNT(column) function returns the number of rows without a NULL value in the specified column.

Syntax

SELECT COUNT(column) FROM table

Example

With this "Persons" Table:

Name | Age
Hansen, Ola | 34
Svendson, Tove | 45
Pettersen, Kari |

This example finds the number of persons with a value in the "Age" field in the "Persons" table:

SELECT COUNT(Age) FROM Persons

Result:

2

The COUNT(column) function is handy for finding columns without a value. Note that the result is one less than the number of rows in the original table because one of the persons does not have an age value stored.


SQL COUNT(*) Function

The COUNT(*) function returns the number of selected rows in a selection.

Syntax

SELECT COUNT(*) FROM table

Example

With this "Persons" Table:

Name | Age
Hansen, Ola | 34
Svendson, Tove | 45
Pettersen, Kari | 19

This example returns the number of rows in the table:

SELECT COUNT(*) FROM Persons

Result:

3

Example

Return the number of persons that are older than 20 years:

SELECT COUNT(*) FROM Persons WHERE Age>20

Result:

2


SQL Create Database, Table, and Index

Create a Database

To create a database:

CREATE DATABASE database_name

Create a Table

To create a table in a database:

CREATE TABLE table_name

(

column_name1 data_type,

column_name2 data_type,

.......

)

Example

This example demonstrates how you can create a table named "Person", with four columns. The column names will be "LastName", "FirstName", "Address", and "Age":

CREATE TABLE Person

(

LastName varchar,

FirstName varchar,

Address varchar,

Age int

)

This example demonstrates how you can specify a maximum length for some columns:

CREATE TABLE Person

(

LastName varchar(30),

FirstName varchar,

Address varchar,

Age int(3)

)

The data type specifies what type of data the column can hold. The table below contains the most common data types in SQL:

Data Type | Description
integer(size) int(size) smallint(size) tinyint(size) | Hold integers only. The maximum number of digits are specified in parenthesis.
decimal(size,d) numeric(size,d) | Hold numbers with fractions. The maximum number of digits are specified in "size". The maximum number of digits to the right of the decimal is specified in "d".
char(size) | Holds a fixed length string (can contain letters, numbers, and special characters). The fixed size is specified in parenthesis.
varchar(size) | Holds a variable length string (can contain letters, numbers, and special characters). The maximum size is specified in parenthesis.
date(yyyymmdd) | Holds a date

Create Index

Indices are created in an existing table to locate rows more quickly and efficiently. It is possible to create an index on one or more columns of a table, and each index is given a name. The users cannot see the indexes, they are just used to speed up queries.

Note: Updating a table containing indexes takes more time than updating a table without, this is because the indexes also need an update. So, it is a good idea to create indexes only on columns that are often used for a search.

A Unique Index

Creates a unique index on a table. A unique index means that two rows cannot have the same index value.

CREATE UNIQUE INDEX index_name

ON table_name (column_name)

The "column_name" specifies the column you want indexed.

A Simple Index

Creates a simple index on a table. When the UNIQUE keyword is omitted, duplicate values are allowed.

CREATE INDEX index_name

ON table_name (column_name)

The "column_name" specifies the column you want indexed.

Example

This example creates a simple index, named "PersonIndex", on the LastName field of the Person table:

CREATE INDEX PersonIndex

ON Person (LastName)

If you want to index the values in a column in descending order, you can add the reserved word DESC after the column name:

CREATE INDEX PersonIndex

ON Person (LastName DESC)

If you want to index more than one column you can list the column names within the parentheses, separated by commas:

CREATE INDEX PersonIndex

ON Person (LastName, FirstName)


SQL CREATE VIEW

SQL CREATE VIEW Statement

A view is a virtual table based on the result-set of a SELECT statement.

What is a View?

In SQL, a VIEW is a virtual table based on the result-set of a SELECT statement.

A view contains rows and columns, just like a real table. The fields in a view are fields from one or more real tables in the database. You can add SQL functions, WHERE, and JOIN statements to a view and present the data as if the data were coming from a single table.

Note: The database design and structure will NOT be affected by the functions, where, or join statements in a view.

Syntax

CREATE VIEW view_name AS

SELECT column_name(s)

FROM table_name

WHERE condition

Note: The database does not store the view data! The database engine recreates the data, using the view's SELECT statement, every time a user queries a view.

Using Views

A view could be used from inside a query, a stored procedure, or from inside another view. By adding functions, joins, etc., to a view, it allows you to present exactly the data you want to the user.

The sample database Northwind has some views installed by default. The view "Current Product List" lists all active products (products that are not discontinued) from the Products table. The view is created with the following SQL:

CREATE VIEW [Current Product List] AS

SELECT ProductID,ProductName

FROM Products

WHERE Discontinued=No

We can query the view above as follows:

SELECT * FROM [Current Product List]

Another view from the Northwind sample database selects every product in the Products table that has a unit price that is higher than the average unit price:

CREATE VIEW [Products Above Average Price] AS

SELECT ProductName,UnitPrice

FROM Products

WHERE UnitPrice>(SELECT AVG(UnitPrice) FROM Products)

We can query the view above as follows:

SELECT * FROM [Products Above Average Price]

Another example view from the Northwind database calculates the total sale for each category in 1997. Note that this view selects its data from another view called "Product Sales for 1997":

CREATE VIEW [Category Sales For 1997] AS

SELECT DISTINCT CategoryName,Sum(ProductSales) AS CategorySales

FROM [Product Sales for 1997]

GROUP BY CategoryName

We can query the view above as follows:

SELECT * FROM [Category Sales For 1997]

We can also add a condition to the query. Now we want to see the total sale only for the category "Beverages":

SELECT * FROM [Category Sales For 1997]

WHERE CategoryName='Beverages'


SQL Delete

SQL DELETE Statement

The DELETE Statement

The DELETE statement is used to delete rows in a table.

Syntax

DELETE FROM table_name

WHERE column_name = some_value

Person:

LastName | FirstName | Address | City
Nilsen | Fred | Kirkegt 56 | Stavanger
Rasmussen | Nina | Stien 12 | Stavanger

Delete a Row

"Nina Rasmussen" is going to be deleted:

DELETE FROM Person WHERE LastName = 'Rasmussen'

Result

LastName | FirstName | Address | City
Nilsen | Fred | Kirkegt 56 | Stavanger

Delete All Rows

It is possible to delete all rows in a table without deleting the table. This means that the table structure, attributes, and indexes will be intact:

DELETE FROM table_name

or

DELETE * FROM table_name


SQL Drop Index, Table and Database

Drop Index

You can delete an existing index in a table with the DROP INDEX statement.

Syntax for Microsoft SQLJet (and Microsoft Access):

DROP INDEX index_name ON table_name

Syntax for MS SQL Server:

DROP INDEX table_name.index_name

Syntax for IBM DB2 and Oracle:

DROP INDEX index_name

Syntax for MySQL:

ALTER TABLE table_name DROP INDEX index_name

Delete a Table or Database

To delete a table (the table structure, attributes, and indexes will also be deleted):

DROP TABLE table_name

To delete a database:

DROP DATABASE database_name

Truncate a Table

What if we only want to get rid of the data inside a table, and not the table itself? Use the TRUNCATE TABLE command (deletes only the data inside the table):

TRUNCATE TABLE table_name


SQL Exercises

SQL Try It

Test your SQL Skills

On this page you can test your SQL skills.

We will use the Customers table in the Northwind database:

CompanyName | ContactName | Address | City
Alfreds Futterkiste | Maria Anders | Obere Str. 57 | Berlin
Berglunds snabbköp | Christina Berglund | Berguvsvägen 8 | Luleå
Centro comercial Moctezuma | Francisco Chang | Sierras de Granada 9993 | México D.F.
Ernst Handel | Roland Mendel | Kirchgasse 6 | Graz
FISSA Fabrica Inter. Salchichas S.A. | Diego Roel | C/ Moralzarzal, 86 | Madrid
Galería del gastrónomo | Eduardo Saavedra | Rambla de Cataluña, 23 | Barcelona
Island Trading | Helen Bennett | Garden House Crowther Way | Cowes
Königlich Essen | Philip Cramer | Maubelstr. 90 | Brandenburg
Laughing Bacchus Wine Cellars | Yoshi Tannamuri | 1900 Oak St. | Vancouver
Magazzini Alimentari Riuniti | Giovanni Rovelli | Via Ludovico il Moro 22 | Bergamo
North/South | Simon Crowther | South House 300 Queensbridge | London
Paris spécialités | Marie Bertrand | 265, boulevard Charonne | Paris
Rattlesnake Canyon Grocery | Paula Wilson | 2817 Milton Dr. | Albuquerque
Simons bistro | Jytte Petersen | Vinbæltet 34 | København
The Big Cheese | Liz Nixon | 89 Jefferson Way Suite 2 | Portland
Vaffeljernet | Palle Ibsen | Smagsløget 45 | Århus
Wolski Zajazd | Zbyszek Piestrzeniewicz | ul. Filtrowa 68 | Warszawa

To preserve space, the table above is a subset of the Customers table used in the example below.

Try it Yourself

To see how SQL works, you can copy the SQL statements below and paste them into the textarea, or you can make your own SQL statements.

SELECT * FROM customers

SELECT CompanyName, ContactName

FROM customers

SELECT * FROM customers

WHERE companyname LIKE 'a%'

SELECT CompanyName, ContactName

FROM customers

WHERE CompanyName > 'g'

AND ContactName > 'g'

[TTextAreaFormControlObj]


SQL FIRST Function

The FIRST function returns the value of the first record in the specified field.

Tip: Use the ORDER BY clause to order the records!

Syntax

SELECT FIRST(column) AS [expression]

FROM table

Example

SELECT FIRST(Age) AS lowest_age

FROM Persons

ORDER BY Age

Result:

19


SQL Functions

SQL has a lot of built-in functions for counting and calculations.

Function Syntax

The syntax for built-in SQL functions is:

SELECT function(column) FROM table

Types of Functions

There are several basic types and categories of functions in SQL. The basic types of functions are:

· Aggregate Functions
· Scalar functions

Aggregate functions

Aggregate functions operate against a collection of values, but return a single value.

Note: If used among many other expressions in the item list of a SELECT statement, the SELECT must have a GROUP BY clause!!

"Persons" table (used in most examples)

Name | Age
Hansen, Ola | 34
Svendson, Tove | 45
Pettersen, Kari | 19

Aggregate functions in MS Access

Function | Description
AVG(column) | Returns the average value of a column
COUNT(column) | Returns the number of rows (without a NULL value) of a column
COUNT(*) | Returns the number of selected rows
FIRST(column) | Returns the value of the first record in a specified field
LAST(column) | Returns the value of the last record in a specified field
MAX(column) | Returns the highest value of a column
MIN(column) | Returns the lowest value of a column
STDEV(column) |
STDEVP(column) |
SUM(column) | Returns the total sum of a column
VAR(column) |
VARP(column) |

Aggregate functions in SQL Server

Function | Description
AVG(column) | Returns the average value of a column
BINARY_CHECKSUM |
CHECKSUM |
CHECKSUM_AGG |
COUNT(column) | Returns the number of rows (without a NULL value) of a column
COUNT(*) | Returns the number of selected rows
COUNT(DISTINCT column) | Returns the number of distinct results
FIRST(column) | Returns the value of the first record in a specified field (not supported in SQLServer2K)
LAST(column) | Returns the value of the last record in a specified field (not supported in SQLServer2K)
MAX(column) | Returns the highest value of a column
MIN(column) | Returns the lowest value of a column
STDEV(column) |
STDEVP(column) |
 | Returns the total sum of a column
VAR(column) |
VARP(column) |

Scalar functions

Scalar functions operate against a single value, and return a single value based on the input value.

Useful Scalar Functions in MS Access

Function | Description
UCASE(c) | Converts a field to upper case
LCASE(c) | Converts a field to lower case
MID(c,start[,end]) | Extract characters from a text field
LEN(c) | Returns the length of a text field
INSTR(c,char) | Returns the numeric position of a named character within a text field
LEFT(c,number_of_char) | Return the left part of a text field requested
RIGHT(c,number_of_char) | Return the right part of a text field requested
ROUND(c,decimals) | Rounds a numeric field to the number of decimals specified
MOD(x,y) | Returns the remainder of a division operation
NOW() | Returns the current system date
FORMAT(c,format) | Changes the way a field is displayed
DATEDIFF(d,date1,date2) | Used to perform date calculations


SQL GROUP BY and HAVING

Aggregate functions (like SUM) often need an added GROUP BY functionality.

GROUP BY...

GROUP BY... was added to SQL because aggregate functions (like SUM) return the aggregate of all column values every time they are called, and without the GROUP BY function it was impossible to find the sum for each individual group of column values.

The syntax for the GROUP BY function is:

SELECT column,SUM(column) FROM table GROUP BY column

GROUP BY Example

This "Sales" Table:

Company | Amount
W3Schools | 5500
IBM | 4500
W3Schools | 7100

And This SQL:

SELECT Company, SUM(Amount) FROM Sales

Returns this result:

Company | SUM(Amount)
W3Schools | 17100
IBM | 17100
W3Schools | 17100

The above code is invalid because the column returned is not part of an aggregate. A GROUP BY clause will solve this problem:

SELECT Company,SUM(Amount) FROM Sales

GROUP BY Company

Returns this result:

Company | SUM(Amount)
W3Schools | 12600
IBM | 4500

HAVING...

HAVING... was added to SQL because the WHERE keyword could not be used against aggregate functions (like SUM), and without HAVING... it would be impossible to test for result conditions.

The syntax for the HAVING function is:

SELECT column,SUM(column) FROM table

GROUP BY column

HAVING SUM(column) condition value

This "Sales" Table:

Company | Amount
W3Schools | 5500
IBM | 4500
W3Schools | 7100

This SQL:

SELECT Company,SUM(Amount) FROM Sales

GROUP BY Company

HAVING SUM(Amount)>10000

Returns this result

Company | SUM(Amount)
W3Schools | 12600


SQL IN

IN

The IN operator may be used if you know the exact value you want to return for at least one of the columns.

SELECT column_name FROM table_name

WHERE column_name IN (value1,value2,..)

Original Table (used in the examples)

LastName | FirstName | Address | City
Hansen | Ola | Timoteivn 10 | Sandnes
Nordmann | Anna | Neset 18 | Sandnes
Pettersen | Kari | Storgt 20 | Stavanger
Svendson | Tove | Borgvn 23 | Sandnes

Example 1

To display the persons with LastName equal to "Hansen" or "Pettersen", use the following SQL:

SELECT * FROM Persons

WHERE LastName IN ('Hansen','Pettersen')

Result:

LastName | FirstName | Address | City
Hansen | Ola | Timoteivn 10 | Sandnes
Pettersen | Kari | Storgt 20 | Stavanger


SQL INSERT INTO

SQL INSERT INTO Statement

The INSERT INTO Statement

The INSERT INTO statement is used to insert new rows into a table.

Syntax

INSERT INTO table_name

VALUES (value1, value2,....)

You can also specify the columns for which you want to insert data:

INSERT INTO table_name (column1, column2,...)

VALUES (value1, value2,....)

Insert a New Row

This "Persons" table:

LastName | FirstName | Address | City
Pettersen | Kari | Storgt 20 | Stavanger

And this SQL statement:

INSERT INTO Persons

VALUES ('Hetland', 'Camilla', 'Hagabakka 24', 'Sandnes')

Will give this result:

LastName | FirstName | Address | City
Pettersen | Kari | Storgt 20 | Stavanger
Hetland | Camilla | Hagabakka 24 | Sandnes

Insert Data in Specified Columns

This "Persons" table:

LastName | FirstName | Address | City
Pettersen | Kari | Storgt 20 | Stavanger
Hetland | Camilla | Hagabakka 24 | Sandnes

And This SQL statement:

INSERT INTO Persons (LastName, Address)

VALUES ('Rasmussen', 'Storgt 67')

Will give this result:

LastName | FirstName | Address | City
Pettersen | Kari | Storgt 20 | Stavanger
Hetland | Camilla | Hagabakka 24 | Sandnes
Rasmussen |  | Storgt 67 |


SQL JOIN

Joins and Keys

Sometimes we have to select data from two or more tables to make our result complete. We have to perform a join.

Tables in a database can be related to each other with keys. A primary key is a column with a unique value for each row. Each primary key value must be unique within the table. The purpose is to bind data together, across tables, without repeating all of the data in every table.

In the "Employees" table below, the "Employee_ID" column is the primary key, meaning that no two rows can have the same Employee_ID. The Employee_ID distinguishes two persons even if they have the same name.

When you look at the example tables below, notice that:

· The "Employee_ID" column is the primary key of the "Employees" table
· The "Prod_ID" column is the primary key of the "Orders" table
· The "Employee_ID" column in the "Orders" table is used to refer to the persons in the "Employees" table without using their names

Employees:

Employee_ID | Name
01 | Hansen, Ola
02 | Svendson, Tove
03 | Svendson, Stephen
04 | Pettersen, Kari

Orders:

Prod_ID | Product | Employee_ID
234 | Printer | 01
657 | Table | 03
865 | Chair | 03

Referring to Two Tables

We can select data from two tables by referring to two tables, like this:

Example

Who has ordered a product, and what did they order?

SELECT Employees.Name, Orders.Product

FROM Employees, Orders

WHERE Employees.Employee_ID=Orders.Employee_ID

Result

Name | Product
Hansen, Ola | Printer
Svendson, Stephen | Table
Svendson, Stephen | Chair

Example

Who ordered a printer?

SELECT Employees.Name

FROM Employees, Orders

WHERE Employees.Employee_ID=Orders.Employee_ID

AND Orders.Product='Printer'

Result

Name

Hansen, Ola

Using Joins

OR we can select data from two tables with the JOIN keyword, like this:

Example INNER JOIN

Syntax

SELECT field1, field2, field3

FROM first_table

INNER JOIN second_table

ON first_table.keyfield = second_table.foreign_keyfield

Who has ordered a product, and what did they order?

SELECT Employees.Name, Orders.Product

FROM Employees

INNER JOIN Orders

ON Employees.Employee_ID=Orders.Employee_ID

The INNER JOIN returns all rows from both tables where there is a match. If there are rows in Employees that do not have matches in Orders, those rows will not be listed.

Result

Name | Product
Hansen, Ola | Printer
Svendson, Stephen | Table
Svendson, Stephen | Chair

Example LEFT JOIN

Syntax

SELECT field1, field2, field3

FROM first_table

LEFT JOIN second_table

ON first_table.keyfield = second_table.foreign_keyfield

List all employees, and their orders - if any.

SELECT Employees.Name, Orders.Product

FROM Employees

LEFT JOIN Orders

ON Employees.Employee_ID=Orders.Employee_ID

The LEFT JOIN returns all the rows from the first table (Employees), even if there are no matches in the second table (Orders). If there are rows in Employees that do not have matches in Orders, those rows also will be listed.

Result

Name | Product
Hansen, Ola | Printer
Svendson, Tove |
Svendson, Stephen | Table
Svendson, Stephen | Chair
Pettersen, Kari |

Example RIGHT JOIN

Syntax

SELECT field1, field2, field3

FROM first_table

RIGHT JOIN second_table

ON first_table.keyfield = second_table.foreign_keyfield

List all orders, and who has ordered - if any.

SELECT Employees.Name, Orders.Product

FROM Employees

RIGHT JOIN Orders

ON Employees.Employee_ID=Orders.Employee_ID

The RIGHT JOIN returns all the rows from the second table (Orders), even if there are no matches in the first table (Employees). If there had been any rows in Orders that did not have matches in Employees, those rows also would have been listed.

Result

Name | Product
Hansen, Ola | Printer
Svendson, Stephen | Table
Svendson, Stephen | Chair

Example

Who ordered a printer?

SELECT Employees.Name

FROM Employees

INNER JOIN Orders

ON Employees.Employee_ID=Orders.Employee_ID

WHERE Orders.Product = 'Printer'

Result

Name

Hansen, Ola


SQL LAST Function

The LAST function returns the value of the last record in the specified field.

Tip: Use the ORDER BY clause to order the records!

Syntax

SELECT LAST(column) AS [expression]

FROM table

Example

SELECT LAST(Age) AS highest_age

FROM Persons

ORDER BY Age

Result:

45


SQL MAX Function

The MAX function returns the highest value in a column. NULL values are not included in the calculation.

Syntax

SELECT MAX(column) FROM table

Example

SELECT MAX(Age) FROM Persons

Result:

45

Note: The MIN and MAX functions can also be used on text columns, to find the highest or lowest value in alphabetical order.


SQL MIN Function

The MIN function returns the lowest value in a column. NULL values are not included in the calculation.

Syntax

SELECT MIN(column) FROM table

Example

SELECT MIN(Age) FROM Persons

Result:

19

Note: The MIN and MAX functions can also be used on text columns, to find the highest or lowest value in alphabetical order.


SQL ORDER BY

The ORDER BY keyword is used to sort the result.

Sort the Rows

The ORDER BY clause is used to sort the rows.

Orders:

Company | OrderNumber
Sega | 3412
ABC Shop | 5678
W3Schools | 2312
W3Schools | 6798

Example

To display the company names in alphabetical order:

SELECT Company, OrderNumber FROM Orders

ORDER BY Company

Result:

Company | OrderNumber
ABC Shop | 5678
Sega | 3412
W3Schools | 6798
W3Schools | 2312

Example

To display the company names in alphabetical order AND the OrderNumber in numerical order:

SELECT Company, OrderNumber FROM Orders

ORDER BY Company, OrderNumber

Result:

Company | OrderNumber
ABC Shop | 5678
Sega | 3412
W3Schools | 2312
W3Schools | 6798

Example

To display the company names in reverse alphabetical order:

SELECT Company, OrderNumber FROM Orders

ORDER BY Company DESC

Result:

Company | OrderNumber
W3Schools | 6798
W3Schools | 2312
Sega | 3412
ABC Shop | 5678

Example

To display the company names in reverse alphabetical order AND the OrderNumber in numerical order:

SELECT Company, OrderNumber FROM Orders

ORDER BY Company DESC, OrderNumber ASC

Result:

Company | OrderNumber
W3Schools | 2312
W3Schools | 6798
Sega | 3412
ABC Shop | 5678

Notice that there are two equal company names (W3Schools) in the result above. The only time you will see the second column in ASC order would be when there are duplicated values in the first sort column, or a handful of nulls.


SQL Quick Reference

SQL Quick Reference from W3Schools. Print it, and fold it in your pocket.

SQL Syntax

Statement | Syntax
AND / OR | SELECT column_name(s) FROM table_name WHERE condition AND|OR condition
ALTER TABLE (add column) | ALTER TABLE table_name ADD column_name datatype
ALTER TABLE (drop column) | ALTER TABLE table_name DROP COLUMN column_name
AS (alias for column) | SELECT column_name AS column_alias FROM table_name
AS (alias for table) | SELECT column_name FROM table_name AS table_alias
BETWEEN | SELECT column_name(s) FROM table_name WHERE column_name BETWEEN value1 AND value2
CREATE DATABASE | CREATE DATABASE database_name
CREATE INDEX | CREATE INDEX index_name ON table_name (column_name)
CREATE TABLE | CREATE TABLE table_name ( column_name1 data_type, column_name2 data_type, ....... )
CREATE UNIQUE INDEX | CREATE UNIQUE INDEX index_name ON table_name (column_name)
CREATE VIEW | CREATE VIEW view_name AS SELECT column_name(s) FROM table_name WHERE condition
DELETE FROM | DELETE FROM table_name (Note: Deletes the entire table!!) or DELETE FROM table_name WHERE condition
DROP DATABASE | DROP DATABASE database_name
DROP INDEX | DROP INDEX table_name.index_name
DROP TABLE | DROP TABLE table_name
GROUP BY | SELECT column_name1,SUM(column_name2) FROM table_name GROUP BY column_name1
HAVING | SELECT column_name1,SUM(column_name2) FROM table_name GROUP BY column_name1 HAVING SUM(column_name2) condition value
IN | SELECT column_name(s) FROM table_name WHERE column_name IN (value1,value2,..)
INSERT INTO | INSERT INTO table_name VALUES (value1, value2,....) or INSERT INTO table_name (column_name1, column_name2,...) VALUES (value1, value2,....)
LIKE | SELECT column_name(s) FROM table_name WHERE column_name LIKE pattern
ORDER BY | SELECT column_name(s) FROM table_name ORDER BY column_name [ASC|DESC]
SELECT | SELECT column_name(s) FROM table_name
SELECT * | SELECT * FROM table_name
SELECT DISTINCT | SELECT DISTINCT column_name(s) FROM table_name
SELECT INTO (used to create backup copies of tables) | SELECT * INTO new_table_name FROM original_table_name or SELECT column_name(s) INTO new_table_name FROM original_table_name
TRUNCATE TABLE (deletes only the data inside the table) | TRUNCATE TABLE table_name
UPDATE | UPDATE table_name SET column_name=new_value [, column_name=new_value] WHERE column_name=some_value
WHERE | SELECT column_name(s) FROM table_name WHERE condition

Source : http://www.w3schools.com/sql/sql_quickref.asp


SQL Quiz

You can test your SQL skills with W3Schools' Quiz.

The Test

The test contains 20 questions and there is no time limit.

The test is not official, it's just a nice way to see how much you know, or don't know, about SQL.

Your Score Will be Counted

You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 20 points.

Good luck! SQL Quiz


SQL SELECT INTO Statement

The SELECT INTO Statement

The SELECT INTO statement is most often used to create backup copies of tables or for archiving records.

Syntax

SELECT column_name(s) INTO newtable [IN externaldatabase]

FROM source

Make a Backup Copy

The following example makes a backup copy of the "Persons" table:

SELECT * INTO Persons_backup

FROM Persons

The IN clause can be used to copy tables into another database:

SELECT Persons.* INTO Persons IN 'Backup.mdb'

FROM Persons

If you only want to copy a few fields, you can do so by listing them after the SELECT statement:

SELECT LastName,FirstName INTO Persons_backup

FROM Persons

You can also add a WHERE clause. The following example creates a "Persons_backup" table with two columns (FirstName and LastName) by extracting the persons who lives in "Sandnes" from the "Persons" table:

SELECT LastName,Firstname INTO Persons_backup

FROM Persons

WHERE City='Sandnes'

Selecting data from more than one table is also possible. The following example creates a new table "Empl_Ord_backup" that contains data from the two tables Employees and Orders:

SELECT Employees.Name,Orders.Product

INTO Empl_Ord_backup

FROM Employees

INNER JOIN Orders

ON Employees.Employee_ID=Orders.Employee_ID


SQL SELECT Statement

The SQL SELECT Statement

The SELECT statement is used to select data from a table. The tabular result is stored in a result table (called the result-set).

Syntax

SELECT column_name(s)

FROM table_name

lamp Note: SQL statements are not case sensitive. SELECT is the same as select.

SQL SELECT Example

To select the content of columns named "LastName" and "FirstName", from the database table called "Persons", use a SELECT statement like this:

SELECT LastName,FirstName FROM Persons

The database table "Persons":

LastName | FirstName | Address | City
Hansen | Ola | Timoteivn 10 | Sandnes
Svendson | Tove | Borgvn 23 | Sandnes
Pettersen | Kari | Storgt 20 | Stavanger

The result

LastName | FirstName
Hansen | Ola
Svendson | Tove
Pettersen | Kari

Select All Columns

To select all columns from the "Persons" table, use a * symbol instead of column names, like this:

SELECT * FROM Persons

Result

LastName | FirstName | Address | City
Hansen | Ola | Timoteivn 10 | Sandnes
Svendson | Tove | Borgvn 23 | Sandnes
Pettersen | Kari | Storgt 20 | Stavanger

The Result Set

The result from a SQL query is stored in a result-set. Most database software systems allow navigation of the result set with programming functions, like: Move-To-First-Record, Get-Record-Content, Move-To-Next-Record, etc.

Programming functions like these are not a part of this tutorial. To learn about accessing data with function calls, please visit our .

Semicolon after SQL Statements?

Semicolon is the standard way to separate each SQL statement in database systems that allow more than one SQL statement to be executed in the same call to the server.

Some SQL tutorials end each SQL statement with a semicolon. Is this necessary? We are using MS Access and SQL Server 2000 and we do not have to put a semicolon after each SQL statement, but some database programs force you to use it.

The SELECT DISTINCT Statement

The DISTINCT keyword is used to return only distinct (different) values.

The SELECT statement returns information from table columns. But what if we only want to select distinct elements?

With SQL, all we need to do is to add a DISTINCT keyword to the SELECT statement:

Syntax

SELECT DISTINCT column_name(s)

FROM table_name

Using the DISTINCT keyword

To select ALL values from the column named "Company" we use a SELECT statement like this:

SELECT Company FROM Orders

"Orders" table

Company | OrderNumber
Sega | 3412
W3Schools | 2312
Trio | 4678
W3Schools | 6798

Result

Company

Sega

W3Schools

Trio

W3Schools

Note that "W3Schools" is listed twice in the result-set.

To select only DIFFERENT values from the column named "Company" we use a SELECT DISTINCT statement like this:

SELECT DISTINCT Company FROM Orders

Result:

Company

Sega

W3Schools

Trio

Now "W3Schools" is listed only once in the result-set.


SQL Server

SQL Servers - RDBMS

Modern SQL Servers are built on RDBMS.

DBMS - Database Management System

A Database Management System (DBMS) is a computer program that can access data in a database.

The DBMS program enables you to extract, modify, or store information in a database.

Different DBMS programs provides different functions for querying data, reporting data, and modifying data.

RDBMS - Relational Database Management System

A Relational Database Management System (RDBMS) is a Database Management System (DBMS) where the database is organized and accessed according to the relationships between data.

RDBMS was invented by IBM in the early 1970's.

RDBMS is the basis for SQL, and for all modern database systems like Oracle, SQL Server, IBM DB2, Sybase, MySQL, and Microsoft Access.


SQL SUM Function

The SUM function returns the total sum of a column in a given selection. NULL values are not included in the calculation.

Syntax

SELECT SUM(column) FROM table

Example

This example returns the sum of all ages in the "person" table:

SELECT SUM(Age) FROM Persons

Result:

98

Example

This example returns the sum of ages for persons that are more than 20 years old:

SELECT SUM(Age) FROM Persons WHERE Age>20

Result:

79


SQL Summary

You Have Learned SQL, Now What?

 Top Previous Next

SQL Summary

This tutorial has taught you the standard computer language for accessing and manipulating database systems.

You have learned how to execute queries, retrieve data, insert new records, delete records and update records in a database with SQL.

SQL is a standard language that works with database programs like MS Access, DB2, Informix, MS SQL Server, Oracle, MySQL, Sybase, and other database systems.

Now You Know SQL, What's Next?

The next step is to learn ADO.

ADO is a programming interface to access data in a database from a web site.

ADO uses SQL to query data in a database.

If you want to learn more about ADO, please visit our ADO tutorial.


SQL Tutorial

SQL Tutorial

SQL2

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

In this tutorial you will learn how to use SQL to access and manipulate data in Oracle, Sybase, SQL Server, DB2, Access, and other database systems.

Start learning SQL!

SQL Quiz Test

Test your SQL skills at W3Schools!

Start SQL 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 ASP Developer Certificate is for developers who want to document their knowledge of ASP, SQL, and ADO.

ASP Developer Certificate!


SQL UNION and UNION ALL

UNION

The UNION command is used to select related information from two tables, much like the JOIN command. However, when using the UNION command all selected columns need to be of the same data type.

Note: With UNION, only distinct values are selected.

SQL Statement 1

UNION

SQL Statement 2

Employees_Norway:

E_ID | E_Name
01 | Hansen, Ola
02 | Svendson, Tove
03 | Svendson, Stephen
04 | Pettersen, Kari

Employees_USA:

E_ID | E_Name
01 | Turner, Sally
02 | Kent, Clark
03 | Svendson, Stephen
04 | Scott, Stephen

Using the UNION Command

Example

List all different employee names in Norway and USA:

SELECT E_Name FROM Employees_Norway

UNION

SELECT E_Name FROM Employees_USA

Result

E_Name

Hansen, Ola

Svendson, Tove

Svendson, Stephen

Pettersen, Kari

Turner, Sally

Kent, Clark

Scott, Stephen

Note: This command cannot be used to list all employees in Norway and USA. In the example above we have two employees with equal names, and only one of them is listed. The UNION command only selects distinct values.

UNION ALL

The UNION ALL command is equal to the UNION command, except that UNION ALL selects all values.

SQL Statement 1

UNION ALL

SQL Statement 2

Using the UNION ALL Command

Example

List all employees in Norway and USA:

SELECT E_Name FROM Employees_Norway

UNION ALL

SELECT E_Name FROM Employees_USA

Result

E_Name

Hansen, Ola

Svendson, Tove

Svendson, Stephen

Pettersen, Kari

Turner, Sally

Kent, Clark

Svendson, Stephen

Scott, Stephen


SQL UPDATE

SQL UPDATE Statement

The Update Statement

The UPDATE statement is used to modify the data in a table.

Syntax

UPDATE table_name

SET column_name = new_value

WHERE column_name = some_value

Person:

LastName | FirstName | Address | City
Nilsen | Fred | Kirkegt 56 | Stavanger
Rasmussen |  | Storgt 67 |

Update one Column in a Row

We want to add a first name to the person with a last name of "Rasmussen":

UPDATE Person SET FirstName = 'Nina'

WHERE LastName = 'Rasmussen'

Result:

LastName | FirstName | Address | City
Nilsen | Fred | Kirkegt 56 | Stavanger
Rasmussen | Nina | Storgt 67 |

Update several Columns in a Row

We want to change the address and add the name of the city:

UPDATE Person

SET Address = 'Stien 12', City = 'Stavanger'

WHERE LastName = 'Rasmussen'

Result:

LastName | FirstName | Address | City
Nilsen | Fred | Kirkegt 56 | Stavanger
Rasmussen | Nina | Stien 12 | Stavanger


SQL WHERE Clause

The WHERE clause is used to specify a selection criterion.

The WHERE Clause

To conditionally select data from a table, a WHERE clause can be added to the SELECT statement.

Syntax

SELECT column FROM table

WHERE column operator value

With the WHERE clause, the following operators can be used:

Operator | Description
= | Equal
<> | Not equal
> | Greater than
< | Less than
>= | Greater than or equal
<= | Less than or equal
BETWEEN | Between an inclusive range
LIKE | Search for a pattern

Note: In some versions of SQL the <> operator may be written as !=

Using the WHERE Clause

To select only the persons living in the city "Sandnes", we add a WHERE clause to the SELECT statement:

SELECT * FROM Persons

WHERE City='Sandnes'

"Persons" table

LastName | FirstName | Address | City | Year
Hansen | Ola | Timoteivn 10 | Sandnes | 1951
Svendson | Tove | Borgvn 23 | Sandnes | 1978
Svendson | Stale | Kaivn 18 | Sandnes | 1980
Pettersen | Kari | Storgt 20 | Stavanger | 1960

Result

LastName | FirstName | Address | City | Year
Hansen | Ola | Timoteivn 10 | Sandnes | 1951
Svendson | Tove | Borgvn 23 | Sandnes | 1978
Svendson | Stale | Kaivn 18 | Sandnes | 1980

Using Quotes

Note that we have used single quotes around the conditional values in the examples.

SQL uses single quotes around text values (most database systems will also accept double quotes). Numeric values should not be enclosed in quotes.

For text values:

This is correct:

SELECT * FROM Persons WHERE FirstName='Tove'

This is wrong:

SELECT * FROM Persons WHERE FirstName=Tove

For numeric values:

This is correct:

SELECT * FROM Persons WHERE Year>1965

This is wrong:

SELECT * FROM Persons WHERE Year>'1965'

The LIKE Condition

The LIKE condition is used to specify a search for a pattern in a column.

Syntax

SELECT column FROM table

WHERE column LIKE pattern

A "%" sign can be used to define wildcards (missing letters in the pattern) both before and after the pattern.

Using LIKE

The following SQL statement will return persons with first names that start with an 'O':

SELECT * FROM Persons

WHERE FirstName LIKE 'O%'

The following SQL statement will return persons with first names that end with an 'a':

SELECT * FROM Persons

WHERE FirstName LIKE '%a'

The following SQL statement will return persons with first names that contain the pattern 'la':

SELECT * FROM Persons

WHERE FirstName LIKE '%la%'


SVG Intro

Introduction to SVG

SVG is a language for describing 2D-graphics and graphical applications in XML.

What you should already know

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

· HTML
· Basic XML

If you want to study these subjects first, find the tutorials on our Home page.

What is SVG?

· SVG stands for Scalable Vector Graphics
· SVG is used to define vector-based graphics for the Web
· SVG defines the graphics in XML format
· SVG graphics do NOT lose any quality if they are zoomed or resized
· Every element and every attribute in SVG files can be animated
· SVG is a World Wide Web Consortium (W3C) recommendation
· SVG integrates with other W3C standards such as the DOM and XSL

SVG History & Advantages

SVG 1.1 became a W3C Recommendation in January 2003.

Sun Microsystems, Adobe, Apple, IBM, and Kodak are some of the organizations that have been involved in defining SVG.

Advantages of using SVG over other image formats (like JPEG and GIF) are:

· SVG files can be read and modified by a large range of tools (e.g. notepad)
· SVG files are smaller and more compressible than JPEG and GIF images
· SVG images are scalable
· SVG images can be printed with high quality at any resolution
· SVG images are zoomable. Any part of the image can be zoomed without degradation
· Text in SVG is selectable and searchable (excellent for making maps)
· SVG works with Java technology
· SVG is an open standard
· SVG files are pure XML

The main competitor to SVG is Flash.

The biggest advantage SVG has over Flash is the compliance with other standards (e.g. XSL and the DOM). Flash relies on proprietary technology that is not open source.

A drawback of SVG at the moment is that not all browsers support it. Mozilla browsers, Firefox, and Opera support SVG, and Microsoft plan to support SVG.

The number of SVG editors are growing, and Adobe GoLive 5 supports SVG.

enabled software and services

To view SVG files today, you may have to install a plug-in such as the Adobe SVG Viewer.

Viewing SVG Files

If your browser does not support SVG files, you will need to download an SVG viewer to view SVG files.

Note: Firefox 1.5 and Opera 9 have native SVG support. If you are using one of these browsers, you do not need to install an SVG viewer.

Download an .


SVG a Element

Definition and Usage

The SVG a element is used to create a hyperlink.

Example 1

This example shows how to add an a element to a rectangle. The rectangle will act as a hyperlink.

Copy the following code into Notepad and save the file as "a_1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

<a xlink:href="http://www.w3schools.com" target="_blank">

<rect x="20" y="20" width="250" height="250"

style="fill:blue;stroke:pink;stroke-width:5;opacity:0.9"/>

</a>

</svg>

Example 2

This example uses a JavaScript to create an a element when the user clicks on a circle.

Copy the following code into Notepad and save the file as "a_2.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<script>

function create_a(evt)

{

var SVGDoc=evt.getTarget().getOwnerDocument();

var txt=SVGDoc.getElementById("txt");

var link=SVGDoc.createElement("a");

var text_node=SVGDoc.createTextNode("LINK");

link.setAttributeNS(

"http://www.w3.org/1999/xlink",

"xlink:href",

"http://www.w3schools.com");

link.appendChild(text_node);

txt.appendChild(link);

}

</script>

<text id="txt" x="10" y="10">

Click on the circle to create a ....</text>

<circle cx="20" cy="40" r="1.5em" style="fill:blue"

onclick="create_a(evt)"/>

</svg>

View example


SVG animate Element

Definition and Usage

The SVG animate element is used to animate an attribute or property over time.

Example 1

This example creates a rectangle that repeatedly fade away over 5 seconds.

Copy the following code into Notepad and save the file as "animate_1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<rect x="20" y="20" width="250" height="250" style="fill:blue">

<animate attributeType="CSS" attributeName="opacity"

from="1" to="0" dur="5s" repeatCount="indefinite" />

</rect>

</svg>

Example 2

This example animates the x, y, width, and height attributes of a rectangle for a period of 6 seconds (making the rectangle "grow"). It will also change the color of the rectangle with the animateColor element.

Copy the following code into Notepad and save the file as "animate_2.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<rect id="rec" x="300" y="100" width="300"

height="100" style="fill:lime">

<animate attributeName="x" attributeType="XML"

begin="0s" dur="6s" fill="freeze" from="300" to="0"/>

<animate attributeName="y" attributeType="XML"

begin="0s" dur="6s" fill="freeze" from="100" to="0"/>

<animate attributeName="width" attributeType="XML"

begin="0s" dur="6s" fill="freeze" from="300" to="800"/>

<animate attributeName="height" attributeType="XML"

begin="0s" dur="6s" fill="freeze" from="100" to="300"/>

<animateColor attributeName="fill" attributeType="CSS"

from="lime" to="red" begin="2s" dur="4s" fill="freeze"/>

</rect>

</svg>

View example


SVG animateColor Element

Definition and Usage

The SVG animateColor element is used to specify a color transformation over time.

Example 1

This example creates three rectangles that will change color.

Copy the following code into Notepad and save the file as "animatecolor_1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<rect x="10" y="20" width="90" height="60">

<animateColor id="a1" attributeName="fill"

from="red" to="blue"

dur="3s"/>

</rect>

<rect x="10" y="120" width="90" height="60">

<animateColor id="a2" attributeName="fill"

from="blue" to="yellow"

begin="a1.end" dur="3s"/>

</rect>

<rect x="10" y="220" width="90" height="60">

<animateColor id="a3" attributeName="fill"

from="yellow" to="green"

begin="a2.end" dur="3s"/>

</rect>

</svg>

View example

Example 2

This example animates the x, y, width, and height attributes of a rectangle for a period of 6 seconds (making the rectangle "grow"). It will also change the color of the rectangle with the animateColor element.

Copy the following code into Notepad and save the file as "animate_2.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<rect id="rec" x="300" y="100" width="300"

height="100" style="fill:lime">

<animate attributeName="x" attributeType="XML"

begin="0s" dur="6s" fill="freeze" from="300" to="0"/>

<animate attributeName="y" attributeType="XML"

begin="0s" dur="6s" fill="freeze" from="100" to="0"/>

<animate attributeName="width" attributeType="XML"

begin="0s" dur="6s" fill="freeze" from="300" to="800"/>

<animate attributeName="height" attributeType="XML"

begin="0s" dur="6s" fill="freeze" from="100" to="300"/>

<animateColor attributeName="fill" attributeType="CSS"

from="lime" to="red" begin="2s" dur="4s" fill="freeze"/>

</rect>

</svg>

View example


SVG animateMotion Element

Definition and Usage

The SVG animateMotion element is used to move an element along a motion path.

Example 1

This example creates a text that will move along a motion path.

Copy the following code into Notepad and save the file as "animatemotion_0.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<g transform="translate(100,100)">

<text id="TextElement" x="0" y="0"

style="font-family:Verdana;font-size:24"> It's SVG!

<animateMotion path="M 0 0 L 100 100" dur="5s" fill="freeze"/>

</text>

</g>

</svg>

View example

Example 2

This example creates a text that will move along a motion path. The text will also rotate and scale.

Copy the following code into Notepad and save the file as "animatemotion_1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<g transform="translate(100,100)">

<text id="TextElement" x="0" y="0"

style="font-family:Verdana;font-size:24;

visibility:hidden"> It's SVG!

<set attributeName="visibility" attributeType="CSS"

to="visible" begin="1s" dur="5s" fill="freeze"/>

<animateMotion path="M 0 0 L 100 100" begin="1s"

dur="5s" fill="freeze"/>

<animateTransform attributeName="transform"

attributeType="XML" type="rotate" from="-30" to="0"

begin="1s" dur="5s" fill="freeze"/>

<animateTransform attributeName="transform"

attributeType="XML" type="scale" from="1" to="3"

additive="sum" begin="1s" dur="5s" fill="freeze"/>

</text>

</g>

</svg>

View example

Example 3

This example creates a text that will move along a motion path. The text will also rotate, scale and change color. We have also added a rectangle that will "grow" and change color in the background.

Copy the following code into Notepad and save the file as "animatemotion_2.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<rect id="rec" x="300" y="100" width="300" height="100"

style="fill:lime">

<animate attributeName="x" attributeType="XML" begin="0s"

dur="6s" fill="freeze" from="300" to="0"/>

<animate attributeName="y" attributeType="XML" begin="0s"

dur="6s" fill="freeze" from="100" to="0"/>

<animate attributeName="width" attributeType="XML"

begin="0s" dur="6s" fill="freeze" from="300" to="800"/>

<animate attributeName="height" attributeType="XML"

begin="0s" dur="6s" fill="freeze" from="100" to="300"/>

<animateColor attributeName="fill" attributeType="CSS"

from="lime" to="red" begin="2s" dur="4s" fill="freeze"/>

</rect>

<g transform="translate(100,100)">

<text id="TextElement" x="0" y="0"

style="font-family:Verdana;font-size:24;visibility:hidden">

It's SVG!

<set attributeName="visibility" attributeType="CSS"

to="visible" begin="1s" dur="5s" fill="freeze"/>

<animateMotion path="M 0 0 L 100 100" begin="1s"

dur="5s" fill="freeze"/>

<animateColor attributeName="fill" attributeType="CSS"

from="red" to="blue" begin="1s" dur="5s" fill="freeze"/>

<animateTransform attributeName="transform"

attributeType="XML" type="rotate" from="-30" to="0"

begin="1s" dur="5s" fill="freeze"/>

<animateTransform attributeName="transform"

attributeType="XML" type="scale" from="1" to="3"

additive="sum" begin="1s" dur="5s" fill="freeze"/>

</text>

</g>

</svg>

View example


SVG <circle>

The <circle> tag is used to create a circle.

The <circle> Tag

The <circle> tag is used to create a circle.

Copy the following code into Notepad and save the file as "circle1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"

stroke-width="2" fill="red"/>

</svg>

Code explanation:

· The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0, 0)
· The r attribute defines the radius of the circle

View example


SVG circle Element

Definition and Usage

The SVG circle element is used to create a circle.

The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0, 0).

The r attribute defines the radius of the circle.

Example 1

This example creates a circle.

Copy the following code into Notepad and save the file as "circle_1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"

stroke-width="2" fill="red"/>

</svg>

View example


SVG <ellipse>

The <ellipse> tag is used to create an ellipse.

The <ellipse> Tag

The <ellipse> tag is used to create an ellipse. An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.

Copy the following code into Notepad and save the file as "ellipse1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<ellipse cx="300" cy="150" rx="200" ry="80"

style="fill:rgb(200,100,50);

stroke:rgb(0,0,100);stroke-width:2"/>

</svg>

Code explanation:

· The cx attribute defines the x coordinate of the center of the ellipse
· The cy attribute defines the y coordinate of the center of the ellipse
· The rx attribute defines the horizontal radius
· The ry attribute defines the vertical radius

View example

The following example creates three ellipses on top of each other:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<ellipse cx="240" cy="100" rx="220" ry="30"

style="fill:purple"/>

<ellipse cx="220" cy="70" rx="190" ry="20"

style="fill:lime"/>

<ellipse cx="210" cy="45" rx="170" ry="15"

style="fill:yellow"/>

</svg>

View example

The following example combines two ellipses (one yellow and one white):

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<ellipse cx="240" cy="100" rx="220" ry="30"

style="fill:yellow"/>

<ellipse cx="220" cy="100" rx="190" ry="20"

style="fill:white"/>

</svg>

View example


SVG ellipse Element

Definition and Usage

The SVG ellipse element is used to create an ellipse.

An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.

The cx and cy attributes define the x and y coordinates of the center of the ellipse. If cx and cy are omitted, the ellipse's center is set to (0, 0).

The rx attribute defines the horizontal radius and the ry attribute defines the vertical radius of the ellipse.

Example 1

This example creates an ellipse.

Copy the following code into Notepad and save the file as "ellipse_1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<ellipse cx="300" cy="150" rx="200" ry="80"

style="fill:rgb(200,100,50);

stroke:rgb(0,0,100);stroke-width:2"/>

</svg>

View example


SVG Example

SVG is written in XML.

SVG Example

The following example is an example of a simple SVG file. SVG files must be saved with an .svg extension:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"

stroke-width="2" fill="red"/>

</svg>

View example (only for SVG-enabled browsers)

(To view the SVG source, open the example and right-click in the example window. Select "View Source".)

Code explanation:

The first line contains the XML declaration. Notice the standalone attribute! This attribute specifies whether the SVG file "stands alone", or contains a reference to an external file.

standalone="no" means that the SVG document has a reference to an external file - in this case, the DTD.

The second and the third line refer to the external SVG DTD. The DTD is located at "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". The DTD resides at the W3C and it contains all allowable SVG elements.

The SVG code begins with the <svg> element, which consists of the opening <svg> tag and the closing </svg> tag. This is the root element. The width and height attributes set the width and height of the SVG document. The version attribute defines the SVG version to be used and the xmlns attribute defines the SVG namespace.

The SVG <circle> element is used to create a circle. The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0, 0). The r attribute defines the radius of the circle.

The stroke and stroke-width attributes control how the outline of a shape appears. We set the outline of the circle to a 2px wide, black "border".

The fill attribute refers to the color inside a shape. We set the fill color to red.

The closing </svg> tag closes the root SVG element and the document.

Note: All opening tags must have closing tags!


SVG Examples

View SVG Files

You cannot view SVG files if you do not have an SVG viewer installed.

Note: Firefox 1.5 and Opera 9 have native SVG support. If you are using one of these browsers, you do not need to install an SVG viewer.

Download .

View SVG Source

To view the SVG source, open the example and right-click in the example window. Select "View Source".

SVG Examples

SVG Shapes

A rectangle with opacity 2

A circle

An ellipse

Three ellipses on top of each other

Two ellipses

A line

A polygon with three sides

SVG Filters

A feGaussianBlur filter

A feBlend filter

A feColorMatrix filter

A feComponentTransfer filter

A feOffset filter

feOffset, feFlood, feComposite, feMerge, and feMergeNode

A feMorphology filter

Filter 2

Filter 3

Filter 4

Filter 5

Filter 6

SVG Gradients

Grad linear (horizontal gradient)

Grad linear (vertical gradient)

Grad radial

Grad radial 2

SVG Misc

Add an < a> element to a rectangle. The rectangle will act as a hyperlink

Use a JavaScript to create an a element when the user clicks on a circle

Animate the x, y, width, and height attributes of a rectangle and change the color of the rectangle

Three rectangles that will change color

Text that will move along a motion path


SVG feBlend Element

Definition and Usage

The SVG feBlend element is used to composite two objects together using different blending modes.

The mode attribute defines the image blending mode. The mode attribute can take one of the following values:

· normal (default)
· multiply
· screen
· darken
· lighten

The in2 attribute defines the second input image to the blending operation. This attribute can take on the same values as the in attribute.

Example 1

The following example shows examples of the five blend modes.

Copy the following code into Notepad and save the file as "feblend_1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<defs>

<linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"

x1="100" y1="0" x2="300" y2="0">

<stop offset="0" style="stop-color:#000000"/>

<stop offset=".67" style="stop-color:#ffff00"/>

<stop offset="1" style="stop-color:#000000"/>

</linearGradient>

<filter id="normal">

<feBlend mode="normal" in2="BackgroundImage"/>

</filter>

<filter id="multiply">

<feBlend mode="multiply" in2="BackgroundImage"/>

</filter>

<filter id="screen">

<feBlend mode="screen" in2="BackgroundImage"/>

</filter>

<filter id="darken">

<feBlend mode="darken" in2="BackgroundImage"/>

</filter>

<filter id="lighten">

<feBlend mode="lighten" in2="BackgroundImage"/>

</filter>

</defs>

<g style="enable-background:new">

<rect x="40" y="20" width="300" height="450"

style="fill:url(#MyGradient)"/>

<g style="font-size:75;fill:#888888;fill-opacity:.6">

<text x="50" y="90" style="filter:url(#normal)">Normal</text>

<text x="50" y="180" style="filter:url(#multiply)">Multiply</text>

<text x="50" y="270" style="filter:url(#screen)">Screen</text>

<text x="50" y="360" style="filter:url(#darken)">Darken</text>

<text x="50" y="450" style="filter:url(#lighten)">Lighten</text>

</g>

</g>

</svg>

View example


SVG feColorMatrix Element

Definition and Usage

The SVG feColorMatrix element is used to apply a matrix transformation.

The type attribute defines the type of matrix operation. The type attribute can take one of the following values:

· matrix
· saturate
· hueRotate
· luminanceToAlpha

The value attribute's value depends on the value of the type attribute:

· For type="matrix", values is a list of 20 matrix values
· For type="saturate", values is a single real number value (0 to 1)
· For type="hueRotate", values is a single one real number value (degrees)
· For type="luminanceToAlpha", values is not applicable

Example 1

The following example shows examples of the four types of feColorMatrix operations.

Copy the following code into Notepad and save the file as "fecolormatrix_1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<defs>

<linearGradient id="MyGrad" gradientUnits="userSpaceOnUse"

x1="100" y1="0" x2="500" y2="0">

<stop offset="0" style="stop-color:#ff00ff"/>

<stop offset=".33" style="stop-color:#88ff88"/>

<stop offset=".67" style="stop-color:#2020ff"/>

<stop offset="1" style="stop-color:#d00000"/>

</linearGradient>

<filter id="Matrix">

<feColorMatrix type="matrix"

values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>

</filter>

<filter id="Saturate">

<feColorMatrix type="saturate" values="0.4"/>

</filter>

<filter id="HueRotate">

<feColorMatrix type="hueRotate" values="90"/>

</filter>

<filter id="Luminance">

<feColorMatrix type="luminanceToAlpha" result="a"/>

<feComposite in="SourceGraphic" in2="a" operator="in"/>

</filter>

</defs>

<g style="font-size:50;fill:url(#MyGrad)">

<text x="50" y="60">Unfiltered</text>

<text x="50" y="120" style="filter:url(#Matrix)">Matrix

</text>

<text x="50" y="180" style="filter:url(#Saturate)">Saturate

</text>

<text x="50" y="240" style="filter:url(#HueRotate)">HueRotate

</text>

<text x="50" y="300" style="filter:url(#Luminance)">Luminance

</text>

</g>

</svg>

View example


SVG feComponentTransfer Element

Definition and Usage

The SVG feColorMatrix element is used to perform component-wise remapping of data. It allows brightness adjustment, contrast adjustment, color balance or thresholding.

The specification of the transfer functions is defined by the sub-elements to 'feComponentTransfer':

· feFuncR, transfer function for red component of the input graphic
· feFuncG, transfer function for green component of the input graphic
· feFuncB, transfer function for blue component of the input graphic
· feFuncA, transfer function for alpha component of the input graphic

The type attribute defines the type of component transfer function. The type attribute can take one of the following values:

· identity
· table
· discrete
· linear
· gamma

Example 1

The following example shows examples of four types of feComponentTransfer operations.

Copy the following code into Notepad and save the file as "fecomponenttransfer_1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<defs>

<linearGradient id="MyGrad" gradientUnits="userSpaceOnUse"

x1="50" y1="0" x2="600" y2="0">

<stop offset="0" stop-color="#ff0000" />

<stop offset=".33" stop-color="#00ff00" />

<stop offset=".67" stop-color="#0000ff" />

<stop offset="1" stop-color="#000000" />

</linearGradient>

<filter id="Identity">

<feComponentTransfer>

<feFuncR type="identity"/>

<feFuncG type="identity"/>

<feFuncB type="identity"/>

<feFuncA type="identity"/>

</feComponentTransfer>

</filter>

<filter id="Table">

<feComponentTransfer>

<feFuncR type="table" tableValues="0 0 1 1"/>

<feFuncG type="table" tableValues="1 1 0 0"/>

<feFuncB type="table" tableValues="0 1 1 0"/>

</feComponentTransfer>

</filter>

<filter id="Linear">

<feComponentTransfer>

<feFuncR type="linear" slope=".5" intercept=".25"/>

<feFuncG type="linear" slope=".5" intercept="0"/>

<feFuncB type="linear" slope=".5" intercept=".5"/>

</feComponentTransfer>

</filter>

<filter id="Gamma">

<feComponentTransfer>

<feFuncR type="gamma" amplitude="2" exponent="5" offset="0"/>

<feFuncG type="gamma" amplitude="2" exponent="3" offset="0"/>

<feFuncB type="gamma" amplitude="2" exponent="1" offset="0"/>

</feComponentTransfer>

</filter>

</defs>

<g font-size="50" font-weight="bold" fill="url(#MyGrad)">

<text x="50" y="60" filter="url(#Identity)">Identity</text>

<text x="50" y="120" filter="url(#Table)">TableLookup</text>

<text x="50" y="180" filter="url(#Linear)">LinearFunc</text>

<text x="50" y="240" filter="url(#Gamma)">GammaFunc</text>

</g>

</svg>

View example


SVG feGaussianBlur Element

Definition and Usage

The SVG feGaussianBlur element is used to perform a Gaussian blur on the image.

The stdDeviation attribute defines the standard deviation for the blur operation.

Example 1

The following example shows an example of a feGaussianBlur filter.

Copy the following code into Notepad and save the file as "feGaussianBlur_1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<defs>

<filter id="Gaussian_Blur">

<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>

</filter>

</defs>

<ellipse cx="200" cy="150" rx="70" ry="40"

style="fill:#ff0000;stroke:#ffff00;

stroke-width:2;filter:url(#Gaussian_Blur)"/>

</svg>

View example


SVG feMerge and feMergeNode Elements

Definition and Usage

The SVG feMerge element is used to create image layers on top of each other.

Each feMerge element can have any number of feMergeNode sub-elements.

Example 1

Copy the following code into Notepad and save the file as "femerge_1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<defs>

<filter id="test" filterUnits="objectBoundingBox"

x="0" y="0" width="1.5" height="4">

<feOffset result="Off1" dx="15" dy="20"/>

<feFlood style="flood-color:#ff0000;flood-opacity:0.8"/>

<feComposite in2="Off1" operator="in" result="C1"/>

<feOffset in="SourceGraphic" result="Off2" dx="30" dy="40"/>

<feFlood style="flood-color:#ff0000;flood-opacity:0.4"/>

<feComposite in2="Off2" operator="in" result="C2"/>

<feMerge>

<feMergeNode in="C2"/>

<feMergeNode in="C1"/>

<feMergeNode in="SourceGraphic"/>

</feMerge>

</filter>

</defs>

<text x="30" y="100"

style="font:36px verdana bold;fill:blue;filter:url(#test)">

This is some text!</text>

</svg>

View example


SVG feMorphology Element

Definition and Usage

The SVG feMorphology element is used to "fattening" or "thinning" a source graphic.

The operator attribute defines whether to erode or dilate the source graphic. The operator attribute can take one of the following values:

· erode (thinning)
· dilate (fattening)

The radius attribute defines the radius for the operation. If two numbers are specified, the first number is the x-radius and the second number is the y-radius. If one number is specified, then that value is used for both x and y. Default is 0

Example 1

The following example shows examples of six types of feMorphology operations.

Copy the following code into Notepad and save the file as "femorphology_1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<defs>

<filter id="Erode1">

<feMorphology operator="erode" in="SourceGraphic" radius="1" />

</filter>

<filter id="Erode3">

<feMorphology operator="erode" in="SourceGraphic" radius="3" />

</filter>

<filter id="Erode4">

<feMorphology operator="erode" in="SourceGraphic" radius="4" />

</filter>

<filter id="Dilate1">

<feMorphology operator="dilate" in="SourceGraphic" radius="1" />

</filter>

<filter id="Dilate3">

<feMorphology operator="dilate" in="SourceGraphic" radius="3" />

</filter>

<filter id="Dilate4">

<feMorphology operator="dilate" in="SourceGraphic" radius="4" />

</filter>

</defs>

<g enable-background="new" >

<g font-family="Verdana" font-size="50"

stroke="red" stroke-width="4">

<text x="50" y="60">Unfiltered</text>

<text x="50" y="120" filter="url(#Erode1)">Erode 1</text>

<text x="50" y="180" filter="url(#Erode3)">Erode 3</text>

<text x="50" y="240" filter="url(#Erode4)">Erode 4</text>

<text x="50" y="300" filter="url(#Dilate1)">Dilate 1</text>

<text x="50" y="360" filter="url(#Dilate3)">Dilate 3</text>

<text x="50" y="420" filter="url(#Dilate4)">Dilate 4</text>

</g>

</g>

</svg>

View example


SVG filter Element

Definition and Usage

The SVG filter element is used as a container for filter effects.

Example 1

The following example shows an example of a GaussianBlur filter.

Copy the following code into Notepad and save the file as "filter_1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<defs>

<filter id="MyFilter" filterUnits="userSpaceOnUse"

x="0" y="0" width="200" height="120">

<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>

</filter>

</defs>

<rect x="1" y="1" width="198" height="118" fill="#cccccc" />

<g filter="url(#MyFilter)">

<path fill="none" stroke="#D90000" stroke-width="10"

d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />

<text fill="#FFFFFF" stroke="black" font-size="45"

font-family="Verdana" x="52" y="76">SVG</text>

</g>

</svg>

View example

Example 2

Then we add a feOffset filter:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<defs>

<filter id="MyFilter" filterUnits="userSpaceOnUse"

x="0" y="0" width="200" height="120">

<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>

<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>

</filter>

</defs>

<rect x="1" y="1" width="198" height="118" fill="#cccccc" />

<g filter="url(#MyFilter)">

<path fill="none" stroke="#D90000" stroke-width="10"

d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />

<text fill="#FFFFFF" stroke="black" font-size="45"

font-family="Verdana" x="52" y="76">SVG</text>

</g>

</svg>

Example 3

Then we add a feSpecularLighting filter:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<defs>

<filter id="MyFilter" filterUnits="userSpaceOnUse"

x="0" y="0" width="200" height="120">

<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>

<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>

<feSpecularLighting in="blur" surfaceScale="5"

specularConstant=".75" specularExponent="20"

lighting-color="#bbbbbb" result="specOut">

<fePointLight x="-5000" y="-10000" z="20000"/>

</feSpecularLighting>

</filter>

</defs>

<rect x="1" y="1" width="198" height="118" fill="#cccccc" />

<g filter="url(#MyFilter)">

<path fill="none" stroke="#D90000" stroke-width="10"

d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />

<text fill="#FFFFFF" stroke="black" font-size="45"

font-family="Verdana" x="52" y="76">SVG</text>

</g>

</svg>

View example

Example 4

Then we add a feComposite filter:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<defs>

<filter id="MyFilter" filterUnits="userSpaceOnUse"

x="0" y="0" width="200" height="120">

<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>

<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>

<feSpecularLighting in="blur" surfaceScale="5"

specularConstant=".75" specularExponent="20"

lighting-color="#bbbbbb" result="specOut">

<fePointLight x="-5000" y="-10000" z="20000"/>

</feSpecularLighting>

<feComposite in="specOut" in2="SourceAlpha"

operator="in" result="specOut"/>

</filter>

</defs>

<rect x="1" y="1" width="198" height="118" fill="#cccccc" />

<g filter="url(#MyFilter)">

<path fill="none" stroke="#D90000" stroke-width="10"

d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />

<text fill="#FFFFFF" stroke="black" font-size="45"

font-family="Verdana" x="52" y="76">SVG</text>

</g>

</svg>

View example

Example 5

Then we add another feComposite filter:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<defs>

<filter id="MyFilter" filterUnits="userSpaceOnUse"

x="0" y="0" width="200" height="120">

<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>

<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>

<feSpecularLighting in="blur" surfaceScale="5"

specularConstant=".75" specularExponent="20"

lighting-color="#bbbbbb" result="specOut">

<fePointLight x="-5000" y="-10000" z="20000"/>

</feSpecularLighting>

<feComposite in="specOut" in2="SourceAlpha"

operator="in" result="specOut"/>

<feComposite in="SourceGraphic" in2="specOut"

operator="arithmetic" k1="0" k2="1" k3="1" k4="0"

result="litPaint"/>

</filter>

</defs>

<rect x="1" y="1" width="198" height="118" fill="#cccccc" />

<g filter="url(#MyFilter)">

<path fill="none" stroke="#D90000" stroke-width="10"

d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />

<text fill="#FFFFFF" stroke="black" font-size="45"

font-family="Verdana" x="52" y="76">SVG</text>

</g>

</svg>

View example

Example 6

Finally, we add a feMerge filter:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<defs>

<filter id="MyFilter" filterUnits="userSpaceOnUse"

x="0" y="0" width="200" height="120">

<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>

<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>

<feSpecularLighting in="blur" surfaceScale="5"

specularConstant=".75" specularExponent="20"

lighting-color="#bbbbbb" result="specOut">

<fePointLight x="-5000" y="-10000" z="20000"/>

</feSpecularLighting>

<feComposite in="specOut" in2="SourceAlpha"

operator="in" result="specOut"/>

<feComposite in="SourceGraphic" in2="specOut"

operator="arithmetic" k1="0" k2="1" k3="1" k4="0"

result="litPaint"/>

<feMerge>

<feMergeNode in="offsetBlur"/>

<feMergeNode in="litPaint"/>

</feMerge>

</filter>

</defs>

<rect x="1" y="1" width="198" height="118" fill="#cccccc" />

<g filter="url(#MyFilter)">

<path fill="none" stroke="#D90000" stroke-width="10"

d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />

<text fill="#FFFFFF" stroke="black" font-size="45"

font-family="Verdana" x="52" y="76">SVG</text>

</g>

</svg>

View example


SVG Filters

SVG Filters is used to add special effects to shapes and text.

SVG Filters

The available filters in SVG are:

· feBlend
· feColorMatrix
· feComponentTransfer
· feComposite
· feConvolveMatrix
· feDiffuseLighting
· feDisplacementMap
· feFlood
· feGaussianBlur
· feImage
· feMerge
· feMorphology
· feOffset
· feSpecularLighting
· feTile
· feTurbulence
· feDistantLight
· fePointLight
· feSpotLight

You can use multiple filters on each SVG element!


SVG Gradients - Linear

An SVG Gradient must be defined within a <defs> tag.

SVG Gradients

A gradient is a smooth transition from one color to another. In addition, several color transitions can be applied to the same element.

There are two main types of gradients in SVG:

· Linear Gradients
· Radial Gradients

Linear Gradients

The <linearGradient> tag is used to define an SVG linear gradient.

The <linearGradient> tag must be nested within a <defs> tag. The <defs> tag is short for definitions and it allows definition of special elements such as gradients.

Linear gradients can be defined as horizontal, vertical or angular gradients:

· Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ
· Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ
· Angular gradients are created when x1 and x2 differ and y1 and y2 differ

Copy the following code into Notepad and save the file as "linear1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<defs>

<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">

<stop offset="0%" style="stop-color:rgb(255,255,0);

stop-opacity:1"/>

<stop offset="100%" style="stop-color:rgb(255,0,0);

stop-opacity:1"/>

</linearGradient>

</defs>

<ellipse cx="200" cy="190" rx="85" ry="55"

style="fill:url(#orange_red)"/>

</svg>

Code explanation:

· The id attribute of the <linearGradient> tag defines a unique name for the gradient
· The fill:url(#orange_red) property links the ellipse element to the gradient
· The x1, x2, y1,y2 attributes of the <linearGradient> tag define the starting and ending position of the gradient
· The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop> tag. The offset attribute is used to define where the gradient color begin and end

(Horizontal gradient)

Another example:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<defs>

<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">

<stop offset="0%" style="stop-color:rgb(255,255,0);

stop-opacity:1"/>

<stop offset="100%" style="stop-color:rgb(255,0,0);

stop-opacity:1"/>

</linearGradient>

</defs>

<ellipse cx="200" cy="190" rx="85" ry="55"

style="fill:url(#orange_red)"/>

</svg>

(Vertical gradient)


SVG Gradients - Radial

An SVG Gradient must be defined within a <defs> tag.

Radial Gradients

The <radialGradient> tag is used to define an SVG radial gradient.

The <radialGradient> tag must be nested within a <defs> tag. The <defs> tag is short for definitions and it allows definition of special elements such as gradients.

Copy the following code into Notepad and save the file as "radial1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<defs>

<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"

fx="50%" fy="50%">

<stop offset="0%" style="stop-color:rgb(200,200,200);

stop-opacity:0"/>

<stop offset="100%" style="stop-color:rgb(0,0,255);

stop-opacity:1"/>

</radialGradient>

</defs>

<ellipse cx="230" cy="200" rx="110" ry="100"

style="fill:url(#grey_blue)"/>

</svg>

Code explanation:

· The id attribute of the <radialGradient> tag defines a unique name for the gradient
· The fill:url(#grey_blue) property links the ellipse element to the gradient
· The cx, cy and r attributes define the outermost circle and the fx and fy define the innermost circle
· The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop> tag. The offset attribute is used to define where the gradient color begin and end

View example

Another example:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<defs>

<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"

fx="50%" fy="50%">

<stop offset="0%" style="stop-color:rgb(200,200,200);

stop-opacity:0"/>

<stop offset="100%" style="stop-color:rgb(0,0,255);

stop-opacity:1"/>

</radialGradient>

</defs>

<ellipse cx="230" cy="200" rx="110" ry="100"

style="fill:url(#grey_blue)"/>

</svg>

View example


SVG in HTML

SVG In HTML Pages

SVG files can be embedded into HTML documents with the <embed> tag, the <object> tag, or the <iframe> tag.

SVG in HTML Pages

Below you should see three different methods on how to embed SVG files into HTML pages.

Using the <embed> Tag

The <embed> tag is supported in all major browsers, and allows scripting.

Note: The Adobe SVG Viewer recommends that you use the EMBED tag when embedding SVG in HTML pages! However, if you want to create valid XHTML, you cannot use <embed> - The <embed> tag is not listed in any HTML specification.

Syntax:

<embed src="rect.svg" width="300" height="100"

type="image/svg+xml"

pluginspage="http://www.adobe.com/svg/viewer/install/" />

Note: The pluginspage attribute points to an URL for the plugin download.

Tip: Internet Explorer supports an additional attribute, wmode="transparent", that let the HTML page background shine through.

Using the <object> Tag

The <object> tag is an HTML4 standard tag and is supported in all newer browsers. The disadvantage is that it does not allow scripting.

Note: If you have installed the latest version of Adobe SVG Viewer, SVG files will not work when using the <object> tag (at least not in Internet Explorer)!

Syntax:

<object data="rect.svg" width="300" height="100"

type="image/svg+xml"

codebase="http://www.adobe.com/svg/viewer/install/" />

Note: The codebase attribute points to an URL for the plugin download.

Using the <iframe> Tag

The <iframe> tag works in most browsers.

Syntax:

<iframe src="rect.svg" width="300" height="100">

</iframe>

I Wish....

It would be great if we could add SVG elements directly into the HTML code, only by referring to the SVG namespace, like this:

<html

xmlns:svg="http://www.w3.org/2000/svg">

<body>

<p>This is an HTML paragraph</p>

<svg:svg width="300" height="100" version="1.1" >

<svg:circle cx="100" cy="50" r="40" stroke="black"

stroke-width="2" fill="red" />

</svg:svg>

</body>

</html>


SVG <line>

The <line> tag is used to create a line.

The <line> Tag

The <line> tag is used to create a line.

Copy the following code into Notepad and save the file as "line1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<line x1="0" y1="0" x2="300" y2="300"

style="stroke:rgb(99,99,99);stroke-width:2"/>

</svg>

Code explanation:

· The x1 attribute defines the start of the line on the x-axis
· The y1 attribute defines the start of the line on the y-axis
· The x2 attribute defines the end of the line on the x-axis
· The y2 attribute defines the end of the line on the y-axis

View example


SVG <path>

The <path> tag is used to define a path.

The <path> Tag

The <path> tag is used to define a path.

The following commands are available for path data:

· M = moveto
· L = lineto
· H = horizontal lineto
· V = vertical lineto
· C = curveto
· S = smooth curveto
· Q = quadratic Belzier curve
· T = smooth quadratic Belzier curveto
· A = elliptical Arc
· Z = closepath

Note: All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.

Copy the following code into Notepad and save the file as "path1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<path d="M250 150 L150 350 L350 350 Z" />

</svg>

The example above defines a path that starts at position 250 150 with a line to position 150 350 then from there a line to 350 350 and finally closing the path back to 250 150.

View example

The following example creates a spiral:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<path d="M153 334

C153 334 151 334 151 334

C151 339 153 344 156 344

C164 344 171 339 171 334

C171 322 164 314 156 314

C142 314 131 322 131 334

C131 350 142 364 156 364

C175 364 191 350 191 334

C191 311 175 294 156 294

C131 294 111 311 111 334

C111 361 131 384 156 384

C186 384 211 361 211 334

C211 300 186 274 156 274"

style="fill:white;stroke:red;stroke-width:2"/>

</svg>

Complex? YES!!!! Because of the complexity involved in drawing paths it is highly recommended to use an SVG editor to create complex graphics.


SVG <polygon>

The <polygon> tag is used to create a graphic that contains at least three sides.

The <polygon> Tag

The <polygon> tag is used to create a graphic that contains at least three sides.

Copy the following code into Notepad and save the file as "polygon1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<polygon points="220,100 300,210 170,250"

style="fill:#cccccc;

stroke:#000000;stroke-width:1"/>

</svg>

Code explanation:

· The points attribute defines the x and y coordinates for each corner of the polygon

View example

The following example creates a polygon with four sides:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<polygon points="220,100 300,210 170,250 123,234"

style="fill:#cccccc;

stroke:#000000;stroke-width:1"/>

</svg>


SVG <polyline>

The <polyline> tag is used to create any shape that consists of only straight lines.

The <polyline> Tag

The <polyline> tag is used to create any shape that consists of only straight lines.

Copy the following code into Notepad and save the file as "polyline1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"

style="fill:white;stroke:red;stroke-width:2"/>

</svg>


SVG Rectangle

SVG <rect>

SVG has some predefined shape elements that can be used and manipulated by developers.

SVG Shapes

SVG has some predefined shape elements that can be used and manipulated by developers:

· Rectangle <rect>
· Circle <circle>
· Ellipse <ellipse>
· Line <line>
· Polyline <polyline>
· Polygon <polygon>
· Path <path>

The following chapters will explain each element, starting with the rect element.

The <rect> Tag

The <rect> tag is used to create a rectangle and variations of a rectangle shape.

To understand how this works, copy the following code into Notepad and save the file as "rect1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<rect width="300" height="100"

style="fill:rgb(0,0,255);stroke-width:1;

stroke:rgb(0,0,0)"/>

</svg>

Code explanation:

· The width and height attributes of the rect element define the height and the width of the rectangle
· The style attribute is used to define CSS properties
· The CSS fill property defines the fill color of the rectangle (either an rgb value, a color name, or a hexadecimal value)
· The CSS stroke-width property defines the width of the border of the rectangle
· The CSS stroke property defines the color of the border of the rectangle

View example

Let's look at another example that contains some new attributes:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<rect x="20" y="20" width="250" height="250"

style="fill:blue;stroke:pink;stroke-width:5;

fill-opacity:0.1;stroke-opacity:0.9"/>

</svg>

Code explanation:

· The x attribute defines the left position of the rectangle (e.g. x="0" places the rectangle 0 pixels from the left of the browser window)
· The y attribute defines the top position of the rectangle (e.g. y="0" places the rectangle 0 pixels from the top of the browser window)
· The CSS fill-opacity property defines the opacity of the fill color (legal range: 0 to 1)
· The CSS stroke-opacity property defines the opacity of the stroke color (legal range: 0 to 1)

View example

Define the opacity for the whole element:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<rect x="20" y="20" width="250" height="250"

style="fill:blue;stroke:pink;stroke-width:5;

opacity:0.9"/>

</svg>

Code explanation:

· The CSS opacity property defines the opacity value for the whole element (legal range: 0 to 1)

Last example, create a rectangle with rounded corners:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<rect x="20" y="20" rx="20" ry="20" width="250"

height="100" style="fill:red;stroke:black;

stroke-width:5;opacity:0.5"/>

</svg>

Code explanation:

· The rx and the ry attributes rounds the corners of the rectangle


SVG Tutorial

SVG Tutorial

svg

SVG stands for Scalable Vector Graphics.

SVG defines graphics in XML format.

In our SVG tutorial you will learn about SVG.

Start learning SVG!

SVG Examples

Learn by examples!

SVG Examples!

SVG Reference

At W3Schools you will find a complete SVG reference, listing all SVG elements from the W3C Recommendation (SVG Version 1.1).

SVG Reference


content.html

Link without Anchor

Link with Anchor


Deprecated

Deprecated

A deprecated element or attribute is one that has been outdated.

Deprecated elements may become obsolete in the future, but browsers should continue to support deprecated elements for backward compatibility.

Obsolete

Obsolete elements and attributes have no guarantee of browser-support and they are no longer defined in the W3C specification.


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
Tag | Description | NN | IE | DTD
< !--...--> | Defines a comment | 3.0 | 3.0 | STF
!DOCTYPE> | Defines the document type |  |  | STF
< | Defines an anchor | 3.0 | 3.0 | STF
< | Defines an abbreviation | 6.2 |  | STF
< acronym> | Defines an acronym | 6.2 | 4.0 | STF
address> | Defines an address element | 4.0 | 4.0 | STF
< applet> | Deprecated. Defines an applet | 2.0 | 3.0 | TF
< area> | Defines an area inside an image map | 3.0 | 3.0 | STF
< b> | Defines bold text | 3.0 | 3.0 | STF
< base> | Defines a base URL for all the links in a page | 3.0 | 3.0 | STF
< basefont> | Deprecated. Defines a base font | 3.0 | 3.0 | TF
 | Defines the direction of text display | 6.2 | 5.0 | STF
big> | Defines big text | 3.0 | 3.0 | STF
< blockquote> | Defines a long quotation | 3.0 | 3.0 | STF
< | Defines the body element | 3.0 | 3.0 | STF
< br> | Inserts a single line break | 3.0 | 3.0 | STF
< button> | Defines a push button | 6.2 | 4.0 | STF
caption> | Defines a table caption | 3.0 | 3.0 | STF
center> | Deprecated. Defines centered text | 3.0 | 3.0 | TF
< cite> | Defines a citation | 3.0 | 3.0 | STF
< code> | Defines computer code text | 3.0 | 3.0 | STF
< col> | Defines attributes for table columns |  | 3.0 | STF
< | Defines groups of table columns |  | 3.0 | STF
< | Defines a definition description | 3.0 | 3.0 | STF
< del> | Defines deleted text | 6.2 | 4.0 | STF
< dir> | Deprecated. Defines a directory list | 3.0 | 3.0 | TF
< div> | Defines a section in a document | 3.0 | 3.0 | STF
dfn> | Defines a definition term |  | 3.0 | STF
< dl> | Defines a definition list | 3.0 | 3.0 | STF
dt> | Defines a definition term | 3.0 | 3.0 | STF
< em> | Defines emphasized text | 3.0 | 3.0 | STF
< fieldset> | Defines a fieldset | 6.2 | 4.0 | STF
font> | Deprecated. Defines text font, size, and color | 3.0 | 3.0 | TF
form> | Defines a form | 3.0 | 3.0 | STF
< frame> | Defines a sub window (a frame) | 3.0 | 3.0 | F
frameset> | Defines a set of frames | 3.0 | 3.0 | F
to < | Defines header 1 to header 6 | 3.0 | 3.0 | STF
head> | Defines information about the document | 3.0 | 3.0 | STF
 | Defines a horizontal rule | 3.0 | 3.0 | STF
< html> | Defines an html document | 3.0 | 3.0 | STF
< i> | Defines italic text | 3.0 | 3.0 | STF
< iframe> | Defines an inline sub window (frame) | 6.0 | 4.0 | TF
< img> | Defines an image | 3.0 | 3.0 | STF
< input> | Defines an input field | 3.0 | 3.0 | STF
< ins> | Defines inserted text | 6.2 | 4.0 | STF
<isindex> | Deprecated. Defines a single-line input field | 3.0 | 3.0 | TF
< kbd> | Defines keyboard text | 3.0 | 3.0 | STF
< label> | Defines a label for a form control | 6.2 | 4.0 | STF
< legend> | Defines a title in a fieldset | 6.2 | 4.0 | STF
< li> | Defines a list item | 3.0 | 3.0 | STF
link> | Defines a resource reference | 4.0 | 3.0 | STF
< | Defines an image map | 3.0 | 3.0 | STF
< | Deprecated. Defines a menu list | 3.0 | 3.0 | TF
< meta> | Defines meta information | 3.0 | 3.0 | STF
< noframes> | Defines a noframe section | 3.0 | 3.0 | TF
noscript> | Defines a noscript section | 3.0 | 3.0 | STF
< object> | Defines an embedded object |  | 3.0 | STF
< ol> | Defines an ordered list | 3.0 | 3.0 | STF
optgroup> | Defines an option group | 6.0 | 6.0 | STF
< option> | Defines an option in a drop-down list | 3.0 | 3.0 | STF
 | Defines a paragraph | 3.0 | 3.0 | STF
< param> | Defines a parameter for an object | 3.0 | 3.0 | STF
< pre> | Defines preformatted text | 3.0 | 3.0 | STF
< q> | Defines a short quotation | 6.2 |  | STF
< s> | Deprecated. Defines strikethrough text | 3.0 | 3.0 | TF
< samp> | Defines sample computer code | 3.0 | 3.0 | STF
script> | Defines a script | 3.0 | 3.0 | STF
< select> | Defines a selectable list | 3.0 | 3.0 | STF
small> | Defines small text | 3.0 | 3.0 | STF
 | Defines a section in a document | 4.0 | 3.0 | STF
< | Deprecated. Defines strikethrough text | 3.0 | 3.0 | TF
< | Defines strong text | 3.0 | 3.0 | STF
< | Defines a style definition | 4.0 | 3.0 | STF
sub> | Defines subscripted text | 3.0 | 3.0 | STF
< sup> | Defines superscripted text | 3.0 | 3.0 | STF
< table> | Defines a table | 3.0 | 3.0 | STF
tbody> | Defines a table body |  | 4.0 | STF
< td> | Defines a table cell | 3.0 | 3.0 | STF
< textarea> | Defines a text area | 3.0 | 3.0 | STF
< tfoot> | Defines a table footer |  | 4.0 | STF
< th> | Defines a table header | 3.0 | 3.0 | STF
thead> | Defines a table header |  | 4.0 | STF
< title> | Defines the document title | 3.0 | 3.0 | STF
< tr> | Defines a table row | 3.0 | 3.0 | STF
< | Defines teletype text | 3.0 | 3.0 | STF
< | Deprecated. Defines underlined text | 3.0 | 3.0 | TF
< | Defines an unordered list | 3.0 | 3.0 | STF
< var> | Defines a variable | 3.0 | 3.0 | STF
<xmp> | Deprecated. Defines preformatted text | 3.0 | 3.0 |


HTML A TAG

HOME

Full Overview

HTML Tags

< !-->

< !DOCTYPE>

< a>

< abbr>

< acronym>

<

<

area>

< b>

base>

< basefont>

< bdo>

< big>

< blockquote>

< body>

<

< button>

< caption>

< center>

< cite>

<

< col>

< colgroup>

dd>

< del>

< dfn>

< dir>

< div>

<

< dt>

< em>

< fieldset>

< font>

< form>

< frame>

<

<

h1> - <

< hr>

< html>

i>

< iframe>

< img>

< input>

< ins>

< kbd>

< label>

< legend>

li>

< link>

map>

< menu>

< noframes>

< noscript>

< object>

< ol>

< optgroup>

< option>

< p>

<

< pre>

< q>

< s>

<

< script>

< select>

< small>

< span>

< strike>

< strong>

sub>

<

< table>

< tbody>

td>

< textarea>

< tfoot>

< th>

< thead>

title>

< tt>

<

< var>

HTML <a> tag

Definition and Usage

The <a> tag defines an anchor. An anchor can be used in two ways:

1. To create a link to another document by using the href attribute
2. To create a bookmark inside a document, by using the name or id attribute

Differences Between HTML and XHTML

NONE

Tips and Notes

Note: A linked page is normally displayed in the current browser window, unless you specify another target.

Example

Source | Output
<p>Linking to W3Schools: <a href="http://www.w3schools.com"> W3Schools</a> </p> <p> Opening W3Schools a new browser window: <a href="http://www.w3schools.com" target="_blank">W3Schools</a> </p> | Linking to W3Schools: Opening W3Schools a new browser window: W3Schools

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute

Value

Description

DTD

charset

character_encoding

Specifies the character encoding of the target URL

STF

coords

if shape="rect" then

coords="left,top,right,bottom"

if shape="circ" then

coords="centerx,centery,radius"

if shape="poly" then

coords="x1,y1,x2,y2,..,xn,yn"

Specifies the coordinates appropriate to the shape attribute to define a region of an image for image maps

STF

href

URL

The target URL of the link

STF

hreflang

language_code

Specifies the base language of the target URL

STF

name

section_name

Names an anchor. Use this attribute to create a bookmark in a document.

In future versions of XHTML the name attribute will be replaced by the id attribute!!

STF

rel

alternate

designates

stylesheet

start

next

prev

contents

index

glossary

copyright

chapter

section

subsection

appendix

help

bookmark

Specifies the relationship between the current document and the target URL

STF

rev

alternate

designates

stylesheet

start

next

prev

contents

index

glossary

copyright

chapter

section

subsection

appendix

help

bookmark

Specifies the relationship between the target URL and the current document

STF

shape

rect

rectangle

circ

circle

poly

polygon

Defines the type of region to be defined for mapping in the current area tag. Used with the coords attribute.

STF

target

_blank

_parent

_self

_top

Where to open the target URL.

· _blank - the target URL will open in a new window
· _self - the target URL will open in the same frame as it was clicked
· _parent - the target URL will open in the parent frameset
· _top - the target URL will open in the full body of the window

TF

type

mime_type

Specifies the MIME (Multipurpose Internet Mail Extensions) type of the target URL

STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang, tabindex, accesskey

For a full description, go to Standard Attributes.

Event Attributes

onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

Create hyperlinks

How to create hyperlinks.

An image as a link

How to use an image as a link.

How to open a link in a new browser window, so that the visitor does not have to leave your Web site.

Link to a location on the same page

How to link to a bookmark.

Break out of a frame

How to break out of a frame (if your site is locked in a frame).

Create a mailto link

How to link to a mail message (will only work if you have mail installed).

Create a mailto link 2

Another mailto link.

Your browser does not support inline frames or is currently configured not to display inline frames.

NEW! Altova MissionKit 2007– Save ½ off Intelligent tools for XML developers & software architects

The Altova MissionKit 2007 bundles Altova’s application development, data management and modeling tools at 50% off their regular prices. It is available in a variety of configurations tailored to meet the needs of software architects and XML developers. All MissionKits include the world’s leading XML development tools: Altova XMLSpy, MapForce, and .

Gear up; download a FREE 30-day trial today!

Easy-to-Understand Books for Web Developers:

·
· Build your own website with PHP and MySQL
· Build your own website with ASP.NET
· (New!)
· Build your own website with Dreamweaver 8
· Run your own webserver with Linux and Apache
· XML web development with PHP
· Flash: Cool effects and practical scripts
·
· CSS: 101 essential tips, tricks and hacks
· JavaScript: 101 essential tips, tricks and hacks
· DHTML: Modern web design using JavaScript and DOM
· PHP anthology, volume I and volume II
· Build your own AJAX web applications (New!)
· Firefox web browser secrets
· Photoshop Anthology: 101 Web Design Tips, Tricks
· First Class Web Sites: 101 Essential Checklists
· Web design business kit
· Search engine marketing kit
· The State Of Web Development 2006/2007
· (New!)
· The Dreamweaver Book (New!)
· The Principles of Beautiful Web Design (New!)

Jump to: or HOME or

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.

W3Schools was converted to XHTML in December 1999

SITE SEARCH

[TEditFormControlObj]

W3Schools Forum

Ecommerce

WEB HOSTING

$15 Domain Name

Registration

Save $20 / year!

UK Domain Names

Web Hosting

Registro de Dominios

Buy UK Domain Names

Register Domain Names

Cheap Domain Names

Cheap Web Hosting

Best Web Hosting

Bulk Domain Names

UK Web Hosting

PHP MySQL Hosting

Web Hosting UK

Top 10 Web Hosting

ASP.NET Web Hosting

Programming Forums

Windows Web Hosting

WEB BUILDING

Top XML Editor

Website Templates

Flash Templates

Website Builder

Internet Business Opportunity

Custom Programming

Web Analytics

Web Design Forum

Programming Forum

FREE Trial or Demo

Web Content Manager

Forms,Web Alerts,RSS

HTML Exam

SHOPPING

UK Wholesalers

UK Wholesale

ONLINE DEGREE

Advance Your Career

with Drexel University

Bachelor's & Master's

Tech Degrees ONLINE


HTML <a> tag

Definition and Usage

The <a> tag defines an anchor. An anchor can be used in two ways:

1. To create a link to another document by using the href attribute
2. To create a bookmark inside a document, by using the name or id attribute

Differences Between HTML and XHTML

NONE

Tips and Notes

Note: A linked page is normally displayed in the current browser window, unless you specify another target.

Example

Source | Output
<p>Linking to W3Schools: <a href="http://www.w3schools.com"> W3Schools</a> </p> <p> Opening W3Schools a new browser window: <a href="http://www.w3schools.com" target="_blank">W3Schools</a> </p> | Linking to W3Schools: W3Schools Opening W3Schools a new browser window: W3Schools

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute

Value

Description

DTD

charset

character_encoding

Specifies the character encoding of the target URL

STF

coords

if shape="rect" then

coords="left,top,right,bottom"

if shape="circ" then

coords="centerx,centery,radius"

if shape="poly" then

coords="x1,y1,x2,y2,..,xn,yn"

Specifies the coordinates appropriate to the shape attribute to define a region of an image for image maps

STF

href

URL

The target URL of the link

STF

hreflang

language_code

Specifies the base language of the target URL

STF

name

section_name

Names an anchor. Use this attribute to create a bookmark in a document.

In future versions of XHTML the name attribute will be replaced by the id attribute!!

STF

rel

alternate

designates

stylesheet

start

next

prev

contents

index

glossary

copyright

chapter

section

subsection

appendix

help

bookmark

Specifies the relationship between the current document and the target URL

STF

rev

alternate

designates

stylesheet

start

next

prev

contents

index

glossary

copyright

chapter

section

subsection

appendix

help

bookmark

Specifies the relationship between the target URL and the current document

STF

shape

rect

rectangle

circ

circle

poly

polygon

Defines the type of region to be defined for mapping in the current area tag. Used with the coords attribute.

STF

target

_blank

_parent

_self

_top

Where to open the target URL.

· _blank - the target URL will open in a new window
· _self - the target URL will open in the same frame as it was clicked
· _parent - the target URL will open in the parent frameset
· _top - the target URL will open in the full body of the window

TF

type

mime_type

Specifies the MIME (Multipurpose Internet Mail Extensions) type of the target URL

STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang, tabindex, accesskey

For a full description, go to Standard Attributes.

Event Attributes

onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

How to create hyperlinks.

An image as a link

How to use an image as a link.

Open a link in a new browser window

How to open a link in a new browser window, so that the visitor does not have to leave your Web site.

Link to a location on the same page

How to link to a bookmark.

Break out of a frame

How to break out of a frame (if your site is locked in a frame).

Create a mailto link

How to link to a mail message (will only work if you have mail installed).

Create a mailto link 2

Another mailto link.


HTML <abbr> tag

Definition and Usage

Indicates an abbreviated form, like "Inc.", "etc.". By marking up abbreviations you can give useful information to browsers, spell checkers, translation systems and search-engine indexers.

Differences Between HTML and XHTML

NONE

Tips and Notes

Tip: In some browsers the title attribute can be used to show the full version of the expression when you are holding the mouse over the abbreviation.

Example

Source | Output
<abbr title="United Nations">UN</abbr> | UN

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

Abbreviations and acronyms

How to handle an abbreviation and an acronym.


HTML <acronym> tag

Definition and Usage

The <acronym> tag defines the start of an acronym, like "NATO". By marking up acronyms you can give useful information to browsers, spell checkers, translation systems and search-engine indexers.

Differences Between HTML and XHTML

NONE

Tips and Notes

Tip: In some browsers the title attribute can be used to show the full version of the expression when you are holding the mouse over the acronym.

Example

Source | Output
<acronym title="World Wide Web">WWW</acronym> | WWW

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

How to handle an abbreviation and an acronym.


HTML <address> tag

Definition and Usage

The <address> tag defines the start of an address. You should use it to define addresses, signatures, or authorships of documents.

Differences Between HTML and XHTML

NONE

Tips and Notes

Note: The address usually renders in italic. Most browsers will add a line break before and after the address element, but line breaks inside the text you have to insert yourself.

Example

Source | Output
<address> Donald Duck<br /> Box 555<br /> Disneyland </address> | Donald Duck Box 555 Disneyland

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard .

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to .

Try-It-Yourself Demos

Address

How to write an address.


HTML <applet> tag

Definition and Usage

Defines an embedded applet.

Differences Between HTML and XHTML

The applet element was deprecated in HTML 4.01.

The applet element is not supported in XHTML 1.0 Strict DTD.

Tips and Notes

Note: To include applets, use the object element if possible (as the <applet> tag is not supported in XHTML 1.0 Strict DTD).

Required Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
height | pixels | Defines the height of the applet | TF
width | pixels | Defines the width of the object | TF

Optional Attributes

Attribute | Value | Description | DTD
align | left right top bottom middle baseline texttop absmiddle absbottom | Defines the text alignment around the applet | TF
alt | text | An alternate text to be displayed if the browser support applets but cannot run this applet | TF
archive | URL | A URL to the applet when it is stored in a Java Archive or ZIP file | TF
code | URL | A URL that points to the class of the applet | TF
codebase | URL | Indicates the base URL of the applet if the code attribute is relative | TF
hspace | pixels | Defines the horizontal spacing around the applet | TF
name | unique_name | Defines a unique name for the applet (to use in scripts) | TF
object | name | Defines the name of the resource that contains a serialized representation of the applet | TF
title | text | Additional information to be displayed in tool tip | TF
vspace | pixels | Defines the vertical spacing around the applet | TF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

accesskey, tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event .


HTML <area> tag

Definition and Usage

Defines a region in an image map.

Differences Between HTML and XHTML

In HTML the <area> tag has no end tag.

In XHTML the <area> tag must be properly closed.

Tips and Notes

This element is always nested inside a <map> tag.

Note: The usemap attribute in <image> refers to the id or name (browser dependant) attribute in <map>, therefore we have added both the id and name attributes to <map>.

Example

Source | Output
<p>Click on one of the planets:</p> < img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" /> <map id ="planetmap" name="planetmap"> <area shape ="rect" coords ="0,0,82,126" href ="sun.htm" target ="_blank" alt="Sun" /> <area shape ="circle" coords ="90,58,3" href ="mercur.htm" target ="_blank" alt="Mercury" /> <area shape ="circle" coords ="124,58,8" href ="venus.htm" target ="_blank" alt="Venus" /> </map> | Click on one of the planets:

Required Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
alt | text | Specifies an alternate text for the area | STF

Optional Attributes

Attribute

Value

Description

DTD

coords

if shape="rect" then

coords="left,top,right,bottom"

if shape="circ" then

coords="centerx,centery,radius"

if shape="poly" then

coords="x1,y1,x2,y2,..,xn,yn"

Specifies the coordinates for the clickable area

STF

href

URL

Specifies the target URL of the area

STF

nohref

true

false

Excludes an area from the image map

STF

shape

rect

rectangle

circ

circle

poly

polygon

Defines the shape of the area

STF

target

_blank

_parent

_self

_top

Where to open the target URL.

· _blank - the target URL will open in a new window
· _self - the target URL will open in the same frame as it was clicked
· _parent - the target URL will open in the parent frameset
· _top - the target URL will open in the full body of the window

TF

Standard Attributes

id, class, title, style, dir, lang, xml:lang, tabindex, accesskey

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur

For a full description, go to .

Try-It-Yourself Demos

Create an image map

How to create an image map, with clickable regions. Each region is a hyperlink.


HTML ASCII Reference

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 | Entity Number
 | space | &#32;
! | exclamation mark | &#33;
" | quotation mark | &#34;
# | number sign | &#35;
$ | dollar sign | &#36;
% | percent sign | &#37;
& | ampersand | &#38;
' | apostrophe | &#39;
( | left parenthesis | &#40;
) | right parenthesis | &#41;
* | asterisk | &#42;
+ | plus sign | &#43;
, | comma | &#44;
- | hyphen | &#45;
. | period | &#46;
/ | slash | &#47;
0 | digit 0 | &#48;
1 | digit 1 | &#49;
2 | digit 2 | &#50;
3 | digit 3 | &#51;
4 | digit 4 | &#52;
5 | digit 5 | &#53;
6 | digit 6 | &#54;
7 | digit 7 | &#55;
8 | digit 8 | &#56;
9 | digit 9 | &#57;
: | colon | &#58;
; | semicolon | &#59;
< | less-than | &#60;
= | equals-to | &#61;
> | greater-than | &#62;
? | question mark | &#63;
@ | at sign | &#64;
A | uppercase A | &#65;
B | uppercase B | &#66;
C | uppercase C | &#67;
D | uppercase D | &#68;
E | uppercase E | &#69;
F | uppercase F | &#70;
G | uppercase G | &#71;
H | uppercase H | &#72;
I | uppercase I | &#73;
J | uppercase J | &#74;
K | uppercase K | &#75;
L | uppercase L | &#76;
M | uppercase M | &#77;
N | uppercase N | &#78;
O | uppercase O | &#79;
P | uppercase P | &#80;
Q | uppercase Q | &#81;
R | uppercase R | &#82;
S | uppercase S | &#83;
T | uppercase T | &#84;
U | uppercase U | &#85;
V | uppercase V | &#86;
W | uppercase W | &#87;
X | uppercase X | &#88;
Y | uppercase Y | &#89;
Z | uppercase Z | &#90;
[ | left square bracket | &#91;
\ | backslash | &#92;
] | right square bracket | &#93;
^ | caret | &#94;
_ | underscore | &#95;
` | grave accent | &#96;
a | lowercase a | &#97;
b | lowercase b | &#98;
c | lowercase c | &#99;
d | lowercase d | &#100;
e | lowercase e | &#101;
f | lowercase f | &#102;
g | lowercase g | &#103;
h | lowercase h | &#104;
i | lowercase i | &#105;
j | lowercase j | &#106;
k | lowercase k | &#107;
l | lowercase l | &#108;
m | lowercase m | &#109;
n | lowercase n | &#110;
o | lowercase o | &#111;
p | lowercase p | &#112;
q | lowercase q | &#113;
r | lowercase r | &#114;
s | lowercase s | &#115;
t | lowercase t | &#116;
u | lowercase u | &#117;
v | lowercase v | &#118;
w | lowercase w | &#119;
x | lowercase x | &#120;
y | lowercase y | &#121;
z | lowercase z | &#122;
{ | left curly brace | &#123;
| | vertical bar | &#124;
} | right curly brace | &#125;
~ | tilde | &#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 | Description | Entity Number
NUL | null character | &#00;
SOH | start of header | &#01;
STX | start of text | &#02;
ETX | end of text | &#03;
EOT | end of transmission | &#04;
ENQ | enquiry | &#05;
ACK | acknowledge | &#06;
BEL | bell (ring) | &#07;
BS | backspace | &#08;
HT | horizontal tab | &#09;
LF | line feed | &#10;
VT | vertical tab | &#11;
FF | form feed | &#12;
CR | carriage return | &#13;
SO | shift out | &#14;
SI | shift in | &#15;
DLE | data link escape | &#16;
DC1 | device control 1 | &#17;
DC2 | device control 2 | &#18;
DC3 | device control 3 | &#19;
DC4 | device control 4 | &#20;
NAK | negative acknowledge | &#21;
SYN | synchronize | &#22;
ETB | end transmission block | &#23;
CAN | cancel | &#24;
EM | end of medium | &#25;
SUB | substitute | &#26;
ESC | escape | &#27;
FS | file separator | &#28;
GS | group separator | &#29;
RS | record separator | &#30;
US | unit separator | &#31;
DEL | delete (rubout) | &#127;


HTML <base> tag

Definition and Usage

The base element specifies a base URL for all the links in a page.

Differences Between HTML and XHTML

In HTML the <base> tag has no end tag.

In XHTML the <base> tag must be properly closed.

Tips and Notes

Note: The <base> tag must go inside the head element.

Example

Assume that the absolute address for an image is:

<img src="http://www.w3schools.com/images/smile.gif" />

Now we insert the <base> tag, which specifies a base URL for all of the links in a page, in the head section of a page:

<head>

<base href="http://www.w3schools.com/images/" />

</head>

When inserting images on the page in the example above, we just have to specify the relative address, and the browser will look for that file using the full URL, "http://www.w3schools.com/images/smile.gif":

<img src="smile.gif" />

Required Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
href | URL | Specifies the URL to use as the base URL for links in the page | STF

Optional Attributes

Attribute

Value

Description

DTD

target

_blank

_parent

_self

_top

Where to open all the links on the page. This attribute can be overridden by using the target attribute in each link.

· _blank - all the links will open in new windows
· _self - all the links will open in the same frame they where clicked
· _parent - all the links will open in the parent frameset
· _top - all the links will open in the full body of the window

TF

Standard Attributes and Events

NONE

Try-It-Yourself Demos

One target for all links

How to use the <base> tag to let all the links on a page have the same target.


HTML <basefont> tag

Definition and Usage

Defines a base font.

Differences Between HTML and XHTML

The basefont element was deprecated in HTML 4.01.

The basefont element is not supported in XHTML 1.0 Strict DTD.

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
color | rgb(x,x,x) #xxxxxx colorname | Specifies the text color. Deprecated. Use styles instead. | TF
face | list_of_fontnames | Specifies the font to use. Deprecated. Use styles instead. | TF
size | default_text_size (a number from 1 to 7) | Font size for font elements. Deprecated. Use styles instead. | TF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Attributes.

Event Attributes

NONE


HTML <bdo> tag

Definition and Usage

The bdo element overrides the default text direction.

Differences Between HTML and XHTML

NONE

Example

Source | Output
<bdo dir="rtl">Here is some Hebrew text</bdo> | Here is some Hebrew text

Required Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
dir | ltr rtl | Defines the text direction | STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to .

Try-It-Yourself Demos

How to change the text direction.


HTML <blockquote> tag

Definition and Usage

The <blockquote> tag defines the start of a long quotation.

Differences Between HTML and XHTML

The <blockquote> tag is supposed to contain only block-level elements within it, and not just plain text.

To validate the page as strict XHTML, you must add a block-level element around the text within the <blockquote> tag, like this:

<blockquote>

<p>here is a long quotation here is a long quotation</p>

</blockquote>

Tips and Notes

Note: The blockquote element creates white space on both sides of the text.

Example

Source | Output
Here comes a long quotation: <blockquote> here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation </blockquote> | Here comes a long quotation: here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
cite | URL | URL of the quote, if it is taken from the web | STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

Quotations

How to handle long and short quotations.


HTML <body> tag

Definition and Usage

The body element defines the documents' body. It contains all the contents of the document (like text, images, colors, graphics, etc.).

Differences Between HTML and XHTML

All "presentation attributes" of the body element were deprecated in HTML 4.01.

All "presentation attributes" of the body element are not supported in XHTML 1.0 Strict DTD.

Example

<html>

<head>

</head>

<body>

The content of the document......

</body>

</html>

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
alink | rgb(x,x,x) #xxxxxx colorname | Specifies the color of the active links in the document. Deprecated. Use styles instead. | TF
background | file_name | An image to use as the background. Deprecated. Use styles instead. | TF
bgcolor | rgb(x,x,x) #xxxxxx colorname | The background color of the document. Deprecated. Use styles instead. | TF
link | rgb(x,x,x) #xxxxxx colorname | Specifies the color of all the links in the document. Deprecated. Use styles instead. | TF
text | rgb(x,x,x) #xxxxxx colorname | Specifies the color of the text in the document. Deprecated. Use styles instead. | TF
vlink | rgb(x,x,x) #xxxxxx colorname | Specifies the color of the visited links in the document. Deprecated. Use styles instead. | TF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Attributes.

Event Attributes

onload, onunload, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

A very simple document, with only a minimum of tags. It demonstrates how the text inside a body element is displayed in the browser.

Background color

Adding a background color to a page.

Background image

Adding a background image to a page.


HTML <br> tag

Definition and Usage

The <br> tag inserts a single line break.

The <br> tag is an empty tag (means that it has no end tag - the following is wrong: <br></br>).

Differences Between HTML and XHTML

In HTML the <br> tag has no end tag.

In XHTML the <br> tag must be properly closed, like this: <br />.

Tips and Notes

Note: Use the <br> tag to enter blank lines, not to separate paragraphs.

Example

Source | Output
This text contains<br />a line break | This text contains a line break

Standard Attributes

id, class, title, style

For a full description, go to Attributes.

Try-It-Yourself Demos

Line breaks

How to insert line breaks in an HTML document.


HTML <button> tag

Definition and Usage

Defines a push button. Inside a button element you can put content, like text or images. This is the difference between this element and buttons created with the input element.

Differences Between HTML and XHTML

NONE

Example

Source | Output
<button>Click Me!</button> | Click Me!

Optional Attributes

DTD indicates in which the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
disabled | disabled | Disables the button | STF
name | button_name | Specifies a unique name for the button | STF
type | button reset submit | Defines the type of button | STF
value | some_value | Specifies an initial value for the button. The value can be changed by a script | STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang, accesskey, tabindex

For a full description, go to Standard Attributes.

Event Attributes

onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.


HTML <caption> tag

Definition and Usage

This element defines a table caption. The <caption> tag must be inserted immediately after the <table> tag. You can specify only one caption per table. Usually the caption will be centered above the table.

Differences Between HTML and XHTML

The "align" attribute of the caption element was deprecated in HTML 4.01.

The "align" attribute of the caption element is not supported in XHTML 1.0 Strict DTD.

Example

Source

Output

<table border="1">

<caption>This is a caption</caption>

<tr>

<td>Cell 1</td>

<td>Cell 2</td>

</tr>

</table>

This is a caption

Cell 1

Cell 2

Optional Attributes

DTD indicates in which the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
align | left right top bottom | How to align the caption. Deprecated. Use styles instead. | TF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to .

Try-It-Yourself Demos

Table with a caption

This example demonstrates a table with a caption.


HTML <center> tag

Definition and Usage

Centers its enclosed text horizontally.

Differences Between HTML and XHTML

The center element was deprecated in HTML 4.01.

The center element is not supported in XHTML 1.0 Strict DTD.

Tips and Notes

Tip: Use CSS styles to center text!

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.


HTML <col> tag

Definition and Usage

Defines the attribute values for one or more columns in a table. You can only use this element inside a table or a colgroup.

Differences Between HTML and XHTML

In HTML the <col> tag has no end tag.

In XHTML the <col> tag must be properly closed.

Tips and Notes

Note: The col element is an empty element that contains attributes only. To create columns, you must specify td elements within a tr element.

Tip: Use this element when you want to specify different attribute values to a column inside a colgroup. Without a col element a column will inherit all its attribute values from the colgroup.

Example

Source

Output

This example shows a colgroup that has three columns of different widths:

<table border="1">

<colgroup span="3">

<col width="20"></col>

<col width="50"></col>

<col width="80"></col>

</colgroup>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

</table>

This example shows a colgroup that has three columns of different widths:

1

2

3

4

Optional Attributes

DTD indicates in which the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
align | right left center justify char | Defines the horizontal alignment of the content in the table cell, in the column | STF
char | character | Defines a character to use to align text on (use with align="char") | STF
charoff | pixels % | Defines an alignment offset to the first character to align on, as set with char | STF
span | number | Defines the number of columns the <col> should span | STF
valign | top middle bottom baseline | Defines the vertical alignment of the content in the table cell, in the column | STF
width | % pixels relative_length | Defines the width of the column. Note: Overrides the width set in <colgroup> | STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.


HTML <colgroup> tag

Definition and Usage

Defines groups of table columns. With this element, you can group columns for formatting. This element is only valid inside the <table> tag.

Differences Between HTML and XHTML

NONE

Tips and Notes

Note: The colgroup element is an empty element that contains attributes only. To create columns, you must specify td elements within a tr element.

Example

This example creates a table with four columns, with the first three columns in one colgroup, and the last column in the second colgroup:

Source

Output

<table border="1">

<colgroup span="3" style="color:#FF0000;">

</colgroup>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

</table>

1

2

3

4

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
align | right left center justify char | Defines the horizontal alignment of the contents in the column group | STF
char | character | Defines a character to use to align text on (use with align="char") | STF
charoff | pixels % | Defines an alignment offset to the first character to align on, as set with char | STF
span | number | Defines the number of columns the <colgroup> should span | STF
valign | top middle bottom baseline | Defines the vertical alignment of the contents in the column group | STF
width | % pixels relative_length | Defines the width of the column group. Note: The width attribute can be overridden by settings in <col>! | STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event .


HTML Color Names

HOME

HTML and XHTML

Full References

HTML by Alphabet

HTML Attributes

HTML Events

HTML Colornames

HTML ASCII

HTML Entities

HTTP Messages

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 | Color HEX | Color
 | #F0F8FF |
AntiqueWhite | #FAEBD7 |
Aqua | #00FFFF |
Aquamarine | #7FFFD4 |
 | #F0FFFF |
Beige |  |
Bisque | #FFE4C4 |
Black | #000000 |
BlanchedAlmond | #FFEBCD |
Blue |  |
BlueViolet | #8A2BE2 |
Brown | #A52A2A |
BurlyWood | #DEB887 |
CadetBlue | #5F9EA0 |
Chartreuse | #7FFF00 |
Chocolate | #D2691E |
Coral |  |
CornflowerBlue | #6495ED |
Cornsilk | #FFF8DC |
Crimson | #DC143C |
Cyan | #00FFFF |
DarkBlue | #00008B |
DarkCyan | #008B8B |
DarkGoldenRod | #B8860B |
DarkGray | #A9A9A9 |
DarkGrey | #A9A9A9 |
DarkKhaki | #BDB76B |
DarkMagenta | #8B008B |
 | #556B2F |
 | #FF8C00 |
DarkOrchid | #9932CC |
DarkRed | #8B0000 |
DarkSalmon | #E9967A |
DarkSeaGreen | #8FBC8F |
 | #483D8B |
DarkSlateGrey | #2F4F4F |
DarkTurquoise | #00CED1 |
DarkViolet |  |
 | #FF1493 |
DeepSkyBlue | #00BFFF |
DimGray | #696969 |
DimGrey | #696969 |
DodgerBlue |  |
FireBrick | #B22222 |
FloralWhite | #FFFAF0 |
 | #228B22 |
Fuchsia | #FF00FF |
 | #DCDCDC |
 | #F8F8FF |
Gold | #FFD700 |
GoldenRod | #DAA520 |
Gray | #808080 |
Grey |  |
Green | #008000 |
 | #ADFF2F |
HoneyDew |  |
HotPink |  |
Indigo |  |
Ivory |  |
Khaki | #F0E68C |
Lavender | #E6E6FA |
LavenderBlush | #FFF0F5 |
 | #7CFC00 |
LemonChiffon | #FFFACD |
LightBlue | #ADD8E6 |
 | #F08080 |
LightCyan | #E0FFFF |
LightGoldenRodYellow | #FAFAD2 |
 | #D3D3D3 |
LightGrey | #D3D3D3 |
LightGreen | #90EE90 |
LightPink | #FFB6C1 |
LightSalmon | #FFA07A |
LightSeaGreen |  |
LightSkyBlue | #87CEFA |
 | #778899 |
LightSlateGrey |  |
LightSteelBlue | #B0C4DE |
Lime | #00FF00 |
 | #FAF0E6 |
Magenta | #FF00FF |
Maroon | #800000 |
MediumAquaMarine | #66CDAA |
MediumBlue |  |
 | #BA55D3 |
MediumPurple | #9370D8 |
MediumSeaGreen | #3CB371 |
 | #7B68EE |
MediumSpringGreen | #00FA9A |
MediumTurquoise |  |
MediumVioletRed | #C71585 |
MidnightBlue | #191970 |
MintCream |  |
MistyRose | #FFE4E1 |
Moccasin |  |
NavajoWhite | #FFDEAD |
Navy | #000080 |
OldLace | #FDF5E6 |
Olive | #808000 |
OliveDrab | #6B8E23 |
Orange | #FFA500 |
OrangeRed | #FF4500 |
 | #DA70D6 |
PaleGoldenRod | #EEE8AA |
 | #98FB98 |
 | #AFEEEE |
 | #D87093 |
PapayaWhip | #FFEFD5 |
PeachPuff | #FFDAB9 |
Peru | #CD853F |
Pink | #FFC0CB |
 | #DDA0DD |
PowderBlue | #B0E0E6 |
Purple | #800080 |
Red |  |
RosyBrown | #BC8F8F |
RoyalBlue | #4169E1 |
 | #FA8072 |
SandyBrown |  |
SeaGreen | #2E8B57 |
SeaShell |  |
Sienna | #A0522D |
Silver | #C0C0C0 |
 | #87CEEB |
SlateBlue |  |
SlateGray | #708090 |
SlateGrey | #708090 |
 | #FFFAFA |
SpringGreen | #00FF7F |
SteelBlue | #4682B4 |
Tan |  |
Thistle | #D8BFD8 |
Tomato | #FF6347 |
 | #40E0D0 |
Wheat | #F5DEB3 |
 | #FFFFFF |
WhiteSmoke | #F5F5F5 |
Yellow |  |
YellowGreen | #9ACD32 |

Your browser does not support inline frames or is currently configured not to display inline frames.

DWebPro is a stand alone web server developed specifically for (for example PHP/MySQL, ASP.Net/Ms Access) on CD or DVD

Just imagine the look on your client's face when you:
· Browse their dynamic
· Run to MySQL, PostgreSQL, Firebird and other databases .
· Send their email order
· Ship thousands of CDs and DVDs with the cost of a single license.
· Create CDs and DVDs that run on any Windows platform.
·

Download Your Copy of DWebPro, it's " FREE for non commercial use" !

Jump to: Top of Page or or

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 .

Copyright 1999-2007 by Refsnes Data. All Rights Reserved.

W3Schools was converted to XHTML in December 1999

SITE SEARCH

[TEditFormControlObj]

About W3Schools

W3Schools Forum

Web based charting

WEB HOSTING

$15 Domain Name

Registration

Save $20 / year!

UK Domain Names

Web Hosting

Registro de Dominios

Buy UK Domain Names

Register Domain Names

Cheap Web Hosting

Best Web Hosting

Bulk Domain Names

Web Hosting UK

Top 10 Web Hosting

Web Hosting Providers

ASP.NET Web Hosting

3 Months Free!

Programming Forums

WEB BUILDING

Top XML Editor

Website Templates

Flash Templates

Website Builder

Internet Business Opportunity

Custom Programming

BEST Flash Templates

Web Analytics

Web Design Forum

FREE Trial or Demo

Web Content Manager

Forms,Web Alerts,RSS

HTML Exam

SHOPPING

UK Wholesalers

ONLINE DEGREE

Advance Your Career

with Drexel University

Bachelor's & Master's

Tech Degrees ONLINE


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 | Color HEX | Color
AliceBlue | #F0F8FF |
AntiqueWhite | #FAEBD7 |
Aqua | #00FFFF |
Aquamarine | #7FFFD4 |
Azure | #F0FFFF |
 | #F5F5DC |
Black | #000000 |
 | #FFEBCD |
Blue | #0000FF |
Brown | #A52A2A |
BurlyWood | #DEB887 |
CadetBlue | #5F9EA0 |
Chartreuse | #7FFF00 |
Chocolate |  |
 | #FF7F50 |
 | #6495ED |
Cornsilk | #FFF8DC |
Crimson | #DC143C |
 | #00FFFF |
DarkBlue | #00008B |
DarkCyan | #008B8B |
DarkGoldenRod | #B8860B |
DarkGray | #A9A9A9 |
DarkGrey | #A9A9A9 |
 | #006400 |
DarkKhaki | #BDB76B |
DarkMagenta | #8B008B |
DarkOliveGreen | #556B2F |
Darkorange | #FF8C00 |
DarkRed | #8B0000 |
DarkSalmon | #E9967A |
DarkSeaGreen |  |
DarkSlateBlue |  |
DarkSlateGray |  |
DarkSlateGrey | #2F4F4F |
DarkTurquoise |  |
DarkViolet | #9400D3 |
DeepPink | #FF1493 |
DeepSkyBlue |  |
DimGrey | #696969 |
DodgerBlue | #1E90FF |
FireBrick | #B22222 |
 | #FFFAF0 |
ForestGreen | #228B22 |
 | #FF00FF |
Gainsboro | #DCDCDC |
GhostWhite | #F8F8FF |
Gold | #FFD700 |
GoldenRod | #DAA520 |
Gray | #808080 |
Grey | #808080 |
Green | #008000 |
GreenYellow | #ADFF2F |
HoneyDew | #F0FFF0 |
 | #FF69B4 |
IndianRed | #CD5C5C |
Indigo | #4B0082 |
Ivory | #FFFFF0 |
Khaki | #F0E68C |
Lavender |  |
 | #FFF0F5 |
 | #7CFC00 |
 | #FFFACD |
LightBlue | #ADD8E6 |
LightCoral |  |
LightCyan | #E0FFFF |
LightGoldenRodYellow |  |
 | #D3D3D3 |
LightGrey | #D3D3D3 |
LightGreen | #90EE90 |
LightPink |  |
LightSalmon |  |
LightSeaGreen | #20B2AA |
LightSkyBlue |  |
 | #778899 |
LightSlateGrey | #778899 |
LightSteelBlue |  |
LightYellow |  |
Lime | #00FF00 |
 | #32CD32 |
Linen | #FAF0E6 |
Magenta | #FF00FF |
Maroon | #800000 |
MediumAquaMarine | #66CDAA |
MediumBlue | #0000CD |
MediumOrchid | #BA55D3 |
MediumPurple | #9370D8 |
 | #3CB371 |
 | #7B68EE |
MediumSpringGreen | #00FA9A |
MediumTurquoise | #48D1CC |
 | #C71585 |
MidnightBlue | #191970 |
MistyRose | #FFE4E1 |
Moccasin | #FFE4B5 |
NavajoWhite | #FFDEAD |
Navy | #000080 |
OldLace | #FDF5E6 |
Olive | #808000 |
Orange |  |
OrangeRed | #FF4500 |
Orchid | #DA70D6 |
PaleGoldenRod | #EEE8AA |
PaleGreen | #98FB98 |
PaleTurquoise | #AFEEEE |
 | #D87093 |
PapayaWhip | #FFEFD5 |
PeachPuff | #FFDAB9 |
 | #CD853F |
Pink |  |
Plum | #DDA0DD |
PowderBlue |  |
Purple | #800080 |
Red | #FF0000 |
RosyBrown | #BC8F8F |
RoyalBlue |  |
 | #8B4513 |
Salmon | #FA8072 |
SandyBrown | #F4A460 |
 | #2E8B57 |
SeaShell | #FFF5EE |
Sienna | #A0522D |
Silver | #C0C0C0 |
SkyBlue | #87CEEB |
SlateBlue | #6A5ACD |
SlateGray | #708090 |
SlateGrey | #708090 |
Snow | #FFFAFA |
SpringGreen |  |
SteelBlue | #4682B4 |
Tan | #D2B48C |
Teal |  |
Thistle | #D8BFD8 |
Tomato | #FF6347 |
 | #40E0D0 |
Violet | #EE82EE |
 | #F5DEB3 |
White |  |
WhiteSmoke |  |
Yellow | #FFFF00 |
YellowGreen | #9ACD32 |


HTML COMMENT TAG

HTML <!--...--> tag

Definition and Usage

The comment tag is used to insert a comment in the 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.

You can also store program-specific information inside comments. In this case they will not be visible for the user, but they are still available to the program. A good practice is to comment the text inside the script and style elements to prevent older browsers, that do not support scripting or styles, from showing it as plain text.

Example

Source | Output
<!--This text is a comment--> <p>This is a regular paragraph</p> | This is a regular paragraph

Attributes: NONE

Demos

Hidden comments

How to insert a hidden comment in the source code.


HTML <dd> tag

Definition and Usage

The <dd> tag defines the description of a term in a definition list.

Differences Between HTML and XHTML

NONE

Example

Source | Output
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> | Coffee Black hot drink Milk White cold drink

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

Definition list

How to create a definition list.


HTML <del> tag

Definition and Usage

Defines text that has been deleted in a document.

Differences Between HTML and XHTML

NONE

Tips and Notes

Tip: Use it together with the <ins> tag to describe updates and modifications in a document.

Example

Source | Output
a dozen is <del>20</del> 12 pieces | a dozen is 20 12 pieces

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
cite | URL | Defines a URL to another document which explains why the text was deleted or inserted | STF
datetime | YYYYMMDD | Defines the date and time the text was deleted | STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard .

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event .

Try-It-Yourself Demos

Deleted and inserted text

How to mark deleted and inserted text in a document.


HTML <dir> tag

Definition and Usage

The <dir> tag defines a directory list.

Differences Between HTML and XHTML

The dir element was deprecated in HTML 4.01.

The dir element is not supported in XHTML 1.0 Strict DTD.

Tips and Notes

Tip: Use CSS styles to define the type of list!

Example

Source | Output
<dir> <li>html</li> <li>xhtml</li> </dir> | html xhtml

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
compact | compact_rendering | Deprecated. Use styles instead | TF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onfocus, onblur, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.


HTML <div> tag

Definition and Usage

The <div> tag defines a division/section in a document.

Differences Between HTML and XHTML

The "align" attribute of the div element was in HTML 4.01.

The "align" attribute of the div element is not supported in XHTML 1.0 Strict DTD.

Tips and Notes

Note: Browsers usually place a line break before and after the div element.

Tip: Use the <div> tag to group block-elements to format them with styles.

Example

Source | Output
This is some text <div style="color:#FF0000;"> <h4>This is a header in a div section</h4> <p>This is a paragraph in a div section</p> </div> | This is some text This is a header in a div section This is a paragraph in a div section

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
align | left right center justify | How to align the text in the div element. Deprecated. Use styles instead. | TF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard .

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.


HTML <dl> tag

Definition and Usage

The <dl> tag defines a definition list.

Differences Between HTML and XHTML

NONE

Example

Source | Output
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> | Coffee Black hot drink Milk White cold drink

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

How to create a definition list.


HTML <!DOCTYPE> tag

Definition and Usage

The <!DOCTYPE> declaration is the very first thing in your document, before the <html> tag. This tag tells the browser which HTML or XHTML specification the document uses.

Tips and Notes

Note: The <!DOCTYPE> tag does not have an end tag!

HTML

HTML 4.01 specifies three document types: Strict, Transitional, and Frameset.

HTML Strict DTD

Use this when you want clean markup, free of presentational clutter. Use this together with Cascading Style Sheets (CSS):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML Transitional DTD

The Transitional DTD includes presentation attributes and elements that W3C expects to move to a style sheet. Use this when you need to use HTML's presentational features because your readers don't have browsers that support Cascading Style Sheets (CSS):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset DTD

The Frameset DTD should be used for documents with frames. The Frameset DTD is equal to the Transitional DTD except for the frameset element replaces the body element:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML

XHTML 1.0 specifies three XML document types: Strict, Transitional, and Frameset.

XHTML Strict DTD

Use this DTD when you want clean markup, free of presentational clutter. Use this together with Cascading Style Sheets (CSS):

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

XHTML Transitional DTD

Use this DTD when you need to use XHTML's presentational features because your readers don't have browsers that support Cascading Style Sheets (CSS):

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

XHTML Frameset DTD

Use this DTD when you want to use frames!

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

To check that you have written a valid XHTML document with a correct DTD, you can link your XHTML page to an XHTML validator.

Attributes: NONE


HTML <dt> tag

Definition and Usage

The <dt> tag defines the start of a term in a definition list.

Differences Between HTML and XHTML

NONE

Example

Source | Output
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> | Coffee Black hot drink Milk White cold drink

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

Definition list

How to create a definition list.


HTML EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE TAG

HTML <em> <strong> <dfn> <code> <samp> <kbd> <var> <cite> tags

 Top Previous Next

Definition and Usage

The following elements are all phrase elements. They are not deprecated, but it is possible to achieve a much richer effect using style sheets.

<em> | Renders as emphasized text
<strong> | Renders as strong emphasized text
<dfn> | Defines a definition term
<code> | Defines computer code text
<samp> | Defines sample computer code
<kbd> | Defines keyboard text
<var> | Defines a variable
<cite> | Defines a citation

Differences Between HTML and XHTML

NONE

Example

Source | Output
<em>Emphasized text</em><br /> <strong>Strong text</strong><br /> <dfn>Definition term</dfn><br /> <code>Computer code text</code><br /> <samp>Sample computer code text</samp><br /> <kbd>Keyboard text</kbd><br /> <var>Variable</var><br /> <cite>Citation</cite> | Emphasized text Strong text Definition term Computer code text Sample computer code text Keyboard text Variable Citation

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

Text formatting

This example demonstrates how you can format text in a document.

" Computer output" tags

Demonstrates how different "computer output" tags will be displayed.


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

ISO 8859-1 Symbol Entities

Result | Description | Entity Name | Entity Number
 | non-breaking space | &nbsp; | &#160;
¡ | inverted exclamation mark | &iexcl; | &#161;
¤ | currency | &curren; | &#164;
¢ | cent | &cent; | &#162;
£ | pound | &pound; | &#163;
¥ | yen | &yen; | &#165;
¦ | broken vertical bar | &brvbar; | &#166;
§ | section | &sect; | &#167;
¨ | spacing diaeresis | &uml; | &#168;
© | copyright | &copy; | &#169;
ª | feminine ordinal indicator | &ordf; | &#170;
« | angle quotation mark (left) | &laquo; | &#171;
¬ | negation | &not; | &#172;
 | soft hyphen | &shy; | &#173;
® | registered trademark | &reg; | &#174;
™ | trademark | &trade; | &#8482;
¯ | spacing macron | &macr; | &#175;
° | degree | &deg; | &#176;
± | plus-or-minus | &plusmn; | &#177;
² | superscript 2 | &sup2; | &#178;
³ | superscript 3 | &sup3; | &#179;
´ | spacing acute | &acute; | &#180;
µ | micro | &micro; | &#181;
¶ | paragraph | &para; | &#182;
· | middle dot | &middot; | &#183;
¸ | spacing cedilla | &cedil; | &#184;
¹ | superscript 1 | &sup1; | &#185;
º | masculine ordinal indicator | &ordm; | &#186;
» | angle quotation mark (right) | &raquo; | &#187;
¼ | fraction 1/4 | &frac14; | &#188;
½ | fraction 1/2 | &frac12; | &#189;
¾ | fraction 3/4 | &frac34; | &#190;
¿ | inverted question mark | &iquest; | &#191;
× | multiplication | &times; | &#215;
÷ | division | &divide; | &#247;

ISO 8859-1 Character Entities

Result | Description | Entity Name | Entity Number
À | capital a, grave accent | &Agrave; | &#192;
Á | capital a, acute accent | &Aacute; | &#193;
Â | capital a, circumflex accent | &Acirc; | &#194;
Ã | capital a, tilde | &Atilde; | &#195;
Ä | capital a, umlaut mark | &Auml; | &#196;
Å | capital a, ring | &Aring; | &#197;
Æ | capital ae | &AElig; | &#198;
Ç | capital c, cedilla | &Ccedil; | &#199;
È | capital e, grave accent | &Egrave; | &#200;
É | capital e, acute accent | &Eacute; | &#201;
Ê | capital e, circumflex accent | &Ecirc; | &#202;
Ë | capital e, umlaut mark | &Euml; | &#203;
Ì | capital i, grave accent | &Igrave; | &#204;
Í | capital i, acute accent | &Iacute; | &#205;
Î | capital i, circumflex accent | &Icirc; | &#206;
Ï | capital i, umlaut mark | &Iuml; | &#207;
Ð | capital eth, Icelandic | &ETH; | &#208;
Ñ | capital n, tilde | &Ntilde; | &#209;
Ò | capital o, grave accent | &Ograve; | &#210;
Ó | capital o, acute accent | &Oacute; | &#211;
Ô | capital o, circumflex accent | &Ocirc; | &#212;
Õ | capital o, tilde | &Otilde; | &#213;
Ö | capital o, umlaut mark | &Ouml; | &#214;
Ø | capital o, slash | &Oslash; | &#216;
Ù | capital u, grave accent | &Ugrave; | &#217;
Ú | capital u, acute accent | &Uacute; | &#218;
Û | capital u, circumflex accent | &Ucirc; | &#219;
Ü | capital u, umlaut mark | &Uuml; | &#220;
Ý | capital y, acute accent | &Yacute; | &#221;
Þ | capital THORN, Icelandic | &THORN; | &#222;
ß | small sharp s, German | &szlig; | &#223;
à | small a, grave accent | &agrave; | &#224;
á | small a, acute accent | &aacute; | &#225;
â | small a, circumflex accent | &acirc; | &#226;
ã | small a, tilde | &atilde; | &#227;
ä | small a, umlaut mark | &auml; | &#228;
å | small a, ring | &aring; | &#229;
æ | small ae | &aelig; | &#230;
ç | small c, cedilla | &ccedil; | &#231;
è | small e, grave accent | &egrave; | &#232;
é | small e, acute accent | &eacute; | &#233;
ê | small e, circumflex accent | &ecirc; | &#234;
ë | small e, umlaut mark | &euml; | &#235;
ì | small i, grave accent | &igrave; | &#236;
í | small i, acute accent | &iacute; | &#237;
î | small i, circumflex accent | &icirc; | &#238;
ï | small i, umlaut mark | &iuml; | &#239;
ð | small eth, Icelandic | &eth; | &#240;
ñ | small n, tilde | &ntilde; | &#241;
ò | small o, grave accent | &ograve; | &#242;
ó | small o, acute accent | &oacute; | &#243;
ô | small o, circumflex accent | &ocirc; | &#244;
õ | small o, tilde | &otilde; | &#245;
ö | small o, umlaut mark | &ouml; | &#246;
ø | small o, slash | &oslash; | &#248;
ù | small u, grave accent | &ugrave; | &#249;
ú | small u, acute accent | &uacute; | &#250;
û | small u, circumflex accent | &ucirc; | &#251;
ü | small u, umlaut mark | &uuml; | &#252;
ý | small y, acute accent | &yacute; | &#253;
þ | small thorn, Icelandic | &thorn; | &#254;
ÿ | small y, umlaut mark | &yuml; | &#255;

Some Other Entities supported by HTML

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


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 | Value | Description
onload | script | 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 | Value | Description
onchange | script | Script to be run when the element changes
onsubmit | script | Script to be run when the form is submitted
onreset | script | Script to be run when the form is reset
onselect | script | Script to be run when the element is selected
onblur | script | Script to be run when the element loses focus
onfocus | script | 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 | Value | Description
onkeydown | script | What to do when key is pressed
onkeypress | script | What to do when key is pressed and released
onkeyup | script | 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 | Value | Description
onclick | script | What to do on a mouse click
ondblclick | script | What to do on a mouse doubleclick
onmousedown | script | What to do when mouse button is pressed
onmousemove | script | What to do when mouse pointer moves
onmouseover | script | What to do when mouse pointer moves over an element
onmouseout | script | What to do when mouse pointer moves out of an element
onmouseup | script | What to do when mouse button is released


HTML <fieldset> tag

Definition and Usage

The fieldset element draws a box around its containing elements.

Differences Between HTML and XHTML

NONE

Example

Source | Output
<fieldset> Height <input type="text" size="3" /> Weight <input type="text" size="3" /> </fieldset> | Height [TEditFormControlObj] Weight [TEditFormControlObj]

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard .

Event Attributes

accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Attributes.

Try-It-Yourself Demos

data

How to draw a border with a caption around your data.


HTML <font> tag

Definition and Usage

The <font> tag specifies the font face, font size, and font color of text.

Differences Between HTML and XHTML

The font element was deprecated in HTML 4.01.

The font element is not supported in XHTML 1.0 Strict DTD.

Tips and Notes

Tip: Use styles (instead of the <font> tag) to define the font face, font size, and font color of text.

Example

Source | Output
<font size="3" color="red"> This is some text! </font> <font size="1" color="blue"> This is some text! </font> <font face="arial" color="red"> This is some text! </font> | This is some text! This is some text! This is some text!

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
color | rgb(x,x,x) #xxxxxx colorname | Defines the color of the text in the font element. Deprecated. Use styles instead | TF
face | list_of_fontnames | Defines the font of the text in the font element. Deprecated. Use styles instead | TF
size | A number from 1 to 7. If basefont is specified you can specify a number from -6 to 6 | Defines the size of the text in the font element. Deprecated. Use styles instead | TF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

NONE

Try-It-Yourself Demos

Using the font element

How to use the font element.


HTML <form> tag

Definition and Usage

The form element creates a form for user input. A form can contain textfields, checkboxes, radio-buttons and more. Forms are used to pass user-data to a specified URL.

Differences Between HTML and XHTML

NONE

Example

Source | Output
<form action="form_action.asp" method="get"> First name: <input type="text" name="fname" value="Mickey" /> <br /> Last name: <input type="text" name="lname" value="Mouse" /> <br /> <input type="submit" value="Submit" /> </form> <p> If you click the "Submit" button, you will send your input to a new page called form_action.asp. </p> | First name: [TEditFormControlObj] Last name: [TEditFormControlObj] If you click the "Submit" button, you will send your input to a new page called form_action.asp.

Required Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
action | URL | A URL that defines where to send the data when the submit button is pushed | STF

Optional Attributes

Attribute

Value

Description

DTD

accept

list of contenttypes

A comma separated list of content types that the server that processes this form will handle correctly

STF

accept-charset

charset_list

A comma separated list of possible character sets for the form data. The default value is "unknown"

STF

enctype

mimetype

The mime type used to encode the content of the form

STF

method

get

post

The HTTP method for sending data to the action URL. Default is get.

method="get": This method sends the form contents in the URL: URL?name=value&name=value. Note: If the form values contains non-ASCII characters or exceeds 100 characters you MUST use method="post".

method="post": This method sends the form contents in the body of the request. Note: Most browsers are unable to bookmark post requests.

STF

name

form_name

Defines a unique name for the form

TF

target

_blank

_self

_parent

_top

Where to open the target URL.

· _blank - the target URL will open in a new window
· _self - the target URL will open in the same frame as it was clicked
· _parent - the target URL will open in the parent frameset
· _top - the target URL will open in the full body of the window

TF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Attributes.

Try-It-Yourself Demos

How to add a form to a page. The form contains two input fields and a submit button.

Form with

This form contains two checkboxes, and a submit button.

Form with radiobuttons

This form contains two radio buttons, and a submit button.

Send e-mail from a form

How to send e-mail from a form.


HTML <frame> tag

Definition and Usage

Defines a sub window (a frame).

Differences Between HTML and XHTML

In HTML the <frame> tag has no end tag.

In XHTML the <frame> tag must be properly closed.

Tips and Notes

Note: If you want to validate a page containing frames, be sure the DTD is set to "Frameset DTD". Read more about XHTML Validation.

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!

Example

Source | Output
<a href="planets.htm" target="_blank">View this page for the result</a> The source code in "planets.htm": <html> <frameset cols = "25%, 25%,*"> <frame src ="venus.htm" /> <frame src ="sun.htm" /> <frame src ="mercur.htm" /> </frameset> </html> | View this page for the result

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
frameborder | 0 1 | Specifies whether or not to display border around the frame | F
longdesc | URL | A URL to a long description of the frame contents. Use it for browsers that do not support frames | F
marginheight | pixels | Defines the top and bottom margins in the frame | F
marginwidth | pixels | Defines the left and right margins in the frame | F
name | frame_name | Defines a unique name for the frame (to use in scripts) | F
noresize | noresize | When set to noresize the user cannot resize the frame | F
scrolling | yes no auto | Determines scrollbar action | F
src | URL | Defines the URL of the file to show in the frame | F

Standard Attributes

Only allowed in XHTML 1.0 Frameset DTD!!

id, class, title, style

For a full description, go to Standard Attributes.

Try-It-Yourself Demos

Vertical frameset

How to make a vertical frameset with three different documents.

frameset

How to make a horizontal frameset with three different documents.

Mixed frameset

How to make a frameset with three documents, and how to mix them in rows and columns.

How to use the < noframes> tag

This example demonstrates how to use the <noframes> tag.

Frameset with noresize=" noresize"

How to use 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.

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.

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

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>.


HTML <frameset> tag

Definition and Usage

The frameset element defines a frameset. It is used to organize multiple windows (frames). Each frame holds a separate document. In its simplest use, the frameset element states only how many columns or rows there will be in the frameset. You must use the cols or the rows attribute.

Differences Between HTML and XHTML

NONE

Tips and Notes

Note: If you want to validate a page containing frames, be sure the DTD is set to "Frameset DTD". Read more about XHTML Validation.

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!

Example

Source | Output
<a href="planets.htm" target="_blank">View this page for the result</a> The source code in "planets.htm": <html> <frameset cols = "25%, 25%,*"> <frame src ="venus.htm" /> <frame src ="sun.htm" /> <frame src ="mercur.htm" /> </frameset> </html> | View this page for the result

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
cols | pixels % * | Defines the number and size of columns in a frameset | F
rows | pixels % * | Defines the number and size of rows in a frameset | F

Standard Attributes

Only allowed in XHTML 1.0 Frameset DTD!!

id, class, title, style

For a full description, go to Standard .

Event Attributes

NONE

Try-It-Yourself Demos

Vertical frameset

How to make a vertical frameset with three different documents.

Horizontal frameset

How to make a horizontal frameset with three different documents.

Mixed frameset

How to make a frameset with three documents, and how to mix them in rows and columns.

How to use the < noframes> tag

This example demonstrates how to use the <noframes> tag.

noresize"

How to use 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.

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.

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>.


HTML H1 TO H6 TAG

HTML <h1> to <h6> tags

Definition and Usage

The <h1> to <h6> tags define headers. <h1> defines the largest header. <h6> defines the smallest header.

Differences Between HTML and XHTML

The "align" attribute of the h1 to h6 element was deprecated in HTML 4.01.

The "align" attribute of the h1 to h6 element is not supported in XHTML 1.0 Strict DTD.

Example

Source | Output
<h1>This is header 1</h1> <h2>This is header 2</h2> <h3>This is header 3</h3> <h4>This is header 4</h4> <h5>This is header 5</h5> <h6>This is header 6</h6> | This is header 1 This is header 2 This is header 3 This is header 4 This is header 5 This is header 6

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
align | left center right justify | Specifies the alignment of the text in the header. Deprecated. Use styles instead | TF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard .

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

Demonstrates the different headings in an HTML document.

Center aligned heading

Demonstrates a center-aligned heading.


HTML <head> tag

Definition and Usage

The head element can contain information about the document. The browser does not display the "head information" to the user. The following tags can be in the head section: <base>, <link>, <meta>, <script>, <style>, and <title>.

Differences Between HTML and XHTML

NONE

Tips and Notes

Always specify a title for the document!

Example

Source

<html>

<head>

<title>Title of the document</title>

</head>

<body>

...

...

...

</body>

</html>

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
profile | URL | A space separated list of URL's that contains meta data information about the page | STF

Standard Attributes

dir, lang, xml:lang

For a full description, go to Standard .

Try-It-Yourself Demos

The title of a document

The title information inside a head element is not displayed in the browser window.

links

How to use the base tag to let all the links on a page have the same target.

Styles in HTML

How to format an HTML document with style information added to the <head> section.

Link to an external style sheet

How to use the <link> tag to link to an external style sheet.

Document description

Information inside a meta element describes the document.

Document keywords

Information inside a meta element describes the document's keywords.


HTML <hr> tag

Definition and Usage

The <hr> tag inserts a horizontal rule.

Differences Between HTML and XHTML

In HTML the <hr> tag has no end tag.

In XHTML the <hr> tag must be properly closed.

All "presentation attributes" of the hr element were deprecated in HTML 4.01.

All "presentation attributes" of the hr element are not supported in XHTML 1.0 Strict DTD.

Example

Source | Output
This is some text <hr /> This is some text | This is some text This is some text

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
align | center left right | Specifies the alignment of the horizontal rule. Deprecated. Use styles instead | TF
noshade | noshade | When set to true the rule should render in a solid color, when set to false the rule should render in a two-color "groove". Deprecated. Use styles instead | TF
size | pixels % | Specifies the thickness (height) of the horizontal rule. Deprecated. Use styles instead | TF
width | pixels % | Specifies the width of the horizontal rule Deprecated. Use styles instead | TF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to .

Try-It-Yourself Demos

How to insert a horizontal rule.


HTML <iframe> tag

Definition and Usage

The iframe element creates an inline frame that contains another document.

Differences Between HTML and XHTML

NONE

Example

Source | Output
<iframe src ="/default.asp" width="100%"> </iframe> |

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
align | left right top middle bottom | Specifies how to align the iframe according to the surrounding text | TF
frameborder | 1 0 | Specifies whether or not to display a frame border | TF
height | pixels % | Defines the height of the iframe | TF
longdesc | URL | A URL to a long description of the frame contents | TF
marginheight | pixels | Defines the top and bottom margins of the iframe | TF
marginwidth | pixels | Defines the left and right margins of the iframe | TF
name | frame_name | Specifies a unique name of the iframe (to use in scripts) | TF
scrolling | yes no auto | Define scroll bars | TF
src | URL | The URL of the document to show in the iframe | TF
width | pixels % | Defines the width of the iframe | TF

Standard Attributes

id, class, title, style

For a full description, go to Standard .

Try-It-Yourself Demos

How to create an inline frame (a frame inside an HTML page).


HTML <img> tag

Definition and Usage

The img element defines an image.

Differences Between HTML and XHTML

In HTML the <img> tag has no end tag.

In XHTML the <img> tag must be properly closed.

The "align", "border", "hspace", and "vspace" attributes of the image element were deprecated in HTML 4.01.

The "align", "border", "hspace", and "vspace" attributes of the image element are not supported in XHTML 1.0 Strict DTD.

Mozilla Firefox and the alt Attribute

If you use the alt attribute in Firefox on images and image maps the text will not show on mouse-over as in other browsers.

Firefox uses the alt attribute the way it's meant to be used, like an alternative text if the image won't load, not as a mouse-over text.

Firefox does support mouse-over comments on images or image maps if you use a title attribute in the <img> tag.

E.g. <img src="image.gif" alt="bla" title="bla bla bla"

Example

Source | Output
<img src="angry.gif" alt="Angry" /> | angry

Required Attributes

DTD indicates in which the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
alt | text | Defines a short description of the image | STF
src | URL | The URL of the image to display | STF

Optional Attributes

Attribute | Value | Description | DTD
align | top bottom middle left right | Specifies how to align the image according to surrounding text. Deprecated. Use styles instead | TF
border | pixels | Defines a border around an image. Deprecated. Use styles instead | TF
height | pixels % | Defines the height of an image | STF
hspace | pixels | Defines white space on the left and right side of the image. Deprecated. Use styles instead | TF
ismap | URL | Defines the image as a server-side image map | STF
longdesc | URL | A URL to a document that contains a long description of the image | STF
usemap | URL | Defines the image as a client-side image map. Look at the <map> and <area> tags to figure out how it works | STF
vspace | pixels | Defines white space on the top and bottom of the image. Deprecated. Use styles instead | TF
width | pixels % | Sets the width of an image | STF

Standard Attributes

id, class, title, style, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

Insert images

How to display images in your Web page.

Insert images from different locations

How to display images from another folder or another server in your Web page.

Aligning images

How to align an image within the text.

Let the image float

How to let an image float to the left or right of a paragraph.

Adjust an image to different sizes

How to adjust an image to different sizes.

Make a hyperlink of an image

How to use an image as a link.

Create an image map

How to create an image map, with clickable regions. Each region is a hyperlink.


HTML <input> tag

Definition and Usage

The <input> tag defines the start of an input field where the user can enter data.

Differences Between HTML and XHTML

In HTML the <input> tag has no end tag.

In XHTML the <input> tag must be properly closed.

Tips and Notes

Note: The input element is empty, it contains attributes only.

Tip: Use the label element to define a label to a form control.

Example

Source | Output
<form action="form_action.asp" method="get"> First name: <input type="text" name="fname" value="Mickey" /> <br /> Last name: <input type="text" name="lname" value="Mouse" /> <br /> <input type="submit" value="Submit" /> </form> <p> If you click the "Submit" button, you will send your input to a new page called form_action.asp. </p> | First name: [TEditFormControlObj] Last name: [TEditFormControlObj] If you click the "Submit" button, you will send your input to a new page called form_action.asp.

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
accept | list_of_mime_types | A comma-separated list of MIME types that indicates the MIME type of the file transfer. Note: Only used with type="file" | STF
align | left right top texttop middle absmiddle baseline bottom absbottom | Defines the alignment of text following the image. Note: Only used with type="image" | TF
alt | text | Defines an alternate text for the image. Note: Only used with type="image" | STF
checked | checked | Indicates that the input element should be checked when it first loads. Note: Used with type="checkbox" and type="radio" | STF
disabled | disabled | Disables the input element when it first loads so that the user can not write text in it, or select it. Note: Cannot be used with type="hidden" | STF
maxlength | number | Defines the maximum number of characters allowed in a text field. Note: Only used with type="text" | STF
name | field_name | Defines a unique name for the input element. Note: This attribute is required with type="button", type="checkbox", type="file", type="hidden", type="image", type="password", type="text", and type="radio" | STF
readonly | readonly | Indicates that the value of this field cannot be modified. Note: Only used with type="text" | STF
size | number_of_char | Defines the size of the input element. Note: Cannot be used with type="hidden" | STF
src | URL | Defines the URL of the image to display. Note: Only used with type="image" | STF
type | button checkbox file hidden image password radio reset submit text | Indicates the type of the input element. The default value is "text" Note: This is not a required attribute, but we think you should include it. If omitted, IE 5.5 will still display a text field, but Netscape 4.7 will not. | STF
value | value | For buttons, reset buttons and submit buttons: Defines the text on the button. For image buttons: Defines the symbolic result of the field passed to a script. For checkboxes and radio buttons: Defines the result of the input element when clicked. The result is sent to the form's action URL. For hidden, password, and text fields: Defines the default value of the element. Note: Cannot be used with type="file" Note: This attribute is required with type="checkbox" and type="radio" | STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Attributes.

Event Attributes

tabindex, accesskey, onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

Text fields

How to create text fields on an HTML page. A user can write text in a text field.

Password fields

How to create a password field on an HTML page.

Checkboxes

How to create check-boxes on an HTML page. A user can select or unselect a checkbox.

How to create radio-buttons on an HTML page.

How to create a button. On the button you can define your own text.

Form with input fields and a submit button

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 radiobuttons

This form contains two radio buttons, and a submit button.


HTML <ins> tag

Definition and Usage

Defines inserted text.

Differences Between HTML and XHTML

NONE

Tips and Notes

Tip: Use it together with the <del> tag to describe updates and modifications to a document.

Example

Source | Output
a dozen is <del>20</del> <ins>12</ins> pieces! | a dozen is 20 12 pieces!

Optional Attributes

DTD indicates in which the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
cite | URL | A URL to another document which explains why the text was inserted | STF
datetime | YYYYMMDD | Defines the date and time when the text was inserted | STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event .

Try-It-Yourself Demos

How to mark deleted and inserted text in a document.


HTML <label> tag

Definition and Usage

Defines a label to a control. If you click the text within the label element, it is supposed to toggle the control.

Differences Between HTML and XHTML

NONE

Tips and Notes

Note: The "for" attribute binds a label to another element. Set the value of the "for" attribute equal to the value of the "id" attribute of the related element.

Example

Source | Output
<p>Try clicking on the text labels:</p> <form name="input" action=""> <input type="radio" name="sex" id="male" /> <label for="male">Male</label> <br /> <input type="radio" name="sex" id="female" /> <label for="female">Female</label> </form> | Try clicking on the text labels: [TRadioButtonFormControlObj] Male [TRadioButtonFormControlObj] Female

Optional Attributes

DTD indicates in which the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
for | id_of_another_field | Defines which form element the label is for. Set to an ID of a form element. Note: If this attribute is not specified, the label is associated with its contents. | STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Attributes.

Event Attributes

accesskey, onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

Label

How to define a label to a control.


HTML <legend> tag

Definition and Usage

The legend element defines a caption for a fieldset.

Differences Between HTML and XHTML

The align attribute was deprecated in HTML 4.01.

The align attribute is not supported in XHTML 1.0 Strict DTD.

Example

Source | Output
<fieldset> <legend>Health information:</legend> Height <input type="text" size="3" /> Weight <input type="text" size="3" /> </fieldset> | Health information: Height [TEditFormControlObj] Weight [TEditFormControlObj]

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
align | top bottom left right | Defines the alignment for contents in the fieldset. Top is default | TF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

Fieldset around data

How to draw a border with a caption around your data.


HTML <li> tag

Definition and Usage

The <li> tag defines the start of a list item. The <li> tag is used in both ordered (<ol>) and unordered lists (<ul>).

Differences Between HTML and XHTML

The "type" and "value" attributes of the li element were deprecated in HTML 4.01.

The "type" and "value" attributes of the li element are not supported in XHTML 1.0 Strict DTD.

Tips and Notes

Tip: Use styles to define the type of list.

Examples

Source

Output

<ol>

<li>Coffee</li>

<li>Tea</li>

</ol>

<ul>

<li>Coffee</li>

<li>Tea</li>

</ul>
1. Coffee
2. Tea
· Coffee
· Tea

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
type | A a I i 1 disc square circle | Specifies the type of the list. Deprecated. Use styles instead | TF
value | number_of_list_item | Deprecated. Use styles instead | TF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to .

Try-It-Yourself Demos

An unordered list

An unordered list.

An ordered list

An ordered list.

A nested list.

Another nested list

A more complicated nested list.


HTML <link> tag

Definition and Usage

This element defines the relationship between two linked documents.

Differences Between HTML and XHTML

In HTML the <link> tag has no end tag.

In XHTML the <link> tag must be properly closed.

Tips and Notes

Note: The link element is an empty element, it contains attributes only.

Note: This element goes only in the head section, but it can appear any number of times.

Example

How to use the <link> tag to link to an external style sheet:

<head>

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

</head>

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute

Value

Description

DTD

charset

charset

Defines the character encoding of the target URL. Default value is "ISO-8859-1"

STF

href

URL

The target URL of the resource

STF

hreflang

language_code

Defines the base language of the target URL

STF

media

screen

tty

tv

projection

handheld

print

braille

aural

all

Specifies on what device the document will be displayed

screen | For non-paged computer screens
tty | For media using a fixed-pitch character grid (like teletypes, terminals, or devices with limited display capabilities)
tv | For TV-type devices (low resolution, limited scrollability)
projection | For projectors
handheld | For handheld devices (small screen, limited bandwidth)
print | For paged and for documents viewed on screen in print preview mode
braille | For braille tactile feedback devices
aural | For speech synthesizers
all | For all devices

STF

rel

alternate

appendix

bookmark

chapter

contents

copyright

glossary

help

home

index

next

prev

section

start

stylesheet

subsection

Defines the relationship between the current document and the targeted document

STF

rev

alternate

appendix

bookmark

chapter

contents

copyright

glossary

help

home

index

next

prev

section

start

stylesheet

subsection

Defines the relationship between the targeted document and the current document

STF

target

_blank

_self

_top

_parent

Where to open the target URL.

· _blank - the target URL will open in a new window
· _self - the target URL will open in the same frame as it was clicked
· _parent - the target URL will open in the parent frameset
· _top - the target URL will open in the full body of the window

TF

type

MIME_type like:

text/css

text/javascript

image/gif

Specifies the MIME type of the target URL

STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

How to use the <link> tag to link to an external style sheet.


HTML <map> tag

Definition and Usage

Defines a client-side image-map. An image-map is an image with clickable regions.

Differences Between HTML and XHTML

NONE

Tips and Notes

Note: The area element is always nested inside the map element. The area element defines the regions in the image map.

Note: The usemap attribute in <img> refers to the id or name (browser dependant) attribute in <map>, therefore we have added both the id and name attributes to <map>.

Example

Source | Output
<p>Click on one of the planets:</p> < img src ="planets.gif" width ="145" height ="126" alt="Planets" usemap ="#planetmap" /> <map id ="planetmap" name="planetmap"> <area shape ="rect" coords ="0,0,82,126" href ="sun.htm" target ="_blank" alt="Sun" /> <area shape ="circle" coords ="90,58,3" href ="mercur.htm" target ="_blank" alt="Mercury" /> <area shape ="circle" coords ="124,58,8" href ="venus.htm" target ="_blank" alt="Venus" /> </map> | Click on one of the planets:

Required Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
id | unique_name | Defines a unique name for the map tag | STF

Optional Attributes

Attribute | Value | Description | DTD
name | unique_name | Defines a unique name for the map tag (for backwards compability) | STF

Standard Attributes

class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

tabindex, accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur

For a full description, go to .

Try-It-Yourself Demos

Create an image map

How to create an image map, with clickable regions. Each of the regions is a hyperlink.


HTML <menu> tag

Definition and Usage

The <menu> tag defines a menu list.

Differences Between HTML and XHTML

The menu element was in HTML 4.01.

The menu element is not supported in XHTML 1.0 Strict DTD.

Tips and Notes

Tip: Use CSS styles to define the type of list!

Example

Source | Output
<menu> <li>html</li> <li>xhtml</li> </menu> | html xhtml

Optional Attributes

DTD indicates in which the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
compact | compact_rendering | Deprecated. Use styles instead | TF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard .

Event Attributes

onclick, ondblclick, onfocus, onblur, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.


HTML <meta> tag

Definition and Usage

The <meta> element provides meta-information about your page, such as descriptions and keywords for search engines and refresh rates.

Differences Between HTML and XHTML

In HTML the <meta> tag has no end tag.

In XHTML the <meta> tag must be properly closed.

Tips and Notes

Note: The <meta> tag always goes inside the head element.

Note: Metadata is always passed as name/value pairs.

Examples

Define keywords for search engines:

<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" />

Define a description of your web page:

<meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML" />

Define the last revision of your page:

<meta name="revised" content="Hege Refsnes, 6/10/99" />

Refresh page every 5 seconds:

<meta http-equiv="refresh" content="5" />

Required Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
content | some_text | Defines meta information to be associated with http-equiv or name | STF

Optional Attributes

Attribute | Value | Description | DTD
http-equiv | content-type expires refresh set-cookie | Connects the content attribute to an HTTP header | STF
name | author description keywords generator revised others | Connects the content attribute to a name | STF
scheme | some_text | Defines a format to be used to interpret the value of the content attribute | STF

Standard Attributes

dir, lang, xml:lang

For a full description, go to Standard Attributes.

Try-It-Yourself Demos

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.


HTML <noframes> tag

Definition and Usage

The noframes element displays text for browsers that do not handle frames. The noframes element goes inside the frameset element.

Differences Between HTML and XHTML

NONE

Tips and Notes

Note: If a browser handles frames, it will not display the text in the noframes element.

Important: If you add a <noframes> tag to a frameset, you will have to enclose the text in <body></body> tags!

Note: If you want to validate a page containing frames, be sure the DTD is set to "Frameset DTD". Read more about XHTML Validation.

Note: The <noframes> tag is not allowed in XHTML 1.0 .

Example

<frameset cols = "25%, 25%,*">

<noframes>

<body>Your browser does not handle frames!</body>

</noframes>

<frame src ="venus.htm" />

<frame src ="sun.htm" />

<frame src ="mercur.htm" />

</frameset>

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

NONE

Try-It-Yourself Demos

How to use the < noframes> tag

This example demonstrates how to use the <noframes> tag.


HTML <noscript> tag

Definition and Usage

The noscript element is used to define an alternate content (text) if a script is NOT executed.

This tag is used for browsers that recognizes the <script> tag, but does not support the script in it.

Differences Between HTML and XHTML

NONE

Tips and Notes

Note: If a browser supports scripting, it will not display the text in the noscript element.

Note: Browsers that do not recognize the <script> tag will display the 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 (one that does not recognize the <script> tag) will ignore the comment and 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!

Examples

JavaScript:

<body>

...

...

<script type="text/javascript">

<!--

document.write("Hello World!")

//-->

</script>

<noscript>Your browser does not support JavaScript!</noscript>

...

...

</body>

VBScript:

<body>

...

...

<script type="text/vbscript">

<!--

document.write("Hello World!")

'-->

</script>

<noscript>Your browser does not support VBScript!</noscript>

...

...

</body>

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

NONE

Try-It-Yourself Demos

How to handle browsers that do not support scripting.


HTML <object> tag

Definition and Usage

Defines an embedded object. Use this element to add multimedia to your XHTML page. This element allows you to specify the data and parameters for objects inserted into HTML documents, and the code that can be used to display/manipulate that data.

Differences Between HTML and XHTML

NONE

Tips and Notes

Note: An object element can appear inside the head or the body element. The text between the <object> and </object> is the alternate text, for browsers that do not support this tag. The <param> tags define run-time settings for the object.

Tip: For images use the <img> tag instead of the <object> tag.

Example

Source | Output
<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" width="100" height="50"> <param name="BorderStyle" value="1" /> <param name="MousePointer" value="0" /> <param name="Enabled" value="1" /> <param name="Min" value="0" /> <param name="Max" value="10" /> </object> |

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
align | left right top bottom | Defines the text alignment around the object | TF
archive | URL | A space separated list of URL's to archives. The archives contains resources relevant to the object | STF
border | pixels | Defines a border around the object | TF
classid | class ID | Defines a class ID value as set in the Windows Registry or a URL | STF
codebase | URL | Defines where to find the code for the object | STF
codetype | MIME type | The internet media type of the code referred to by the classid attribute | STF
data | URL | Defines a URL that refers to the object's data | STF
declare | declare | Defines that the object should only be declared, not created or instantiated until needed | STF
height | pixels | Defines the height of the object | STF
hspace | pixels | Defines the horizontal spacing around the object | TF
name | unique_name | Defines a unique name for the object (to use in scripts) | STF
standby | text | Defines a text to display while the object is loading | STF
type | MIME_type | Defines the MIME type of data specified in the data attribute | STF
usemap | URL | Specifies a URL of a client-side image map to be used with the object | STF
vspace | pixels | Defines the vertical spacing around the object | TF
width | pixels | Defines the width of the object | STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

accesskey, tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.


HTML <ol> tag

Definition and Usage

The <ol> tag defines the start of an ordered list.

Differences Between HTML and XHTML

The "compact", "start" and "type" attributes of the ol element were deprecated in HTML 4.01.

The "compact", "start" and "type" attributes of the ol element are not supported in XHTML 1.0 Strict DTD.

Tips and Notes

Tip: Use styles to define the type of list.

Example

Source

Output

<ol>

<li>Coffee</li>

<li>Tea</li>

</ol>
1. Coffee
2. Tea

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
compact | compact_rendering | Deprecated. Use styles instead | TF
start | start_on_number | Specifies the number to start on. Deprecated. Use styles instead | TF
type | A a I i 1 | Specifies the type of the list. Deprecated. Use styles instead | TF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

An ordered list

An ordered list.


HTML <optgroup> tag

Definition and Usage

Defines an option group. This element allows you to group choices. When you have a long list of options, groups of related choices are easier to handle.

Differences Between HTML and XHTML

NONE

Example

Source | Output
<select> <optgroup label="Swedish Cars"> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value ="mercedes">Mercedes</option> <option value ="audi">Audi</option> </optgroup> </select> | [TComboFormControlObj]

Required Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
label | text_label | Defines the label for the option group | STF

Optional Attributes

Attribute | Value | Description | DTD
disabled | disabled | Disables the option-group when it first loads | STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.


HTML <option> tag

Definition and Usage

The option element defines an option in the drop-down list.

Differences Between HTML and XHTML

In HTML the <option> tag has no end tag.

In XHTML the <option> tag must be properly closed.

Tips and Notes

Note: The <option> tag can be used without any attributes, but you usually need the value attribute, which indicates what is sent to the server.

Note: Use this tag in conjunction with the select element, elsewhere it is meaningless.

Example

Source | Output
<select> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> <option value ="opel" selected="selected">Opel</option> <option value ="audi">Audi</option> </select> | [TComboFormControlObj]

Optional Attributes

DTD indicates in which the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
disabled | disabled | Specifies that the option should be disabled when it first loads | STF
label | text | Defines a label to use when using <optgroup> | STF
selected | selected | Specifies that the option should appear selected (will be displayed first in the list) | STF
value | text | Defines the value of the option to be sent to the server | STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang, tabindex

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

Simple drop down box

How to create a simple drop-down box on an HTML page. A drop-down box is a selectable list.

Another drop down box

How to create a simple drop-down box with a pre-selected value.


HTML <p> tag

Definition and Usage

The <p> tag defines a paragraph.

Differences Between HTML and XHTML

All "presentation attributes" of the p element were deprecated in HTML 4.01.

All "presentation attributes" of the p element are not supported in XHTML 1.0 Strict DTD.

Example

Source | Output
<p>This is some text in a very short paragraph</p> | This is some text in a very short paragraph

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
align | left right center justify | Specifies the alignment of the text within the paragraph. Deprecated. Use styles instead | TF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to .

Try-It-Yourself Demos

Simple paragraphs

How paragraph elements are displayed in the browser.

Some of the default behaviors of paragraph elements.

Some problems with HTML formatting.


HTML <param> tag

Definition and Usage

The param element allows you to specify the run-time settings for an object inserted into XHTML documents.

Differences Between HTML and XHTML

In HTML the <param> tag has no end tag.

In XHTML the <param> tag must be properly closed.

Example

Source | Output
<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" width="100" height="50"> <param name="BorderStyle" value="1" /> <param name="MousePointer" value="0" /> <param name="Enabled" value="1" /> <param name="Min" value="0" /> <param name="Max" value="10" /> </object> |

Required Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
name | unique_name | Defines a unique name for the parameter | STF

Optional Attributes

Attribute | Value | Description | DTD
type | MIME type | Specifies the internet media type for the parameter | STF
value | value | Specifies the value of the parameter | STF
valuetype | data ref object | Specifies the MIME type of the value | STF

Standard Attributes

id

For a full description, go to Standard Attributes.


HTML <pre> tag

Definition and Usage

The pre element defines preformatted text. The text enclosed in the pre element usually preserves spaces and line breaks. The text renders in a fixed-pitch font.

Differences Between HTML and XHTML

The "width" attribute of the pre element was in HTML 4.01.

The "width" attribute of the pre element is not supported in XHTML 1.0 Strict DTD.

Note on <pre>

It is worth noting that while <xmp> is deprecated, the <pre> tag does not perform all of the functions of <xmp>:

<pre><b>Hello</b></pre> displays Hello

<xmp><b>Hello</b></xmp> displays <b>Hello</b>

Example

Source | Output
<pre> This text is in a fixed-pitch font, and it preserves both spaces and line breaks </pre> | This text is in a fixed-pitch font, and it preserves both spaces and line breaks

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
width | number | Defines the maximum number of characters per line (usually 40, 80, or 132) | TF

Standard Attributes

id, class, title, style, dir, lang, xml:lang, xml:space

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

Preformatted text

How to control line breaks and spaces with the pre tag.


HTML <q> tag

Definition and Usage

The <q> tag defines the start of a short quotation.

Differences Between HTML and XHTML

NONE

Tips and Notes

Note: According to the HTML 4.01 spec, the q element should render with delimiting quotation marks. This works in Mozilla browsers (Firefox) and Opera. Internet Explorer ignores this entirely.

Example

Source | Output
Here comes a short quotation: <q>here is a short quotation here is a short quotation</q> | Here comes a short quotation: here is a short quotation here is a short quotation

Optional Attributes

DTD indicates in which the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
cite | citation | Defines a citation for the quotation | STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

Quotations

How to handle long and short quotations.


HTML Reference

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
Start tag | Purpose | NN | IE | DTD
Basic Tags |  |  |  |
< !DOCTYPE> | Defines the document type |  |  | STF
< html> | Defines an html document | 3.0 | 3.0 | STF
body> | Defines the body element | 3.0 | 3.0 | STF
< h1> to < h6> | Defines header 1 to header 6 | 3.0 | 3.0 | STF
< p> | Defines a paragraph | 3.0 | 3.0 | STF
< br> | Inserts a single line break | 3.0 | 3.0 | STF
< hr> | Defines a horizontal rule | 3.0 | 3.0 | STF
< | Defines a comment | 3.0 | 3.0 | STF
Char Format |  |  |  |
< | Defines bold text | 3.0 | 3.0 | STF
< font> | Deprecated. Defines text font, size, and color | 3.0 | 3.0 | TF
< | Defines italic text | 3.0 | 3.0 | STF
< em> | Defines emphasized text | 3.0 | 3.0 | STF
< big> | Defines big text | 3.0 | 3.0 | STF
< | Defines strong text | 3.0 | 3.0 | STF
< small> | Defines small text | 3.0 | 3.0 | STF
< sup> | Defines superscripted text | 3.0 | 3.0 | STF
< sub> | Defines subscripted text | 3.0 | 3.0 | STF
< bdo> | Defines the direction of text display | 6.2 | 5.0 | STF
< u> | Deprecated. Defines underlined text | 3.0 | 3.0 | TF
Output |  |  |  |
< pre> | Defines preformatted text | 3.0 | 3.0 | STF
< code> | Defines computer code text | 3.0 | 3.0 | STF
< tt> | Defines teletype text | 3.0 | 3.0 | STF
< kbd> | Defines keyboard text | 3.0 | 3.0 | STF
< | Defines a variable | 3.0 | 3.0 | STF
< dfn> | Defines a definition term |  | 3.0 | STF
< samp> | Defines sample computer code | 3.0 | 3.0 | STF
<xmp> | Deprecated. Defines preformatted text | 3.0 | 3.0 |
Blocks |  |  |  |
< | Defines an acronym | 6.2 | 4.0 | STF
< abbr> | Defines an abbreviation | 6.2 |  | STF
< address> | Defines an address element | 4.0 | 4.0 | STF
blockquote> | Defines a long quotation | 3.0 | 3.0 | STF
< center> | Deprecated. Defines centered text | 3.0 | 3.0 | TF
< q> | Defines a short quotation | 6.2 | 4.0 | STF
< cite> | Defines a citation | 3.0 | 3.0 | STF
< ins> | Defines inserted text | 6.2 | 4.0 | STF
< del> | Defines deleted text | 6.2 | 4.0 | STF
< | Deprecated. Defines strikethrough text | 3.0 | 3.0 | TF
< strike> | Deprecated. Defines strikethrough text | 3.0 | 3.0 | TF
Links |  |  |  |
< a> | Defines an anchor | 3.0 | 3.0 | STF
< link> | Defines a resource reference | 4.0 | 3.0 | STF
Frames |  |  |  |
< frame> | Defines a sub window (a frame) | 3.0 | 3.0 | F
< frameset> | Defines a set of frames | 3.0 | 3.0 | F
 | Defines a noframe section | 3.0 | 3.0 | TF
< iframe> | Defines an inline sub window (frame) | 6.0 | 4.0 | TF
Input |  |  |  |
form> | Defines a form | 3.0 | 3.0 | STF
< | Defines an input field | 3.0 | 3.0 | STF
< textarea> | Defines a text area | 3.0 | 3.0 | STF
< button> | Defines a push button | 6.2 | 4.0 | STF
< select> | Defines a selectable list | 3.0 | 3.0 | STF
< | Defines an option group | 6.0 | 6.0 | STF
< option> | Defines an item in a list box | 3.0 | 3.0 | STF
< label> | Defines a label for a form control | 6.2 | 4.0 | STF
fieldset> | Defines a fieldset | 6.2 | 4.0 | STF
legend> | Defines a title in a fieldset | 6.2 | 4.0 | STF
<isindex> | Deprecated. Defines a single-line input field | 3.0 | 3.0 | TF
Lists |  |  |  |
ul> | Defines an unordered list | 3.0 | 3.0 | STF
< ol> | Defines an ordered list | 3.0 | 3.0 | STF
< li> | Defines a list item | 3.0 | 3.0 | STF
dir> | Deprecated. Defines a directory list | 3.0 | 3.0 | TF
< | Defines a definition list | 3.0 | 3.0 | STF
< dt> | Defines a definition term | 3.0 | 3.0 | STF
< dd> | Defines a definition description | 3.0 | 3.0 | STF
menu> | Deprecated. Defines a menu list | 3.0 | 3.0 | TF
Images |  |  |  |
< | Defines an image | 3.0 | 3.0 | STF
< map> | Defines an image map | 3.0 | 3.0 | STF
< | Defines an area inside an image map | 3.0 | 3.0 | STF
Tables |  |  |  |
table> | Defines a table | 3.0 | 3.0 | STF
< caption> | Defines a table caption | 3.0 | 3.0 | STF
< th> | Defines a table header | 3.0 | 3.0 | STF
< tr> | Defines a table row | 3.0 | 3.0 | STF
< td> | Defines a table cell | 3.0 | 3.0 | STF
< thead> | Defines a table header |  | 4.0 | STF
< tbody> | Defines a table body |  | 4.0 | STF
< tfoot> | Defines a table footer |  | 4.0 | STF
< col> | Defines attributes for table columns |  | 3.0 | STF
< colgroup> | Defines groups of table columns |  | 3.0 | STF
Styles |  |  |  |
< style> | Defines a style definition | 4.0 | 3.0 | STF
< | Defines a section in a document | 3.0 | 3.0 | STF
< | Defines a section in a document | 4.0 | 3.0 | STF
Meta Info |  |  |  |
< head> | Defines information about the document | 3.0 | 3.0 | STF
title> | Defines the document title | 3.0 | 3.0 | STF
meta> | Defines meta information | 3.0 | 3.0 | STF
< base> | Defines a base URL for all the links in a page | 3.0 | 3.0 | STF
 | Deprecated. Defines a base font | 3.0 | 3.0 | TF
Programming |  |  |  |
< script> | Defines a script | 3.0 | 3.0 | STF
< | Defines a noscript section | 3.0 | 3.0 | STF
< | Deprecated. Defines an applet | 2.0 | 3.0 | TF
< object> | Defines an embedded object |  | 3.0 | STF
< param> | Defines a parameter for an object | 3.0 | 3.0 | STF


HTML S AND STRIKE TAG

HTML <s> and <strike> tags

Definition and Usage

The <s> and <strike> tags defines strikethrough text.

Differences Between HTML and XHTML

The <s> and <strike> elements were deprecated in HTML 4.01.

The <s> and <strike> elements are not supported in XHTML 1.0 Strict DTD.

Tips and Notes

Tip: Use <del> instead!

Example

Source | Output
A new version is <s>not yet available.</s> now available! <br /> <br /> A new version is <strike>not yet available.</strike> now available! | A new version is not yet available. now available! A new version is not yet available. now available!

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard .

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.


HTML <script> tag

Definition and Usage

Defines a script, such as a JavaScript.

Differences Between HTML and XHTML

The "language" attribute of the script element was deprecated in HTML 4.01.

The "language" attribute of the script element is not supported in XHTML 1.0 Strict DTD.

Tips and Notes

Note: Code within this element is executed immediately when the page is loaded, if it is not in a function. Script that appears after a <frameset> tag will be ignored.

Example

Source | Output
<script type="text/javascript"> document.write("Hello World!") </script> |

Required Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
type | text/ecmascript text/javascript application/ecmascript application/javascript text/vbscript | Indicates the MIME type of the script | STF

Optional Attributes

Attribute | Value | Description | DTD
charset | charset | Defines the character encoding used in script | STF
defer | defer | Indicates that the script is not going to generate any document content. The browser can continue parsing and drawing the page | STF
language | javascript livescript vbscript other | Specifies the scripting language. Deprecated. Use the type attribute instead. | TF
src | URL | Defines a URL to a file that contains the script (instead of inserting the script into your HTML document, you can refer to a file that contains the script) | STF

Standard Attributes

xml:space

For a full description, go to Standard Attributes.

Event Attributes

NONE

Try-It-Yourself Demos

Insert a script

How to insert a script into your HTML document.

Work with browsers that do not support scripts

How to handle browsers that do not support scripting.


HTML <select> tag

Definition and Usage

The select element creates a drop-down list.

Differences Between HTML and XHTML

NONE

Tips and Notes

Tip: Use this tag in the form element to accept user input.

Example

Source | Output
<select> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> <option value ="opel">Opel</option> <option value ="audi">Audi</option> </select> | [TComboFormControlObj]

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
disabled | disabled | When set, it disables the drop-down list | STF
multiple | multiple | When set, it specifies that multiple items can be selected at a time | STF
name | unique_name | Defines a unique name for the drop-down list | STF
size | number | Defines the number of visible items in the drop-down list | STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang, accesskey, tabindex

For a full description, go to Attributes.

Event Attributes

onfocus, onblur, onchange

For a full description, go to Event Attributes.

Try-It-Yourself Demos

Simple drop down box

How to create a simple drop-down box on an HTML page. A drop-down box is a selectable list.

Another drop down box

How to create a simple drop-down box with a pre-selected value.


HTML <span> tag

Definition and Usage

The <span> tag is used to group inline-elements in a document.

Differences Between HTML and XHTML

NONE

Tips and Notes

Tip: Use the <span> tag to group inline-elements to format them with styles

Example

Source | Output
<p>This is a paragraph <span style="color:#0000FF;">This is a paragraph</span> This is a paragraph</p> <p> <span style="color:#00DD45;"> This is another paragraph </span> </p> | This is a paragraph This is a paragraph This is a paragraph This is another paragraph

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event 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 | Value | Description
class | class_rule or style_rule | The class of the element
id | id_name | A unique id for the element
style | style_definition | An inline style definition
title | tooltip_text | A text to display in a tool tip

Language Attributes

Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.

Attribute | Value | Description
dir | ltr | rtl | Sets the text direction
lang | language_code | Sets the language code

Keyboard Attributes

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


HTML <style> tag

Definition and Usage

Defines a style in a document.

The style element goes in the head section. If you want to include a style sheet in your page, you should define the style sheet externally, and link to it using <link>.

Differences Between HTML and XHTML

NONE

Tips and Notes

Tip: To learn more about style sheets, visit our CSS Tutorial.

Example

Source

<head>

<style type="text/css">

h1 {color: red}

h3 {color: blue}

</style>

</head>

Required Attributes

DTD indicates in which the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
type | text/css | Defines the content-type | STF

Optional Attributes

Attribute | Value | Description | DTD
media | screen tty tv projection handheld print braille aural all | The destination medium for the style information | STF

Standard Attributes

title, dir, lang, xml:space

For a full description, go to Standard Attributes.

Try-It-Yourself Demos

Styles in HTML

How to format an HTML document by using the style element.

Link that is not underlined

How to make a link that is not underlined by using the style attribute.

Link to an external style sheet

How to link to an external style sheet by using the link element.


HTML SUB AND SUP TAG

HTML <sub> and <sup> tags

Definition and Usage

The <sub> tag defines subscript text. The <sup> tag defines superscript text.

Differences Between HTML and XHTML

NONE

Example

Source | Output
This text contains <sub>subscript</sub> This text contains <sup>superscript</sup> | This text contains subscript This text contains superscript

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

Subscript and superscript

How to use the sub and sup elements.


HTML <table> tag

Definition and Usage

The <table> tag defines a table. Inside a <table> tag you can put table headers, table rows, table cells, and other tables.

Differences Between HTML and XHTML

The "align" and "bgcolor" attributes of the table element were deprecated in HTML 4.01.

The "align" and "bgcolor" attributes of the table element are not supported in XHTML 1.0 Strict DTD.

Example

Source

Output

<table border = "1">

<tr>

<td>Cell A</td>

<td>Cell B</td>

</tr>

</table>

Cell A

Cell B

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
align | left center right | Aligns the table. Deprecated. Use styles instead. | TF
bgcolor | rgb(x,x,x) #xxxxxx colorname | Specifies the background color of the table. Deprecated. Use styles instead. | TF
border | pixels | Specifies the border width. Tip: Set border="0" to display tables with no borders! | STF
cellpadding | pixels % | Specifies the space between the cell walls and contents | STF
cellspacing | pixels % | Specifies the space between cells | STF
frame | void above below hsides lhs rhs vsides box border | Specifies which sides of the border surrounding a table will be visible Note: The "border" attribute can be used in conjunction with the "frame" attribute to specify the width of the border! | STF
rules | none groups rows cols all | Specifies the horizontal/vertical divider lines. Note: Must be used in conjunction with the "border" attribute! | STF
summary | text | Specifies a summary of the table for speech-synthesizing/non-visual browsers | STF
width | % pixels | Specifies the width of the table | STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to .

Try-It-Yourself Demos

Tables

How to create tables in an HTML document.

Table borders

Different table borders.

Table with no borders

A table with no borders.

Headings in a table

How to display table headers.

Empty cells

How to use "&nbsp;" to handle cells that have no content.

Table with a caption

A table with a caption.

Table cells that span more than one row/column

How to define table cells that span more than one row or one column.

table

How to display elements inside other elements.

Cell padding

How to use cellpadding to create more white space between the cell content and its borders.

Cell spacing

How to use cellspacing to increase the distance between the cells.

Add a background color or a background image to a table

How to add a background to a table.

Add a background color or a background image to a table cell

How to add a background to one or more table cells.

Align the content in a table cell

How to use the "align" attribute to align the content of cells.

The frame attribute

How to use the "frame" attribute to control the borders around the table.

How to use the "frame" and "border" attributes to control the borders around the table.


HTML TAG

HTML <html> tag

Definition and Usage

This element tells a browser that this is an HTML document.

Differences Between HTML and XHTML

The xmlns attribute is required in XHTML but not in HTML. However, the validator on w3.org does not complain when this attribute is missing from the <html> tag 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.

Example

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

</head>

<body>

...

...

...

</body>

</html>

Required Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
xmlns | http://www.w3.org/1999/xhtml | Defines the XML namespace attribute | STF

Standard Attributes

dir, lang, xml:lang

For a full description, go to Attributes.

Try-It-Yourself Demos

A very simple HTML document

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.


HTML <tbody> tag

Definition and Usage

Defines a table body.

The thead, tfoot and tbody elements enable you to group rows in a table. When you create a table, you might want to have a header row, some rows with data, and a row with totals at bottom. This division enables browsers to support scrolling of table bodies independently of the table header and footer. When long tables are printed, the table header and footer information may be repeated on each page that contains table data.

Differences Between HTML and XHTML

NONE

Tips and Notes

Note: The <tbody> must have a <tr> tag inside!

Note: If you use the thead, tfoot and tbody elements, you must use every element. They should appear in this order: <thead>, <tfoot> and <tbody>, so that browsers can render the foot before receiving all the data. You must use these tags within the table element.

Note: 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 an in our XML tutorial.

Example

Source

Output

<table border = "1">

<thead>

<tr>

<td>This text is in the THEAD</td>

</tr>

</thead>

<tfoot>

<tr>

<td>This text is in the TFOOT</td>

</tr>

</tfoot>

<tbody>

<tr>

<td> This text is in the TBODY</td>

</tr>

</tbody>

</table>

This text is in the THEAD

This text is in the TBODY

This text is in the TFOOT

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
align | right left center justify char | Defines the text alignment in cells | STF
char | character | Specifies which character to align text on. Note: Only used if align="char"! | STF
charoff | pixels % | Specifies the alignment offset to the first character to align on. Note: Only used if align="char"! | STF
valign | top middle bottom baseline | Specifies the vertical text alignment in cells | STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.


HTML <td> tag

Definition and Usage

Defines a cell in a table.

Differences Between HTML and XHTML

The "bgcolor", "height", "width", and "nowrap" attributes of the td element were deprecated in HTML 4.01.

The "bgcolor", "height", "width", and "nowrap" attributes of the td element are not supported in XHTML 1.0 Strict DTD.

Example

Source

Output

<table border = "1">

<tr>

<td>Cell A</td>

<td>Cell B</td>

</tr>

</table>

Cell A

Cell B

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
abbr | abbr_text | Specifies an abbreviated version of the content in a cell | STF
align | left right center justify char | Specifies the horizontal alignment of cell content | STF
axis | category_names | Defines a name for a cell | STF
bgcolor | rgb(x,x,x) #xxxxxx colorname | Specifies the background color of the table cell. Deprecated. Use styles instead. | TF
char | character | Specifies which character to align text on. Note: Only used if align="char"! | STF
charoff | pixels % | Specifies the alignment offset to the first character to align on. Note: Only used if align="char"! | STF
colspan | number | Indicates the number of columns this cell should span | STF
headers | header_cells'_id | A space-separated list of cell IDs that supply header information for the cell. This attribute allows text-only browsers to render the header information for a given cell | STF
height | pixels | Specifies the height of the table cell. Deprecated. Use styles instead. | TF
nowrap | nowrap | Whether to disable or enable automatic text wrapping in this cell. Deprecated. Use styles instead. | TF
rowspan | number | Indicates the number of rows this cell should span | STF
scope | col colgroup row rowgroup | Specifies if this cell provides header information for the rest of the row that contains it (row), or for the rest of the column (col), or for the rest of the row group that contains it (rowgroup), or for the rest of the column group that contains it | STF
valign | top middle bottom baseline | Specifies the vertical alignment of cell content | STF
width | pixels % | Specifies the width of the table cell. Deprecated. Use styles instead. | TF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

How to create tables in an HTML document.

Different table borders.

Table with no borders

A table with no borders.

How to display table headers.

Empty cells

How to use "&nbsp;" to handle cells that have no content.

Table with a caption

A table with a caption.

Table cells that span more than one row/column

How to define table cells that span more than one row or one column.

table

How to display elements inside other elements.

Cell padding

How to use cellpadding to create more white space between the cell content and its borders.

Cell spacing

How to use cellspacing to increase the distance between the cells.

Add a background color or a background image to a table

How to add a background to a table.

Add a background color or a background image to a table cell

How to add a background to one or more table cells.

Align the content in a table cell

How to use the "align" attribute to align the content of cells.

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.


HTML <textarea> tag

Definition and Usage

Defines 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. The default font in the text-area is fixed pitch.

Differences Between HTML and XHTML

NONE

Example

Source | Output
<textarea rows="2" cols="20"> The cat was playing in the garden. Suddenly a dog showed up..... </textarea> | [TTextAreaFormControlObj]

Required Attributes

DTD indicates in which the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
cols | number | Specifies the number of columns visible in the text-area | STF
rows | number | Specifies the number of rows visible in the text-area | STF

Optional Attributes

Attribute | Value | Description | DTD
disabled | disabled | Disables the text-area when it is first displayed | STF
name | name_of_textarea | Specifies a name for the text-area | STF
readonly | readonly | Indicates that the user cannot modify the content in the text-area | STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang, tabindex, accesskey

For a full description, go to Standard Attributes.

Event Attributes

onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

Textarea

How to create a text-area.


HTML <tfoot> tag

Definition and Usage

Defines a table footer.

The thead, tfoot and tbody elements enable you to group rows in a table. When you create a table, you might want to have a header row, some rows with data, and a row with totals at bottom. This division enables browsers to support scrolling of table bodies independently of the table header and footer. When long tables are printed, the table header and footer information may be repeated on each page that contains table data.

Differences Between HTML and XHTML

NONE

Tips and Notes

Note: The <tfoot> must have a <tr> tag inside!

Note: If you use the thead, tfoot and tbody elements, you must use every element. They should appear in this order: <thead>, <tfoot> and <tbody>, so that browsers can render the foot before receiving all the data. You must use these tags within the table element.

Note: 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 an example in our XML tutorial.

Examples

Source

Output

<table border = "1">

<thead>

<tr>

<td>This text is in the THEAD</td>

</tr>

</thead>

<tfoot>

<tr>

<td>This text is in the TFOOT</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>This text is in the TBODY</td>

</tr>

</tbody>

</table>

This text is in the THEAD

This text is in the TBODY

This text is in the TFOOT

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
align | right left center justify char | Defines the text alignment in cells | STF
char | character | Specifies which character to align text on. Note: Only used if align="char"! | STF
charoff | pixels % | Specifies the alignment offset to the first character to align on. Note: Only used if align="char"! | STF
valign | top middle bottom baseline | Specifies the vertical text alignment in cells | STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.


HTML <th> tag

Definition and Usage

Defines a table header cell in a table. The text within the th element usually renders in bold.

Differences Between HTML and XHTML

The "bgcolor", "height", "width", and "nowrap" attributes of the th element were deprecated in HTML 4.01.

The "bgcolor", "height", "width", and "nowrap" attributes of the th element are not supported in XHTML 1.0 Strict DTD.

Example

Source

Output

<table border = "1">

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>Cell A</td>

<td>Cell B</td>

</tr>

</table>

Header 1 | Header 2
Cell A | Cell B

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
abbr | abbr_text | Specifies an abbreviated version of the content in a cell | STF
align | left right center justify char | Specifies the horizontal alignment of cell content | STF
axis | category_names | Defines a name for a cell | STF
bgcolor | rgb(x,x,x) #xxxxxx colorname | Specifies the background color of the table cell. Deprecated. Use styles instead. | TF
char | character | Specifies which character to align text on. Note: Only used if align="char"! | STF
charoff | pixels % | Specifies the alignment offset to the first character to align on. Note: Only used if align="char"! | STF
colspan | number | Indicates the number of columns this cell should span | STF
headers | header_cells'_id | A space-separated list of cell IDs that supply header information for the cell. This attribute allows text-only browsers to render the header information for a given cell | STF
height | pixels | Specifies the height of the table cell. Deprecated. Use styles instead. | TF
nowrap | nowrap | Whether to disable or enable automatic text wrapping in this cell. Deprecated. Use styles instead. | TF
rowspan | number | Indicates the number of rows this cell should span | STF
scope | col colgroup row rowgroup | Specifies if this cell provides header information for the rest of the row that contains it (row), or for the rest of the column (col), or for the rest of the row group that contains it (rowgroup), or for the rest of the column group that contains it | STF
valign | top middle bottom baseline | Specifies the vertical alignment of cell content | STF
width | pixels % | Specifies the width of the table cell. Deprecated. Use styles instead. | TF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to .

Try-It-Yourself Demos

Tables

How to create tables in an HTML document.

Table borders

Different table borders.

Table with no borders

A table with no borders.

Headings in a table

How to display table headers.

Empty cells

How to use "&nbsp;" to handle cells that have no content.

Table with a caption

A table with a caption.

Table cells that span more than one row/column

How to define table cells that span more than one row or one column.

Tags inside a table

How to display elements inside other elements.

How to use cellpadding to create more white space between the cell content and its borders.

Cell spacing

How to use cellspacing to increase the distance between the cells.

Add a background color or a background image to a table

How to add a background to a table.

Add a background color or a background image to a table cell

How to add a background to one or more table cells.

Align the content in a table cell

How to use the "align" attribute to align the content of cells.

The frame attribute

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.


HTML <thead> tag

Definition and Usage

Defines a table header.

The thead, tfoot and tbody elements enable you to group rows in a table. When you create a table, you might want to have a header row, some rows with data, and a row with totals at bottom. This division enables browsers to support scrolling of table bodies independently of the table header and footer. When long tables are printed, the table header and footer information may be repeated on each page that contains table data.

Differences Between HTML and XHTML

NONE

Tips and Notes

Note: The <thead> must have a <tr> tag inside!

Note: If you use the thead, tfoot and tbody elements, you must use every element. They should appear in this order: <thead>, <tfoot> and <tbody>, so that browsers can render the foot before receiving all the data. You must use these tags within the table element.

Note: 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 an example in our XML tutorial.

Example

Source

Output

<table border = "1">

<thead>

<tr>

<td>This text is in the THEAD</td>

</tr>

</thead>

<tfoot>

<tr>

<td>This text is in the TFOOT</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>This text is in the TBODY</td>

</tr>

</tbody>

</table>

This text is in the THEAD

This text is in the TBODY

This text is in the TFOOT

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
align | right left center justify char | Defines the text alignment in cells | STF
char | character | Specifies which character to align text on. Note: Only used if align="char"! | STF
charoff | pixels % | Specifies the alignment offset to the first character to align on. Note: Only used if align="char"! | STF
valign | top middle bottom baseline | Specifies the vertical text alignment in cells | STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.


HTML <title> tag

Definition and Usage

This element defines the title of the document.

Differences Between HTML and XHTML

NONE

Example

<html>

<head>

<title>XHTML Tag Reference</title>

</head>

<body>

The content of the document......

</body>

</html>

Standard Attributes

id, class, dir, lang, style, xml:lang

For a full description, go to Standard Attributes.


HTML <tr> tag

Definition and Usage

Defines a row in a table.

Differences Between HTML and XHTML

The "bgcolor" attribute of the tr element were deprecated in HTML 4.01.

The "bgcolor" attribute of the tr element are not supported in XHTML 1.0 Strict DTD.

Example

Source

Output

<table border = "1">

<tr>

<td>Cell A</td>

<td>Cell B</td>

</tr>

</table>

Cell A

Cell B

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
align | right left center justify char | Defines the text alignment in cells | STF
bgcolor | rgb(x,x,x) #xxxxxx colorname | Specifies the background color of the table cell. Deprecated. Use styles instead. | TF
char | character | Specifies which character to align text on. Note: Only used if align="char"! | STF
charoff | pixels % | Specifies the alignment offset to the first character to align on. Note: Only used if align="char"! | STF
valign | top middle bottom baseline | Specifies the vertical text alignment in cells | STF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

Tables

How to create tables in an HTML document.

Table borders

Different table borders.

Table with no borders

A table with no borders.

Headings in a table

How to display table headers.

Empty cells

How to use "&nbsp;" to handle cells that have no content.

Table with a caption

A table with a caption.

Table cells that span more than one row/column

How to define table cells that span more than one row or one column.

Tags inside a table

How to display elements inside other elements.

Cell padding

How to use cellpadding to create more white space between the cell content and its borders.

How to use cellspacing to increase the distance between the cells.

Add a background color or a background image to a table

How to add a background to a table.

Add a background color or a background image to a table cell

How to add a background to one or more table cells.

Align the content in a table cell

How to use the "align" attribute to align the content of cells.

The frame attribute

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.


HTML TT, I, B, BIG, SMALL TAG

HTML <tt> <i> <b> <big> <small> tags

Definition and Usage

The following elements are all font style elements. They are not deprecated, but it is possible to achieve richer effects using style sheets.

<tt> | Renders as teletype or mono spaced text
<i> | Renders as italic text
<b> | Renders as bold text
<big> | Renders as bigger text
<small> | Renders as smaller text

Differences Between HTML and XHTML

NONE

Example

Source | Output
<tt>Teletype text</tt><br /> <i>Italic text</i><br /> <b>Bold text</b><br /> <big>Big text</big><br /> <small>Small text</small><br /> | Teletype text Italic text Bold text Big text Small text

Standard Attributes

id, class, title, style, dir, lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

Text formatting

This example demonstrates how you can format text in a document.


HTML <u> tag

Definition and Usage

The <u> tag defines underlined text.

Differences Between HTML and XHTML

The u element was deprecated in HTML 4.01.

The u element is not supported in XHTML 1.0 Strict DTD.

Tips and Notes

Tip: Do not underline text - a user confuses it with a hyperlink!!

Example

Source | Output
A new version is <u>now available!</u> | A new version is now available!

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.


HTML <ul> tag

Definition and Usage

The <ul> tag defines an unordered list.

Differences Between HTML and XHTML

The "compact" and "type" attributes of the ul element were deprecated in HTML 4.01.

The "compact" and "type" attributes of the ul element are not supported in XHTML 1.0 Strict DTD.

Tips and Notes

Tip: Use styles to define the type of list.

Example

Source

Output

<ul>

<li>Coffee</li>

<li>Tea</li>

</ul>
· Coffee
· Tea

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute | Value | Description | DTD
compact | compact_rendering | Deprecated. Use styles instead | TF
type | disc square circle | Specifies the type of the list. Deprecated. Use styles instead | TF

Standard Attributes

id, class, title, style, dir, lang, xml:lang

For a full description, go to Standard Attributes.

Event Attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.

Try-It-Yourself Demos

An unordered list

An unordered list.

A nested list.

Another nested list

A more complicated nested list.


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.

[TTextAreaFormControlObj]

URL-encoding from %00 to %8f

ASCII Value | URL-encode | ASCII Value | URL-encode | ASCII Value | URL-encode
æ | %00 | 0 | %30 | ` | %60
 | %01 | 1 | %31 | a | %61
 | %02 | 2 | %32 | b | %62
 | %03 | 3 | %33 | c | %63
 | %04 | 4 | %34 | d | %64
 | %05 | 5 | %35 | e | %65
 | %06 | 6 | %36 | f | %66
 | %07 | 7 | %37 | g | %67
backspace | %08 | 8 | %38 | h | %68
tab | %09 | 9 | %39 | i | %69
linefeed | %0a | : | %3a | j | %6a
 | %0b | ; | %3b | k | %6b
 | %0c | < | %3c | l | %6c
c return | %0d | = | %3d | m | %6d
 | %0e | > | %3e | n | %6e
 | %0f | ? | %3f | o | %6f
 | %10 | @ | %40 | p | %70
 | %11 | A | %41 | q | %71
 | %12 | B | %42 | r | %72
 | %13 | C | %43 | s | %73
 | %14 | D | %44 | t | %74
 | %15 | E | %45 | u | %75
 | %16 | F | %46 | v | %76
 | %17 | G | %47 | w | %77
 | %18 | H | %48 | x | %78
 | %19 | I | %49 | y | %79
 | %1a | J | %4a | z | %7a
 | %1b | K | %4b | { | %7b
 | %1c | L | %4c | | | %7c
 | %1d | M | %4d | } | %7d
 | %1e | N | %4e | ~ | %7e
 | %1f | O | %4f |  | %7f
space | %20 | P | %50 | € | %80
! | %21 | Q | %51 |  | %81
" | %22 | R | %52 |  | %82
# | %23 | S | %53 | ƒ | %83
$ | %24 | T | %54 |  | %84
% | %25 | U | %55 | … | %85
& | %26 | V | %56 |  | %86
' | %27 | W | %57 | ‡ | %87
( | %28 | X | %58 | ˆ | %88
) | %29 | Y | %59 | ‰ | %89
* | %2a | Z | %5a | Š | %8a
+ | %2b | [ | %5b | ‹ | %8b
, | %2c | \ | %5c | Œ | %8c
- | %2d | ] | %5d |  | %8d
. | %2e | ^ | %5e | Ž | %8e
/ | %2f | _ | %5f |  | %8f

URL-encoding from %90 to %ff

ASCII Value | URL-encode | ASCII Value | URL-encode | ASCII Value | URL-encode
 | %90 | À | %c0 | ð | %f0
 | %91 | Á | %c1 | ñ | %f1
 | %92 | Â | %c2 | ò | %f2
 | %93 | Ã | %c3 | ó | %f3
 | %94 | Ä | %c4 | ô | %f4
• | %95 | Å | %c5 | õ | %f5
 | %96 | Æ | %c6 | ö | %f6
 | %97 | Ç | %c7 | ÷ | %f7
˜ | %98 | È | %c8 | ø | %f8
™ | %99 | É | %c9 | ù | %f9
š | %9a | Ê | %ca | ú | %fa
› | %9b | Ë | %cb | û | %fb
œ | %9c | Ì | %cc | ü | %fc
 | %9d | Í | %cd | ý | %fd
ž | %9e | Î | %ce | þ | %fe
Ÿ | %9f | Ï | %cf | ÿ | %ff
 | %a0 | Ð | %d0 |  |
¡ | %a1 | Ñ | %d1 |  |
¢ | %a2 | Ò | %d2 |  |
£ | %a3 | Ó | %d3 |  |
 | %a4 | Ô | %d4 |  |
¥ | %a5 | Õ | %d5 |  |
| | %a6 | Ö | %d6 |  |
§ | %a7 |  | %d7 |  |
¨ | %a8 | Ø | %d8 |  |
© | %a9 | Ù | %d9 |  |
ª | %aa | Ú | %da |  |
« | %ab | Û | %db |  |
¬ | %ac | Ü | %dc |  |
¯ | %ad | Ý | %dd |  |
® | %ae | Þ | %de |  |
¯ | %af | ß | %df |  |
° | %b0 | à | %e0 |  |
± | %b1 | á | %e1 |  |
² | %b2 | â | %e2 |  |
³ | %b3 | ã | %e3 |  |
´ | %b4 | ä | %e4 |  |
µ | %b5 | å | %e5 |  |
¶ | %b6 | æ | %e6 |  |
· | %b7 | ç | %e7 |  |
¸ | %b8 | è | %e8 |  |
¹ | %b9 | é | %e9 |  |
º | %ba | ê | %ea |  |
» | %bb | ë | %eb |  |
¼ | %bc | ì | %ec |  |
½ | %bd | í | %ed |  |
¾ | %be | î | %ee |  |
¿ | %bf | ï | %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: | Description:
100 Continue | 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
101 Switching Protocols | The server switches protocol

2xx: Successful

Message: | Description:
200 OK | The request is OK
201 Created | The request is complete, and a new resource is created
202 Accepted | The request is accepted for processing, but the processing is not complete
203 Non-authoritative Information |
204 No Content |
205 Reset Content |
206 Partial Content |

3xx: Redirection

Message: | Description:
300 Multiple Choices | A link list. The user can select a link and go to that location. Maximum five addresses
301 Moved Permanently | The requested page has moved to a new url
302 Found | The requested page has moved temporarily to a new url
303 See Other | The requested page can be found under a different url
304 Not Modified |
305 Use Proxy |
306 Unused | This code was used in a previous version. It is no longer used, but the code is reserved
307 Temporary Redirect | The requested page has moved temporarily to a new url

4xx: Client Error

Message: | Description:
400 Bad Request | The server did not understand the request
401 Unauthorized | The requested page needs a username and a password
402 Payment Required | You can not use this code yet
403 Forbidden | Access is forbidden to the requested page
404 Not Found | The server can not find the requested page
405 Method Not Allowed | The method specified in the request is not allowed
406 Not Acceptable | The server can only generate a response that is not accepted by the client
407 Proxy Authentication Required | You must authenticate with a proxy server before this request can be served
408 Request Timeout | The request took longer than the server was prepared to wait
409 Conflict | The request could not be completed because of a conflict
410 Gone | The requested page is no longer available
411 Length Required | The "Content-Length" is not defined. The server will not accept the request without it
412 Precondition Failed | The precondition given in the request evaluated to false by the server
413 Request Entity Too Large | 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
415 Unsupported Media Type | The server will not accept the request, because the media type is not supported
416 |
417 Expectation Failed |

5xx: Server Error

Message: | Description:
500 Internal Server Error | The request was not completed. The server met an unexpected condition
501 Not Implemented | The request was not completed. The server did not support the functionality required
502 Bad Gateway | The request was not completed. The server received an invalid response from the upstream server
503 Service Unavailable | The request was not completed. The server is temporarily overloading or down
504 Gateway Timeout | The gateway has timed out
505 HTTP Version Not Supported | The server does not support the "http protocol" version


link.html

Chapter 1

This chapter explains ba bla bla

Chapter 2

This chapter explains ba bla bla

Chapter 3

This chapter explains ba bla bla

Chapter 4

This chapter explains ba bla bla

Chapter 5

This chapter explains ba bla bla

Chapter 6

This chapter explains ba bla bla

Chapter 7

This chapter explains ba bla bla

Chapter 8

This chapter explains ba bla bla

Chapter 9

This chapter explains ba bla bla

Chapter 10

This chapter explains ba bla bla

Chapter 11

This chapter explains ba bla bla

Chapter 12

This chapter explains ba bla bla

Chapter 13

This chapter explains ba bla bla

Chapter 14

This chapter explains ba bla bla

Chapter 15

This chapter explains ba bla bla

Chapter 16

This chapter explains ba bla bla

Chapter 17

This chapter explains ba bla bla


My first HTML page

The content of the body element is displayed in your browser.


planets.html


The title is not displayed

This text is displayed


tryit_view0318.html

This is header 1

This is header 3


tryit_view046c.html

Normal border:

First | Row
Second | Row

Thick border:

First | Row
Second | Row

Very thick border:

First | Row
Second | Row


tryit_view0721.html

This is a paragraph

This is another paragraph

This cell contains a table:

A | B
C | D

This cell contains a list

· apples
· bananas
· pineapples

HELLO


tryit_view095a.html

This table has a caption, and a thick border:

My Caption

100 | 200 | 300
400 | 500 | 600


tryit_view0eee.html

Go to the last page

If you set the target attribute to "_blank", the link will open in a new browser window.


tryit_view0f85.html

An image from another folder:

An image from W3Schools:


tryit_view1082.html

Male: [TRadioButtonFormControlObj]

Female: [TRadioButtonFormControlObj]

If you click the "Submit" button, you will send your input to a new page called "form_action.asp".


tryit_view1201.html

I have a bike: [TCheckBoxFormControlObj]

I have a car: [TCheckBoxFormControlObj]

I have an airplane: [TCheckBoxFormControlObj]

If you click the "Submit" button, you send your input to a new page called "form_action.asp".


tryit_view1ad2.html

The meta attributes of this document describe the document and its keywords.


tryit_view1bce.html

I have a bike: [TCheckBoxFormControlObj]

I have a car: [TCheckBoxFormControlObj]

I have an airplane: [TCheckBoxFormControlObj]


tryit_view1c74.html


tryit_view1e18.html

This is another mailto link: Send mail!

Note: Spaces between words should be replaced by %20 to ensure that the browser will display your text properly.


tryit_view2061.html

A dozen is twenty twelve pieces.

Note: Most browsers will strikethrough deleted text and underline inserted text. However, some older browsers will display deleted and inserted text as plain text.


tryit_view247b.html

If you see no frames around the tables in these examples, your browser does not support the frame attribute.

First row

First row


tryit_view2c5f.html

Money spent on.... | January | February
Clothes | $241.10 | $50.20
Make-Up | $30.00 | $44.45
Food | $730.40 | $650.00
Sum | $1001.50 | $744.65


tryit_view2d52.html

Male: [TRadioButtonFormControlObj]

Female: [TRadioButtonFormControlObj]

Note: When a user clicks on a radio-button it becomes checked and all other buttons with the same name become unchecked.


tryit_view2ee8.html

If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):

Here is some Hebrew text


tryit_view2f1d.html

Locked in a frame?

Click here!


tryit_view2fd9.html

An image: constr4

A moving image: hackanm

Note that the syntax of inserting a moving image is no different from that of a non-moving image.


tryit_view319a.html

Donald Duck

BOX 555

Disneyland

USA


tryit_view322f.html

The meta attributes of this document identify the author and the editor software.


tryit_view36b9.html

My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.

Note that your browser simply ignores the formatting!


tryit_view372c.html

An image angry in the text

An image angry in the text

An image angry in the text

Note: align="bottom" is the default alignment!

An image angry in the text

angry An image before the text

An image after the text angry


tryit_view37ef.html

This form sends an e-mail to W3Schools.

Name:

[TEditFormControlObj]

Mail:

[TEditFormControlObj]

Comment:

[TEditFormControlObj]


tryit_view3aae.html

See also Chapter 4

Chapter 1

This chapter explains ba bla bla

Chapter 2

This chapter explains ba bla bla

Chapter 3

This chapter explains ba bla bla

Chapter 4

This chapter explains ba bla bla

Chapter 5

This chapter explains ba bla bla

Chapter 6

This chapter explains ba bla bla

Chapter 7

This chapter explains ba bla bla

Chapter 8

This chapter explains ba bla bla

Chapter 9

This chapter explains ba bla bla

Chapter 10

This chapter explains ba bla bla

Chapter 11

This chapter explains ba bla bla

Chapter 12

This chapter explains ba bla bla

Chapter 13

This chapter explains ba bla bla

Chapter 14

This chapter explains ba bla bla

Chapter 15

This chapter explains ba bla bla

Chapter 16

This chapter explains ba bla bla

Chapter 17

This chapter explains ba bla bla


tryit_view3b00.html

This text is a link to a page on this Web site.

is a link to a page on the World Wide Web.


tryit_view3f44.html

Your browser does not handle frames!


tryit_view4186.html


tryit_view4207.html

[TComboFormControlObj]


tryit_view439b.html


tryit_view456c.html

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.


tryit_view503d.html

Sorry! We have moved! The new URL is: http://www.w3schools.com

You will be redirected to the new address in five seconds.

If you see this message for more than 5 seconds, please click on the link above!


tryit_view5159.html

This is heading 1

This is some text in a paragraph. This is some text in a paragraph. This is some text in a paragraph. This is some text in a paragraph.


tryit_view59fb.html

One column:

100

One row and three columns:

100

200

300

Two rows and three columns:

100 | 200 | 300
400 | 500 | 600

Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.


tryit_view5b70.html


tryit_view61c2.html

A nested List:

· Coffee
· Tea
o Black tea
o Green tea
· Milk


tryit_view633d.html

An Unordered List:

· Coffee
· Tea
· Milk


tryit_view6505.html

Here comes a long quotation:

This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.

Here comes a short quotation: This is a short quotation.

Note: With the blockquote element, the browser inserts line breaks and margins. The q element does not render as anything special.


tryit_view6683.html

A Definition List:

Coffee

Black hot drink

Milk

White cold drink


tryit_view6cd0.html

Note: You can change the size of an image by changing the values of the "height" and "width" attributes.


tryit_view79fa.html

This is a regular paragraph


tryit_view7abf.html

An Ordered List:

1. Coffee
2. Tea
3. Milk


tryit_view7de9.html

Without cellpadding:

First | Row
Second | Row

With cellpadding:

First | Row
Second | Row


tryit_view7f09.html

This paragraph contains a lot of lines in the source code, but the browser ignores it.

This paragraph contains a lot of spaces in the source code, but the browser ignores it.

The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.


tryit_view80c0.html

No JavaScript support!

A browser that does not support JavaScript will show the text in the noscript element.


tryit_view8b44.html

I am formatted with a linked style sheet

Me too!


tryit_view8e83.html

The hr element defines a horizontal rule:

This is a paragraph

This is a paragraph

This is a paragraph


tryit_view927b.html


tryit_view96a5.html


tryit_view96c1.html

The meta attributes of this document describe the document and its keywords.


tryit_view9792.html

To break

lines

in a

paragraph,

use the br element.


tryit_view9cd0.html

UN

WWW

The "title" attribute is used to show the spelled-out version of the acronym or abbreviation when holding the mouse pointer over the element. This only works for the acronym element in IE5+. This works for both the abbr and acronym element in Netscape 6.2.


tryit_viewa364.html

First name: [TEditFormControlObj]

Last name: [TEditFormControlObj]


tryit_viewa3c7.html


tryit_viewa419.html

angry A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text.

angry A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text.


tryit_viewaa56.html


tryit_viewafb8.html

This text contains subscript

This text contains superscript


tryit_viewb501.html

Health information:

Height [TEditFormControlObj] Weight [TEditFormControlObj]

Note: If there is no border around the form, your browser does not support fieldset.


tryit_viewb8ae.html

A background color:

First | Row
Second | Row

A background image:

First | Row
Second | Row


tryit_viewb8e5.html

This is

preformatted text.

It preserves      both spaces

and line breaks.

The pre tag is good for displaying computer code:

for i = 1 to 10

   print i

next i


tryit_viewbe72.html

Computer code

Keyboard input

Teletype text

Sample text

Computer variable

Note: These tags are often used to display computer/programming code.


tryit_viewbef4.html

THIS IS A LINK!


tryit_viewc12f.html

If you see no frames around the tables in these examples, your browser does not support the frame attribute.

With frame="border":

First | Row
Second | Row

With frame="box":

First | Row
Second | Row

With frame="void":

First | Row
Second | Row

With frame="above":

First | Row
Second | Row

With frame="below":

First | Row
Second | Row

With frame="hsides":

First | Row
Second | Row

With frame="vsides":

First | Row
Second | Row

With frame="lhs":

First | Row
Second | Row

With frame="rhs":

First | Row
Second | Row


tryit_viewc155.html

You can also use an image as a link: angry


tryit_viewc24f.html

Some text | Some text
 | Some text

As you can see, one of the cells has no border. That is because it is empty. Try to insert a space in the cell. Still it has no border.

The trick is to insert a no-breaking space in the cell.

No-breaking space is a character entity. If you don't know what a character entity is, read the chapter about it.

The no-breaking space entity starts with an ampersand ("&"), then the letters "nbsp", and ends with a semicolon (";")


tryit_viewc597.html

This is a paragraph.

This is another paragraph.


tryit_viewc7cf.html

Cell backgrounds:

First | Row
Second | Row


tryit_viewc9ff.html

Cell that spans two columns:

Name | Telephone
Bill Gates | 555 77 854 | 555 77 855

Cell that spans two rows:

First Name: | Bill Gates
Telephone: | 555 77 854
 | 555 77 855


tryit_viewcbb3.html

Some older browsers don't support iframes. If they don't, the iframe will not be visible.


tryit_viewcc05.html

This text is bold

This text is strong

This text is big

This text is emphasized

This text is italic

This text is small

This text is teletype

This text contains subscript

This text contains superscript


tryit_viewcc0f.html

[TComboFormControlObj]


tryit_viewcc4b.html

The meta attributes of this document identify the author and the editor software.


tryit_viewcd31.html

Username: [TEditFormControlObj]

Password: [TEditFormControlObj]

Note:The browser displays asterisks or bullets instead of characters in a password field.


tryit_viewcfd3.html

Click on the sun or on one of the planets to watch it closer:

Note: The "usemap" attribute in the img element refers to the "id" or "name" (browser dependant) attribute in the map element, therefore we have added both the "id" and "name" attributes to the map element.


tryit_viewcff8.html

Type your first name: [TEditFormControlObj]

Type your last name: [TEditFormControlObj]

If you click the "Submit" button, you will send your input to a new page called "form_action.asp".


tryit_viewd19b.html

Last Name: [TEditFormControlObj]


tryit_viewd432.html

A nested List:

· Coffee
· Tea
o Black tea
o Green tea
▪ China
▪ Africa
· Milk


tryit_viewdef7.html

Look: A background image!

Both gif and jpg files can be used as background images.

If the image is smaller than the page, the image will repeat itself.


tryit_viewea00.html

This is a mail link: Send Mail

Note: Spaces between words should be replaced by %20 to ensure that the browser will display your text properly.


tryit_viewea63.html

I am formatted with a linked style sheet

Me too!


tryit_viewec91.html

Without cellspacing:

First | Row
Second | Row

With cellspacing:

First | Row
Second | Row


tryit_viewf35f.html

Table headers:

Name | Telephone | Telephone
Bill Gates | 555 77 854 | 555 77 855

Vertical headers:

First Name: | Bill Gates
Telephone: | 555 77 854
Telephone: | 555 77 855


tryit_viewf456.html


tryit_viewf805.html

Look: Colored Background!


tryit_viewf9c9.html

This is a paragraph.

This is a paragraph.

This is a paragraph.


tryit_viewfa85.html

No borders:

100 | 200
300 | 400

And this table has no borders:

100 | 200
300 | 400


tryit_viewfc5a.html

W3Schools - This link loads in a new window because the "target" attribute is set to "_blank".

W3Schools - This link does not have a "target" attribute, but it still loads in a new window. This is because the "target" attribute of the <base> tag is set to "_blank".


tryit_viewfd06.html

This table has a caption:

My Caption

100 | 200 | 300
400 | 500 | 600


tryit_viewff6c.html

An image as a hyperlink: angry


W3Schools Color Test. Background=#000000

W3Schools Color Test.

Background #000000, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#000080

W3Schools Color Test.

Background #000080, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#00008B

W3Schools Color Test.

Background #00008B, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#0000CD

W3Schools Color Test.

Background #0000CD, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#0000FF

W3Schools Color Test.

Background #0000FF, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#006400

W3Schools Color Test.

Background #006400, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#008000

W3Schools Color Test.

Background #008000, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#008080

W3Schools Color Test.

Background #008080, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#008B8B

W3Schools Color Test.

Background #008B8B, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#00BFFF

W3Schools Color Test.

Background #00BFFF, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#00CED1

W3Schools Color Test.

Background #00CED1, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#00FA9A

W3Schools Color Test.

Background #00FA9A, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#00FF00

W3Schools Color Test.

Background #00FF00, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#00FF7F

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background #00FF7F, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#00FFFF

W3Schools Color Test.

Background #00FFFF, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#191970

W3Schools Color Test.

Background #191970, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#1E90FF

W3Schools Color Test.

Background #1E90FF, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#20B2AA

W3Schools Color Test.

Background #20B2AA, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#228B22

W3Schools Color Test.

Background #228B22, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#2E8B57

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background #2E8B57, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#2F4F4F

W3Schools Color Test.

Background #2F4F4F, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#32CD32

W3Schools Color Test.

Background #32CD32, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#3CB371

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background #3CB371, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#40E0D0

W3Schools Color Test.

Background #40E0D0, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#4169E1

W3Schools Color Test.

Background #4169E1, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#4682B4

W3Schools Color Test.

Background #4682B4, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#483D8B

W3Schools Color Test.

Background #483D8B, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#48D1CC

W3Schools Color Test.

Background #48D1CC, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#4B0082

W3Schools Color Test.

Background #4B0082, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#556B2F

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background #556B2F, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#5F9EA0

W3Schools Color Test.

Background #5F9EA0, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#6495ED

W3Schools Color Test.

Background #6495ED, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#66CDAA

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background #66CDAA, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#696969

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background #696969, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#6A5ACD

W3Schools Color Test.

Background #6A5ACD, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#6B8E23

W3Schools Color Test.

Background #6B8E23, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#708090

W3Schools Color Test.

Background #708090, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#778899

W3Schools Color Test.

Background #778899, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#7B68EE

W3Schools Color Test.

Background #7B68EE, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#7CFC00

W3Schools Color Test.

Background #7CFC00, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#7FFF00

W3Schools Color Test.

Background #7FFF00, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#7FFFD4

W3Schools Color Test.

Background #7FFFD4, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#800000

W3Schools Color Test.

Background #800000, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#800080

W3Schools Color Test.

Background #800080, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#808000

W3Schools Color Test.

Background #808000, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#808080

W3Schools Color Test.

Background #808080, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#87CEEB

W3Schools Color Test.

Background #87CEEB, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#87CEFA

W3Schools Color Test.

Background #87CEFA, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#8A2BE2

W3Schools Color Test.

Background #8A2BE2, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#8B0000

W3Schools Color Test.

Background #8B0000, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#8B008B

W3Schools Color Test.

Background #8B008B, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#8B4513

W3Schools Color Test.

Background #8B4513, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#8FBC8F

W3Schools Color Test.

Background #8FBC8F, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#90EE90

W3Schools Color Test.

Background #90EE90, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#9370D8

W3Schools Color Test.

Background #9370D8, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#9400D3

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background #9400D3, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#98FB98

W3Schools Color Test.

Background #98FB98, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#9932CC

W3Schools Color Test.

Background #9932CC, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#9ACD32

W3Schools Color Test.

Background #9ACD32, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#A0522D

W3Schools Color Test.

Background #A0522D, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#A52A2A

W3Schools Color Test.

Background #A52A2A, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#A9A9A9

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background #A9A9A9, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#ADD8E6

W3Schools Color Test.

Background #ADD8E6, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#ADFF2F

W3Schools Color Test.

Background #ADFF2F, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#AFEEEE

W3Schools Color Test.

Background #AFEEEE, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#B0C4DE

W3Schools Color Test.

Background #B0C4DE, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#B0E0E6

W3Schools Color Test.

Background #B0E0E6, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#B22222

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background #B22222, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#B8860B

W3Schools Color Test.

Background #B8860B, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#BA55D3

W3Schools Color Test.

Background #BA55D3, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#BC8F8F

W3Schools Color Test.

Background #BC8F8F, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#BDB76B

W3Schools Color Test.

Background #BDB76B, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#C0C0C0

W3Schools Color Test.

Background #C0C0C0, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#C71585

W3Schools Color Test.

Background #C71585, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#CD5C5C

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background #CD5C5C, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#CD853F

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background #CD853F, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#D2691E

W3Schools Color Test.

Background #D2691E, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#D2B48C

W3Schools Color Test.

Background #D2B48C, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#D3D3D3

W3Schools Color Test.

Background #D3D3D3, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#D87093

W3Schools Color Test.

Background #D87093, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#D8BFD8

W3Schools Color Test.

Background #D8BFD8, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#DA70D6

W3Schools Color Test.

Background #DA70D6, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#DAA520

W3Schools Color Test.

Background #DAA520, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#DC143C

W3Schools Color Test.

Background #DC143C, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#DCDCDC

W3Schools Color Test.

Background #DCDCDC, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#DDA0DD

W3Schools Color Test.

Background #DDA0DD, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#DEB887

W3Schools Color Test.

Background #DEB887, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#E0FFFF

W3Schools Color Test.

Background #E0FFFF, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#E6E6FA

W3Schools Color Test.

Background #E6E6FA, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#E9967A

W3Schools Color Test.

Background #E9967A, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#EE82EE

W3Schools Color Test.

Background #EE82EE, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#EEE8AA

W3Schools Color Test.

Background #EEE8AA, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#F08080

W3Schools Color Test.

Background #F08080, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#F0E68C

W3Schools Color Test.

Background #F0E68C, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#F0F8FF

W3Schools Color Test.

Background #F0F8FF, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#F0FFF0

W3Schools Color Test.

Background #F0FFF0, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#F0FFFF

W3Schools Color Test.

Background #F0FFFF, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#F4A460

W3Schools Color Test.

Background #F4A460, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#F5DEB3

W3Schools Color Test.

Background #F5DEB3, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#F5F5DC

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background #F5F5DC, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#F5F5F5

W3Schools Color Test.

Background #F5F5F5, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#F5FFFA

W3Schools Color Test.

Background #F5FFFA, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#F8F8FF

W3Schools Color Test.

Background #F8F8FF, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FA8072

W3Schools Color Test.

Background #FA8072, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FAEBD7

W3Schools Color Test.

Background #FAEBD7, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FAF0E6

W3Schools Color Test.

Background #FAF0E6, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FAFAD2

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background #FAFAD2, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FDF5E6

W3Schools Color Test.

Background #FDF5E6, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FF0000

W3Schools Color Test.

Background #FF0000, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FF00FF

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background #FF00FF, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FF1493

W3Schools Color Test.

Background #FF1493, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FF4500

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background #FF4500, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FF6347

W3Schools Color Test.

Background #FF6347, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FF69B4

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background #FF69B4, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FF7F50

W3Schools Color Test.

Background #FF7F50, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FF8C00

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background #FF8C00, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFA07A

W3Schools Color Test.

Background #FFA07A, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFA500

W3Schools Color Test.

Background #FFA500, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFB6C1

W3Schools Color Test.

Background #FFB6C1, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFC0CB

W3Schools Color Test.

Background #FFC0CB, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFD700

W3Schools Color Test.

Background #FFD700, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFDAB9

W3Schools Color Test.

Background #FFDAB9, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFDEAD

W3Schools Color Test.

Background #FFDEAD, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFE4B5

W3Schools Color Test.

Background #FFE4B5, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFE4C4

W3Schools Color Test.

Background #FFE4C4, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFE4E1

W3Schools Color Test.

Background #FFE4E1, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFEBCD

W3Schools Color Test.

Background #FFEBCD, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFEFD5

W3Schools Color Test.

Background #FFEFD5, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFF0F5

W3Schools Color Test.

Background #FFF0F5, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFF5EE

W3Schools Color Test.

Background #FFF5EE, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFF8DC

W3Schools Color Test.

Background #FFF8DC, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFFACD

W3Schools Color Test.

Background #FFFACD, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFFAF0

W3Schools Color Test.

Background #FFFAF0, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFFAFA

W3Schools Color Test.

Background #FFFAFA, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFFF00

W3Schools Color Test.

Background #FFFF00, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFFFE0

W3Schools Color Test.

Background #FFFFE0, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFFFF0

W3Schools Color Test.

Background #FFFFF0, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=#FFFFFF

W3Schools Color Test.

Background #FFFFFF, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=AliceBlue

W3Schools Color Test.

Background AliceBlue, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=AntiqueWhite

W3Schools Color Test.

Background AntiqueWhite, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Aqua

W3Schools Color Test.

Background Aqua, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Aquamarine

W3Schools Color Test.

Background Aquamarine, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Azure

W3Schools Color Test.

Background Azure, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Beige

W3Schools Color Test.

Background Beige, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Bisque

W3Schools Color Test.

Background Bisque, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Black

W3Schools Color Test.

Background Black, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=BlanchedAlmond

W3Schools Color Test.

Background BlanchedAlmond, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Blue

W3Schools Color Test.

Background Blue, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=BlueViolet

W3Schools Color Test.

Background BlueViolet, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Brown

W3Schools Color Test.

Background Brown, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=BurlyWood

W3Schools Color Test.

Background BurlyWood, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=CadetBlue

W3Schools Color Test.

Background CadetBlue, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Chartreuse

W3Schools Color Test.

Background Chartreuse, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Chocolate

W3Schools Color Test.

Background Chocolate, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Coral

W3Schools Color Test.

Background Coral, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=CornflowerBlue

W3Schools Color Test.

Background CornflowerBlue, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Cornsilk

W3Schools Color Test.

Background Cornsilk, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Crimson

W3Schools Color Test.

Background Crimson, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Cyan

W3Schools Color Test.

Background Cyan, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DarkBlue

W3Schools Color Test.

Background DarkBlue, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DarkCyan

W3Schools Color Test.

Background DarkCyan, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DarkGoldenRod

W3Schools Color Test.

Background DarkGoldenRod, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DarkGray

W3Schools Color Test.

Background DarkGray, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DarkGreen

W3Schools Color Test.

Background DarkGreen, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DarkGrey

W3Schools Color Test.

Background DarkGrey, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DarkKhaki

W3Schools Color Test.

Background DarkKhaki, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DarkMagenta

W3Schools Color Test.

Background DarkMagenta, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DarkOliveGreen

W3Schools Color Test.

Background DarkOliveGreen, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Darkorange

W3Schools Color Test.

Background Darkorange, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DarkOrchid

W3Schools Color Test.

Background DarkOrchid, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DarkRed

W3Schools Color Test.

Background DarkRed, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DarkSalmon

W3Schools Color Test.

Background DarkSalmon, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DarkSeaGreen

W3Schools Color Test.

Background DarkSeaGreen, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DarkSlateBlue

W3Schools Color Test.

Background DarkSlateBlue, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DarkSlateGray

W3Schools Color Test.

Background DarkSlateGray, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DarkSlateGrey

W3Schools Color Test.

Background DarkSlateGrey, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DarkTurquoise

W3Schools Color Test.

Background DarkTurquoise, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DarkViolet

W3Schools Color Test.

Background DarkViolet, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DeepPink

W3Schools Color Test.

Background DeepPink, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DeepSkyBlue

W3Schools Color Test.

Background DeepSkyBlue, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DimGray

W3Schools Color Test.

Background DimGray, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DimGrey

W3Schools Color Test.

Background DimGrey, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=DodgerBlue

W3Schools Color Test.

Background DodgerBlue, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=FireBrick

W3Schools Color Test.

Background FireBrick, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=FloralWhite

W3Schools Color Test.

Background FloralWhite, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=ForestGreen

W3Schools Color Test.

Background ForestGreen, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Fuchsia

W3Schools Color Test.

Background Fuchsia, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Gainsboro

W3Schools Color Test.

Background Gainsboro, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=GhostWhite

W3Schools Color Test.

Background GhostWhite, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Gold

W3Schools Color Test.

Background Gold, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=GoldenRod

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background GoldenRod, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Gray

W3Schools Color Test.

Background Gray, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Green

W3Schools Color Test.

Background Green, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=GreenYellow

W3Schools Color Test.

Background GreenYellow, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Grey

W3Schools Color Test.

Background Grey, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=HoneyDew

W3Schools Color Test.

Background HoneyDew, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=HotPink

W3Schools Color Test.

Background HotPink, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=IndianRed

W3Schools Color Test.

Background IndianRed, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Indigo

W3Schools Color Test.

Background Indigo, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Ivory

W3Schools Color Test.

Background Ivory, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Khaki

W3Schools Color Test.

Background Khaki, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Lavender

W3Schools Color Test.

Background Lavender, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=LavenderBlush

W3Schools Color Test.

Background LavenderBlush, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=LawnGreen

W3Schools Color Test.

Background LawnGreen, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=LemonChiffon

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background LemonChiffon, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=LightBlue

W3Schools Color Test.

Background LightBlue, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=LightCoral

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background LightCoral, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=LightCyan

W3Schools Color Test.

Background LightCyan, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=LightGoldenRodYellow

W3Schools Color Test.

Background LightGoldenRodYellow, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=LightGray

W3Schools Color Test.

Background LightGray, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=LightGreen

W3Schools Color Test.

Background LightGreen, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=LightGrey

W3Schools Color Test.

Background LightGrey, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=LightPink

W3Schools Color Test.

Background LightPink, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=LightSalmon

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background LightSalmon, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=LightSeaGreen

W3Schools Color Test.

Background LightSeaGreen, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=LightSkyBlue

W3Schools Color Test.

Background LightSkyBlue, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=LightSlateGray

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background LightSlateGray, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=LightSlateGrey

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background LightSlateGrey, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=LightSteelBlue

W3Schools Color Test.

Background LightSteelBlue, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=LightYellow

W3Schools Color Test.

Background LightYellow, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Lime

W3Schools Color Test.

Background Lime, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=LimeGreen

W3Schools Color Test.

Background LimeGreen, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Linen

W3Schools Color Test.

Background Linen, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Magenta

W3Schools Color Test.

Background Magenta, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Maroon

W3Schools Color Test.

Background Maroon, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=MediumAquaMarine

W3Schools Color Test.

Background MediumAquaMarine, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=MediumBlue

W3Schools Color Test.

Background MediumBlue, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=MediumOrchid

W3Schools Color Test.

Background MediumOrchid, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=MediumPurple

W3Schools Color Test.

Background MediumPurple, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=MediumSeaGreen

W3Schools Color Test.

Background MediumSeaGreen, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=MediumSlateBlue

W3Schools Color Test.

Background MediumSlateBlue, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=MediumSpringGreen

W3Schools Color Test.

Background MediumSpringGreen, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=MediumTurquoise

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background MediumTurquoise, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=MediumVioletRed

W3Schools Color Test.

Background MediumVioletRed, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=MidnightBlue

W3Schools Color Test.

Background MidnightBlue, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=MintCream

W3Schools Color Test.

Background MintCream, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=MistyRose

W3Schools Color Test.

Background MistyRose, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Moccasin

W3Schools Color Test.

Background Moccasin, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=NavajoWhite

W3Schools Color Test.

Background NavajoWhite, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Navy

W3Schools Color Test.

Background Navy, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=OldLace

W3Schools Color Test.

Background OldLace, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Olive

W3Schools Color Test.

Background Olive, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=OliveDrab

W3Schools Color Test.

Background OliveDrab, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Orange

W3Schools Color Test.

Background Orange, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=OrangeRed

W3Schools Color Test.

Background OrangeRed, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Orchid

W3Schools Color Test.

Background Orchid, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=PaleGoldenRod

W3Schools Color Test.

Background PaleGoldenRod, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=PaleGreen

W3Schools Color Test.

Background PaleGreen, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=PaleTurquoise

W3Schools Color Test.

Background PaleTurquoise, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=PaleVioletRed

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background PaleVioletRed, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=PapayaWhip

W3Schools Color Test.

Background PapayaWhip, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=PeachPuff

W3Schools Color Test.

Background PeachPuff, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Peru

W3Schools Color Test.

Background Peru, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Pink

W3Schools Color Test.

Background Pink, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Plum

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background Plum, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=PowderBlue

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background PowderBlue, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Purple

W3Schools Color Test.

Background Purple, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Red

W3Schools Color Test.

Background Red, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=RosyBrown

W3Schools Color Test.

Background RosyBrown, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=RoyalBlue

W3Schools Color Test.

Background RoyalBlue, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=SaddleBrown

W3Schools Color Test.

Background SaddleBrown, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Salmon

W3Schools Color Test.

Background Salmon, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=SandyBrown

W3Schools Color Test.

Background SandyBrown, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=SeaGreen

W3Schools Color Test.

Background SeaGreen, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=SeaShell

W3Schools Color Test.

Background SeaShell, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Sienna

W3Schools Color Test.

Background Sienna, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Silver

W3Schools Color Test.

Background Silver, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=SkyBlue

W3Schools Color Test.

Background SkyBlue, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=SlateBlue

W3Schools Color Test.

Background SlateBlue, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=SlateGray

W3Schools Color Test.

Background SlateGray, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=SlateGrey

W3Schools Color Test.

Background SlateGrey, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Snow

W3Schools Color Test.

Background Snow, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=SpringGreen

W3Schools Color Test.

Background SpringGreen, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=SteelBlue

W3Schools Color Test.

Background SteelBlue, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Tan

W3Schools Color Test.

Background Tan, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Teal

W3Schools Color Test.

Background Teal, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Thistle

W3Schools Color Test.

Background Thistle, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Tomato

W3Schools Color Test.

Background Tomato, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Turquoise

W3Schools Color Test.

Background Turquoise, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Violet

Your browser does not support inline frames or is currently configured not to display inline frames.

W3Schools Color Test.

Background Violet, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Wheat

W3Schools Color Test.

Background Wheat, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=White

W3Schools Color Test.

Background White, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=WhiteSmoke

W3Schools Color Test.

Background WhiteSmoke, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=Yellow

W3Schools Color Test.

Background Yellow, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


W3Schools Color Test. Background=YellowGreen

W3Schools Color Test.

Background YellowGreen, shown with different text colors.

Hex | RGB | Name
F0F8FF | 240,248,255 | AliceBlue
FAEBD7 | 250,235,215 | AntiqueWhite
00FFFF | 0,255,255 | Aqua
7FFFD4 | 127,255,212 | Aquamarine
F0FFFF | 240,255,255 | Azure
F5F5DC | 245,245,220 | Beige
FFE4C4 | 255,228,196 | Bisque
000000 | 0,0,0 | Black
FFEBCD | 255,235,205 | BlanchedAlmond
0000FF | 0,0,255 | Blue
8A2BE2 | 138,43,226 | BlueViolet
A52A2A | 165,42,42 | Brown
DEB887 | 222,184,135 | BurlyWood
5F9EA0 | 95,158,160 | CadetBlue
7FFF00 | 127,255,0 | Chartreuse
D2691E | 210,105,30 | Chocolate
FF7F50 | 255,127,80 | Coral
6495ED | 100,149,237 | CornflowerBlue
FFF8DC | 255,248,220 | Cornsilk
DC143C | 237,164,61 | Crimson
00FFFF | 0,255,255 | Cyan
00008B | 0,0,139 | DarkBlue
008B8B | 0,139,139 | DarkCyan
B8860B | 184,134,11 | DarkGoldenRod
A9A9A9 | 169,169,169 | DarkGray
A9A9A9 | 169,169,169 | DarkGrey
006400 | 0,100,0 | DarkGreen
BDB76B | 189,183,107 | DarkKhaki
8B008B | 139,0,139 | DarkMagenta
556B2F | 85,107,47 | DarkOliveGreen
FF8C00 | 255,140,0 | Darkorange
9932CC | 153,50,204 | DarkOrchid
8B0000 | 139,0,0 | DarkRed
E9967A | 233,150,122 | DarkSalmon
8FBC8F | 143,188,143 | DarkSeaGreen
483D8B | 72,61,139 | DarkSlateBlue
2F4F4F | 47,79,79 | DarkSlateGray
2F4F4F | 47,79,79 | DarkSlateGrey
00CED1 | 0,206,209 | DarkTurquoise
9400D3 | 148,0,211 | DarkViolet
FF1493 | 255,20,147 | DeepPink
00BFFF | 0,191,255 | DeepSkyBlue
696969 | 105,105,105 | DimGray
696969 | 105,105,105 | DimGrey
1E90FF | 30,144,255 | DodgerBlue
B22222 | 178,34,34 | FireBrick
FFFAF0 | 255,250,240 | FloralWhite
228B22 | 34,139,34 | ForestGreen
FF00FF | 255,0,255 | Fuchsia
DCDCDC | 220,220,220 | Gainsboro
F8F8FF | 248,248,255 | GhostWhite
FFD700 | 255,215,0 | Gold
DAA520 | 218,165,32 | GoldenRod
808080 | 128,128,128 | Gray
808080 | 128,128,128 | Grey
008000 | 0,128,0 | Green
ADFF2F | 173,255,47 | GreenYellow
F0FFF0 | 240,255,240 | HoneyDew
FF69B4 | 255,105,180 | HotPink
CD5C5C | 205,92,92 | IndianRed
4B0082 | 75,0,130 | Indigo
FFFFF0 | 255,255,240 | Ivory
F0E68C | 240,230,140 | Khaki
E6E6FA | 230,230,250 | Lavender
FFF0F5 | 255,240,245 | LavenderBlush
7CFC00 | 124,252,0 | LawnGreen
FFFACD | 255,250,205 | LemonChiffon
ADD8E6 | 173,216,230 | LightBlue
F08080 | 240,128,128 | LightCoral
E0FFFF | 224,255,255 | LightCyan
FAFAD2 | 250,250,210 | LightGoldenRodYellow
D3D3D3 | 211,211,211 | LightGray
D3D3D3 | 211,211,211 | LightGrey
90EE90 | 144,238,144 | LightGreen
FFB6C1 | 255,182,193 | LightPink
FFA07A | 255,160,122 | LightSalmon
20B2AA | 32,178,170 | LightSeaGreen
87CEFA | 135,206,250 | LightSkyBlue
778899 | 119,136,153 | LightSlateGray
778899 | 119,136,153 | LightSlateGrey
B0C4DE | 176,196,222 | LightSteelBlue
FFFFE0 | 255,255,224 | LightYellow
00FF00 | 0,255,0 | Lime
32CD32 | 50,205,50 | LimeGreen
FAF0E6 | 250,240,230 | Linen
FF00FF | 255,0,255 | Magenta
800000 | 128,0,0 | Maroon
66CDAA | 102,205,170 | MediumAquaMarine
0000CD | 0,0,205 | MediumBlue
BA55D3 | 186,85,211 | MediumOrchid
9370D8 | 147,112,219 | MediumPurple
3CB371 | 60,179,113 | MediumSeaGreen
7B68EE | 123,104,238 | MediumSlateBlue
00FA9A | 0,250,154 | MediumSpringGreen
48D1CC | 72,209,204 | MediumTurquoise
C71585 | 199,21,133 | MediumVioletRed
191970 | 25,25,112 | MidnightBlue
F5FFFA | 245,255,250 | MintCream
FFE4E1 | 255,228,225 | MistyRose
FFE4B5 | 255,228,181 | Moccasin
FFDEAD | 255,222,173 | NavajoWhite
000080 | 0,0,128 | Navy
FDF5E6 | 253,245,230 | OldLace
808000 | 128,128,0 | Olive
6B8E23 | 107,142,35 | OliveDrab
FFA500 | 255,165,0 | Orange
FF4500 | 255,69,0 | OrangeRed
DA70D6 | 218,112,214 | Orchid
EEE8AA | 238,232,170 | PaleGoldenRod
98FB98 | 152,251,152 | PaleGreen
AFEEEE | 175,238,238 | PaleTurquoise
D87093 | 219,112,147 | PaleVioletRed
FFEFD5 | 255,239,213 | PapayaWhip
FFDAB9 | 255,218,185 | PeachPuff
CD853F | 205,133,63 | Peru
FFC0CB | 255,192,203 | Pink
DDA0DD | 221,160,221 | Plum
B0E0E6 | 176,224,230 | PowderBlue
800080 | 128,0,128 | Purple
FF0000 | 255,0,0 | Red
BC8F8F | 188,143,143 | RosyBrown
4169E1 | 65,105,225 | RoyalBlue
8B4513 | 139,69,19 | SaddleBrown
FA8072 | 250,128,114 | Salmon
F4A460 | 244,164,96 | SandyBrown
2E8B57 | 46,139,87 | SeaGreen
FFF5EE | 255,245,238 | SeaShell
A0522D | 160,82,45 | Sienna
C0C0C0 | 192,192,192 | Silver
87CEEB | 135,206,235 | SkyBlue
6A5ACD | 106,90,205 | SlateBlue
708090 | 112,128,144 | SlateGray
708090 | 112,128,144 | SlateGrey
FFFAFA | 255,250,250 | Snow
00FF7F | 0,255,127 | SpringGreen
4682B4 | 70,130,180 | SteelBlue
D2B48C | 210,180,140 | Tan
008080 | 0,128,128 | Teal
D8BFD8 | 216,191,216 | Thistle
FF6347 | 255,99,71 | Tomato
40E0D0 | 64,224,208 | Turquoise
EE82EE | 238,130,238 | Violet
F5DEB3 | 245,222,179 | Wheat
FFFFFF | 255,255,255 | White
F5F5F5 | 245,245,245 | WhiteSmoke
FFFF00 | 255,255,0 | Yellow
9ACD32 | 154,205,50 | YellowGreen


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 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: 121.247.163.105

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 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.


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 Tutorial

TCP/IP Tutorial

webclip

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 "121.247.163.105" is a part of the standard TCP/IP protocol. (And so is your domain name "www.someonesplace.com")


VBScript Tutorial

VBScript Tutorial

vb

VBScript is a Microsoft scripting language.

In our VBScript tutorial you will learn how to write VBScript, and how to insert these scripts into your HTML files to make your web pages more dynamic and interactive.

Start learning VBScript!

VBScript Examples

Learn by examples! With our editor, you can edit the source code, and click on a test button to view the result.

VBScript Reference

At W3Schools you will find a complete VBScript reference.

VBScript Reference


VBScript Abs Function

The Abs function returns the absolute value of a specified number.

Note: If the number parameter contains Null, Null will be returned

Note: If the number parameter is an uninitialized variable, zero will be returned.

Syntax

Abs(number)

Parameter | Description
number | Required. A numeric expression

Example 1

document.write(Abs(1) & "<br />")

document.write(Abs(-1))

Output:

1

1

Example 2

document.write(Abs(48.4) & "<br />")

document.write(Abs(-48.4))

Output:

48.4

48.4


VBScript Array Function

The Array function returns a variant containing an array.

Note: The first element in the array is zero.

Syntax

Array(arglist)

Parameter | Description
arglist | Required. A list (separated by commas) of values that is the elements in the array

Example 1

dim a

a=Array(5,10,15,20)

document.write(a(3))

Output:

20

Example 2

dim a

a=Array(5,10,15,20)

document.write(a(0))

Output:

5


VBScript Asc Function

The Asc function converts the first letter in a string to ANSI code, and returns the result.

Syntax

Asc(string)

Parameter | Description
string | Required. A string expression. Cannot be an empty string!

Example 1

document.write(Asc("A") & "<br />")

document.write(Asc("F"))

Output:

65

70

Example 2

document.write(Asc("a") & "<br />")

document.write(Asc("f"))

Output:

97

102

Example 3

document.write(Asc("W") & "<br />")

document.write(Asc("W3Schools.com"))

Output:

87

87

Example 4

document.write(Asc("2") & "<br />")

document.write(Asc("#"))

Output:

50

35


VBScript Atn Function

The Atn function returns the arctangent of a specified number.

Syntax

Atn(number)

Parameter | Description
number | Required. A numeric expression

Example 1

document.write(Atn(89))

Output:

1.55956084453693

Example 2

document.write(Atn(8.9))

Output:

1.45890606062322

Example 3

'calculate the value of pi

dim pi

pi=4*Atn(1)

document.write(pi)

Output:

3.14159265358979


VBScript CBool Function

The CBool function converts an expression to type Boolean.

Syntax

CBool(expression)

Parameter | Description
expression | Required. Any valid expression. A nonzero value returns True, zero returns False. A run-time error occurs if the expression can not be interpreted as a numeric value

Example 1

dim a,b

a=5

b=10

document.write(CBool(a) & "<br />")

document.write(CBool(b))

Output:

True

True


VBScript CByte Function

The CByte function converts an expression to type Byte.

Syntax

CByte(expression)

Parameter | Description
expression | Required. Any valid expression

Example 1

dim a

a=134.345

document.write(CByte(a))

Output:

134

Example 2

dim a

a=14.345455

document.write(CByte(a))

Output:

14


VBScript CCur Function

The CCur function converts an expression to type Currency.

Syntax

CCur(expression)

Parameter | Description
expression | Required. Any valid expression

Example 1

dim a

a=134.345

document.write(CCur(a))

Output:

134.345

Example 2

dim a

a=1411111111.345455

'NB! This function rounds off to 4 decimal places

document.write(CCur(a))

Output:

1411111111.3455


VBScript CDate Function

The CDate function converts a valid date and time expression to type Date, and returns the result.

Tip: Use the IsDate function to determine if date can be converted to a date or time.

Note: The IsDate function uses local setting to determine if a string can be converted to a date ("January" is not a month in all languages.)

Syntax

CDate(date)

Parameter | Description
date | Required. Any valid date expression (like Date() or Now())

Example 1

d="April 22, 2001"

if IsDate(d) then

document.write(CDate(d))

end if

Output:

2/22/01

Example 2

d=#2/22/01#

if IsDate(d) then

document.write(CDate(d))

end if

Output:

2/22/01

Example 3

d="3:18:40 AM"

if IsDate(d) then

document.write(CDate(d))

end if

Output:

3:18:40 AM

Try-It-Yourself Demos

Convert a string to a date object

How to use CDate to convert a string to a date.

Convert numbers to a date object

How to use CDate to convert a numbers with separators to a date.

Convert a string to a time object

How to use CDate to convert a numbers a time object.


VBScript CDbl Function

The CDbl function converts an expression to type Double.

Syntax

CDbl(expression)

Parameter | Description
expression | Required. Any valid expression

Example 1

dim a

a=134.345

document.write(CDbl(a))

Output:

134.345

Example 2

dim a

a=14111111113353355.345455

document.write(CDbl(a))

Output:

1.41111111133534E+16


VBScript Chr Function

The Chr function converts the specified ANSI character code to a character.

Note: The numbers from 0 to 31 represents nonprintable ASCII codes, i.e. Chr(10) will return a linefeed character.

Syntax

Chr(charcode)

Parameter | Description
charcode | Required. A number that identifies a character

Example 1

document.write(Chr(65) & "<br />")

document.write(Chr(97))

Output:

A

a

Example 2

document.write(Chr(37) & "<br />")

document.write(Chr(45))

Output:

%

-

Example 3

document.write(Chr(50) & "<br />")

document.write(Chr(35))

Output:

2

#


VBScript CInt Function

The CInt function converts an expression to type Integer.

Note: The value must be a number between -32768 and 32767.

Syntax

CInt(expression)

Parameter | Description
expression | Required. Any valid expression

Example 1

dim a

a=134.345

document.write(CInt(a))

Output:

134

Example 2

dim a

a=-30000.24

document.write(CInt(a))

Output:

-30000


VBScript CLng Function

The CLng function converts an expression to type Long.

Note: The value must be a number between -2147483648 and 2147483647.

Syntax

CLng(expression)

Parameter | Description
expression | Required. Any valid expression

Example 1

dim a,b

a=23524.45

b=23525.55

document.write(CLng(a) & "<br />")

document.write(CLng(b))

Output:

23524

23526


VBScript Function

VBScript Cos Function

The Cos function returns the cosine of a specified number (angle).

Syntax

Cos(number)

Parameter | Description
number | Required. A numeric expression that expresses an angle in radians

Example 1

document.write(Cos(50.0))

Output:

0.964966028492113

Example 2

document.write(Cos(-50.0))

Output:

0.964966028492113


VBScript CSng Function

The CSng function converts an expression to type Single.

Syntax

CSng(expression)

Parameter | Description
expression | Required. Any valid expression

Example 1

dim a,b

a=23524.4522

b=23525.5533

document.write(CSng(a) & "<br />")

document.write(CSng(b))

Output:

23524.45

23525.55


VBScript CStr Function

The CStr function converts an expression to type String.

Syntax

CStr(expression)

Parameter

Description

expression

Required. Any valid expression

If expression is:

· Boolean - then the CStr function will return a string containing true or false.
· Date - then the CStr function will return a string that contains a date in the short-date format.
· Null - then a run-time error will occur.
· Empty - then the CStr function will return an empty string ("").
· Error - then the CStr function will return a string that contains the word "Error" followed by an error number.
· Other numeric - then the CStr function will return a string that contains the number.

Example 1

dim a

a=false

document.write(CStr(a))

Output:

false

Example 2

dim a

a=#01/01/01#

document.write(CStr(a))

Output:

1/1/2001


VBScript DateAdd Function

The DateAdd function returns a date to which a specified time interval has been added.

Syntax

DateAdd(interval,number,date)

Parameter

Description

interval

Required. The interval you want to add

Can take the following values:

· yyyy - Year
· q - Quarter
· m - Month
· y - Day of year
· d - Day
· w - Weekday
· ww - Week of year
· h - Hour
· n - Minute
· s - Second

number

Required. The number of interval you want to add. Can either be positive, for dates in the future, or negative, for dates in the past

date

Required. Variant or literal representing the date to which interval is added

Example 1

'Add one month to January 31, 2000

document.write(DateAdd("m",1,"31-Jan-00"))

Output:

2/29/2000

Example 2

'Add one month to January 31, 2001

document.write(DateAdd("m",1,"31-Jan-01"))

Output:

2/28/2001

Example 3

'Subtract one month from January 31, 2001

document.write(DateAdd("m",-1,"31-Jan-01"))

Output:

12/31/2000

Try-It-Yourself Demos

DateAdd

How to use the DateAdd Function add a one month to a date.

DateAdd

How to use the DateAdd Function subtract a one month to a date.


VBScript Date Function

The Date function returns the current system date.

Syntax

Date

Example 1

document.write("The current system date is: ")

document.write(Date)

Output:

The current system date is: 1/14/2002

Try-It-Yourself Demos

How to use the Date Function to display the current date.


VBScript DateDiff Function

The DateDiff function returns the number of intervals between two dates.

Syntax

DateDiff(interval,date1,date2[,firstdayofweek[,firstweekofyear]])

Parameter

Description

interval

Required. The interval you want to use to calculate the differences between date1 and date2

Can take the following values:

· yyyy - Year
· q - Quarter
· m - Month
· y - Day of year
· d - Day
· w - Weekday
· ww - Week of year
· h - Hour
· n - Minute
· s - Second

date1,date2

Required. Date expressions. Two dates you want to use in the calculation

firstdayofweek

Optional. Specifies the day of the week.

Can take the following values:

· 0 = vbUseSystemDayOfWeek - Use National Language Support (NLS) API setting
· 1 = vbSunday - Sunday (default)
· 2 = vbMonday - Monday
· 3 = vbTuesday - Tuesday
· 4 = vbWednesday - Wednesday
· 5 = vbThursday - Thursday
· 6 = vbFriday - Friday
· 7 = vbSaturday - Saturday

firstweekofyear

Optional. Specifies the first week of the year.

Can take the following values:

· 0 = vbUseSystem - Use National Language Support (NLS) API setting
· 1 = vbFirstJan1 - Start with the week in which January 1 occurs (default)
· 2 = vbFirstFourDays - Start with the week that has at least four days in the new year
· 3 = vbFirstFullWeek - Start with the first full week of the new year

Example 1

document.write(Date & "<br />")

document.write(DateDiff("m",Date,"12/31/2002") & "<br />")

document.write(DateDiff("d",Date,"12/31/2002") & "<br />")

document.write(DateDiff("n",Date,"12/31/2002"))

Output:

1/14/2002

11

351

505440

Example 2

document.write(Date & "<br />")

'Note that in the code below

'is date1>date2

document.write(DateDiff("d","12/31/2002",Date))

Output:

1/14/2002

-351

Example 3

'How many weeks (start on Monday),

'are left between the current date and 10/10/2002

document.write(Date & "<br />")

document.write(DateDiff("w",Date,"10/10/2002",vbMonday))

Output:

1/14/2002

38


VBScript DatePart Function

The DatePart function returns the specified part of a given date.

Syntax

DatePart(interval,date[,firstdayofweek[,firstweekofyear]])

Parameter

Description

interval

Required. The interval of time to return.

Can take the following values:

· yyyy - Year
· q - Quarter
· m - Month
· y - Day of year
· d - Day
· w - Weekday
· ww - Week of year
· h - Hour
· n - Minute
· s - Second

date

Required. Date expression to evaluate

firstdayofweek

Optional. Specifies the day of the week.

Can take the following values:

· 0 = vbUseSystemDayOfWeek - Use National Language Support (NLS) API setting
· 1 = vbSunday - Sunday (default)
· 2 = vbMonday - Monday
· 3 = vbTuesday - Tuesday
· 4 = vbWednesday - Wednesday
· 5 = vbThursday - Thursday
· 6 = vbFriday - Friday
· 7 = vbSaturday - Saturday

firstweekofyear

Optional. Specifies the first week of the year.

Can take the following values:

· 0 = vbUseSystem - Use National Language Support (NLS) API setting
· 1 = vbFirstJan1 - Start with the week in which January 1 occurs (default)
· 2 = vbFirstFourDays - Start with the week that has at least four days in the new year
· 3 = vbFirstFullWeek - Start with the first full week of the new year

Example 1

document.write(Date & "<br />")

document.write(DatePart("d",Date))

Output:

1/14/2002

14

Example 2

document.write(Date & "<br />")

document.write(DatePart("w",Date))

Output:

1/14/2002

2


VBScript DateSerial Function

VBScript The DateSerial Function

The DateSerial function returns a Variant of subtype Date for a specified year, month, and day.

Syntax

DateSerial(year,month,day)

Parameter | Description
year | Required. A number between 100 and 9999, or a numeric expression. Values between 0 and 99 are interpreted as the years 1900–1999. For all other year arguments, use a complete four-digit year
month | Required. Any numeric expression
day | Required. Any numeric expression

Example 1

document.write(DateSerial(1996,2,3) & "<br />")

document.write(DateSerial(1990-20,9-2,1-1))

Output:

2/3/1996

6/30/1970


VBScript DateValue Function

The DateValue function returns a type Date.

Note: If the year part of date is omitted this function will use the current year from the computer's system date.

Note: If the date parameter includes time information it will not be returned. However, if date includes invalid time information, a run-time error will occur.

Syntax

DateValue(date)

Parameter | Description
date | Required. A date from January 1, 100 through December 31, 9999 or any expression that can represent a date, a time, or both a date and time

Example 1

document.write(DateValue("31-Jan-02") & "<br />")

document.write(DateValue("31-Jan") & "<br />")

document.write(DateValue("31-Jan-02 2:39:49 AM"))

Output:

1/31/2002

1/31/2002

1/31/2002


VBScript Day Function

The Day function returns a number between 1 and 31 that represents the day of the month.

Syntax

Day(date)

Parameter | Description
date | Required. Any expression that can represent a date

Example 1

document.write(Date & "<br />")

document.write(Day(Date))

Output:

1/14/2002

14


VBScript Exp Function

The Exp function returns e raised to a power.

Note: The value of number cannot exceed 709.782712893.

Tip: Also look at the Log function.

Syntax

Exp(number)

Parameter | Description
number | Required. A valid numeric expression

Example 1

document.write(Exp(6.7))

Output:

812.405825167543

Example 2

document.write(Exp(-6.7))

Output:

1.23091190267348E-03


VBScript Filter Function

The Filter function returns a zero-based array that contains a subset of a string array based on a filter criteria.

Note: If no matches of the value parameter are found, the Filter function will return an empty array.

Note: If the parameter inputstrings is Null or is NOT a one-dimensional array, an error will occur.

Syntax

Filter(inputstrings,value[,include[,compare]])

Parameter

Description

inputstrings

Required. A one-dimensional array of strings to be searched

value

Required. The string to search for

include

Optional. A Boolean value that indicates whether to return the substrings that include or exclude value. True returns the subset of the array that contains value as a substring. False returns the subset of the array that does not contain value as a substring. Default is True.

compare

Optional. Specifies the string comparison to use.

Can have one of the following values:

· 0 = vbBinaryCompare - Perform a binary comparison
· 1 = vbTextCompare - Perform a textual comparison

Example 1

dim a(5),b

a(0)="Saturday"

a(1)="Sunday"

a(2)="Monday"

a(3)="Tuesday"

a(4)="Wednesday"

b=Filter(a,"n")

document.write(b(0) & "<br />")

document.write(b(1) & "<br />")

document.write(b(2))

Output:

Sunday

Monday

Wednesday

Example 2

dim a(5),b

a(0)="Saturday"

a(1)="Sunday"

a(2)="Monday"

a(3)="Tuesday"

a(4)="Wednesday"

b=Filter(a,"n",false)

document.write(b(0) & "<br />")

document.write(b(1) & "<br />")

document.write(b(2))

Output:

Saturday

Tuesday


VBScript Fix Function

The Fix function returns the integer part of a specified number.

Note: If the number parameter contains Null, Null will be returned.

Tip: Also look at the Int function.

Syntax

Fix(number)

Parameter | Description
number | Required. A valid numeric expression

Example 1

document.write(Fix(6.83227))

Output:

6

Example 2

document.write(Fix(6.23443))

Output:

6

Example 3

document.write(Fix(-6.13443))

Output:

-6

Example 4

document.write(Fix(-6.93443))

Output:

-6


VBScript FormatCurrency Function

The FormatCurrency function returns an expression formatted as a currency value using the currency symbol defined in the computer's control panel.

Syntax

FormatCurrency(Expression[,NumDigAfterDec[,

IncLeadingDig[,UseParForNegNum[,GroupDig]]]])

Parameter

Description

expression

Required. The expression to be formatted

NumDigAfterDec

Optional. Indicates how many places to the right of the decimal are displayed. Default is -1 (the computer's regional settings are used)

IncLeadingDig

Optional. Indicates whether or not a leading zero is displayed for fractional values:

· -2 = TristateUseDefault - Use the computer's regional settings
· -1 = TristateTrue - True
· 0 = TristateFalse - False

UseParForNegNum

Optional. Indicates whether or not to place negative values within parentheses:

· -2 = TristateUseDefault - Use the computer's regional settings
· -1 = TristateTrue - True
· 0 = TristateFalse - False

GroupDig

Optional. Indicates whether or not numbers are grouped using the group delimiter specified in the computer's regional settings:

· -2 = TristateUseDefault - Use the computer's regional settings
· -1 = TristateTrue - True
· 0 = TristateFalse - False

Example 1

document.write(FormatCurrency(20000))

Output:

$20,000.00

Example 2

document.write(FormatCurrency(20000.578,2))

Output:

$20,000.58

Example 3

document.write(FormatCurrency(20000.578,2,,,0))

Output:

$20000.58


VBScript FormatDateTime Function

The FormatDateTime function formats and returns a valid date or time expression.

Syntax

FormatDateTime(date,format)

Parameter | Description
date | Required. Any valid date expression (like Date() or Now())
format | Optional. A Format value that specifies the date/time format to use

Example 1

document.write("The current date is: ")

document.write(FormatDateTime(Date()))

Output:

The current date is: 2/22/2001

Example 2

document.write("The current date is: ")

document.write(FormatDateTime(Date(),1))

Output:

The current date is: Thursday, February 22, 2001

Example 3

document.write("The current date is: ")

document.write(FormatDateTime(Date(),2))

Output:

The current date is: 2/22/2001

Format Values

Constant | Value | Description
vbGeneralDate | 0 | Display a date in format mm/dd/yy. If the date parameter is Now(), it will also return the time, after the date
vbLongDate | 1 | Display a date using the long date format: weekday, month day, year
vbShortDate | 2 | Display a date using the short date format: like the default (mm/dd/yy)
vbLongTime | 3 | Display a time using the time format: hh:mm:ss PM/AM
vbShortTime | 4 | Display a time using the 24-hour format: hh:mm


VBScript FormatNumber Function

The FormatNumber function returns an expression formatted as a number.

Syntax

FormatNumber(Expression[,NumDigAfterDec[,

IncLeadingDig[,UseParForNegNum[,GroupDig]]]])

Parameter

Description

expression

Required. The expression to be formatted

NumDigAfterDec

Optional. Indicates how many places to the right of the decimal are displayed. Default is -1 (the computer's regional settings are used)

IncLeadingDig

Optional. Indicates whether or not a leading zero is displayed for fractional values:

· -2 = TristateUseDefault - Use the computer's regional settings
· -1 = TristateTrue - True
· 0 = TristateFalse - False

UseParForNegNum

Optional. Indicates whether or not to place negative values within parentheses:

· -2 = TristateUseDefault - Use the computer's regional settings
· -1 = TristateTrue - True
· 0 = TristateFalse - False

GroupDig

Optional. Indicates whether or not numbers are grouped using the group delimiter specified in the computer's regional settings:

· -2 = TristateUseDefault - Use the computer's regional settings
· -1 = TristateTrue - True
· 0 = TristateFalse - False

Example 1

document.write(FormatNumber(20000))

Output:

20,000.00

Example 2

document.write(FormatNumber(20000.578,2))

Output:

20,000.58

Example 3

document.write(FormatNumber(20000.578,2,,,0))

Output:

20000.58


VBScript FormatPercent Function

The FormatPercent function returns an expression formatted as a percentage (multiplied by 100) with a trailing % character.

Syntax

FormatPercent(Expression[,NumDigAfterDec[,

IncLeadingDig[,UseParForNegNum[,GroupDig]]]])

Parameter

Description

expression

Required. The expression to be formatted

NumDigAfterDec

Optional. Indicates how many places to the right of the decimal are displayed. Default is -1 (the computer's regional settings are used)

IncLeadingDig

Optional. Indicates whether or not a leading zero is displayed for fractional values:

· -2 = TristateUseDefault - Use the computer's regional settings
· -1 = TristateTrue - True
· 0 = TristateFalse - False

UseParForNegNum

Optional. Indicates whether or not to place negative values within parentheses:

· -2 = TristateUseDefault - Use the computer's regional settings
· -1 = TristateTrue - True
· 0 = TristateFalse - False

GroupDig

Optional. Indicates whether or not numbers are grouped using the group delimiter specified in the computer's regional settings:

· -2 = TristateUseDefault - Use the computer's regional settings
· -1 = TristateTrue - True
· 0 = TristateFalse - False

Example 1

'How many percent is 6 of 345?

document.write(FormatPercent(6/345))

Output:

1.74%

Example 2

'How many percent is 6 of 345?

document.write(FormatPercent(6/345,1))

Output:

1.7%


VBScript GetLocale Function

The GetLocale function returns the current locale ID.

A locale contains a set of user preference information: like language, country, region, and cultural conventions. The locale determines such things as keyboard layout, sort order, date, time, number, and currency formats.

The return value can be one of the 32-bit values shown in the Locale ID chart.

Syntax

GetLocale()

Example 1

dim c

c=GetLocale

document.write(c)

Output:

1033

Locale ID Chart

Locale Description | Short String | Hex Value | Decimal Value
Afrikaans | af | 0x0436 | 1078
Albanian | sq | 0x041C | 1052
Arabic – United Arab Emirates | ar-ae | 0x3801 | 14337
Arabic - Bahrain | ar-bh | 0x3C01 | 15361
Arabic - Algeria | ar-dz | 0x1401 | 5121
Arabic - Egypt | ar-eg | 0x0C01 | 3073
Arabic - Iraq | ar-iq | 0x0801 | 2049
Arabic - Jordan | ar-jo | 0x2C01 | 11265
Arabic - Kuwait | ar-kw | 0x3401 | 13313
Arabic - Lebanon | ar-lb | 0x3001 | 12289
Arabic - Libya | ar-ly | 0x1001 | 4097
Arabic - Morocco | ar-ma | 0x1801 | 6145
Arabic - Oman | ar-om | 0x2001 | 8193
Arabic - Qatar | ar-qa | 0x4001 | 16385
Arabic - Saudi Arabia | ar-sa | 0x0401 | 1025
Arabic - Syria | ar-sy | 0x2801 | 10241
Arabic - Tunisia | ar-tn | 0x1C01 | 7169
Arabic - Yemen | ar-ye | 0x2401 | 9217
Armenian | hy | 0x042B | 1067
Azeri – Latin | az-az | 0x042C | 1068
Azeri – Cyrillic | az-az | 0x082C | 2092
Basque | eu | 0x042D | 1069
Belarusian | be | 0x0423 | 1059
Bulgarian | bg | 0x0402 | 1026
Catalan | ca | 0x0403 | 1027
Chinese - China | zh-cn | 0x0804 | 2052
Chinese - Hong Kong S.A.R. | zh-hk | 0x0C04 | 3076
Chinese – Macau S.A.R | zh-mo | 0x1404 | 5124
Chinese - Singapore | zh-sg | 0x1004 | 4100
Chinese - Taiwan | zh-tw | 0x0404 | 1028
Croatian | hr | 0x041A | 1050
Czech | cs | 0x0405 | 1029
Danish | da | 0x0406 | 1030
Dutch – The Netherlands | nl-nl | 0x0413 | 1043
Dutch - Belgium | nl-be | 0x0813 | 2067
English - Australia | en-au | 0x0C09 | 3081
English - Belize | en-bz | 0x2809 | 10249
English - Canada | en-ca | 0x1009 | 4105
English – Carribbean | en-cb | 0x2409 | 9225
English - Ireland | en-ie | 0x1809 | 6153
English - Jamaica | en-jm | 0x2009 | 8201
English - New Zealand | en-nz | 0x1409 | 5129
English – Phillippines | en-ph | 0x3409 | 13321
English - South Africa | en-za | 0x1C09 | 7177
English - Trinidad | en-tt | 0x2C09 | 11273
English - United Kingdom | en-gb | 0x0809 | 2057
English - United States | en-us | 0x0409 | 1033
Estonian | et | 0x0425 | 1061
Farsi | fa | 0x0429 | 1065
Finnish | fi | 0x040B | 1035
Faroese | fo | 0x0438 | 1080
French - France | fr-fr | 0x040C | 1036
French - Belgium | fr-be | 0x080C | 2060
French - Canada | fr-ca | 0x0C0C | 3084
French - Luxembourg | fr-lu | 0x140C | 5132
French - Switzerland | fr-ch | 0x100C | 4108
Gaelic – Ireland | gd-ie | 0x083C | 2108
Gaelic - Scotland | gd | 0x043C | 1084
German - Germany | de-de | 0x0407 | 1031
German - Austria | de-at | 0x0C07 | 3079
German - Liechtenstein | de-li | 0x1407 | 5127
German - Luxembourg | de-lu | 0x1007 | 4103
German - Switzerland | de-ch | 0x0807 | 2055
Greek | el | 0x0408 | 1032
Hebrew | he | 0x040D | 1037
Hindi | hi | 0x0439 | 1081
Hungarian | hu | 0x040E | 1038
Icelandic | is | 0x040F | 1039
Indonesian | id | 0x0421 | 1057
Italian - Italy | it-it | 0x0410 | 1040
Italian - Switzerland | it-ch | 0x0810 | 2064
Japanese | ja | 0x0411 | 1041
Korean | ko | 0x0412 | 1042
Latvian | lv | 0x0426 | 1062
Lithuanian | lt | 0x0427 | 1063
FYRO Macedonian | mk | 0x042F | 1071
Malay - Malaysia | ms-my | 0x043E | 1086
Malay – Brunei | ms-bn | 0x083E | 2110
Maltese | mt | 0x043A | 1082
Marathi | mr | 0x044E | 1102
Norwegian - Bokmål | no-no | 0x0414 | 1044
Norwegian – Nynorsk | no-no | 0x0814 | 2068
Polish | pl | 0x0415 | 1045
Portuguese - Portugal | pt-pt | 0x0816 | 2070
Portuguese - Brazil | pt-br | 0x0416 | 1046
Raeto-Romance | rm | 0x0417 | 1047
Romanian - Romania | ro | 0x0418 | 1048
Romanian - Moldova | ro-mo | 0x0818 | 2072
Russian | ru | 0x0419 | 1049
Russian - Moldova | ru-mo | 0x0819 | 2073
Sanskrit | sa | 0x044F | 1103
Serbian - Cyrillic | sr-sp | 0x0C1A | 3098
Serbian – Latin | sr-sp | 0x081A | 2074
Setsuana | tn | 0x0432 | 1074
Slovenian | sl | 0x0424 | 1060
Slovak | sk | 0x041B | 1051
Sorbian | sb | 0x042E | 1070
Spanish - Spain | es-es | 0x0C0A | 1034
Spanish - Argentina | es-ar | 0x2C0A | 11274
Spanish - Bolivia | es-bo | 0x400A | 16394
Spanish - Chile | es-cl | 0x340A | 13322
Spanish - Colombia | es-co | 0x240A | 9226
Spanish - Costa Rica | es-cr | 0x140A | 5130
Spanish - Dominican Republic | es-do | 0x1C0A | 7178
Spanish - Ecuador | es-ec | 0x300A | 12298
Spanish - Guatemala | es-gt | 0x100A | 4106
Spanish - Honduras | es-hn | 0x480A | 18442
Spanish - Mexico | es-mx | 0x080A | 2058
Spanish - Nicaragua | es-ni | 0x4C0A | 19466
Spanish - Panama | es-pa | 0x180A | 6154
Spanish - Peru | es-pe | 0x280A | 10250
Spanish - Puerto Rico | es-pr | 0x500A | 20490
Spanish - Paraguay | es-py | 0x3C0A | 15370
Spanish - El Salvador | es-sv | 0x440A | 17418
Spanish - Uruguay | es-uy | 0x380A | 14346
Spanish - Venezuela | es-ve | 0x200A | 8202
Sutu | sx | 0x0430 | 1072
Swahili | sw | 0x0441 | 1089
Swedish - Sweden | sv-se | 0x041D | 1053
Swedish - Finland | sv-fi | 0x081D | 2077
Tamil | ta | 0x0449 | 1097
Tatar | tt | 0X0444 | 1092
Thai | th | 0x041E | 1054
Turkish | tr | 0x041F | 1055
Tsonga | ts | 0x0431 | 1073
Ukrainian | uk | 0x0422 | 1058
Urdu | ur | 0x0420 | 1056
Uzbek – Cyrillic | uz-uz | 0x0843 | 2115
Uzbek – Latin | uz-uz | 0x0443 | 1091
Vietnamese | vi | 0x042A | 1066
Xhosa | xh | 0x0434 | 1076
Yiddish | yi | 0x043D | 1085
Zulu | zu | 0x0435 | 1077


VBScript GetObject Function

The GetObject function returns a reference to an automation object from a file.

Syntax

GetObject([pathname][,class])

Parameter | Description
pathname | Optional. The full path and name of the file that contains the automation object. If this parameter is omitted, the class parameter is required
class | Optional. The class of the automation object. This parameter uses this syntax: appname.objectype


VBScript GetRef Function

The GetRef function allows you to connect a VBScript procedure to a DHTML event on your pages.

Syntax

Set object.event=GetRef(procname)

Parameter | Description
object | Required. The name of a DHTML object with which DHTML event is associated
event | Required. The name of a DHTML event to which the function is to be bound
procname | Required. The name of a Sub or Function procedure to be associated with the DHTML event

Example 1

Function test()

dim txt

txt="GetRef Test" & vbCrLf

txt=txt & "Hello World!"

MsgBox txt

End Function

Set Window.Onload=GetRef("test")


VBScript Hex Function

The Hex function returns a string that represents the hexadecimal value of a specified number.

Note: If number is not a whole number, it is rounded to the nearest whole number before being evaluated.

Syntax

Hex(number)

Parameter

Description

number

Required. Any valid expression

If number is:

· Null - then the Hex function returns Null.
· Empty - then the Hex function returns zero (0).
· Any other number - then the Hex function returns up to eight hexadecimal characters.

Example 1

document.write(Hex(3) & "<br />")

document.write(Hex(5) & "<br />")

document.write(Hex(9) & "<br />")

document.write(Hex(10) & "<br />")

document.write(Hex(11) & "<br />")

document.write(Hex(12) & "<br />")

document.write(Hex(400) & "<br />")

document.write(Hex(459) & "<br />")

document.write(Hex(460))

Output:

3

5

9

A

B

C

190

1CB

1CC


VBScript Hour Function

The Hour function returns a number between 0 and 23 that represents the hour of the day.

Syntax

Hour(time)

Parameter | Description
time | Required. Any expression that can represent a time

Example 1

document.write(Now & "<br />")

document.write(Hour(Now))

Output:

1/15/2002 10:07:47 AM

10

Example 2

document.write(Hour(Time))

Output:

10


VBScript InputBox Function

The InputBox function displays a dialog box, where the user can write some input and/or click on a button. If the user clicks the OK button or presses ENTER on the keyboard, the InputBox function will return the text in the text box. If the user clicks on the Cancel button, the function will return an empty string ("").

Note: A Help button is added to the dialog box when both the helpfile and the context parameter are specified.

Tip: Also look at the MsgBox function.

Syntax

InputBox(prompt[,title][,default][,xpos][,ypos][,helpfile,context])

Parameter | Description
prompt | Required. The message to show in the dialog box. Maximum length is 1024 characters. You can separate the lines using a carriage return character (Chr(13)), a linefeed character (Chr(10)), or carriage return–linefeed character combination (Chr(13) & Chr(10)) between each line
title | Optional. The title of the dialog box. Default is the application name
default | Optional. A default text in the text box
xpos | Optional. The horizontal distance of the left edge of the dialog box from the left edge of the screen. If omitted, the dialog box is horizontally centered
ypos | Optional. The vertical distance of the upper edge of the dialog box from the top of the screen. If omitted, the dialog box is vertically positioned one-third of the way down the screen
helpfile | Optional. The name of a Help file to use. Must be used with the context parameter
context | Optional. The Help context number to the Help topic. Must be used with the helpfile parameter

Example 1

dim fname

fname=InputBox("Enter your name:")

MsgBox("Your name is " & fname)


VBScript InStr Function

The InStr function returns the position of the first occurrence of one string within another.

The InStr function can return the following values:

· If string1 is "" - InStr returns 0
· If string1 is Null - InStr returns Null
· If string2 is "" - InStr returns start
· If string2 is Null - InStr returns Null
· If string2 is not found - InStr returns 0
· If string2 is found within string1 - InStr returns the position at which match is found
· If start > Len(string1) - InStr returns 0

Tip: Also look at the InStrRev function

Syntax

InStr([start,]string1,string2[,compare])

Parameter

Description

start

Optional. Specifies the starting position for each search. The search begins at the first character position by default. This parameter is required if compare is specified

string1

Required. The string to be searched

string2

Required. The string expression to search for

compare

Optional. Specifies the string comparison to use. Default is 0

Can have one of the following values:

· 0 = vbBinaryCompare - Perform a binary comparison
· 1 = vbTextCompare - Perform a textual comparison

Example 1

dim txt,pos

txt="This is a beautiful day!"

pos=InStr(txt,"his")

document.write(pos)

Output:

2

Example 2

dim txt,pos

txt="This is a beautiful day!"

'A textual comparison starting at position 4

pos=InStr(4,txt,"is",1)

document.write(pos)

Output:

6

Example 3

dim txt,pos

txt="This is a beautiful day!"

'A binary comparison starting at position 1

pos=InStr(1,txt,"B",0)

document.write(pos)

Output:

0


VBScript InStrRev Function

The InStrRev function returns the position of the first occurrence of one string within another. The search begins from the end of string, but the position returned counts from the beginning of the string.

The InStrRev function can return the following values:

· If string1 is "" - InStrRev returns 0
· If string1 is Null - InStrRev returns Null
· If string2 is "" - InStrRev returns start
· If string2 is Null - InStrRev returns Null
· If string2 is not found - InStrRev returns 0
· If string2 is found within string1 - InStrRev returns the position at which match is found
· If start > Len(string1) - InStrRev returns 0

Tip: Also look at the InStr function

Syntax

InStrRev(string1,string2[,start[,compare]])

Parameter

Description

string1

Required. The string to be searched

string2

Required. The string expression to search for

start

Optional. Specifies the starting position for each search. The search begins at the last character position by default (-1)

compare

Optional. Specifies the string comparison to use. Default is 0

Can have one of the following values:

· 0 = vbBinaryCompare - Perform a binary comparison
· 1 = vbTextCompare - Perform a textual comparison

Example 1

dim txt,pos

txt="This is a beautiful day!"

pos=InStrRev(txt,"his")

document.write(pos)

Output:

2

Example 2

dim txt,pos

txt="This is a beautiful day!"

'textual comparison

pos=InStrRev(txt,"B",-1,1)

document.write(pos)

Output:

11

Example 3

dim txt,pos

txt="This is a beautiful day!"

'binary comparison

pos=InStrRev(txt,"T")

document.write(pos)

Output:

1

Example 4

dim txt,pos

txt="This is a beautiful day!"

'binary comparison

pos=InStrRev(txt,"t")

document.write(pos)

Output:

15


VBScript Int Function

The Int function returns the integer part of a specified number.

Note: If the number parameter contains Null, Null will be returned.

Tip: Also look at the Fix function.

Syntax

Int(number)

Parameter | Description
number | Required. A valid numeric expression

Example 1

document.write(Int(6.83227))

Output:

6

Example 2

document.write(Int(6.23443))

Output:

6

Example 3

document.write(Int(-6.13443))

Output:

-7

Example 4

document.write(Int(-6.93443))

Output:

-7


VBScript IsArray Function

The IsArray function returns a Boolean value that indicates whether a specified variable is an array. If the variable is an array, it returns True, otherwise, it returns False.

Syntax

IsArray(variable)

Parameter | Description
variable | Required. Any variable

Example 1

dim a(5)

a(0)="Saturday"

a(1)="Sunday"

a(2)="Monday"

a(3)="Tuesday"

a(4)="Wednesday"

document.write(IsArray(a))

Output:

True

Example 2

dim a

a="Saturday"

document.write(IsArray(a))

Output:

False


VBScript IsDate Function

The IsDate function returns a Boolean value that indicates if the evaluated expression can be converted to a date. It returns True if the expression is a date or can be converted to a date; otherwise, it returns False.

Note: The IsDate function uses local setting to determine if a string can be converted to a date ("January" is not a month in all languages.)

Syntax

IsDate(expression)

Parameter | Description
expression | Required. The expression to be evaluated

Example 1

document.write(IsDate("April 22, 1947") & "<br />")

document.write(IsDate(#11/11/01#) & "<br />")

document.write(IsDate("#11/11/01#") & "<br />")

document.write(IsDate("Hello World!"))

Output:

True

True

False

False


VBScript IsEmpty Function

The IsEmpty function returns a Boolean value that indicates whether a specified variable has been initialized or not. It returns true if the variable is uninitialized; otherwise, it returns False.

Syntax

IsEmpty(expression)

Parameter | Description
expression | Required. An expression (most often a variable name)

Example 1

dim x

document.write(IsEmpty(x) & "<br />")

x=10

document.write(IsEmpty(x) & "<br />")

x=Empty

document.write(IsEmpty(x) & "<br />")

x=Null

document.write(IsEmpty(x))

Output:

True

False

True

False


VBScript IsNull Function

The IsNull function returns a Boolean value that indicates whether a specified expression contains no valid data (Null). It returns True if expression is Null; otherwise, it returns False.

Syntax

IsNull(expression)

Parameter | Description
expression | Required. An expression

Example 1

dim x

document.write(IsNull(x) & "<br />")

x=10

document.write(IsNull(x) & "<br />")

x=Empty

document.write(IsNull(x) & "<br />")

x=Null

document.write(IsNull(x))

Output:

False

False

False

True


VBScript IsNumeric Function

The IsNumeric function returns a Boolean value that indicates whether a specified expression can be evaluated as a number. It returns True if the expression is recognized as a number; otherwise, it returns False.

Note: If expression is a date the IsNumeric function will return False.

Syntax

IsNumeric(expression)

Parameter | Description
expression | Required. An expression

Example 1

dim x

x=10

document.write(IsNumeric(x) & "<br />")

x=Empty

document.write(IsNumeric(x) & "<br />")

x=Null

document.write(IsNumeric(x) & "<br />")

x="10"

document.write(IsNumeric(x) & "<br />")

x="911 Help"

document.write(IsNumeric(x))

Output:

True

True

False

True

False


VBScript IsObject Function

The IsObject function returns a Boolean value that indicates whether the specified expression is an automation object. It returns True if expression is an automation object; otherwise, it returns False.

Syntax

IsObject(expression)

Parameter | Description
expression | Required. An expression

Example 1

dim x

set x=me

document.write(IsObject(x))

Output:

True

Example 2

dim x

x="me"

document.write(IsObject(x))

Output:

False


VBScript Join Function

The Join function returns a string that consists of a number of substrings in an array.

Syntax

Join(list[,delimiter])

Parameter | Description
list | Required. A one-dimensional array that contains the substrings to be joined
delimiter | Optional. The character(s) used to separate the substrings in the returned string. Default is the space character

Example 1

dim a(5),b

a(0)="Saturday"

a(1)="Sunday"

a(2)="Monday"

a(3)="Tuesday"

a(4)="Wednesday"

b=Filter(a,"n")

document.write(join(b))

Output:

Sunday Monday Wednesday

Example 2

dim a(5),b

a(0)="Saturday"

a(1)="Sunday"

a(2)="Monday"

a(3)="Tuesday"

a(4)="Wednesday"

b=Filter(a,"n")

document.write(join(b,", "))

Output:

Sunday, Monday, Wednesday


VBScript LBound Function

The LBound function returns the smallest subscript for the indicated dimension of an array.

Note: The LBound for any dimension is ALWAYS 0.

Tip: Use the LBound function with the UBound function to determine the size of an array.

Syntax

LBound(arrayname[,dimension])

Parameter | Description
arrayname | Required. The name of the array variable
dimension | Optional. Which dimension's lower bound to return. 1 = first dimension, 2 = second dimension, and so on. Default is 1

Example 1

dim a(10)

a(0)="Saturday"

a(1)="Sunday"

a(2)="Monday"

a(3)="Tuesday"

a(4)="Wednesday"

a(5)="Thursday"

document.write(UBound(a))

document.write("<br />")

document.write(LBound(a))

Output:

10

0


VBScript LCase Function

The LCase function converts a specified string to lowercase.

Tip: Also look at the UCase function.

Syntax

LCase(string)

Parameter | Description
string | Required. The string to be converted to lowercase

Example 1

dim txt

txt="THIS IS A BEAUTIFUL DAY!"

document.write(LCase(txt))

Output:

this is a beautiful day!

Example 2

dim txt

txt="This Is a Beautiful Day!"

document.write(LCase(txt))

Output:

this is a beautiful day!


VBScript Left Function

The Left function returns a specified number of characters from the left side of a string.

Tip: Use the Len function to find the number of characters in a string.

Tip: Also look at the Right function.

Syntax

Left(string,length)

Parameter | Description
string | Required. The string to return characters from
length | Required. Specifies how many characters to return. If set to 0, an empty string ("") is returned. If set to greater than or equal to the length of the string, the entire string is returned

Example 1

dim txt

txt="This is a beautiful day!"

document.write(Left(txt,11))

Output:

This is a b

Example 2

dim txt

txt="This is a beautiful day!"

document.write(Left(txt,100))

Output:

This is a beautiful day!

Example 3

dim txt,x

txt="This is a beautiful day!"

x=Len(txt)

document.write(Left(txt,x))

Output:

This is a beautiful day!


VBScript Len Function

The Len function returns the number of characters in a string.

Syntax

Len(string|varname)

Parameter | Description
string | A string expression
varname | A variable name

Example 1

dim txt

txt="This is a beautiful day!"

document.write(Len(txt))

Output:

24

Example 2

document.write(Len("This is a beautiful day!"))

Output:

24


VBScript LoadPicture Function

The LoadPicture function returns a picture object.

Graphics formats that is recognized by the LoadPicture function:

· bitmap files (.bmp)
· icon files (.ico)
· run-length encoded files (.rle)
· metafile files (.wmf)
· enhanced metafiles (.emf)
· GIF files (.gif)
· JPEG files (.jpg)

Note: This function is available only on 32-bit platforms.

Syntax

LoadPicture(picturename)

Parameter | Description
picturename | Required. The name of the picture file to be loaded


VBScript Log Function

The Log function returns the natural logarithm of a specified number. The natural logarithm is the logarithm to the base e.

Note: Negative values are not allowed.

Tip: Also look at the Exp function.

Syntax

Log(number)

Parameter | Description
number | Required. A valid numeric expression > 0

Example 1

document.write(Log(38.256783227))

Output:

3.64432088381777


VBScript LTrim Function

The LTrim function removes spaces on the left side of a string.

Syntax

LTrim(string)

Parameter | Description
string | Required. A string expression

Example 1

dim txt

txt=" This is a beautiful day!  "

document.write(LTrim(txt))

Output:

"This is a beautiful day!  "


VBScript Mid Function

The Mid function returns a specified number of characters from a string.

Tip: Use the Len function to determine the number of characters in a string.

Syntax

Mid(string,start[,length])

Parameter | Description
string | Required. The string expression from which characters are returned
start | Required. Specifies the starting position. If set to greater than the number of characters in string, it returns an empty string ("")
length | Optional. The number of characters to return

Example 1

dim txt

txt="This is a beautiful day!"

document.write(Mid(txt,1,1))

Output:

T

Example 2

dim txt

txt="This is a beautiful day!"

document.write(Mid(txt,1,11))

Output:

This is a b

Example 3

dim txt

txt="This is a beautiful day!"

document.write(Mid(txt,1))

Output:

This is a beautiful day!

Example 4

dim txt

txt="This is a beautiful day!"

document.write(Mid(txt,10))

Output:

beautiful day!


VBScript Minute Function

The Minute function returns a number between 0 and 59 that represents the minute of the hour.

Syntax

Minute(time)

Parameter | Description
time | Required. Any expression that can represent a time

Example 1

document.write(Now & "<br />")

document.write(Minute(Now))

Output:

1/15/2002 10:34:39 AM

34

Example 2

document.write(Minute(Time))

Output:

34


VBScript Month Function

The Month function returns a number between 1 and 12 that represents the month of the year.

Syntax

Month(date)

Parameter | Description
date | Required. Any expression that can represent a date

Example 1

document.write(Date & "<br />")

document.write(Month(Date))

Output:

1/15/2002

1


VBScript MonthName Function

The MonthName function returns the name of the specified month.

Syntax

MonthName(month[,abbreviate])

Parameter | Description
month | Required. Specifies the number of the month (January is 1, February is 2, etc.)
abbreviate | Optional. A Boolean value that indicates if the month name is to be abbreviated. Default is False

Example 1

document.write(MonthName(8))

Output:

August

Example 2

document.write(MonthName(8,true))

Output:

Aug


VBScript Now Function

The Now function returns the current date and time according to the setting of your computer's system date and time.

Syntax

Now

Example 1

document.write(Now)

Output:

1/15/2002 10:52:15 AM


VBScript Oct Function

The Oct function returns a string that represents the octal value of a specified number.

Note: If number is not already a whole number, it is rounded to the nearest whole number before being evaluated.

Syntax

Oct(number)

Parameter

Description

number

Required. Any valid expression

If number is:

· Null - then the Oct function returns Null.
· Empty - then the Oct function returns zero (0).
· Any other number - then the Oct function returns up to 11 octal characters.

Example 1

document.write(Oct(3) & "<br />")

document.write(Oct(5) & "<br />")

document.write(Oct(9) & "<br />")

document.write(Oct(10) & "<br />")

document.write(Oct(11) & "<br />")

document.write(Oct(12) & "<br />")

document.write(Oct(400) & "<br />")

document.write(Oct(459) & "<br />")

document.write(Oct(460))

Output:

3

5

11

12

13

14

620

713

714


VBScript Replace Function

The Replace function replaces a specified part of a string with another string a specified number of times.

Syntax

Replace(string,find,replacewith[,start[,count[,compare]]])

Parameter

Description

string

Required. The string to be searched

find

Required. The part of the string that will be replaced

replacewith

Required. The replacement substring

start

Optional. Specifies the start position. Default is 1

count

Optional. Specifies the number of substitutions to perform. Default value is -1, which means make all possible substitutions

compare

Optional. Specifies the string comparison to use. Default is 0

Can have one of the following values:

· 0 = vbBinaryCompare - Perform a binary comparison
· 1 = vbTextCompare - Perform a textual comparison

Example 1

dim txt

txt="This is a beautiful day!"

document.write(Replace(txt,"beautiful","horrible"))

Output:

This is a horrible day!


VBScript RGB Function

The RGB function returns a number that represents an RGB color value.

Syntax

RGB(red,green,blue)

Parameter | Description
red | Required. A number from 0 to 255, inclusive, representing the red component of the color
green | Required. A number from 0 to 255, inclusive, representing the green component of the color
blue | Required. A number from 0 to 255, inclusive, representing the blue component of the color

Example 1

document.write(rgb(255,0,0))

Output:

255

Example 2

document.write(rgb(255,30,30))

Output:

1974015


VBScript Right Function

The Right function returns a specified number of characters from the right side of a string.

Tip: Use the Len function to find the number of characters in a string.

Tip: Also look at the Left function.

Syntax

Right(string,length)

Parameter | Description
string | Required. The string to return characters from
length | Required. Specifies how many characters to return. If set to 0, an empty string ("") is returned. If set to greater than or equal to the length of the string, the entire string is returned

Example 1

dim txt

txt="This is a beautiful day!"

document.write(Right(txt,11))

Output:

utiful day!

Example 2

dim txt

txt="This is a beautiful day!"

document.write(Right(txt,100))

Output:

This is a beautiful day!

Example 3

dim txt,x

txt="This is a beautiful day!"

x=Len(txt)

document.write(Right(txt,x))

Output:

This is a beautiful day!


VBScript Rnd Function

The Rnd function returns a random number. The number is always less than 1 but greater or equal to 0.

Syntax

Rnd[(number)]

Parameter

Description

number

Optional. A valid numeric expression

If number is:

· <0 - Rnd returns the same number every time
· >0 - Rnd returns the next random number in the sequence
· =0 - Rnd returns the most recently generated number
· Not supplied - Rnd returns the next random number in the sequence

Example 1

document.write(Rnd)

Output:

0.7055475

Example 2

'If you refresh the page,

'using the code in example 1,

'the SAME random number will show over and over.

'Use the Randomize statement generate a new random number

'each time the page is reloaded!

Randomize

document.write(Rnd)

Output:

0.4758112

Example 3

'Here is how to produce random integers in a

'given range:

dim max,min

max=100

min=1

document.write(Int((max-min+1)*Rnd+min))

Output:

71


VBScript Round Function

The Round function rounds a number.

Syntax

Round(expression[,numdecimalplaces])

Parameter | Description
expression | Required. The numeric expression to be rounded
numdecimalplaces | Optional. Specifies how many places to the right of the decimal are included in the rounding. Default is 0

Example 1

dim x

x=24.13278

document.write(Round(x))

Output:

24

Example 2

dim x

x=24.13278

document.write(Round(x,2))

Output:

24.13


VBScript RTrim Function

The RTrim function removes spaces on the right side of a string.

Syntax

RTrim(string)

Parameter | Description
string | Required. A string expression

Example 1

dim txt

txt=" This is a beautiful day!  "

document.write(RTrim(txt))

Output:

" This is a beautiful day!"


VBScript ScriptEngine, ScriptEngineBuildVersion, ScriptEngineMajorVersion, ScriptEngineMinorVersion Functions

VBScript ScriptEngine, ScriptEngineBuildVersion, ScriptEngineMajorVersion, and ScriptEngineMinorVersion Functions

 Top Previous Next

ScriptEngine Function

The ScriptEngine function returns the scripting language in use.

This function can return one of the following strings:

· VBScript - Indicates that Microsoft Visual Basic Scripting Edition is the current scripting engine
· JScript - Indicates that Microsoft JScript is the current scripting engine
· VBA - Indicates that Microsoft Visual Basic for Applications is the current scripting engine

ScriptEngineBuildVersion Function

The ScriptEngineBuildVersion function returns the build version number of the scripting engine in use.

ScriptEngineMajorVersion Function

The ScriptEngineMajorVersion function returns the major version number of the scripting engine in use.

ScriptEngineMinorVersion Function

The ScriptEngineMinorVersion function returns the minor version number of the scripting engine in use.

Syntax

ScriptEngine

ScriptEngineBuildVersion

ScriptEngineMajorVersion

ScriptEngineMinorVersion

Example 1

document.write(ScriptEngine & "<br />")

document.write(ScriptEngineBuildVersion & "<br />")

document.write(ScriptEngineMajorVersion & "<br />")

document.write(ScriptEngineMinorVersion)

Output:

VBScript

6330

5

5


VBScript Second Function

The Second function returns a number between 0 and 59 that represents the second of the minute.

Syntax

Second(time)

Parameter | Description
time | Required. Any expression that can represent a time

Example 1

document.write(Now & "<br />")

document.write(Second(Now))

Output:

1/15/2002 10:55:51 AM

51

Example 2

document.write(Second(Time))

Output:

51


VBScript SetLocale Function

The SetLocale function sets the locale ID and returns the previous locale ID.

A locale contains a set of user preferences, like language, country, region, and cultural conventions. The locale also determines such things as keyboard layout, sort order, date, time, number, and currency formats.

Syntax

SetLocale(lcid)

Parameter | Description
lcid | Required. A short string, hex value, or decimal value in the , that identifies a geographic locale. If the lcid parameter is set to 0, the locale will be set by the system

Example 1

document.write(SetLocale(2057))

document.write(SetLocale(2058))

Output:

1033

2057

Locale ID Chart

Locale Description | Short String | Hex Value | Decimal Value
Afrikaans | af | 0x0436 | 1078
Albanian | sq | 0x041C | 1052
Arabic – United Arab Emirates | ar-ae | 0x3801 | 14337
Arabic - Bahrain | ar-bh | 0x3C01 | 15361
Arabic - Algeria | ar-dz | 0x1401 | 5121
Arabic - Egypt | ar-eg | 0x0C01 | 3073
Arabic - Iraq | ar-iq | 0x0801 | 2049
Arabic - Jordan | ar-jo | 0x2C01 | 11265
Arabic - Kuwait | ar-kw | 0x3401 | 13313
Arabic - Lebanon | ar-lb | 0x3001 | 12289
Arabic - Libya | ar-ly | 0x1001 | 4097
Arabic - Morocco | ar-ma | 0x1801 | 6145
Arabic - Oman | ar-om | 0x2001 | 8193
Arabic - Qatar | ar-qa | 0x4001 | 16385
Arabic - Saudi Arabia | ar-sa | 0x0401 | 1025
Arabic - Syria | ar-sy | 0x2801 | 10241
Arabic - Tunisia | ar-tn | 0x1C01 | 7169
Arabic - Yemen | ar-ye | 0x2401 | 9217
Armenian | hy | 0x042B | 1067
Azeri – Latin | az-az | 0x042C | 1068
Azeri – Cyrillic | az-az | 0x082C | 2092
Basque | eu | 0x042D | 1069
Belarusian | be | 0x0423 | 1059
Bulgarian | bg | 0x0402 | 1026
Catalan | ca | 0x0403 | 1027
Chinese - China | zh-cn | 0x0804 | 2052
Chinese - Hong Kong S.A.R. | zh-hk | 0x0C04 | 3076
Chinese – Macau S.A.R | zh-mo | 0x1404 | 5124
Chinese - Singapore | zh-sg | 0x1004 | 4100
Chinese - Taiwan | zh-tw | 0x0404 | 1028
Croatian | hr | 0x041A | 1050
Czech | cs | 0x0405 | 1029
Danish | da | 0x0406 | 1030
Dutch – The Netherlands | nl-nl | 0x0413 | 1043
Dutch - Belgium | nl-be | 0x0813 | 2067
English - Australia | en-au | 0x0C09 | 3081
English - Belize | en-bz | 0x2809 | 10249
English - Canada | en-ca | 0x1009 | 4105
English – Carribbean | en-cb | 0x2409 | 9225
English - Ireland | en-ie | 0x1809 | 6153
English - Jamaica | en-jm | 0x2009 | 8201
English - New Zealand | en-nz | 0x1409 | 5129
English – Phillippines | en-ph | 0x3409 | 13321
English - South Africa | en-za | 0x1C09 | 7177
English - Trinidad | en-tt | 0x2C09 | 11273
English - United Kingdom | en-gb | 0x0809 | 2057
English - United States | en-us | 0x0409 | 1033
Estonian | et | 0x0425 | 1061
Farsi | fa | 0x0429 | 1065
Finnish | fi | 0x040B | 1035
Faroese | fo | 0x0438 | 1080
French - France | fr-fr | 0x040C | 1036
French - Belgium | fr-be | 0x080C | 2060
French - Canada | fr-ca | 0x0C0C | 3084
French - Luxembourg | fr-lu | 0x140C | 5132
French - Switzerland | fr-ch | 0x100C | 4108
Gaelic – Ireland | gd-ie | 0x083C | 2108
Gaelic - Scotland | gd | 0x043C | 1084
German - Germany | de-de | 0x0407 | 1031
German - Austria | de-at | 0x0C07 | 3079
German - Liechtenstein | de-li | 0x1407 | 5127
German - Luxembourg | de-lu | 0x1007 | 4103
German - Switzerland | de-ch | 0x0807 | 2055
Greek | el | 0x0408 | 1032
Hebrew | he | 0x040D | 1037
Hindi | hi | 0x0439 | 1081
Hungarian | hu | 0x040E | 1038
Icelandic | is | 0x040F | 1039
Indonesian | id | 0x0421 | 1057
Italian - Italy | it-it | 0x0410 | 1040
Italian - Switzerland | it-ch | 0x0810 | 2064
Japanese | ja | 0x0411 | 1041
Korean | ko | 0x0412 | 1042
Latvian | lv | 0x0426 | 1062
Lithuanian | lt | 0x0427 | 1063
FYRO Macedonian | mk | 0x042F | 1071
Malay - Malaysia | ms-my | 0x043E | 1086
Malay – Brunei | ms-bn | 0x083E | 2110
Maltese | mt | 0x043A | 1082
Marathi | mr | 0x044E | 1102
Norwegian - Bokmål | no-no | 0x0414 | 1044
Norwegian – Nynorsk | no-no | 0x0814 | 2068
Polish | pl | 0x0415 | 1045
Portuguese - Portugal | pt-pt | 0x0816 | 2070
Portuguese - Brazil | pt-br | 0x0416 | 1046
Raeto-Romance | rm | 0x0417 | 1047
Romanian - Romania | ro | 0x0418 | 1048
Romanian - Moldova | ro-mo | 0x0818 | 2072
Russian | ru | 0x0419 | 1049
Russian - Moldova | ru-mo | 0x0819 | 2073
Sanskrit | sa | 0x044F | 1103
Serbian - Cyrillic | sr-sp | 0x0C1A | 3098
Serbian – Latin | sr-sp | 0x081A | 2074
Setsuana | tn | 0x0432 | 1074
Slovenian | sl | 0x0424 | 1060
Slovak | sk | 0x041B | 1051
Sorbian | sb | 0x042E | 1070
Spanish - Spain | es-es | 0x0C0A | 1034
Spanish - Argentina | es-ar | 0x2C0A | 11274
Spanish - Bolivia | es-bo | 0x400A | 16394
Spanish - Chile | es-cl | 0x340A | 13322
Spanish - Colombia | es-co | 0x240A | 9226
Spanish - Costa Rica | es-cr | 0x140A | 5130
Spanish - Dominican Republic | es-do | 0x1C0A | 7178
Spanish - Ecuador | es-ec | 0x300A | 12298
Spanish - Guatemala | es-gt | 0x100A | 4106
Spanish - Honduras | es-hn | 0x480A | 18442
Spanish - Mexico | es-mx | 0x080A | 2058
Spanish - Nicaragua | es-ni | 0x4C0A | 19466
Spanish - Panama | es-pa | 0x180A | 6154
Spanish - Peru | es-pe | 0x280A | 10250
Spanish - Puerto Rico | es-pr | 0x500A | 20490
Spanish - Paraguay | es-py | 0x3C0A | 15370
Spanish - El Salvador | es-sv | 0x440A | 17418
Spanish - Uruguay | es-uy | 0x380A | 14346
Spanish - Venezuela | es-ve | 0x200A | 8202
Sutu | sx | 0x0430 | 1072
Swahili | sw | 0x0441 | 1089
Swedish - Sweden | sv-se | 0x041D | 1053
Swedish - Finland | sv-fi | 0x081D | 2077
Tamil | ta | 0x0449 | 1097
Tatar | tt | 0X0444 | 1092
Thai | th | 0x041E | 1054
Turkish | tr | 0x041F | 1055
Tsonga | ts | 0x0431 | 1073
Ukrainian | uk | 0x0422 | 1058
Urdu | ur | 0x0420 | 1056
Uzbek – Cyrillic | uz-uz | 0x0843 | 2115
Uzbek – Latin | uz-uz | 0x0443 | 1091
Vietnamese | vi | 0x042A | 1066
Xhosa | xh | 0x0434 | 1076
Yiddish | yi | 0x043D | 1085
Zulu | zu | 0x0435 | 1077


VBScript Sgn Function

The Sgn function returns an integer that indicates the sign of a specified number.

Syntax

Sgn(number)

Parameter

Description

number

Required. A valid numeric expression

If number is:

· >0 - Sgn returns 1
· =0 - Sgn returns 0
· <0 - Sgn returns -1

Example 1

document.write(Sgn(15))

Output:

1

Example 2

document.write(Sgn(-5.67))

Output:

-1

Example 3

document.write(Sgn(0))

Output:

0


VBScript Sin Function

The Sin function returns the sine of a specified number (angle).

Syntax

Sin(number)

Parameter | Description
number | Required. A valid numeric expression that expresses an angle in radians

Example 1

document.write(Sin(47))

Output:

0.123573122745224

Example 2

document.write(Sin(-47))

Output:

-0.123573122745224


VBScript Space Function

The Space function returns a string that consists of a specified number of spaces.

Syntax

Space(number)

Parameter | Description
number | Required. The number of spaces you want in the string

Example 1

dim txt

txt=Space(10)

document.write(txt)

Output:

"         "


VBScript Split Function

The Split function returns a zero-based, one-dimensional array that contains a specified number of substrings.

Syntax

Split(expression[,delimiter[,count[,compare]]])

Parameter

Description

expression

Required. A string expression that contains substrings and delimiters

delimiter

Optional. A string character used to identify substring limits. Default is the space character

count

Optional. The number of substrings to be returned. -1 indicates that all substrings are returned

compare

Optional. Specifies the string comparison to use.

Can have one of the following values:

· 0 = vbBinaryCompare - Perform a binary comparison
· 1 = vbTextCompare - Perform a textual comparison

Example 1

dim txt,a

txt="Hello World!"

a=Split(txt)

document.write(a(0) & "<br />")

document.write(a(1))

Output:

Hello

World!


VBScript Sqr Function

The Sqr function returns the square root of a number.

Note: The number parameter cannot be a negative value.

Syntax

Sqr(number)

Parameter | Description
number | Required. A valid numeric expression >= 0

Example 1

document.write(Sqr(9))

Output:

3

Example 2

document.write(Sqr(0))

Output:

0

Example 3

document.write(Sqr(47))

Output:

6.85565460040104


VBScript StrComp Function

The StrComp function compares two strings and returns a value that represents the result of the comparison.

The StrComp function can return one of the following values:

· -1 (if string1 < string2)
· 0 (if string1 = string2)
· 1 (if string1 > string2)
· Null (if string1 or string2 is Null)

Syntax

StrComp(string1,string2[,compare])

Parameter

Description

string1

Required. A string expression

string2

Required. A string expression

compare

Optional. Specifies the string comparison to use. Default is 0

Can have one of the following values:

· 0 = vbBinaryCompare - Perform a binary comparison
· 1 = vbTextCompare - Perform a textual comparison

Example 1

document.write(StrComp("VBScript","VBScript"))

Output:

0

Example 2

document.write(StrComp("VBScript","vbscript"))

Output:

-1

Example 3

document.write(StrComp("VBScript","vbscript",1))

Output:

0


VBScript String Function

The String function returns a string that contains a repeating character of a specified length.

Syntax

String(number,character)

Parameter | Description
number | Required. The length of the returned string
character | Required. The character that will be repeated

Example 1

document.write(String(10,"#"))

Output:

##########

Example 2

document.write(String(4,"*"))

Output:

****

Example 3

document.write(String(4,42))

Output:

****

Example 4

document.write(String(4,"XYZ"))

Output:

XXXX


VBScript StrReverse Function

The StrReverse function reverses a string.

Syntax

StrReverse(string)

Parameter | Description
string | Required. The string to be reversed

Example 1

dim txt

txt="This is a beautiful day!"

document.write(StrReverse(txt))

Output:

!yad lufituaeb a si sihT


VBScript Tan Function

The Tan function returns the tangent of a specified number (angle).

Syntax

Tan(number)

Parameter | Description
number | Required. A valid numeric expression that expresses an angle in radians

Example 1

document.write(Tan(40))

Output:

-1.1172149309239

Example 2

document.write(Tan(40))

Output:

1.1172149309239


VBScript Time Function

The Time function returns the current system time.

Syntax

Time

Example 1

document.write(Time)

Output:

11:07:27 AM


VBScript Timer Function

The Timer function returns the number of seconds since 12:00 AM.

Syntax

Timer

Example 1

document.write(Time & "<br />")

document.write(Timer)

Output:

11:11:13 AM

40273.2


VBScript TimeSerial Function

The TimeSerial function returns the time for a specific hour, minute, and second.

Syntax

TimeSerial(hour,minute,second)

Parameter | Description
hour | Required. A number between 0 and 23, or a numeric expression
minute | Required. Any numeric expression
second | Required. Any numeric expression

Example 1

document.write(TimeSerial(23,2,3) & "<br />")

document.write(TimeSerial(0,9,11) & "<br />")

document.write(TimeSerial(14+2,9-2,1-1))

Output:

11:02:03 PM

12:09:11 AM

4:07:00 PM


VBScript TimeValue Function

The TimeValue function returns a Variant of subtype Date that contains the time.

Syntax

TimeValue(time)

Parameter | Description
time | Required. A time from 0:00:00 (12:00:00 A.M.) to 23:59:59 (11:59:59 P.M.) or any expression that represents a time in that range

Example 1

document.write(TimeValue("5:55:59 PM") & "<br />")

document.write(TimeValue(#5:55:59 PM#) & "<br />")

document.write(TimeValue("15:34"))

Output:

5:55:59 PM

5:55:59 PM

3:34:00 PM


VBScript Trim Function

The Trim function removes spaces on both sides of a string.

Syntax

Trim(string)

Parameter | Description
string | Required. A string expression

Example 1

dim txt

txt=" This is a beautiful day!  "

document.write(Trim(txt))

Output:

"This is a beautiful day!"


VBScript TypeName Function

The TypeName function returns the subtype of a specified variable.

The TypeName function can return one of the following values:

· Byte - Indicates a byte value
· Integer - Indicates an integer value
· Long - Indicates a long integer value
· Single - Indicates a single-precision floating-point value
· Double - Indicates a double-precision floating-point value
· Currency - Indicates a currency value
· Decimal - Indicates a decimal value
· Date - Indicates a date or time value
· String - Indicates a character string value
· Boolean - Indicates a boolean value; True or False
· Empty - Indicates an unitialized variable
· Null - Indicates no valid data
· <object type> - Indicates the actual type name of an object
· Object - Indicates a generic object
· Unknown - Indicates an unknown object type
· Nothing - Indicates an object variable that doesn't yet refer to an object instance
· Error - Indicates an error

Syntax

TypeName(varname)

Parameter | Description
varname | Required. A variable name

Example 1

dim x

x="Hello World!"

document.write(TypeName(x) & "<br />")

x=4

document.write(TypeName(x) & "<br />")

x=4.675

document.write(TypeName(x) & "<br />")

x=Null

document.write(TypeName(x) & "<br />")

x=Empty

document.write(TypeName(x) & "<br />")

x=True

document.write(TypeName(x))

Output:

String

Integer

Double

Null

Empty

Boolean


VBScript UBound Function

The UBound function returns the largest subscript for the indicated dimension of an array.

Tip: Use the UBound function with the LBound function to determine the size of an array.

Syntax

UBound(arrayname[,dimension])

Parameter | Description
arrayname | Required. The name of the array variable
dimension | Optional. Which dimension's upper bound to return. 1 = first dimension, 2 = second dimension, and so on. Default is 1

Example 1

dim a(10)

a(0)="Saturday"

a(1)="Sunday"

a(2)="Monday"

a(3)="Tuesday"

a(4)="Wednesday"

a(5)="Thursday"

document.write(UBound(a))

document.write("<br />")

document.write(LBound(a))

Output:

10

0


VBScript UCase Function

The UCase function converts a specified string to uppercase.

Tip: Also look at the LCase function.

Syntax

UCase(string)

Parameter | Description
string | Required. The string to be converted to uppercase

Example 1

dim txt

txt="This is a beautiful day!"

document.write(UCase(txt))

Output:

THIS IS A BEAUTIFUL DAY!

Example 2

dim txt

txt="This Is a Beautiful Day!"

document.write(UCase(txt))

Output:

THIS IS A BEAUTIFUL DAY!


VBScript VarType Function

The VarType function returns a value that indicates the subtype of a specified variable.

The VarType function can return one of the following values:

· 0 = vbEmpty - Indicates Empty (uninitialized)
· 1 = vbNull - Indicates Null (no valid data)
· 2 = vbInteger - Indicates an integer
· 3 = vbLong - Indicates a long integer
· 4 = vbSingle - Indicates a single-precision floating-point number
· 5 = vbDouble - Indicates a double-precision floating-point number
· 6 = vbCurrency - Indicates a currency
· 7 = vbDate - Indicates a date
· 8 = vbString - Indicates a string
· 9 = vbObject - Indicates an automation object
· 10 = vbError - Indicates an error
· 11 = vbBoolean - Indicates a boolean
· 12 = vbVariant - Indicates a variant (used only with arrays of Variants)
· 13 = vbDataObject - Indicates a data-access object
· 17 = vbByte - Indicates a byte
· 8192 = vbArray - Indicates an array

Note: If the variable is an array VarType() returns 8192 + VarType(array_element). Example: for an array of integer VarType() will return 8192 + 2 = 8194.

Syntax

VarType(varname)

Parameter | Description
varname | Required. A variable name

Example 1

dim x

x="Hello World!"

document.write(VarType(x) & "<br />")

x=4

document.write(VarType(x) & "<br />")

x=4.675

document.write(VarType(x) & "<br />")

x=Null

document.write(VarType(x) & "<br />")

x=Empty

document.write(VarType(x) & "<br />")

x=True

document.write(VarType(x))

Output:

8

2

5

1

0

11


VBScript Weekday Function

The Weekday function returns a number between 1 and 7, that represents the day of the week.

Syntax

Weekday(date[,firstdayofweek])

Parameter

Description

date

Required. The date expression to evaluate

firstdayofweek

Optional. Specifies the first day of the week.

Can take the following values:

· 0 = vbUseSystemDayOfWeek - Use National Language Support (NLS) API setting
· 1 = vbSunday - Sunday (default)
· 2 = vbMonday - Monday
· 3 = vbTuesday - Tuesday
· 4 = vbWednesday - Wednesday
· 5 = vbThursday - Thursday
· 6 = vbFriday - Friday
· 7 = vbSaturday - Saturday

Example 1

document.write(Date & "<br />")

document.write(Weekday(Date))

Output:

1/15/2002

3


VBScript WeekdayName Function

The WeekdayName function returns the weekday name of a specified day of the week.

Syntax

WeekdayName(weekday[,abbreviate[,firstdayofweek]])

Parameter

Description

weekday

Required. The number of the weekday

abbreviate

Optional. A Boolean value that indicates if the weekday name is to be abbreviated

firstdayofweek

Optional. Specifies the first day of the week.

Can take the following values:

· 0 = vbUseSystemDayOfWeek - Use National Language Support (NLS) API setting
· 1 = vbSunday - Sunday (default)
· 2 = vbMonday - Monday
· 3 = vbTuesday - Tuesday
· 4 = vbWednesday - Wednesday
· 5 = vbThursday - Thursday
· 6 = vbFriday - Friday
· 7 = vbSaturday - Saturday

Example 1

document.write(WeekdayName(3))

Output:

Tuesday

Example 2

document.write(Date & "<br />")

document.write(Weekday(Date) & "<br />")

document.write(WeekdayName(Weekday(Date)))

Output:

1/15/2002

3

Tuesday

Example 3

document.write(Date & "<br />")

document.write(Weekday(Date) & "<br />")

document.write(WeekdayName(Weekday(Date),true))

Output:

1/15/2002

3

Tue


VBScript Year Function

The Year function returns a number that represents the year.

Syntax

Year(date)

Parameter | Description
date | Required. Any expression that can represent a date

Example 1

document.write(Date & "<br />")

document.write(Year(Date))

Output:

1/15/2002

2002


VBScript Conditional Statements

Examples

The if...then...else statement

This example demonstrates how to write the if...then..else statement.

This example demonstrates how to write the if...then...elseif statement.

The select case statement

This example demonstrates how to write the select case statement.

Conditional Statements

Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this.

In VBScript we have three conditional statements:

· if statement - use this statement if you want to execute a set of code when a condition is true
· if...then...else statement - use this statement if you want to select one of two sets of lines to execute
· if...then...elseif statement - use this statement if you want to select one of many sets of lines to execute
· select case statement - use this statement if you want to select one of many sets of lines to execute

If....Then.....Else

You should use the If...Then...Else statement if you want to

· execute some code if a condition is true
· select one of two blocks of code to execute

If you want to execute only one statement when a condition is true, you can write the code on one line:

if i=10 Then msgbox "Hello"

There is no ..else.. in this syntax. You just tell the code to perform one action if the condition is true (in this case if i=10).

If you want to execute more than one statement when a condition is true, you must put each statement on separate lines and end the statement with the keyword "End If":

if i=10 Then

 msgbox "Hello"

 i = i+1

end If

There is no ..else.. in this syntax either. You just tell the code to perform multiple actions if the condition is true.

If you want to execute a statement if a condition is true and execute another statement if the condition is not true, you must add the "Else" keyword:

if i=10 then

 msgbox "Hello"

else

 msgbox "Goodbye"

end If

The first block of code will be executed if the condition is true, and the other block will be executed otherwise (if i is not equal to 10).

If....Then.....Elseif

You can use the if...then...elseif statement if you want to select one of many blocks of code to execute:

if payment="Cash" then

 msgbox "You are going to pay cash!"

elseif payment="Visa" then

 msgbox "You are going to pay with visa."

elseif payment="AmEx" then

 msgbox "You are going to pay with American Express."

else

 msgbox "Unknown method of payment."

end If

Select Case

You can also use the SELECT statement if you want to select one of many blocks of code to execute:

select case payment

case "Cash"

 msgbox "You are going to pay cash"

case "Visa"

 msgbox "You are going to pay with visa"

case "AmEx"

 msgbox "You are going to pay with American Express"

case Else

 msgbox "Unknown method of payment"

end select

This is how it works: First we have a single expression (most often a variable), that is evaluated once. The value of the expression is then compared with the values for each Case in the structure. If there is a match, the block of code associated with that Case is executed.


VBScript Examples

Basic

Format text with HTML tags

A function in the head section

A script in the body section

Variables

Create a variable

Insert a variable value in a text

Create an array

Procedures

Sub procedure

Conditional Statements

If...then..else statement

If...then..elseif statement

Select case statement

Random link

Looping

For..next loop

Looping through the HTML headers

For..each loop

Do...While loop

Date and Time Functions

Display the current month and day

Countdown to year 3000

Add a time interval to a date

Format date and time

Other Built-in Functions

Uppercase or lowercase characters?

Remove leading or trailing spaces from a string

Reverse a string

Round a number

Return a random number

Return a random number between 0-99

Return a specified number of

Replace some characters in a string

characters from a string


VBScript How To ...

Examples

How to write text on a page

Write text with formatting

How to format the text on your page with HTML tags

How to Put VBScript Code in an HTML Document

<html>

<head>

</head>

<body>

<script type="text/vbscript">

document.write("Hello from VBScript!")

</script>

</body>

</html>

And it produces this output:

Hello from VBScript!

To insert a script in an HTML document, use the <script> tag. Use the type attribute to define the scripting language.

<script type="text/vbscript">

Then comes the VBScript: The command for writing some text on a page is document.write:

document.write("Hello from VBScript!")

The script ends:

</script>

How to Handle Older Browsers

Older browsers that do not support scripts will display the script as page content. To prevent them from doing this, you can use the HTML comment tag:

<script type="text/vbscript">

<!--

some statements

-->

</script>


VBScript Introduction

What You Should Already Know

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

· WWW, HTML and the basics of building Web pages

If you want to study these subjects first, go to our Home Page.

What is VBScript?

· VBScript is a scripting language
· A scripting language is a lightweight programming language
· VBScript is a light version of Microsoft's programming language Visual Basic

How Does it Work?

When a VBScript is inserted into a HTML document, the Internet browser will read the HTML and interpret the VBScript. The VBScript can be executed immediately, or at a later event.


VBScript Looping Statements

Examples

This example demonstrates how to make a simple For....Next loop.

Looping through headers

This example demonstrates how you can loop through the 6 headers in html.

For...each loop

This example demonstrates how to make a simple For.....Each loop.

Do...While loop

This example demonstrates how to make a simple Do...While loop.

Looping Statements

Very often when you write code, you want to allow the same block of code to run a number of times. You can use looping statements in your code to do this.

In VBScript we have four looping statements:

· For...Next statement - runs statements a specified number of times.
· For Each...Next statement - runs statements for each item in a collection or each element of an array
· Do...Loop statement - loops while or until a condition is true
· While...Wend statement - Do not use it - use the Do...Loop statement instead

For...Next Loop

You can use a For...Next statement to run a block of code, when you know how many repetitions you want.

You can use a counter variable that increases or decreases with each repetition of the loop, like this:

For i=1 to 10

some code

Next

The For statement specifies the counter variable (i) and its start and end values. The Next statement increases the counter variable (i) by one.

Step Keyword

Using the Step keyword, you can increase or decrease the counter variable by the value you specify.

In the example below, the counter variable (i) is increased by two each time the loop repeats.

For i=2 To 10 Step 2

some code

Next

To decrease the counter variable, you must use a negative Step value. You must specify an end value that is less than the start value.

In the example below, the counter variable (i) is decreased by two each time the loop repeats.

For i=10 To 2 Step -2

some code

Next

Exit a For...Next

You can exit a For...Next statement with the Exit For keyword.

For Each...Next Loop

A For Each...Next loop repeats a block of code for each item in a collection, or for each element of an array.

dim cars(2)

cars(0)="Volvo"

cars(1)="Saab"

cars(2)="BMW"

For Each x in cars

document.write(x & "<br />")

Next

Do...Loop

You can use Do...Loop statements to run a block of code when you do not know how many repetitions you want. The block of code is repeated while a condition is true or until a condition becomes true.

Repeating Code While a Condition is True

You use the While keyword to check a condition in a Do...Loop statement.

Do While i>10

some code

Loop

If i equals 9, the code inside the loop above will never be executed.

Do

some code

Loop While i>10

The code inside this loop will be executed at least one time, even if i is less than 10.

Repeating Code Until a Condition Becomes True

You use the Until keyword to check a condition in a Do...Loop statement.

Do Until i=10

some code

Loop

If i equals 10, the code inside the loop will never be executed.

Do

some code

Loop Until i=10

The code inside this loop will be executed at least one time, even if i is equal to 10.

Exit a Do...Loop

You can exit a Do...Loop statement with the Exit Do keyword.

Do Until i=10

i=i-1

If i<10 Then Exit Do

Loop

The code inside this loop will be executed as long as i is different from 10, and as long as i is greater than 10.


VBScript Procedures

Examples

Sub procedure

The sub procedure does not return a value.

The function procedure is used if you want to return a value.

VBScript Procedures

We have two kinds of procedures: The Sub procedure and the Function procedure.

A Sub procedure:

· is a series of statements, enclosed by the Sub and End Sub statements
· can perform actions, but does not return a value
· can take arguments that are passed to it by a calling procedure
· without arguments, must include an empty set of parentheses ()

Sub mysub()

some statements

End Sub

or

Sub mysub(argument1,argument2)

some statements

End Sub

A Function procedure:

· is a series of statements, enclosed by the Function and End Function statements
· can perform actions and can return a value
· can take arguments that are passed to it by a calling procedure
· without arguments, must include an empty set of parentheses ()
· returns a value by assigning a value to its name

Function myfunction()

some statements

myfunction=some value

End Function

or

Function myfunction(argument1,argument2)

some statements

myfunction=some value

End Function

Call a Sub or Function Procedure

When you call a Function in your code, you do like this:

name = findname()

Here you call a Function called "findname", the Function returns a value that will be stored in the variable "name".

Or, you can do like this:

msgbox "Your name is " & findname()

Here you also call a Function called "findname", the Function returns a value that will be displayed in the message box.

When you call a Sub procedure you can use the Call statement, like this:

Call MyProc(argument)

Or, you can omit the Call statement, like this:

MyProc argument


VBScript Functions

This page contains all the built-in VBScript functions. The page is divided into following sections:

· Date/Time functions
· Conversion functions
· Format functions
· Math functions
· Array functions
· String functions
· Other functions

Date/Time Functions

Function | Description
CDate | Converts a valid date and time expression to the variant of subtype Date
 | Returns the current system date
 | Returns a date to which a specified time interval has been added
DateDiff | Returns the number of intervals between two dates
 | Returns the specified part of a given date
DateSerial | Returns the date for a specified year, month, and day
 | Returns a date
Day | Returns a number that represents the day of the month (between 1 and 31, inclusive)
FormatDateTime | Returns an expression formatted as a date or time
Hour | Returns a number that represents the hour of the day (between 0 and 23, inclusive)
 | Returns a Boolean value that indicates if the evaluated expression can be converted to a date
Minute | Returns a number that represents the minute of the hour (between 0 and 59, inclusive)
 | Returns a number that represents the month of the year (between 1 and 12, inclusive)
 | Returns the name of a specified month
 | Returns the current system date and time
Second | Returns a number that represents the second of the minute (between 0 and 59, inclusive)
Time | Returns the current system time
Timer | Returns the number of seconds since 12:00 AM
 | Returns the time for a specific hour, minute, and second
TimeValue | Returns a time
Weekday | Returns a number that represents the day of the week (between 1 and 7, inclusive)
 | Returns the weekday name of a specified day of the week
Year | Returns a number that represents the year

Conversion Functions

Top

Function | Description
Asc | Converts the first letter in a string to ANSI code
CBool | Converts an expression to a variant of subtype Boolean
CByte | Converts an expression to a variant of subtype Byte
CCur | Converts an expression to a variant of subtype Currency
CDate | Converts a valid date and time expression to the variant of subtype Date
 | Converts an expression to a variant of subtype Double
Chr | Converts the specified ANSI code to a character
CInt | Converts an expression to a variant of subtype Integer
 | Converts an expression to a variant of subtype Long
CSng | Converts an expression to a variant of subtype Single
 | Converts an expression to a variant of subtype String
Hex | Returns the hexadecimal value of a specified number
Oct | Returns the octal value of a specified number

Format Functions

Function | Description
FormatCurrency | Returns an expression formatted as a currency value
FormatDateTime | Returns an expression formatted as a date or time
FormatNumber | Returns an expression formatted as a number
FormatPercent | Returns an expression formatted as a percentage

Math Functions

Top

Function | Description
Abs | Returns the absolute value of a specified number
Atn | Returns the arctangent of a specified number
 | Returns the cosine of a specified number (angle)
Exp | Returns e raised to a power
Hex | Returns the hexadecimal value of a specified number
Int | Returns the integer part of a specified number
Fix | Returns the integer part of a specified number
Log | Returns the natural logarithm of a specified number
 | Returns the octal value of a specified number
 | Returns a random number less than 1 but greater or equal to 0
Sgn | Returns an integer that indicates the sign of a specified number
Sin | Returns the sine of a specified number (angle)
Sqr | Returns the square root of a specified number
Tan | Returns the tangent of a specified number (angle)

Array Functions

Top

Function | Description
 | Returns a variant containing an array
Filter | Returns a zero-based array that contains a subset of a string array based on a filter criteria
IsArray | Returns a Boolean value that indicates whether a specified variable is an array
Join | Returns a string that consists of a number of substrings in an array
 | Returns the smallest subscript for the indicated dimension of an array
 | Returns a zero-based, one-dimensional array that contains a specified number of substrings
UBound | Returns the largest subscript for the indicated dimension of an array

String Functions

Function | Description
InStr | Returns the position of the first occurrence of one string within another. The search begins at the first character of the string
 | Returns the position of the first occurrence of one string within another. The search begins at the last character of the string
 | Converts a specified string to lowercase
 | Returns a specified number of characters from the left side of a string
 | Returns the number of characters in a string
LTrim | Removes spaces on the left side of a string
RTrim | Removes spaces on the right side of a string
Trim | Removes spaces on both the left and the right side of a string
Mid | Returns a specified number of characters from a string
 | Replaces a specified part of a string with another string a specified number of times
Right | Returns a specified number of characters from the right side of a string
Space | Returns a string that consists of a specified number of spaces
 | Compares two strings and returns a value that represents the result of the comparison
String | Returns a string that contains a repeating character of a specified length
 | Reverses a string
UCase | Converts a specified string to uppercase

Other Functions

Top

Function | Description
CreateObject | Creates an object of a specified type
Eval | Evaluates an expression and returns the result
GetLocale | Returns the current locale ID
GetObject | Returns a reference to an automation object from a file
GetRef | Allows you to connect a VBScript procedure to a DHTML event on your pages
InputBox | Displays a dialog box, where the user can write some input and/or click on a button, and returns the contents
 | Returns a Boolean value that indicates whether a specified variable has been initialized or not
IsNull | Returns a Boolean value that indicates whether a specified expression contains no valid data (Null)
IsNumeric | Returns a Boolean value that indicates whether a specified expression can be evaluated as a number
IsObject | Returns a Boolean value that indicates whether the specified expression is an automation object
LoadPicture | Returns a picture object. Available only on 32-bit platforms
 | Displays a message box, waits for the user to click a button, and returns a value that indicates which button the user clicked
 | Returns a number that represents an RGB color value
 | Rounds a number
ScriptEngine | Returns the scripting language in use
ScriptEngineBuildVersion | Returns the build version number of the scripting engine in use
ScriptEngineMajorVersion | Returns the major version number of the scripting engine in use
ScriptEngineMinorVersion | Returns the minor version number of the scripting engine in use
SetLocale | Sets the locale ID and returns the previous locale ID
TypeName | Returns the subtype of a specified variable
VarType | Returns a value that indicates the subtype of a specified variable


VBScript Keywords

VBScript Keywords

Keyword | Description
empty | Used to indicate an uninitialized variable value. A variable value is uninitialized when it is first created and no value is assigned to it, or when a variable value is explicitly set to empty. Example: dim x 'the variable x is uninitialized! x="ff" 'the variable x is NOT uninitialized anymore x=empty 'the variable x is uninitialized! Note: This is not the same as Null!!
isEmpty | Used to test if a variable is uninitialized. Example: If (isEmpty(x)) 'is x uninitialized?
nothing | Used to indicate an uninitialized object value, or to disassociate an object variable from an object to release system resources. Example: set myObject=nothing
is nothing | Used to test if a value is an initialized object. Example: If (myObject Is Nothing) 'is it unset? Note: If you compare a value to Nothing, you will not get the right result! Example: If (myObject = Nothing) 'always false!
null | Used to indicate that a variable contains no valid data. One way to think of Null is that someone has explicitly set the value to "invalid", unlike Empty where the value is "not set". Note: This is not the same as Empty or Nothing!! Example: x=Null 'x contains no valid data
isNull | Used to test if a value contains invalid data. Example: if (isNull(x)) 'is x invalid?
true | Used to indicate a Boolean condition that is correct (true has a value of -1)
false | Used to indicate a Boolean condition that is not correct (false has a value of 0)


VBScript Summary

You Have Learned VBScript, Now What?

 Top Previous Next

VBScript Summary

This tutorial has taught you how to add VBScript to your HTML pages, to make your web site more dynamic and interactive.

You have learned how to create variables and functions, and how to make different scripts run in response to different scenarios.

For more information on VBScript, please look at our and our VBScript references.

Now You Know VBScript, What's Next?

The next step is to learn ASP.

While scripts in an HTML file are executed on the client (in the browser), scripts in an ASP file are executed on the server.

With ASP you can dynamically edit, change or add any content of a Web page, respond to 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.

Since ASP files are returned as plain HTML, they can be viewed in any browser.

If you want to learn more about ASP, please visit our ASP tutorial.


VBScript Variables

Examples

Variables are used to store information. This example demonstrates how you can create a variable, and assign a value to it.

Insert a variable value in a text

This example demonstrates how you can insert a variable value in a text.

Arrays are used to store a series of related data items. This example demonstrates how you can make an array that stores names. ( We are using a "for loop" to demonstrate how you write the names. )

What is a Variable?

A variable is a "container" for information you want to store. A variable's value can change during the script. You can refer to a variable by name to see its value or to change its value. In VBScript, all variables are of type variant, that can store different types of data.

Rules for Variable Names:

· Must begin with a letter
· Cannot contain a period (.)
· Cannot exceed 255 characters

Declaring Variables

You can declare variables with the Dim, Public or the Private statement. Like this:

dim name

name=some value

Now you have created a variable. The name of the variable is "name".

You can also declare variables by using its name in your script. Like this:

name=some value

Now you have also created a variable. The name of the variable is "name".

However, the last method is not a good practice, because you can misspell the variable name later in your script, and that can cause strange results when your script is running. This is because when you misspell for example the "name" variable to "nime" the script will automatically create a new variable called "nime". To prevent your script from doing this you can use the Option Explicit statement. When you use this statement you will have to declare all your variables with the dim, public or private statement. Put the Option Explicit statement on the top of your script. Like this:

option explicit

dim name

name=some value

Assigning Values to Variables

You assign a value to a variable like this:

name="Hege"

i=200

The variable name is on the left side of the expression and the value you want to assign to the variable is on the right. Now the variable "name" has the value "Hege".

Lifetime of Variables

How long a variable exists is its lifetime.

When you declare a variable within a procedure, the variable can only be accessed within that procedure. When the procedure exits, the variable is destroyed. These variables are called local variables. You can have local variables with the same name in different procedures, because each is recognized only by the procedure in which it is declared.

If you declare a variable outside a procedure, all the procedures on your page can access it. The lifetime of these variables starts when they are declared, and ends when the page is closed.

Array Variables

Sometimes you want to assign more than one value to a single variable. Then you can create a variable that can contain a series of values. This is called an array variable. The declaration of an array variable uses parentheses ( ) following the variable name. In the following example, an array containing 3 elements is declared:

dim names(2)

The number shown in the parentheses is 2. We start at zero so this array contains 3 elements. This is a fixed-size array. You assign data to each of the elements of the array like this:

names(0)="Tove"

names(1)="Jani"

names(2)="Stale"

Similarly, the data can be retrieved from any element using the index of the particular array element you want. Like this:

mother=names(0)

You can have up to 60 dimensions in an array. Multiple dimensions are declared by separating the numbers in the parentheses with commas. Here we have a two-dimensional array consisting of 5 rows and 7 columns:

dim table(4, 6)


VBScript Where To ...

Examples

Head section

Scripts can be placed in the head section. Usually we put all the "functions" in the head section. The reason for this is to be sure that the script is loaded before the function is called.

Body section

Execute a script that is placed in the body section. Scripts in the body section are executed when the page is loading.

Where to Put the VBScript

Scripts in a page will be executed immediately while the page loads into the browser. This is not always what we want. Sometimes we want to execute a script when a page loads, other times when a user triggers an event.

Scripts in the head section: Scripts to be executed when they are called or when an event is triggered go in the head section. When you place a script in the head section you will assure that the script is loaded before anyone uses it:

<html>

<head>

<script type="text/vbscript">

some statements

</script>

</head>

Scripts in the body section: Scripts to be executed when the page loads go in the body section. When you place a script in the body section it generates the content of the page:

<html>

<head>

</head>

<body>

<script type="text/vbscript">

some statements

</script>

</body>

Scripts in both the body and the head section: You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section.

<html>

<head>

<script type="text/vbscript">

some statements

</script>

</head>

<body>

<script type="text/vbscript">

some statements

</script>

</body>


tryit_view005d.html

Syntax for FormatDateTime: FormatDateTime(date,namedformat).


tryit_view0378.html

A function procedure CAN return a result.


tryit_view037a.html


tryit_view0683.html

This example demonstrates the "select case" statement.

You will receive a different greeting based on what day it is.

Note that Sunday=1, Monday=2, Tuesday=3, etc.


tryit_view074e.html


tryit_view1ec8.html


tryit_view21b2.html


tryit_view26ee.html


tryit_view2af1.html


tryit_view2af6.html

VBScripts' function WeekdayName is used to get a weekday:


tryit_view3d9d.html

We usually use the head section for "functions". The reason for this is to be sure that the script is loaded before the function is called.


tryit_view535a.html


tryit_view5c2b.html

Countdown to year 3000:


tryit_view61ce.html


tryit_view6aad.html


tryit_view6bb5.html


tryit_view733b.html


tryit_view8205.html


tryit_view8b4d.html


tryit_view8b51.html

This example uses DateAdd to calculate a date 30 days from today.

Syntax for DateAdd: DateAdd(interval,number,date).


tryit_view9531.html


tryit_view9638.html


tryit_view9838.html


tryit_view9d55.html


tryit_view9e92.html


tryit_viewab1c.html


tryit_viewab75.html


tryit_viewad24.html

A sub procedure does not return a result.


tryit_viewafd3.html


tryit_viewb70d.html


tryit_viewbc44.html

This example demonstrates a link, when you click on the link it will take you to W3Schools.com OR to RefsnesData.no. There is a 50% chance for each of them.


tryit_viewcb38.html


tryit_viewcfcd.html


tryit_viewd54e.html


tryit_viewd93f.html

VBScripts' function MonthName is used to get a month:


tryit_viewe5e0.html


tryit_viewf16e.html


Introduction to W3C

W3C was started in 1994 to lead the Web to its full potential by developing common protocols that promote its evolution and ensure its interoperability.

What it Is

· 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

How it Started

The World Wide Web (WWW) began as a project at the European Organization for Nuclear Research (CERN), where Tim Berners-Lee developed a vision of the World Wide Web.

Tim Berners-Lee - the inventor of the World Wide Web - is now the Director of the World Wide Web Consortium (W3C).

W3C was created in 1994 as a collaboration between the Massachusetts Institute of Technology (MIT) and the European Organization for Nuclear Research (CERN), with support from the U.S. Defense Advanced Research Project Agency (DARPA) and the European Commission.

Standardizing the Web

W3C is working to make the Web accessible to all users (despite differences in culture, education, ability, resources, and physical limitations)

W3C also coordinates its work with many other standards organizations such as the Internet Engineering Task Force, the Wireless Application Protocols (WAP) Forum and the Unicode Consortium.

W3C is hosted by three universities:

· Massachusetts Institute of Technology in the U.S.
· The French National Research Institute in Europe
· Keio University in Japan

W3C Members

Because the Web is so important (both in scope and in investment) that no single organization should have control over its future, W3C functions as a member organization.

Some well known members are:

· IBM
· Microsoft
· America Online
· Apple
· Adobe
· Macromedia
· Sun Microsystems

The List of Member Organisations includes a variety of software vendors, content providers, corporate users, telecommunications companies, academic institutions, research laboratories, standards bodies, and governments.

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.

Each W3C Recommendation is developed by a work group consisting of members and invited experts. The group obtains its input from companies and other organizations, and creates a Working Draft and finally a Proposed Recommendation. In general the Recommendation is submitted to the W3C membership and director, for a formal approval as a W3C Recommendation.

The specification approval process is described in the next chapter.


W3C Tutorial

After you have studied our W3C tutorial, you will know what W3C is.

You will know about the World Wide Web Consortium, and how the Web is standardized.

Table of contents

Introduction to W3C

This chapter explains what the W3C is, how it works, and how the Web is standardized.

W3C Process

This chapter explains the W3C standardizing process.

W3C HTML

This chapter summarizes the HTML activities at the W3C.

W3C XHTML

This chapter summarizes the XHTML activities at the W3C.

W3C XML

This chapter summarizes the XML activities at the W3C.

This chapter summarizes the CSS activities at the W3C.

W3C XSL

This chapter summarizes the XSL activities at the W3C.

This chapter summarizes the XML Schema activities at the W3C.

W3C XPath

This chapter summarizes the XPath activities at the W3C.

W3C XQuery

This chapter summarizes the XQuery activities at the W3C.

W3C DOM

This chapter summarizes the DOM activities at the W3C.

W3C SOAP

This chapter summarizes the SOAP activities at the W3C.

W3C WSDL

This chapter summarizes the WSDL activities at the W3C.

W3C RDF

This chapter summarizes the RDF activities at the W3C.

W3C SMIL

This chapter summarizes the SMIL activities at the W3C.

W3C Other

This chapter summarizes other activities at the W3C.


W3C CSS Activities

Style sheets describe how documents are displayed, pronounced, or printed. CSS is a mechanism for adding style to Web pages.

CSS Tutorial

To learn more about CSS, read our CSS tutorial.

CSS Versions

CSS1

CSS1 was released as a W3C Recommendation 17. December 1996. The Recommendation was revised 11. January 1999.

CSS2

CSS2 was released as a W3C Recommendation 11. January 1999. CSS2 has added support for media (printers and aural devices), downloadable fonts, element positioning and tables.

CSS3

CSS3 is about breaking CSS into smaller modules

W3C CSS Specifications and Timeline

Specification | Draft / Proposal | W3C Recommendation
CSS 1 |  | 17. Dec 1996
CSS 1 (Revised) |  | 11. Jan 1999
CSS 2 |  | 12. May 1998
CSS 2.1 | 11. Apr 2006 |
CSS Mobile |  |
CSS TV | 14. May 2003 |
CSS 3 |  |
CSS 3 User Interface |  |
CSS 3 Selectors | 15. Des 2005 |
CSS 3 Fonts | 02. Aug 2002 |
CSS 3 Web Fonts | 2002 |
CSS 3 Colors | 14. May 2003 |
CSS 3 Backgrounds | 16. Feb 2005 |
CSS 3 Text | 27. Jun 2005 |
CSS 3 Lists | 07. Nov 2002 |
CSS 3 Line | 15. May 2002 |
CSS 3 Box | 24. Oct 2002 |
CSS 3 Ruby | 14. May 2003 |
CSS 3 Border | 16. Feb 2005 |
CSS 3 Speech | 16. Dec 2004 |

W3C Reference:

W3C CSS Home Page


W3C DOM Activities

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.

DOM Tutorials

To learn more about the DOM, read our and our XML DOM tutorial.

DOM Level 0

The DOM Level 0 is not a W3C specification. It is just a definition of the functionality equivalent to that found in Netscape Navigator 3.0 and Microsoft Internet Explorer 3.0.

Key players in the development of the DOM has been people from ArborText, IBM, Inso EPS, JavaSoft, Microsoft, Netscape, Novell, the Object Management Group, SoftQuad, Sun Microsystems, and Texcel.

W3C's DOM Level 1 builds on this functionality.

DOM Level 1

DOM Level 1 concentrates on HTML and XML document models. It contains functionality for document navigation and manipulation.

DOM Level 1 was released as a W3C Recommendation 1. October 1998.

A Working Draft for a Second Edition (SE) was published 29. September. 2000.

DOM Level 2

DOM Level 2 adds a style sheet object model to DOM Level 1, and defines functionality for manipulating the style information attached to a document.

DOM Level 2 also defines an event model and provides support for XML namespaces.

The DOM Level 2 specification was released as W3C Recommendations 13. November 2000:

DOM Level 2 Core

DOM Level 2 Core specifies an API to access and update the content and structure of documents. The API also contains interfaces dedicated to XML.

DOM Level 2 HTML

DOM Level 2 HTML specifies an API to manipulate the structure and contents of an HTML document. (This part of the specification is still a working draft)

DOM Level 2 Views

DOM Level 2 Views specifies an API to dynamically access and update the view of a document. A view is some alternate representation of, or a presentation of, a document.

DOM Level 2 Style

DOM Level 2 Style specifies an API to dynamically access and update the content style sheets.

DOM Level 2 Events

DOM Level 2 Events specifies an API to access document events.

DOM Level 2 Traversal-Range

DOM Level 2 Traversal-Range specifies an API to dynamically traverse and identify a range of content in a document.

DOM Level 3

DOM Level 3 specifies content models (DTD and Schemas) and document validation. It also specifies document loading and saving, document views, document formatting, and key events. DOM Level 3 builds on DOM Core Level 2.

DOM Level 3 Requirements

The DOM Requirements document has been updated for Level 3 requirements and was released as a Working Draft 12. April 2000.

The following DOM Level 3 Working Drafts were released 1. September 2000:

DOM Level 3 Core

DOM Level 3 Core specifies an API to access and update the content, structure and style of documents.

DOM Level 3 Events

The DOM Level 3 Events API expands the functionality of the Level 2 Event API by adding new interfaces and new event sets.

DOM Level 3 Load and Save

DOM Level 3 Content Model specifies an API for document loading and saving, content models (DTD and Schemas) and document validation support.

DOM Level 3 Views and Formatting

DOM Level 3 Views specifies an API to dynamically access and update the view of a document. A view is some alternate representation of, or a presentation of, a document.

W3C DOM Specifications and Timeline

Specification | Draft / Proposal | W3C Recommendation
DOM Level 1 |  | 01. Oct 1998
DOM Level 1 (SE) | 2000 |
DOM Level 2 Core |  | 13. Nov 2000
DOM Level 2 HTML |  | 2003
DOM Level 2 Views |  | 13. Nov 2000
DOM Level 2 Style |  | 13. Nov 2000
DOM Level 2 Events |  | 13. Nov 2000
DOM Level 2 Traversal-Range |  | 13. Nov 2000
DOM Level 3 Requirements | 26. |
DOM Level 3 Core |  | 07. Apr 2004
DOM Level 3 Events | 13. Apr 2006 |
DOM Level 3 Load and Save |  | 07. Apr
DOM Level 3 Validation |  | 27. Jan 2004
DOM Level 3 XPath | 26. Feb 2004 |
DOM Level 3 Views | 26. Feb |

W3C Reference:

W3C DOM Home Page


W3C HTML Activities

HTML is the lingua franca for publishing on the World Wide Web.

XHTML is the latest version of HTML.

HTML Tutorials

To learn more about HTML, read our HTML tutorial.

To learn more about XHTML, read our XHTML tutorial.

HTML Versions

HTML 2.0

HTML 2.0 was developed by the Internet Engineering Task Force HTML Working Group in 1996.

HTML 2.0 is an outdated version of HTML. All browsers available on the market today, rely on newer versions of HTML. For a Web developer there is no need to study the HTML 2.0 standard.

HTML 3.2

HTML 3.2 was released as a W3C Recommendation 14. January 1997. HTML 3.2 added widely-deployed (Netscape) features such as fonts, tables, applets, text-flow around images, superscripts and subscripts, to the existing HTML 2.0 Standard.

One of the elements that was added to the 1997 HTML 3.2 standard - the <font> tag - have introduced unnecessary complexity to the important task of separating HTML content (text) from its presentation (style). The <font> tag is expected to be removed from future versions of HTML.

HTML 4.0

HTML 4.0 was released as a W3C Recommendation 18. December 1997. A second release was issued on 24. April 1998 with only some editorial corrections.

The most important feature of HTML 4.0 is the introduction of style sheets (CSS).

Our W3C CSS chapter summarizes the W3C CSS activities.

HTML 4.01

HTML 4.01 was released as a W3C Recommendation 24. December 1999.

HTML 4.01 is a minor update of corrections and bug fixes in HTML 4.0.

W3C will not continue to develop HTML. Future W3C work will be focusing on XHTML.

XHTML 1.0 (the latest version of HTML)

XHTML 1.0 reformulates HTML 4.01 in XML.

XHTML 1.0 was released as a W3C Recommendation 20. January 2000.

W3C HTML Specifications and Timeline

Specification | W3C Recommendation
HTML 3.2 | 14. January 1997
HTML 4.0 | 24. April 1998
HTML 4.01 |

The XHTML specifications and timeline are found in the next chapter.

W3C Reference:

W3C HTML Home Page


W3C Activities

Other W3C Activities

This chapter summarizes some other important and interesting activities at W3C.

The Web Accessibility Initiative (WAI)

WAI defines guidelines for how to make Web content accessible to people with disabilities.

The Web Accessibility Initiative is working for "Web accessibility for all" through technology, guidelines, tools, education, research, and development projects.

The W3C WAI Recommendation

Mathematical Markup Language (MathML)

MathML describes an XML standard for describing mathematical notation.

The goal of MathML is to enable mathematics to be served, received, and processed on the Web, just as HTML has enabled this functionality for text.

The W3C MathML Recommendation

Scalable Vector Graphics (SVG)

SVG is a language for describing two-dimensional graphics in XML.

SVG allows for three types of graphic objects: vector graphic shapes, images and text.

The feature set includes nested transformations, clipping paths, alpha masks, filter effects, template objects and extensibility.

Recommendation

The W3C SVG 1.2 Working Draft

Ink Markup Language (InkML)

InkML is an XML data format for representing digital ink data that is input with an electronic pen or stylus as part of a multimodal system.

The W3C InkML Working

Internationalization

The W3C Internationalization Activity has the goal of proposing and coordinating any techniques, conventions, guidelines and activities within the W3C and together with other organizations that allow and make it easy to use W3C technology worldwide, with different languages, scripts, and cultures.

W3C Internationalization Activity

Voice Browser Activity

W3C voice browser activity is about expanding the Web to allow people to interact via spoken commands and synthetic speech.

Voice Extensible Markup Language (VoiceXML)

Speech Synthesis Markup Language

Speech

Voice Browser Call Control (CCXML)

W3C Reference:

W3C Home Page


W3C Process

The W3C Process

The W3C standards approval process includes up to 7 different steps.

W3C Specification Approval Steps

When W3C is publishing a new Web standard, the specification has worked its way from an idea through a lot of refining processes including the following:

· W3C receives a Submission
· W3C publishes a Note
· W3C creates a Working Group
· W3C publishes a Working Draft
· W3C publishes a Candidate Recommendation
· W3C publishes a Proposed Recommendation
· W3C publishes a Recommendation

The next chapters of this section of W3Schools summarize the HTML, CSS, XML, XSL activities at the W3C, including status and timeline for each Web standard.

W3C Submissions

Any W3C member can submit a suggestion for a Web standard to the consortium. Most W3C Recommendations started as a submission to the consortium.

If a submission is within the W3C work area (or charter), the W3C will decide if they should start working to refine the suggestion.

W3C Notes

Often a submission to the W3C becomes a Note. A Note is a description of a suggestion refined as a public document.

A Note is made available by the W3C for discussion only. Publication of a Note indicates no endorsement by W3C. The content of a Note is edited by the member that submitted the Note, and not by the W3C. A Note may be updated, replaced, or rendered obsolete at any time. The publication of a Note does not indicate that the W3C has started any work related to the Note.

W3C Working Groups

When a submission is acknowledged by the W3C, a Working Group consisting of members and other interested parties is formed.

The Working Group will normally define a time schedule and issue a Working Draft of the proposed standard, describing the work in progress.

W3C Working Drafts

W3C Working Drafts are normally posted on the W3C Web site, along with an invitation for public comments.

A Working Draft indicates work in progress, but should not be used as reference material. The content may be updated, replaced, or rendered obsolete at any time.

W3C Candidate Recommendations

Some specifications are more complex than others, and might require more input, more time, and more testing from members and software vendors. Sometimes these specifications are published as Candidate Recommendations.

A Candidate Recommendation is also a "work in progress" and should not be used as reference material. The document may be updated, obsolete, and replaced at any time.

W3C Proposed Recommendations

A Proposed Recommendation represents the final stage of the work in the Working Group.

A Proposed Recommendation is still a "work in progress" and may still be updated, obsolete, and replaced. But even if it does not imply any official endorsement by the W3C, most often a Proposed Recommendation is close to the final Recommendation both in content and in time.

W3C Recommendations

W3C Recommendations have been reviewed by the W3C members, and have the W3C's director's stamp of approval.

A W3C Recommendation is considered a stable document and may be used as reference material.

The next chapters of this section of W3Schools summarize the HTML, CSS, XML, XSL activities at the W3C, including document status and timeline for each Web standard.

Reference


W3C RDF Activities

W3C RDF and OWL Activities

RDF and OWL are two important Semantic Web technologies.

The Semantic Web

The Semantic Web is a framework for asset management, enterprise integration, and the sharing of data on the web.

The Semantic Web is a framework for sharing data between companies, applications, enterprises, communities, and people, independent of platform and software.

RDF and OWL are key Semantic Web technologies.

RDF - Resource Description Framework

RDF is a language for presenting information to the World Wide Web.

RDF is a language for describing web resources, such as title, author, and copyright information, content description, availability schedules, and more.

If you want to learn more about RDF, please visit W3Schools' RDF Tutorial.

OWL - Web Ontology Language

OWL is a language for defining ontologies.

Ontology describes an area of knowledge. It can be used by people, or software, to share information about objects like automobiles, houses, medicine, books, production, financial transactions, etc.

OWL is designed to be used for processing information (instead of displaying the information).

If you want to learn more about OWL, please visit .

SPARQL - Query Language for RDF

SPARQL is a standardized query language for RDF data which offers developers a way to write queries across the wide range of RDF information on the web.

W3C Specifications and Timeline

Specification | Draft / Proposal | W3C Recommendation
RDF Primer |  | 2004
RDF Test Cases |  | 2004
RDF Concept |  | 10. Feb 2004
RDF Semantics |  | 10. Feb 2004
RDF Schema |  | 10. Feb 2004
RDF Syntax |  | 10. Feb 2004
OWL Overview |  | 10. Feb 2004
OWL Guide |  | 10. Feb 2004
OWL Reference |  |
OWL Syntax |  | 10. Feb
OWL Test Cases |  | 10. Feb 2004
OWL Use Cases |  | 10. Feb 2004
Parsing OWL in RDF | 21. Jan 2004 |
SPARQL Requirements | 25. Mar 2005 |
SPARQL Language | 06. Apr 2006 |


W3C XML Activities

W3C XML Schema Activities

XML Schema is an XML based alternative to DTD.

XML Schema Tutorial

To learn more about XML Schema, read our XML Schema tutorial.

XML Schema

XML 1.0 supports DTD for defining the structure of documents.

XML Schema has better support for applications, document structure, attributes, and data-typing.

Future versions of XML will rely on XML Schema for defining XML document types.

· XML Schema Structures specifies the XML Schema definition language.
· XML Schema Data types specifies extensible data types for XML.

W3C XML Specifications and Timeline

Specification | Draft / Proposal | W3C Recommendation
XML Schema |  | 02. May 2001
XML Schema Structures |  | 02. May 2001
XML Schema Datatypes |  |
XML Schema (2.Ed) |  | 28. Oct 2004
XML Schema Structures (2.Ed) |  | 28. Oct 2004
XML Schema Datatypes (2.Ed) |  | 28. Oct 2004
XML Schema Component Designators | 29. Mar 2005 |

W3C Reference:


W3C Multimedia Activities

W3C SMIL Activities

SMIL adds timing and media synchronization support to the web.

SMIL

SMIL (Synchronized Multimedia Integration Language) was designed to enable multimedia presentations on the web.

A SMIL presentation can be composed of audio, video, images, text, and other media types.

SMIL is an XML based HTML-like language.

You can read more about SMIL in our SMIL Tutorial.

HTML+TIME

HTML+TIME stands for Timed Interactive Multimedia Extensions for HTML. It is a proposal for adding SMIL 1.0 timing and synchronization support to HTML.

HTML+TIME was submitted to the W3C by Microsoft, Macromedia, Compaq/Digital and Digital Renaissance.

You can read more about HTML+TIME in our .

HTML+SMIL

HTML+SMIL (a modification of HTML+TIME) was included in an early SMIL 2.0 Working Draft.

When SMIL 2.0 became a W3C Recommendation, HTML+SMIL was removed from SMIL 2.0 and added as a separate Working Draft renamed XHTM+SMIL

XHTML+SMIL

XHTM+SMIL provides support for SMIL 2.0 functionality like animation, media, timing, synchronization, and transitions directly in XHTML.

XHTML+SMIL is currently a Note submitted to the W3C with the intention that it can be used as a basis to the work of integrating SMIL functionality into XHTML.

You can read more about XHTML+SMIL in our .

HTML/XHTML+SMIL History

15. June 1998

SMIL 1.0 became a W3C Recommendation.

18. September 1998

HTML+TIME was submitted to W3C by Microsoft, Macromedia, Compaq/Digital and Digital Renaissance as a proposal for adding SMIL 1.0 timing and synchronization support to HTML.

25. February 2000

HTML+TIME was added to the SMIL 2.0 Working Draft, renamed as HTML+SMIL.

22. June 2000

HTML+SMIL was removed from the SMIL 2.0 Working Draft.

07. August 2001

SMIL 2.0 became a W3C Recommendation

07. August 2001

HTML+SMIL became a separate Working Draft, renamed XHTML+SMIL.

31. January 2002

XHTML+SMIL was resubmitted as a W3C Note.

W3C Specifications and Timeline

Specification | Draft / Proposal | Recommendation
SMIL 1.0 |  | 15. Jun 1998
SMIL 2.0 |  | 07. Aug 2001
SMIL 2.0 (2.ED) |  | 13. Des 2005
SMIL 2.1 |  | 13. Dec 2005
HTML+TIME | 18. Sep 1998 |
HTML+SMIL | 22. Jun |
XHTML+SMIL | 07. Aug 2001 |
XHTML+SMIL Note | 31. Jan 2002 |

W3C Reference:


W3C Soap Activities

Web Services is about application to application communication.

SOAP is an XML based communication protocol between Web Services.

SOAP

SOAP (Simple Object Access Protocol) is a lightweight platform and language neutral communication protocol that allows programs to communicate via standard Internet HTTP.

To learn more about SOAP, read our SOAP tutorial.

SOAP 1.1

SOAP 1.1 was suggested in a note to W3C in May 2000 (by Developmentor, IBM, Lotus, Microsoft, and Userland), as a protocol for exchanging information in a distributed environment.

The W3C SOAP 1.1 document is only a NOTE available for discussion. The publication of the note indicates no endorsement by the W3C.

SOAP 1.2

The XML Protocol Working Group at W3C is currently working on SOAP 1.2.

The first working drafts were published 17. December 2001.

SOAP 1.2 was released as a W3C Recommendation 24. June 2003.

W3C Specifications and Timeline

Specification | Draft / Proposal | W3C Recommendation
SOAP 1.2 Primer |  | 2003
SOAP 1.2 Messaging |  | 24. Jun 2003
SOAP 1.2 Adjuncts |  | 24. Jun 2003
SOAP 1.2 Test Collection |  | 24. Jun
SOAP 1.2 Attachments | 08. Jun 2004 |
SOAP 1.2 Email Bindings | 03. Jul 2002 |
SOAP 1.2 Normalization | 08. Oct 2003 |
SOAP 1.2 Serialization | 08. Jun 2004 |
Web Services Addressing 1.0 - Core |  | 09. May 2006
Web Services Addressing 1.0 - SOAP Binding |  | 09. May

W3C Reference:


W3C WSDL Activities

Web Services is about application to application communication.

WSDL is an XML based language for describing Web Services.

WSDL

WSDL (Web Services Description Language) is an XML format for describing Web Services.

To learn more about WSDL, read our WSDL tutorial.

WSDL 1.1

WSDL 1.1 was suggested in a note to W3C in March 2001 (by Ariba, IBM and Microsoft) as an XML format for describing Web Services.

The note also described how to use WSDL in conjunction with SOAP 1.1, HTTP GET/POST, and MIME.

The W3C WSDL 1.1 document is only a NOTE available for discussion. The publication of the note indicates no endorsement by the W3C.

WSDL 1.2

The first working drafts were published 17. December 2001.

The latest working drafts were published 11. June 2003.

WSDL 2.0

The XML Protocol Working Group at W3C is currently working on WSDL 2.0.

Web Architecture

Simple Internet technologies are used to access the information space of the World Wide Web. These technologies are used to access information across languages, cultures, and media.

To preserve the properties of the World Wide Web as technologies evolve, W3C has created a recommendation for the core design components of the Web.

Architecture of the World Wide Web, Volume One is a W3C recommendation describing the standard protocols that support the identification of, and interaction between Web resources.

W3C Specifications and Timeline

Specification | Draft / Proposal | W3C Recommendation
WSDL 1.1 Note |  |
WSDL Usage Scenarios | 04. |
WSDL Requirements | 28. Oct 2002 |
WSDL Architecture |  |
WSDL Glossary | 11. Feb 2004 |
WSDL Usage Scenarios | Feb 2004 |
WSDL 1.2 Core Language | 11. Jun 2003 |
WSDL 1.2 Message Patterns | 11. Jun 2003 |
WSDL 1.2 Bindings | 11. Jun 2003 |
WSDL 2.0 Primer |  |
WSDL 2.0 Core Language | 27. Mar 2006 |
WSDL 2.0 Adjuncts | 27. Mar 2006 |
WSDL 2.0 SOAP 1.1 Binding | 27. Mar 2006 |
WSDL 2.0 RDF Mapping | 18. May 2006 |
WS Addressing Core |  | 09. May 2006
WS Addressing SOAP Binding |  | 09. May 2006
Web Architecture |  | 15. Dec 2004

W3C Reference:

W3C Web Services Home Page


W3C XHTML Activities

HTML is the lingua franca for publishing hypertext on the World Wide Web.

XHTML is the latest version of HTML.

XHTML Tutorial

To see how this Web Site was converted to XHTML, read our XHTML tutorial.

XHTML Versions

XHTML 1.0

XHTML 1.0 was released as a W3C Recommendation 20. January 2000.

XHTML 1.0 Second Edition

XHTML 1.0 Second Edition was released as a W3C Recommendation 1. August 2002. It is not a new version, but an update and a "bug fix".

About XHTML 1.0

XHTML 1.0 was the first major change to HTML since 1997, and a very important step on the way to create a standard that will provide richer web pages on a wider range of user agents (browsers), like desktop PCs, mobile (wireless) devices, and cell phones.

XHTML is an XML application with a clean migration path from HTML 4.01. W3C's first step was to reformulate HTML 4.01 into XML, resulting in XHTML 1.0. XHTML 1.0 relies on HTML 4.01 for the meanings of HTML tags.

The next step includes modularization of XHTML into smaller element collections, to make it easier to combine XHTML with other markup languages like vector graphics and multimedia.

Modularization of XHTML also gives reduced development costs, improved cooperation with other applications (like databases), easier communication with different user agents (browsers), and cleaner integration between HTML and different XML standards.

W3C XHTML Activities

XHTML 1.0

XHTML 1.0 is a reformulation of HTML 4.01 in XML.

To learn more about XHTML visit our tutorial.

XHTML 1.1 (Modular XHTML)

Small devices (like mobile devices) cannot support all XHTML functions. XHTML 1.1 divides the specification into modules with limited functionality. Small browsers can reduce their complexity by supporting only selected modules (but once a module has been chosen, all of its features must be supported).

XHTML 1.1 is a strict language. XHTML 1.1 is not backward compatible with HTML 4.

XHTML Basic

XHTML Basic is a small subset of XHTML 1.1. It contains only basic XHTML features like text structure, images, basic forms, and basic tables. It is designed for small browsers (like in handheld devices).

XHTML Events

With the support for the W3C Document Object Model level 2 in XHTML, event handlers can be attached to XHTML elements so that parent elements can handle events before and after child elements.

To learn more about the DOM, study our DOM tutorial.

XHTML Print

XHTML-Print is a part of XHTML 1.1 (Modular XHTML).

XHTML-Print is designed for mobile devices and low-cost printers that generally print from top to bottom of a page with no printing buffer and without a device specific printer driver.

XForms

With HTML forms, a user can visit a Web page, add information to the page, and submit the page to a Web server.

XForms are the successors to HTML forms, providing a much richer and presentation independent way of handling interactive Web transactions. Designed to be integrated with XHTML, we can expect that future e-commerce applications will demand the use of XForms.

To learn more about XForms, study our XForms tutorial.

XHTML Modularization

XHTML Modularization is about splitting XHTML 1.0 into a collection of small modules that provide specific functionality.

Modularization of XHTML 1.0 is implemented using the XML DTD (Document Type Definition)

Modularization of XHTML 2.0 will be implemented using XML Schemas.

To learn more about DTD, visit our DTD tutorial.

To learn more about XML Schemas, visit our Schema tutorial.

XHTML 2.0

XHTML 2.0 is a next generation markup language. The functionality is expected to remain similar to XHTML 1.1, but the markup language may be altered to conform to the requirements of XML standards like XML Linking and XML Schema.

XLink

XLink is a language for creating hyperlinks in XML documents. XLink is similar to HTML links - but it is a lot more powerful

XLink supports simple links (like HTML) and extended links (for linking multiple resources together).

You can learn more about XLink in our XLink tutorial.

HLink

HLink adds the ability to specify which attributes of elements represent hyperlinks in XHTML, and specifies how hyperlinks should be traversed.

HLink is an extension to XLink.

W3C HTML Specifications and Timeline

Specification | Draft /Proposal | W3C Recommendation
XHTML 1.0 |  | 26. Jan 2000
XHTML 1.0 Revision |  | 01. Aug 2002
XHTML 1.1 |  | 31. May 2001
XHTML Modules |  | 10. Apr 2001
XHTML Modules 1.1 |  |
XHTML Basic |  |
XHTML Basic 1.1 | 07. Jun 2006 |
XHTML Events |  | 14. Oct 2003
XHTML Print | 31. Jan 2006 | 20. Sep 2006
XHTML Media Types | 01. Aug 2002 |
XForms 1.0 |  |
XForms 1.0 (SE) |  | 14. Mar 2006
XForms 1.1 | 09. Dec 2005 |
XHTML 2.0 | 27. May 2005 |
XLink |  | 27. Jun 2001
HLink | 13. Sep 2002 |

W3C Reference:

W3C HTML Home Page


W3C XML Activities

XML was designed to describe, store, carry and exchange data.

XML 1.0 is the latest version of XML.

XML Tutorial

To learn more about XML, read our XML tutorial.

XML Versions

XML 1.0

XML 1.0 was released as a W3C Recommendation 10. February 1998.

XML 1.0 (Second Edition)

XML 1.0 (SE) was released as a W3C Recommendation 6. October 2000.

Second Edition is only a correction to XML 1.0 that incorporates the first-edition errata (bug fixes).

XML 1.0 (Third Edition)

Third Edition is only a correction to XML 1.0 that incorporates the first- and second-edition errata (bug fixes).

XML 1.1

XML 1.1 was released as a Working Draft 13. December 2001, and as a Candidate Recommendation 15. October 2002.

XML 1.1 allows almost any Unicode characters to be used in names.

Other W3C XML Technologies

XML Namespaces

XML namespaces defines a method for defining element and attribute names used in XML by associating them with URI references.

XML Linking (XLink, XPointer, and XML Base)

The XML Linking Language (XLink), allows you to insert links into XML documents.

The XML Pointer Language (XPointer), allows the links to address into specific parts of an XML document.

XML Base is a standard for defining a default reference to external XML resources (similar to <base> in HTML).

XInclude

XInclude is a mechanism for merging XML documents using elements, attributes, and URI references.

W3C XML Specifications and Timeline

Specification | Draft / Proposal | W3C Recommendation
XML 1.0 |  | 10. Feb 1998
XML 1.0 (2.Ed) |  |
XML 1.0 (3.Ed) |  | 04. Feb 2004
XML 1.1 |  | 04. Feb 2004
XML Namespaces |  | 14. Jan 1999
XML 1.1 Namespaces |  | 04. Feb 2004
XML Infoset |  | 24. Oct. 2001
XML Infoset (2.Ed) |  | 04. Feb. 2004
XML Base |  | 27. Jun 2001
XLink 1.0 |  | 27. Jun 2001
XPointer Framework |  | 25. Mar 2003
XPointer element() scheme |  | 25. Mar 2003
XPointer xmlns() scheme |  | 25. Mar 2003
XInclude 1.0 |  | 20. Dec 2004
XInclude 1.0 SE |  | 15. Nov 2006
XML Processing Model | 05. Apr 04 |

W3C Reference:

W3C XML Home Page


W3C XPath Activities

XPath is a language for selecting parts of an XML document.

XPath is designed to be used by XSLT, XQuery, and XPointer.

Tutorials

To learn more about XPath read our .

To learn more about XQuery read our .

To learn more about XSLT read our XSLT Tutorial.

XPath Versions

XPath 1.0

XPath 1.0 became a W3C Recommendation November 16, 1999.

XPath 2.0

XPath 2.0 became a W3C Recommendation January 23, 2007.

XPath 2.0 is a language derived from XPath 1.0 and XQuery. The XPath 2.0 and XQuery 1.0 are generated from a common source, sharing much of the same syntax, and much of the text is identical.

W3C XSL Specifications and Timeline

Specification | Draft / Proposal | W3C Recommendation
XPath 1.0 |  | 16. Nov 1999
XPath 2.0 Requirements | 03. Jun 2005 |
XPath 2.0 Language | 08. Jun 2006 | 23. Jan 2007
XPath 2.0 Functions | 08. Jun 2006 | Jan 2007
XPath 2.0 Data Model | 08. Jun 2006 | 23. Jan 2007
XPath 2.0 Semantics | 08. Jun 2006 | 23. Jan 2007
XPointer | 16. Aug 2002 |

W3C Reference:


W3C XQuery Activities

XQuery is a language for extracting data from XML documents.

Tutorials

To learn more about XQuery read our XQuery Tutorial.

XQuery Versions

XQuery 1.0

The XQuery Language supports query facilities to extract data from XML documents.

W3C XSL Specifications and Timeline

Specification | Draft / Proposal | W3C Recommendation
XQuery Requirements | 03. Jun 2005 |
XQuery Use Cases | 08. Jun 2006 |
XQuery 1.0 | 08. Jun 2006 | 23. Jan 2007
XQuery 1.0 Functions | 08. Jun 2006 | 23. Jan 2007
XQuery 1.0 Data Model | 08. Jun 2006 | 23. Jan 2007
XQuery 1.0 Semantics | 08. Jun 2006 | 23. Jan 2007
XQueryX |  | 23. Jan 2007

W3C Reference:

W3C XSL Home Page


W3C XSL Activities

Style sheets describe how documents are displayed, pronounced, or printed. The XSL language consists of three parts: XSLT, XPath, and XSL Formatting Objects.

XSL Tutorial

To learn more about XSL, read our XSL tutorial.

XSL Versions

XSL 1.0

XSL 1.0 was released as a W3C Recommendation October 15, 2001 as a language for expressing style sheets. It consisted of three parts: XSLT, XPath, and XSL Formatting Objects. An XSL style sheet specifies the presentation of a class of XML documents by describing how an instance of the class is transformed into an XML document that uses the formatting vocabulary.

XSLT 1.0

XSLT 1.0 became a W3C Recommendation November 16, 1999. XSLT is a language for transforming XML documents into other XML documents.

XSLT 2.0

XSLT 2.0 became a W3C Recommendation January 23, 2007.

XSL-FO (XSL Formatting Objects)

XSL Formatting Objects is an XML vocabulary for specifying formatting semantics. Formatting is the process of turning the result of an XSL transformation into a suitable output form for a reader or listener. No separate W3C document exists for XSL Formatting Objects, but a description can be found inside the XSL 1.0 Recommendation.

W3C XSL Specifications and Timeline

Specification | Draft / Proposal | W3C Recommendation
XSL 1.0 (XSL-FO) |  | 15. Oct 2001
XSL 1.1 |  | 05. Dec 2006
XSLT 1.0 |  |
XSLT 1.1 | 24. Aug 2001 |
XSLT 2.0 Requirements | 14. Feb 2001 |
XSLT 2.0 | 08. Jun 2006 | 23. Jan 2007

W3C Reference:

W3C XSL Home Page


WAP Introduction

Introduction to WAP

The WAP protocol was designed to show internet contents on wireless clients, like mobile phones.

What you should already know

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

· WWW, HTML and the basics of building Web pages
· JavaScript
· XML

If you want to study these subjects first, before you start reading about WAP and the wireless markup language WML, you can find the tutorials you need at W3Schools' Home Page.

What is WAP?

The wireless industry came up with the idea of WAP. The point of this standard was to show internet contents on wireless clients, like mobile phones.

· WAP stands for Wireless Application Protocol
· WAP is an application communication protocol
· WAP is used to access services and information
· WAP is inherited from Internet standards
· WAP is for handheld devices such as mobile phones
· WAP is a protocol designed for micro browsers
· WAP enables the creating of web applications for mobile devices.
· WAP uses the mark-up language WML (not HTML)
· WML is defined as an XML 1.0 application

The Wireless Application Protocol

The WAP protocol is the leading standard for information services on wireless terminals like digital mobile phones.

The WAP standard is based on Internet standards (HTML, XML and TCP/IP). It consists of a WML language specification, a WMLScript specification, and a Wireless Telephony Application Interface (WTAI) specification.

WAP is published by the WAP Forum, founded in 1997 by Ericsson, Motorola, Nokia, and Unwired Planet. Forum members now represent over 90% of the global handset market, as well as leading infrastructure providers, software developers and other organizations. You can read more about the WAP forum at our .

WAP Micro Browsers

To fit into a small wireless terminal, WAP uses a Micro Browser.

A Micro Browser is a small piece of software that makes minimal demands on hardware, memory and CPU. It can display information written in a restricted mark-up language called WML.

The Micro Browser can also interpret a reduced version of JavaScript called WMLScript.

What is WML?

WML stands for Wireless Markup Language. It is a mark-up language inherited from HTML, but WML is based on XML, so it is much stricter than HTML.

WML is used to create pages that can be displayed in a WAP browser. Pages in WML are called DECKS. Decks are constructed as a set of CARDS.

What is WMLScript?

WML uses WMLScript to run simple code on the client. WMLScript is a light JavaScript language. However, WML scripts are not embedded in the WML pages. WML pages only contains references to script URLs. WML scripts need to be compiled into byte code on a server before they can run in a WAP browser.

Visit our WMLScript tutorial to learn more about scripting in WML documents.

Examples of WAP use

· Checking train table information
· Ticket purchase
· Flight check in
· Viewing traffic information
· Checking weather conditions
· Looking up stock values
· Looking up phone numbers
· Looking up addresses
· Looking up sport results

FAQ about WAP

These are frequently asked question about WAP:

· What is WAP?
· Who is WAP for?
· How does WAP relate to standardization bodies?
· How is WAP related to Internet standards?
· What is the status of WAP?
· What is the future of WAP?

We will try to answer most of these questions. In the meantime read the answers at: .


WAP Tutorial

WAP / WML Tutorial

WAP Tutorial

wap

The WAP protocol was designed to show internet-contents on wireless clients, like mobile phones.

WML is the language used to create pages to be displayed in a WAP browser.

In our WAP tutorial you will learn about WAP and WML.

You will learn how to convert your HTML pages to pocket format, so that your information can be accessed from wireless clients, like mobile phones.

Start learning WAP / WML!

WML Reference

At W3Schools you will find a complete WML reference, including elements, attributes, entities, and more.

WML Reference


WML <access> tag

The <access> tag defines information about the access control of a WML deck.

Note: If the <access> tag is not set, any other decks/cards can access the deck.

Note: The <access> tag always goes inside the <head> tag. Each deck can have only one <access> tag.

Syntax

<head>

<access/>

</head>

Attributes

Attribute | Value | Description
domain | cdata | The URL of other decks that can access cards in the deck
path | cdata | The URL of other decks that can access cards in the deck
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

Access is limited to other decks/cards in www.w3schools.com:

<head>

<access domain="www.w3schools.com"/>

</head>

Access is limited to other decks/cards in www.w3schools.com/wap:

<head>

<access domain="www.w3Schools.com" path="/wap"/>

</head>


WML <a> tag

The <a> tag defines an anchor (a link), which allows you to jump from one card/deck to another.

Note: Whenever it is possible, use the <a> tag instead of the <anchor> tag.

Note: It is not allowed to nest anchors.

Syntax

<a href="somefile">

..text..

..image..

</a>

Attributes

Attribute | Value | Description
href | url | REQUIRED. Defines where to go when the user selects the link
title | cdata | Defines a text identifying the link
xml:lang | language_code | Sets the language used in the element
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="A Tag">

<p>

<a href="test.wml">Next page</a>

</p>

</card>

</wml>


WML <anchor> tag

The <anchor> tag defines an anchor (a link), which allows you to jump from one card/deck to another. The <anchor> tag always has a task ("go", "prev", or "refresh") specified. The task defines what to do when the user selects the link.

Note: Whenever it is possible, use the <a> tag instead of the <anchor> tag.

Note: It is not allowed to nest anchors.

Syntax

<anchor>

..text..

..image..

..task..

</anchor>

Attributes

Attribute | Value | Description
title | cdata | Defines a text identifying the link
xml:lang | language_code | Sets the language used in the element
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Anchor Tag">

<p>

<anchor>Next page

<go href="test.wml"/>

</anchor>

</p>

</card>

</wml>


WML <br> tag

The <br> tag defines a line break.

Syntax

<br/>

Attributes

Attribute | Value | Description
xml:lang | language_code | Sets the language used in the element
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Line Breaks">

<p>

This is a paragraph<br/>with a line break

</p>

</card>

</wml>


WML <card> tag

A WML deck contains one or more cards. The <card> tag defines a card. A card can contain text, markup, links, input-fields, tasks, images and more.

Note: The "id" attribute of the card element can be used as an anchor.

Syntax

<card>

..text..

..links..

..images..

</card>

Attributes

Attribute | Value | Description
newcontext | true false | Re-initializes the browser context. Default is "false"
ordered | true false | Specifies the order of card content. When ordered is set to "true" the browser will display the content in a fixed order. When ordered is set to "false" the users will decide the order as they navigate between content. Default is "true"
title | cdata | The title of the card
xml:lang | language_code | Sets the language used in the element
onenterbackward | url | Occurs when the user navigates into a card using a "prev" task
onenterforward | url | Occurs when the user navigates into a card using a "go" task
ontimer | url | Occurs when a "timer" expires
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card id="no1" title="Card 1">

<p>Hello World!</p>

</card>

<card id="no2" title="Card 2">

<p>Welcome to our WAP Tutorial!</p>

</card>

</wml>


WML comment tag

WML <!--...--> tag

The comment tag is used to insert a comment in the WML 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 moment.

This code: | Produces this output:
<!--This text is a comment--> <p>This is a regular paragraph</p> | This is a regular paragraph


WML <do> tag

The <do> tag can be used to activate a task when the user clicks on a word/phrase on the screen.

A <do> tag can also be nested inside a <template> tag. The <do> tag will then apply to all cards in the deck.

Syntax

<do type="type">

..task..

</do>

Attributes

Attribute | Value | Description
type | accept prev help reset options delete unknown x-* vnd.* | REQUIRED. Defines the type of the "do" element
label | cdata | Creates a label for the "do" element
name | nmtoken | Defines a name for the "do" element
optional | true false | If set to true, the browser ignores this element. If set to false, the browser does not ignore this element. Default is "false"
xml:lang | language_code | Sets the language used in the element
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

The example below uses a <do> tag inside a <template> tag to add a "Back" link to each card:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<template>

<do name="back" type="prev" label="Back">

<prev/>

</do>

</template>

<card id="card1" title="Card 1">

<p>

Hello World!

</p>

</card>

<card id="card2" title="Card 2">

<p>

From W3Schools!

</p>

</card>

</wml>

Note

If a single <card> contains multiple <do> elements of type="accept", and these <do> elements are not named, WML might fail to compile and no page is displayed.

This is caused because the default name when no name is specified is the element type, in this case accept.


WML <fieldset> tag

The <fieldset> tag is used to group together related elements in a card.

Syntax

<fieldset>

..the items to group together..

</fieldset>

Attributes

Attribute | Value | Description
title | cdata | Sets a title for the fieldset
xml:lang | language_code | Sets the language used in the element
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Fieldset">

<p>

<fieldset title="CD Info">

Title: <input name="title" type="text"/><br/>

Prize: <input name="price" type="text"/>

</fieldset>

</p>

</card>

</wml>


WML <go> tag

The <go> task represents the action of going to a new card. Where to go is specified with the href attribute.

Note: The content for the <go> tag is optional.

Note: The <go> tag can contain <postfield> or <setvar> tags.

Syntax

<go href="someurl">

..<postfield>..

..<setvar>..

</go>

Attributes

Attribute

Value

Description

href

url

REQUIRED. The URL of the new card

accept-charset

charset_list

A comma or space separated list of character encoding the server must be able to process. The default value is "unknown"

method

post

get

Sets how to send the data to the server. Default method is get.

When you use method="get", the data is sent as an request with ?data appended to the url. The disadvantages of get is that it can be used only for a limited amount of data, and if you send sensitive information it will be displayed on the screen and saved in the web server's logs.

With method="post", the data is sent as an request with the data sent in the body of the request. This method has no limit, and sensitive information is not visible

sendreferer

true

false

If set to true, the browser sends the URL of the current deck with the request, which allow servers to perform simple access control on decks, based on which decks are linking to them. Default is "false"

class

cdata

Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space

id

id

Sets a unique name for the element

Examples

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card>

<p>

<anchor>

Go To Card 2

<go href="#card2">

 <setvar name="x" value="30"/>

</go>

</anchor>

</p>

</card>

</wml>

A <go> tag with no content:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card>

<p>

<anchor>

Go To Test

<go href="test.wml"/>

</anchor>

</p>

</card>

</wml>


WML <head> tag

The <head> tag contains information about the document.

Note: The following tags can go in the head element: <access> and <meta>.

Syntax

<head>

..<access>..

..<meta>..

</head>

Attributes

Attribute | Value | Description
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<head>

 <access domain="www.w3schools.com"/>

 <meta name="keyword" content="WAP"/>

</head>

....

....

</wml>


WML <img> tag

The <img> tag defines an image.

Note: The image must be in a .wbmp format.

Syntax

<img src="somefile.wbmp" alt="sometext"/>

Attributes

Attribute | Value | Description
align | top middle bottom | Aligns the image. Default is "bottom"
alt | cdata | REQUIRED. Sets an alternate text to be displayed if the image is not displayed
height | px % | Sets the height of the image. If you specify the value in pixels, the syntax is "120", not "120px"
hspace | px % | Sets white space to the left and right of the image. If you specify the value in pixels, the syntax is "10", not "10px". Default is "0".
localsrc | cdata | Sets an alternate representation for the image. If this attribute is set, the browser will use it instead of the "src" attribute.
src | url | REQUIRED. The path to the image. Must be a .wbmp file
vspace | px % | Sets white space above and below the image. If you specify the value in pixels, the syntax is "10", not "10px". Default is "0"
width | px % | Sets the width of the image. If you specify the value in pixels, the syntax is "120", not "120px"
xml:lang | language_code | Sets the language used in the element
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Image">

<p>

An image:

<img src="stickman.wbmp" alt="Stickman"/>

</p>

</card>

</wml>


WML <input> tag

The <input> tag defines an input field (a text field where the user can enter some text).

Syntax

<input name="somename"/>

Attributes

Attribute

Value

Description

name

nmtoken

REQUIRED. The name of the variable that is set with the result of the user's input

emptyok

true

false

Sets whether the user can leave the input field blank or not. Default is "false"

format

A

a

N

X

x

M

m

*f

nf

Sets the data format for the input field. Default is "*M".

A = uppercase alphabetic or punctuation characters

a = lowercase alphabetic or punctuation characters

N = numeric characters

X = uppercase characters

x = lowercase characters

M = all characters

m = all characters

*f = Any number of characters. Replace the f with one of the letters above to specify what characters the user can enter

nf = Replace the n with a number from 1 to 9 to specify the number of characters the user can enter. Replace the f with one of the letters above to specify what characters the user can enter

maxlength

number

Sets the maximum number of characters the user can enter in the field

size

number_of_char

Sets the width of the input field

tabindex

number

Sets the tabbing position for the input field

title

cdata

Sets a title for the input field

type

text

password

Indicates the type of the input field. The default value is "text"

value

cdata

Sets the default value of the variable in the "name" attribute

xml:lang

language_code

Sets the language used in the element

class

cdata

Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space

id

id

Sets a unique name for the element

Examples

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Input">

<p>

Name: <input name="name" size="15"/><br/>

Age:  <input name="age" size="15" format="*N"/><br/>

Sex:  <input name="sex" size="15"/>

</p>

</card>

</wml>


WML <meta> tag

The <meta> tag provides meta-information about the WML document.

Note: The <meta> tag always goes inside the head element.

Syntax

<head>

<meta/>

</head>

Attributes

Attribute | Value | Description
content | cdata | Should specify a description of the name attribute
forua | true false | Specifies if the meta data is sent to the browser. If set to true the meta data must be sent to the browser
http-equiv | cdata | Sets whether the content of the <meta> tag is bound to an http response header
name | cdata | Should specify a name for something you want to describe on the page. Could be "keywords", "author", etc.
scheme | cdata | Specifies the structure used to translate the meta data
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<head>

<meta name="keyword" content="WAP"/>

<meta http-equiv="cache-control" content="no-cache"/>

</head>

....

</wml>


WML <noop> tag

The <noop> task says that nothing should be done (noop stands for "no operation"). This tag is used to prevent an event from occurring.

Note: The <noop> tag can be inside a <do> or an <onevent> tag.

Syntax

<noop/>

Attributes

Attribute | Value | Description
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Example

The example below uses a <do> tag to add a "Back" link to the card. When the user clicks on the "Back" link, he or she should be taken back to the previous card. But the <noop> tag prevents this operation; when the user clicks on the "Back" link nothing will happen:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card>

<p>

<do type="prev" label="Back">

<noop/>

</do>

</p>

</card>

</wml>


WML <onevent> tag

The <onevent> tag contains code to be executed when one of the following events occurs: onenterbackward, onenterforward, onpick, ontimer.

Syntax

<onevent type="type">

..code..

</onevent>

Attributes

Attribute | Value | Description
type | onenterbackward onenterforward onpick ontimer | REQUIRED. Specifies the type of the "onevent" element. onenterbackward - Triggered when a <prev> goes to a previous card onenteredforward - Triggered when a <go> goes to a card onpick - Triggered when an item is selected/unselected ontimer - Triggered when a timer expires
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

The example below uses the <onevent> tag to always navigate to card1 when an onenterbackward event occurs:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<template>

<onevent type="onenterbackward">

<go href="#card1"/>

</onevent>

</template>

<card id="card1" title="Card 1">

<p>

Hello World!

</p>

</card>

<card id="card2" title="Card 2">

<p>

From W3Schools!

</p>

</card>

</wml>


WML <optgroup> tag

The <optgroup> tag defines a group of options in a selectable list.

Note: The <optgroup> tag must go inside the select element.

Syntax

<select>

<optgroup>

<option>text</option>

<option>text</option>

</optgroup>

<optgroup>

<option>text</option>

<option>text</option>

</optgroup>

</select>

Attributes

Attribute | Value | Description
title | cdata | Sets a title for the optgroup element
xml:lang | language_code | Sets the language used in the element
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Selectable List">

<p>

<select>

 <optgroup title="HTML Tutorials">

  <option value="html">HTML Tutorial</option>

  <option value="css">CSS Tutorial</option>

  <option value="dhtml">XHTML Tutorial</option>

 </optgroup>

 <optgroup title="XML Tutorials">

  <option value="xml">XML Tutorial</option>

  <option value="xsl">XSL Tutorial</option>

  <option value="xforms">XForms Tutorial</option>

 </optgroup>

</select>

</p>

</card>

</wml>


WML <option> tag

The <option> tag defines an option in a selectable list.

The selectable list is created with the <select> tag.

Syntax

<option>

..text

..<img>

..<onevent>

</option>

Attributes

Attribute | Value | Description
onpick | url | Sets what is going to happen when an user selects an item
title | cdata | Sets a title for the option
value | cdata | Sets the value to be used when setting the "name" variable in the select element
xml:lang | language_code | Sets the language used in the element
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Selectable List">

<p>

<select>

<option value="htm">HTML Tutorial</option>

<option value="xml">XML Tutorial</option>

<option value="wap">WAP Tutorial</option>

</select>

</p>

</card>

</wml>


WML <p> tag

The <p> tag defines a paragraph.

Syntax

<p>

..text..

..images..

..links..

</p>

Attributes

Attribute | Value | Description
align | left right center | Aligns the paragraph. Default is "left"
mode | wrap nowrap | Sets whether a paragraph should wrap lines or not.
xml:lang | language_code | Sets the language used in the element
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Paragraph">

<p>

This is a paragraph

</p>

</card>

</wml>


WML <postfield> tag

The <postfield> tag contains information to be sent to the server along with a <go> tag.

Syntax

<postfield name="somename" value="somevalue"/>

Attributes

Attribute | Value | Description
name | cdata | REQUIRED. The name of the field
value | cdata | REQUIRED. The value of the field
class | class_name | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id_name | Sets a unique name for the element

Example

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card>

<p>

Click OK to Send

<do type="accept">

<go href="test.wml" method="post">

 <postfield name="i" value="2"/>

 <postfield name="j" value="30"/>

</go>

</do>

</p>

</card>

</wml>

The <postfield> tag can also be used with the get method. Note: If you use this method, the fields and their values are added to the end of the URL:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card>

<p>

Click OK to Send

<do type="accept">

<go href="test.wml" method="get">

 <postfield name="i" value="2"/>

 <postfield name="j" value="30"/>

</go>

</do>

</p>

</card>

</wml>


WML <prev> tag

The <prev> task represents the action of returning to the previous card visited. If no previous URL exists, specifying <prev> has no effect.

Note: The content between the <prev>..</prev> tags is optional. If you do not specify any content, you must use <prev/>.

Syntax

<prev>

..<setvar>..

</prev>

Attributes

Attribute | Value | Description
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Example

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card>

<p>

<do type="accept" label="Back">

<prev>

 <setvar name="x" value="30"/>

</prev>

</do>

</p>

</card>

</wml>

A <prev> tag with no content:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card>

<do type="accept" label="Back">

<prev/>

</do>

<p>

Hello World!

</p>

</card>

</wml>


WML <refresh> tag

The <refresh> task refreshes some specified card variables. If any of the variables are shown on the screen, this task also refreshes the screen.

Note: The <refresh> tag can be nested inside an <anchor>, <do>, or <onevent> tag.

Syntax

<refresh>

..<setvar>..

</refresh>

Attributes

Attribute | Value | Description
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

The example below uses an <anchor> tag to add a "Refresh this page" link to the card. When the user clicks on the link, he or she refreshes the page and the value of the variable x will be set to 30:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card>

<p>

<anchor>

Refresh this page

<go href="thispage.wml"/>

<refresh>

 <setvar name="x" value="30"/>

</refresh>

</anchor>

</p>

</card>

</wml>


WML <select> tag

The <select> tag defines a selectable list.

Note: The <option> tag is used to define the options in the selectable list.

Syntax

<select>

<option>text</option>

<option>text</option>

</select>

Attributes

Attribute | Value | Description
iname | nmtoken | Names the variable that is set with the index result of the selection
ivalue | cdata | Sets the pre-selected option element
multiple | true false | Sets whether multiple items can be selected. Default is "false"
name | nmtoken | Names the variable that is set with the result of the selection
tabindex | number | Sets the tabbing position for the select element
title | cdata | Sets a title for the list
value | cdata | Sets the default value of the variable in the "name" attribute
xml:lang | language_code | Sets the language used in the element
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Selectable List">

<p>

<select>

<option value="htm">HTML Tutorial</option>

<option value="xml">XML Tutorial</option>

<option value="wap">WAP Tutorial</option>

</select>

</p>

</card>

</wml>


WML <setvar> tag

The <setvar> tag sets a variable to a specified value in a <go>, <prev>, or <refresh> task.

Syntax

<setvar name="somename" value="somevalue"/>

Attributes

Attribute | Value | Description
name | cdata | REQUIRED. Sets the name of the variable
value | cdata | REQUIRED. Sets the value of the variable
class | class_name | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id_name | Sets a unique name for the element

Examples

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card>

<p>

<anchor>

Go To Card 2

<go href="#card2">

 <setvar name="x" value="30"/>

</go>

</anchor>

</p>

</card>

</wml>


WML <table> tag

The <table> tag defines a table.

Note: The <table> tag is used together with the <tr> and <td> tag to create a table.

Note: The number attribute is required. A value of zero is not allowed.

Note: WML tables have no borders.

Syntax

<table columns="a number">

..<tr>..

..<td>..

</table>

Attributes

Attribute | Value | Description
columns | number | REQUIRED. Sets the number of columns in the table
align | c l r | Aligns the text in a column. Specify a list of the align values, one for each column.
title | cdata | Sets a title for the table
xml:lang | language_code | Sets the language used in the element
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Table">

<p>

<table columns="3">

<tr>

 <td>Cell 1</td>

 <td>Cell 2</td>

 <td>Cell 3</td>

</tr>

</table>

</p>

</card>

</wml>


WML <td> tag

The <td> tag defines a table cell.

Note: This element must go inside the tr element.

Syntax

<tr>

<td>..content..</td>

</tr>

Attributes

Attribute | Value | Description
xml:lang | language_code | Sets the language used in the element
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Table">

<p>

<table columns="3">

<tr>

 <td>Cell 1</td>

 <td>Cell 2</td>

 <td>Cell 3</td>

</tr>

</table>

</p>

</card>

</wml>


WML <template> tag

The <template> tag defines a template for all the cards in a deck. The "code" in the <template> tag is added to each card in the deck.

Note: You can specify only one <template> tag for each deck.

Note: This tag can only contain <do> and <onevent> tags.

Syntax

<template>

..<do>..

..<onevent>..

</template>

Attributes

Attribute | Value | Description
onenterbackward | url | Occurs when the user navigates into a card using a "prev" task
onenterforward | url | Occurs when the user navigates into a card using a "go" task
ontimer | url | Occurs when the "timer" expires
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

The example below uses the <do> tag to add a "back" link to each card:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<template>

<do type="prev" label="Back">

<prev/>

</do>

</template>

<card id="card1" title="Card 1">

<p>

<a href="#card2">Go to Card 2</a>

</p>

</card>

<card id="card2" title="Card 2">

<p>

<a href="#card3">Go to Card 3</a>

</p>

</card>

<card id="card3" title="Card 3">

<p>

Hello World!

</p>

</card>

</wml>


WML Text Formatting tags

These tags can affect the layout of a text:

<b> | Defines bold text
<big> | Defines big text
<em> | Defines emphasized text
<i> | Defines italic text
<small> | Defines small text
<strong> | Defines strong text
<u> | Defines underlined text

Attributes

Attribute | Value | Description
xml:lang | language_code | Sets the language used in the element
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Formatting">

<p>

<em>emphasized text</em><br/>

<strong>strong text</strong><br/>

<b>bold text</b><br/>

<i>italic text</i><br/>

<u>underlined text</u><br/>

<big>big text</big><br/>

<small>small text</small>

</p>

</card>

</wml>


WML <timer> tag

The <timer> tag defines a card timer. The timer starts when the card is entered, and stops when you exit the card.

Note: It is not allowed with more than one timer element per card.

Note: The time unit of the timer is 1/10 of a second.

Note: This tag can be used with <card>, <onevent>, and <template> tags.

Syntax

<timer value="somevalue"/>

Attributes

Attribute | Value | Description
value | cdata | REQUIRED. Sets the default value of the variable defined in the "name" attribute
name | nmtoken | Names the variable that is set with the value of the timer
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

The example below will display "Hello World!" for 3 seconds, and then take you to the file "test.wml":

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card ontimer="test.wml">

<timer value="30"/>

<p>Hello World!</p>

</card>

</wml>


WML <tr> tag

The <tr> tag defines a table row.

Note: This element must go inside the table element.

Syntax

<table columns="number">

<tr>

<td>..</td>

</tr>

</table>

Attributes

Attribute | Value | Description
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Table">

<p>

<table columns="3">

<tr>

 <td>Cell 1</td>

 <td>Cell 2</td>

 <td>Cell 3</td>

</tr>

</table>

</p>

</card>

</wml>


WML tag

WML <wml> tag

The <wml> tag defines a WML deck. This tag contain cards and information about the WML document.

Note: A WML document must contain an XML declaration and a DTD.

Syntax

<wml>

..text..

..tables..

..links..

..tasks..

..other elements..

</wml>

Attributes

Attribute | Value | Description
xml:lang | language_code | Sets the language used in the element
class | cdata | Sets a class name for the element. The class name is case sensitive. An element can be connected to multiple classes. Multiple class names within the class attribute are separated by white space
id | id | Sets a unique name for the element

Examples

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card id="no1" title="Card 1">

<p>Hello World!</p>

</card>

</wml>


WAP Basics

WAP Homepages

WAP homepages are not very different from HTML homepages. The markup language used for WAP is WML (Wireless Markup Language). WML uses tags - just like HTML - but the syntax is stricter and conforms to the XML 1.0 standard.

WML pages have the extension *.WML, just like HTML pages have the extension *.HTML.

WML Tags

WML is mostly about text. Tags that would slow down the communication with handheld devices are not a part of the WML standard. The use of tables and images is strongly restricted.

Since WML is an XML application, all tags are case sensitive (<wml> is not the same as <WML>), and all tags must be properly closed.

WML Decks and Cards

WML pages are called DECKS. They are constructed as a set of CARDS, related to each other with links. When a WML page is accessed from a mobile phone, all the cards in the page are downloaded from the WAP server. Navigation between the cards is done by the phone computer - inside the phone - without any extra access trips to the server.

Example WML document:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card id="HTML" title="HTML Tutorial">

<p>

Our HTML Tutorial is an award winning

tutorial from W3Schools.

</p>

</card>

<card id="XML" title="XML Tutorial">

<p>

Our XML Tutorial is an award winning

tutorial from W3Schools.

</p>

</card>

</wml>

As you can see from the example, the WML document is an XML document. The DOCTYPE is defined to be wml, and the DTD is accessed at www.wapforum.org/DTD/wml_1.1.xml.

The document content is inside the <wml>...</wml> tags. Each card in the document is inside <card>...</card> tags, and actual paragraphs are inside <p>...</p> tags. Each card element has an id and a title.


WAP Demo

nokia6610i

Click on the cell phone to start the demo!

Note: This WAP Demo requires Internet Explorer 5.0 or higher!

Compiling WML Code

To test and compile your WML code, you can download the Nokia Mobile Internet Toolkit for free. The Nokia Mobile Internet Toolkit supports the complete WAP 2.0 specification, including XHTML and CSS.

If you place WML code on your IIS or Apache server, you don't need to compile it. This is a job for the WAP Gateway. Simply host your native WML code on your server.


WAP Forum / The Open Mobile Alliance (OMA)

WAP Forum / The Open Mobile Alliance

The Wireless Application Protocol (WAP) Forum developed the de-facto world standard for wireless information and telephony services on digital mobile phones and other wireless terminals. The WAP Forum published an open, global wireless protocol specification based on existing Internet standards, such as XML and IP, for all wireless networks.

The WAP Forum has consolidated into the Open Mobile Alliance (OMA) and does no longer exists as an independent organization.

The specification work from WAP continues within OMA and can be found at:

http://www.openmobilealliance.org/tech/affiliates/wap/wapindex.html

The Open Mobile Alliance (OMA) is the leading industry forum for developing market driven, interoperable mobile service enablers.

OMA was formed in June 2002 by nearly 200 companies including the world’s leading mobile operators, device and network suppliers, information technology companies and content and service providers. The fact that the whole value chain is represented in OMA marks a change in the way specifications for mobile services are done. Rather than keeping the traditional approach of organizing activities around "technology silos", with different standards and specifications bodies representing different mobile technologies, working independently, OMA is aiming to consolidate into one organization all specification activities in the service enabler space.

You can read more about OMA at: http://www.openmobilealliance.org/about_OMA/index.html

OMA Members

For a full OMA membership list go to: http://member.openmobilealliance.org/Common_display/currentmembers.asp


WAP Pages on W3schools

Access W3Schools.com from your WAP phone

nokia6610i

If you have a WAP enabled phone, you can access the WAP pages on www.W3Schools.com.

Turn on your WAP phone and enter the following address:

http://www.w3schools.com/wap.wml

The web address above contains links to:

· W3Schools' HTML 4.01 Reference
· W3Schools' Web Building Glossary


WAP Software

WAP Company

Symbian

Symbian was established as a private independent company in June 1998 and is owned by Ericsson, Nokia, Matsushita (Panasonic), Motorola, Psion, Siemens and Sony Ericsson. Symbian supplies the advanced, open, standard operating system - Symbian OS - for data-enabled mobile phones.

MobileDev - Wireless Application Development

MobileDev is the first Wireless Development Environment (WDE) specifically for WAP Internet applications. Its innovative open-ended development model integrates a graphical application mapper with a wizard interface and a rich tool set. MobileDev supports WAP technologies like WML, HDML, Microsoft Active Server Pages (ASP), Perl and Java Server Pages (JSP).

Using the GUI application mapper to show the relationships between objects, developers can quickly outline the components of a WAP application. Then they can take advantage of wizards that generate Decks and Cards in both WML and HDML, and use MobileDev's code builder to write WML/HDML syntax that complements the wizard-generated code. The integration of the application mapper with wizards and the code builder provides a seamless WDE that delivers results fast.

MobileDev comes complete with its own powerful integrated runtime engine, MobileDev Server Script. Server Script can quickly create prototypes or build full-blown business WAP applications that can be natively connected to an RDBMS. MobileDev WDE is also designed to support development in ASP, JSP, Perl or other template-based server technologies.


WML DTD

The WML DTD

The Complete WML DTD:

<!--

Wireless Markup Language (WML) Document Type Definition.

Copyright Wireless Application Protocol

Forum Ltd., 1998,1999.

                    All rights reserved.

WML is an XML language.  Typical usage:

 <?xml version="1.0"?>

 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

        "http://www.wapforum.org/DTD/wml_1.1.xml">

 <wml>

 ...

 </wml>

Terms and conditions of use are

available from the Wireless

Application Protocol Forum Ltd. web site at

http://www.wapforum.org/docs/copyright.htm.

-->

<!ENTITY % length  "CDATA">

<!-- [0-9]+ for pixels or [0-9]+"%"

 for percentage length -->

<!ENTITY % vdata   "CDATA">

<!-- attribute value possibly containing

 variable references -->

<!ENTITY % HREF    "%vdata;">

<!-- URI, URL or URN designating a

 hypertext node. May contain variable references -->

<!ENTITY % boolean "(true|false)">

<!ENTITY % number  "NMTOKEN">

<!-- a number, with format [0-9]+ -->

<!ENTITY % coreattrs  "id    ID     #IMPLIED

                     class CDATA  #IMPLIED">

<!ENTITY % emph

"em | strong | b | i | u | big | small">

<!ENTITY % layout  "br">

<!ENTITY % text     "#PCDATA | %emph;">

<!-- flow covers "card-level" elements,

such as text and images -->

<!ENTITY % flow

"%text; | %layout; | img | anchor | a | table">

<!-- Task types -->

<!ENTITY % task   "go | prev | noop | refresh">

<!-- Navigation and event elements -->

<!ENTITY % navelmts "do | onevent">

<!--============= Decks and Cards =============-->

<!ELEMENT wml ( head?, template?, card+ )>

<!ATTLIST wml

xml:lang        NMTOKEN        #IMPLIED

%coreattrs;

>

<!-- card intrinsic events -->

<!ENTITY % cardev

"onenterforward  %HREF;          #IMPLIED

onenterbackward %HREF;          #IMPLIED

ontimer         %HREF;          #IMPLIED"

>

<!-- card field types -->

<!ENTITY % fields

"%flow; | input | select | fieldset">

<!ELEMENT card (onevent*, timer?, (do | p)*)>

<!ATTLIST card

title           %vdata;       #IMPLIED

newcontext      %boolean;     "false"

ordered         %boolean;     "true"

xml:lang        NMTOKEN       #IMPLIED

%cardev;

%coreattrs;

>

<!--============= Event Bindings =============-->

<!ELEMENT do (%task;)>

<!ATTLIST do

type         CDATA       #REQUIRED

label        %vdata;     #IMPLIED

name         NMTOKEN     #IMPLIED

optional     %boolean;   "false"

xml:lang     NMTOKEN     #IMPLIED

%coreattrs;

>

<!ELEMENT onevent (%task;)>

<!ATTLIST onevent

type         CDATA       #REQUIRED

%coreattrs;

>

<!--======== Deck-level declarations ========-->

<!ELEMENT head ( access | meta )+>

<!ATTLIST head

%coreattrs;

>

<!ELEMENT template (%navelmts;)*>

<!ATTLIST template

%cardev;

%coreattrs;

>

<!ELEMENT access EMPTY>

<!ATTLIST access

domain       CDATA       #IMPLIED

path         CDATA       #IMPLIED

%coreattrs;

>

<!ELEMENT meta EMPTY>

<!ATTLIST meta

http-equiv     CDATA      #IMPLIED

name           CDATA      #IMPLIED

forua          %boolean;  #IMPLIED

content        CDATA      #REQUIRED

scheme         CDATA      #IMPLIED

%coreattrs;

>

<!--================ Tasks ================-->

<!ELEMENT go (postfield | setvar)*>

<!ATTLIST go

href            %HREF;           #REQUIRED

sendreferer     %boolean;       "false"

method          (post|get)      "get"

accept-charset  CDATA           #IMPLIED

%coreattrs;

>

<!ELEMENT prev (setvar)*>

<!ATTLIST prev

%coreattrs;

>

<!ELEMENT refresh (setvar)*>

<!ATTLIST refresh

%coreattrs;

>

<!ELEMENT noop EMPTY>

<!ATTLIST noop

%coreattrs;

>

<!--============= postfield =============-->

<!ELEMENT postfield EMPTY>

<!ATTLIST postfield

name         %vdata;           #REQUIRED

value        %vdata;           #REQUIRED

%coreattrs;

>

<!--============= variables =============-->

<!ELEMENT setvar EMPTY>

<!ATTLIST setvar

name         %vdata;           #REQUIRED

value        %vdata;           #REQUIRED

%coreattrs;

>

<!--============= Card Fields =============-->

<!ELEMENT select (optgroup|option)+>

<!ATTLIST select

title        %vdata;           #IMPLIED

name         NMTOKEN           #IMPLIED

value        %vdata;           #IMPLIED

iname        NMTOKEN           #IMPLIED

ivalue       %vdata;           #IMPLIED

multiple     %boolean;         "false"

tabindex     %number;          #IMPLIED

xml:lang     NMTOKEN           #IMPLIED

%coreattrs;

>

<!ELEMENT optgroup (optgroup|option)+ >

<!ATTLIST optgroup

title      %vdata;    #IMPLIED

xml:lang   NMTOKEN    #IMPLIED

%coreattrs;

>

<!ELEMENT option (#PCDATA | onevent)*>

<!ATTLIST option

value      %vdata;    #IMPLIED

title      %vdata;    #IMPLIED

onpick     %HREF;     #IMPLIED

xml:lang   NMTOKEN    #IMPLIED

%coreattrs;

>

<!ELEMENT input EMPTY>

<!ATTLIST input

name       NMTOKEN           #REQUIRED

type       (text|password)   "text"

value      %vdata;           #IMPLIED

format     CDATA             #IMPLIED

emptyok    %boolean;         "false"

size       %number;          #IMPLIED

maxlength  %number;          #IMPLIED

tabindex   %number;          #IMPLIED

title      %vdata;           #IMPLIED

xml:lang   NMTOKEN           #IMPLIED

%coreattrs;

>

<!ELEMENT fieldset (%fields; | do)* >

<!ATTLIST fieldset

title           %vdata;      #IMPLIED

xml:lang        NMTOKEN      #IMPLIED

%coreattrs;

>

<!ELEMENT timer EMPTY>

<!ATTLIST timer

name       NMTOKEN           #IMPLIED

value      %vdata;           #REQUIRED

%coreattrs;

>

<!--============= Images =============-->

<!ENTITY % IAlign "(top|middle|bottom)" >

<!ELEMENT img EMPTY>

<!ATTLIST img

alt        %vdata;      #REQUIRED

src        %HREF;       #REQUIRED

localsrc   %vdata;      #IMPLIED

vspace     %length;     "0"

hspace     %length;     "0"

align      %IAlign;     "bottom"

height     %length;     #IMPLIED

width      %length;     #IMPLIED

xml:lang   NMTOKEN      #IMPLIED

%coreattrs;

>

<!--============= Anchor =============-->

<!ELEMENT anchor

( #PCDATA | br | img | go | prev | refresh )*>

<!ATTLIST anchor

title        %vdata;      #IMPLIED

xml:lang     NMTOKEN      #IMPLIED

%coreattrs;

>

<!ELEMENT a ( #PCDATA | br | img )*>

<!ATTLIST a

href         %HREF;       #REQUIRED

title        %vdata;      #IMPLIED

xml:lang     NMTOKEN      #IMPLIED

%coreattrs;

>

<!--============= Tables =============-->

<!ELEMENT table (tr)+>

<!ATTLIST table

title       %vdata;    #IMPLIED

align       CDATA      #IMPLIED

columns     %number;   #REQUIRED

xml:lang    NMTOKEN    #IMPLIED

%coreattrs;

>

<!ELEMENT tr (td)+>

<!ATTLIST tr

%coreattrs;

>

<!ELEMENT td

( %text; | %layout; | img | anchor | a )*>

<!ATTLIST td

xml:lang        NMTOKEN       #IMPLIED

%coreattrs;

>

<!--== Text layout and line breaks ==-->

<!ELEMENT em     (%flow;)*>

<!ATTLIST em

xml:lang        NMTOKEN       #IMPLIED

%coreattrs;

>

<!ELEMENT strong (%flow;)*>

<!ATTLIST strong

xml:lang        NMTOKEN       #IMPLIED

%coreattrs;

>

<!ELEMENT b      (%flow;)*>

<!ATTLIST b

xml:lang        NMTOKEN       #IMPLIED

%coreattrs;

>

<!ELEMENT i      (%flow;)*>

<!ATTLIST i

xml:lang        NMTOKEN       #IMPLIED

%coreattrs;

>

<!ELEMENT u      (%flow;)*>

<!ATTLIST u

xml:lang        NMTOKEN       #IMPLIED

%coreattrs;

>

<!ELEMENT big    (%flow;)*>

<!ATTLIST big

xml:lang        NMTOKEN       #IMPLIED

%coreattrs;

>

<!ELEMENT small  (%flow;)*>

<!ATTLIST small

xml:lang        NMTOKEN       #IMPLIED

%coreattrs;

>

<!ENTITY % TAlign "(left|right|center)">

<!ENTITY % WrapMode "(wrap|nowrap)" >

<!ELEMENT p (%fields; | do)*>

<!ATTLIST p

align       %TAlign;     "left"

mode        %WrapMode;   #IMPLIED

xml:lang    NMTOKEN      #IMPLIED

%coreattrs;

>

<!ELEMENT br EMPTY>

<!ATTLIST br

xml:lang        NMTOKEN       #IMPLIED

%coreattrs;

>

<!ENTITY quot  "&#34;">

<!-- quotation mark -->

<!ENTITY amp   "&#38;#38;">

<!-- ampersand -->

<!ENTITY apos  "&#39;">

<!-- apostrophe -->

<!ENTITY lt    "&#38;#60;">

<!-- less than -->

<!ENTITY gt    "&#62;">

<!-- greater than -->

<!ENTITY nbsp  "&#160;">

<!-- non-breaking space -->

<!ENTITY shy   "&#173;">

<!-- soft hyphen (discretionary hyphen) -->

<!--

Copyright Wireless Application Protocol

Forum Ltd., 1998,1999.

                    All rights reserved.

-->


WML Entities

Character Entities

Result | Description | Entity Name | Entity Number
& | ampersand | &amp; | &#38;
' | apostrophe | &apos; | &#39;
> | greater-than | &gt; | &#62;
< | less-than | &lt; | &#60;
 | non-breaking space | &nbsp; | &#160;
" | quotation mark | &quot; | &#34;
 | soft hyphen | &shy; | &#173;


WML Examples

A WML deck with two cards - one for user input and one for displaying the result - can be set up, as demonstrated in this example:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card id="card1" title="Tutorial">

<do type="accept" label="Answer">

<go href="#card2"/>

</do>

<p>

<select name="name">

<option value="HTML">HTML Tutorial</option>

<option value="XML">XML Tutorial</option>

<option value="WAP">WAP Tutorial</option>

</select>

</p>

</card>

<card id="card2" title="Answer">

<p>

You selected: $(name)

</p>

</card>

</wml>

The first card might look like this in your mobile phone display:

----- Tutorial ----------

HTML Tutorial [TRadioButtonFormControlObj]

XML  Tutorial [TRadioButtonFormControlObj]

WAP  Tutorial [TRadioButtonFormControlObj]

Answer

The second card might look like this:

----- Answer ----------

You Selected: HTML

Example Explained

The Prolog

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

The first lines in the WML document are called the prolog. The prolog defines that this is an XML document, it then defines the XML version, and the DTD to be referenced.

The Deck

<wml> ..... </wml>

The deck is the WML document itself. It is embedded within <wml> tags

The Cards

<card> ..... </card>

Cards are always displayed one at the time. This WML deck contains two cards - one for user input and one for displaying the result.

The <do> element

<do> ... </do>

The first card has a <do> element that defines an event to be triggered. The type="accept" attribute of the <do> element causes the label="Answer" to be displayed in the lower left corner of the display.

The Event

The <go> element triggers when the user clicks the <do> label. The href="#card2" attribute of the <go> element causes card2 to be displayed on the screen.

The Variable

Card2 displays the $(name) variable from card1, because variables are valid across cards.


WML Formatting

Decks and Cards

WML pages are often called "decks". A deck contains a set of cards. A card element can contain text, markup, links, input-fields, tasks, images and more. Cards can be related to each other with links.

When a WML page is accessed from a mobile phone, all the cards in the page are downloaded from the WAP server. Navigation between the cards is done by the phone computer - inside the phone - without any extra access trips to the server:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card id="no1" title="Card 1">

<p>Hello World!</p>

</card>

<card id="no2" title="Card 2">

<p>Welcome to our WAP Tutorial!</p>

</card>

</wml>

The result MIGHT look like this in your mobile phone display (note that only one card is displayed at a time):

------ Card 1 ------

Hello World!

Paragraphs and Line Breaks

A WML card can be set up to display the paragraph and line break functions of WML:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Paragraphs">

<p>

This is a paragraph

</p>

<p>

This is another<br/>with a line break

</p>

</card>

</wml>

The result MIGHT look like this in your mobile phone display:

------ Paragraphs ------

This is a paragraph

This is another

with a line break

Text Formatting

A WML card can be set up to display the text formatting functions of WML:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Formatting">

<p>

normal<br/>

<em>emphasized</em><br/>

<strong>strong</strong><br/>

<b>bold</b><br/>

<i>italic</i><br/>

<u>underline</u><br/>

<big>big</big><br/>

<small>small</small>

</p>

</card>

</wml>

The result MIGHT look like this in your mobile phone display (don't take it for granted that all formatting tags will render as expected):

----- Formatting -----

normal

emphasized

strong

bold

italic

underline

big

small

Tables

A WML card can be set up to display the table functions of WML:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Table">

<p>

<table columns="3">

<tr>

<td>Cell 1</td>

<td>Cell 2</td>

<td>Cell 3</td>

</tr>

</table>

</p>

</card>

</wml>

The result MIGHT look like this in your mobile phone display:

------ Table ------

Cell 1   Cell 2   Cell 3


WML Input

Input Fields

A WML card can be set up to let a user enter information, as demonstrated in this example:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Input">

<p>

Name: <input name="Name" size="15"/><br/>

Age:  <input name="Age" size="15" format="*N"/><br/>

Sex:  <input name="Sex" size="15"/>

</p>

</card>

</wml>

The result MIGHT look like this in your mobile phone display:

----- Input ----------

Name: [TEditFormControlObj]

Age : [TEditFormControlObj]

Sex : [TEditFormControlObj]

Select and Option

A WML card, can be set up to display the select and option functions of WML:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Selectable List 1">

<p>

<select>

<option value="htm">HTML Tutorial</option>

<option value="xml">XML Tutorial</option>

<option value="wap">WAP Tutorial</option>

</select>

</p>

</card>

</wml>

The result MIGHT look like this in your mobile phone display:

--- Selectable List 1---

[TRadioButtonFormControlObj] HTML Tutorial

[TRadioButtonFormControlObj] XML Tutorial

[TRadioButtonFormControlObj] WAP Tutorial

In the example below, the result is a selectable list where the user can select more than one item:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Selectable List 2">

<p>

<select multiple="true">

<option value="htm">HTML Tutorial</option>

<option value="xml">XML Tutorial</option>

<option value="wap">WAP Tutorial</option>

</select>

</p>

</card>

</wml>

The result MIGHT look like this in your mobile phone display:

--- Selectable List 2---

[TCheckBoxFormControlObj] HTML Tutorial

[TCheckBoxFormControlObj] XML Tutorial

[TCheckBoxFormControlObj] WAP Tutorial

Fieldset

A WML card, can be set up to display the fieldset function of WML:

<

?xml version="

1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Fieldset">

<p>

<fieldset title="CD Info">

Title: <input name="title" type="text"/><br/>

Prize: <input name="prize" type="text"/>

</fieldset>

</p>

</card>

</wml>

The result MIGHT look like this in your mobile phone display:

------- Fieldset--------

CD Info Title: [TEditFormControlObj]

Prize: [TEditFormControlObj]


WML Links and Images

Links

A WML card can be set up to display the anchor functions of WML.

<anchor>

The <anchor> tag always has a task ("go", "prev", or "refresh") specified. The task defines what to do when the user selects the link. In this example, when the user selects the "Next page" link, the task says "go to the file test.wml":

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Anchor Tag">

<p>

<anchor>Next page

<go href="test.wml"/>

</anchor>

</p>

</card>

</wml>

<a>

The <a> tag always performs a "go" task, with no variables. The example below does the same as the <anchor> tag example:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="A Tag">

<p>

<a href="test.wml">Next page</a>

</p>

</card>

</wml>

Image

A WML card can be set up to display an image:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Image">

<p>

This is an image

<img src="/images/stickman.wbmp" alt="stickman" />

in a paragraph

</p>

</card>

</wml>

The result MIGHT look like this in your mobile phone display:

------ Image ------

This is an image [image] in a paragraph

Note that .wbmp is the only image type that can be displayed in a WAP browser.


WML Reference

The links in the "Start tag" column points to more useful information about the specific tag. It also cover attributes of the specific tag and code examples!

Deck / Card Elements

Start tag | Purpose | WML
< access> | Defines information about the access control of a deck | 1.1
< card> | Defines a card in a deck | 1.1
< head> | Contains information about the document | 1.1
< | Defines meta information about the document | 1.1
< template> | Defines a code template for all the cards in a deck | 1.1
< wml> | Defines a WML deck (WML root) | 1.1
< !--> | Defines a comment | 1.1

Text Elements

Start tag | Purpose | WML
< br> | Defines a line break | 1.1
< p> | Defines a paragraph | 1.1
< table> | Defines a table | 1.1
< td> | Defines a table cell (table data) | 1.1
< | Defines a table row | 1.1

Text Formatting Tags

Start tag | Purpose | WML
< | Defines bold text | 1.1
< big> | Defines big text | 1.1
em> | Defines emphasized text | 1.1
< i> | Defines italic text | 1.1
< small> | Defines small text | 1.1
< strong> | Defines strong text | 1.1
< u> | Defines underlined text | 1.1

Anchor Elements

Start tag | Purpose | WML
a> | Defines an anchor (a link) | 1.1
< anchor> | Defines an anchor (a link) | 1.1

Image Elements

Start tag | Purpose | WML
< img> | Defines an image | 1.1

Event Elements

Start tag | Purpose | WML
< do> | Activates a task when the user clicks on a word/phrase on the screen | 1.1
< | Contains code to be executed when one of the following events occurs: onenterbackward, onenterforward, onpick, ontimer | 1.1
< postfield> | Contains information to be sent to the server along with a <go> tag | 1.1

Task Elements

Start tag | Purpose | WML
go> | Represents the action of switching to a new card | 1.1
noop> | Says that nothing should be done (noop stands for "no operation"). Used to override deck-level elements | 1.1
prev> | Represents the action of going back to the previous card | 1.1
< refresh> | Refreshes some specified card variables. If any of the variables are shown on the screen, this task also refreshes the screen | 1.1

Input Elements

Start tag | Purpose | WML
< fieldset> | Used to group together related elements in a card | 1.1
< input> | Defines an input field (a text field where the user can enter some text) | 1.1
optgroup> | Defines an option group in a selectable list | 1.1
< option> | Defines an option in a selectable list | 1.1
select> | Defines a selectable list | 1.1

Variable Elements

Start tag | Purpose | WML
< setvar> | Sets a variable to a specified value in a <go>, <prev>, or <refresh> task | 1.1
< | Defines a card timer | 1.1


WML Tasks

A task specifies what action to perform when an event, like entering a card or selecting a link, occurs.

Go Task

The <go> task represents the action of switching to a new card.

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card>

<p>

<anchor>

Go To Test

<go href="test.wml"/>

</anchor>

</p>

</card>

</wml>

Prev Task

The <prev> task represents the action of going back to the previous card.

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card>

<p>

<anchor>

Previous Page

<prev/>

</anchor>

</p>

</card>

</wml>

Refresh Task

The <refresh> task refreshes some specified card variables. If any of the variables are shown on the screen, this task also refreshes the screen.

The example below uses an <anchor> tag to add a "Refresh this page" link to the card. When the user clicks on the link, he or she refreshes the page and the value of the variable x will be set to 30:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card>

<p>

<anchor>

Refresh this page

<go href="thispage.wml"/>

<refresh>

 <setvar name="x" value="30"/>

</refresh>

</anchor>

</p>

</card>

</wml>

Noop Task

The <

noop>

task says that nothing should be done (noop stands for

"

no operation"

). This tag is used to override deck-level elements.

The <do> tag can be used to activate a task when the user clicks on a word/phrase on the screen.

The example below uses a <do> tag to add a "Back" link to the card. When the user clicks on the "Back" link, he or she should be taken back to the previous card. But the <noop> tag prevents this operation; when the user clicks on the "Back" link nothing will happen:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card>

<p>

<do name="back" type="prev" label="Back">

<noop/>

</do>

</p>

</card>

</wml>

Task Elements

Start tag | Purpose | WML
go> | Represents the action of switching to a new card | 1.1
< | Says that nothing should be done (noop stands for "no operation"). Used to override deck-level elements | 1.1
< | Represents the action of going back to the previous card | 1.1
< | Refreshes some specified card variables. If any of the variables are shown on the screen, this task also refreshes the screen | 1.1


WML Timer

Timer

A WML card can be set up to use the timer function of WML. The time unit of the timer is 1/10 of a second.

The example below will display a message for 3 seconds, and then take you to the file "test.wml":

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card ontimer="test.wml">

<timer value="30"/>

<p>Some Message</p>

</card>

</wml>


WML Validator

Validate WML

Validating your WML

To help you validate your wml, we have used The Microsoft's XML parser to create a wml validator. Paste your wml in the text area, and validate it by pressing the validate button.

[TTextAreaFormControlObj]

Validating your WML file

You can also validate your wml files, simply by typing the url of your wml file and press the submit button

File Name: [TEditFormControlObj]

If you want to validate an error free WML file you can paste this address into the name field: http://www.w3schools.com/wap/demo_helloworld.wml

NOTE: If you get an error message saying "Access denied" when accessing this file, it is because your Internet Explorer security setting do not allow access across domains.


WML Variables

Variables

When a user switches from card to card in a deck, we need to store data in variables. WML variables are case sensitive.

Specify a Variable with the Setvar Command

When someone executes a task (like go, prev, and refresh), the setvar element can be used to set a variable with a specified value.

The following example will create a variable named i with a value of 500:

<setvar name="i" value="500"/>

The name and value attributes are required.

Specify a Variable through an Input Element

Variables can also be set through an input element (like input, select, option, etc.).

The following example will create a variable named schoolname:

<card id="card1">

<select name="schoolname">

<option value="HTML">HTML Tutorial</option>

<option value="XML">XML Tutorial</option>

</select>

</card>

To use the variable we created in the example above:

<card id="card2">

<p>You selected: $(schoolname)</p>

</card>


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.


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.


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


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.


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 , or our Complete PHP tutorial.


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 | FirstName | Address | City
Hansen | Ola | Timoteivn 10 | Sandnes
Svendson | Tove | Borgvn 23 | Sandnes
Pettersen | Kari | Storgt 20 | 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.


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.


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 Services Tutorial

Web Services can convert your applications into Web-applications.

By using Web services, your application can publish its function or message to the rest of the world.

Web Services can be used by other applications.

With Web services your accounting department's Win 2k servers can connect with your IT supplier's UNIX server.

The basic Web Services platform is XML + HTTP.

Web services uses XML to code and decode your data and SOAP to transport it.

Learn how to create Web Services from an ASP.NET application.

This tutorial converts an ASP.NET application to a Web Service.

Start learning about Web Services now!

Table of Contents

- An introduction to Web Services.

Why Web Services? - Why and how to use Web Services.

Web Services Platform - What lies behind the Web Services Platform?

Web Services Example - An ASP.NET example of a Web Service.

Web Services Use - Put our Web Service on your web site.

Web Services Summary - A summary on what you have learned in this tutorial and a recommendation on what subject you should study next.


TempConvert Web Service

TempConvert

The following operations are supported. For a formal definition, please review the Service Description.

· CelsiusToFahrenheit
· FahrenheitToCelsius

This web service is using http://tempuri.org/ as its default namespace.

Recommendation: Change the default namespace before the XML Web service is made public.

Each XML Web service needs a unique namespace in order for client applications to distinguish it from other services on the Web. http://tempuri.org/ is available for XML Web services that are under development, but published XML Web services should use a more permanent namespace.

Your XML Web service should be identified by a namespace that you control. For example, you can use your company's Internet domain name as part of the namespace. Although many XML Web service namespaces look like URLs, they need not point to actual resources on the Web. (XML Web service namespaces are URIs.)

For XML Web services creating using ASP.NET, the default namespace can be changed using the WebService attribute's Namespace property. The WebService attribute is an attribute applied to the class that contains the XML Web service methods. Below is a code example that sets the namespace to "http://microsoft.com/webservices/":

C#

[WebService(Namespace="http://microsoft.com/webservices/")]

public class MyWebService {

  // implementation

}

Visual Basic

<WebService(Namespace:="http://microsoft.com/webservices/")> Public Class MyWebService

  ' implementation

End Class

C++

[WebService(Namespace="http://microsoft.com/webservices/")]

public ref class MyWebService {

  // implementation

};

For more details on XML namespaces, see the W3C recommendation on .

For more details on WSDL, see the WSDL Specification.

For more details on URIs, see RFC 2396.


TempConvert Web Service

TempConvert

Click here for a complete list of operations.

FahrenheitToCelsius

Test

To test the operation using the HTTP POST protocol, click the 'Invoke' button.

Parameter | Value
Fahrenheit: | [TEditFormControlObj]

SOAP 1.1

The following is a sample SOAP 1.1 request and response. The placeholders shown need to be replaced with actual values.

POST /webservices/tempconvert.asmx HTTP/1.1

Host: www.w3schools.com

Content-Type: text/xml; charset=utf-8

Content-Length: length

SOAPAction: "http://tempuri.org/FahrenheitToCelsius"

<?xml version="1.0" encoding="utf-8"?>

<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">

<soap:Body>

  <FahrenheitToCelsius xmlns="http://tempuri.org/">

    <Fahrenheit>short</Fahrenheit>

  </FahrenheitToCelsius>

</soap:Body>

</soap:Envelope>

HTTP/1.1 200 OK

Content-Type: text/xml; charset=utf-8

Content-Length: length

<?xml version="1.0" encoding="utf-8"?>

<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">

<soap:Body>

  <FahrenheitToCelsiusResponse xmlns="http://tempuri.org/">

    <FahrenheitToCelsiusResult>short</FahrenheitToCelsiusResult>

  </FahrenheitToCelsiusResponse>

</soap:Body>

</soap:Envelope>

SOAP 1.2

The following is a sample SOAP 1.2 request and response. The placeholders shown need to be replaced with actual values.

POST /webservices/tempconvert.asmx HTTP/1.1

Host: www.w3schools.com

Content-Type: application/soap+xml; charset=utf-8

Content-Length: length

<?xml version="1.0" encoding="utf-8"?>

<soap12:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope">

<soap12:Body>

  <FahrenheitToCelsius xmlns="http://tempuri.org/">

    <Fahrenheit>short</Fahrenheit>

  </FahrenheitToCelsius>

</soap12:Body>

</soap12:Envelope>

HTTP/1.1 200 OK

Content-Type: application/soap+xml; charset=utf-8

Content-Length: length

<?xml version="1.0" encoding="utf-8"?>

<soap12:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope">

<soap12:Body>

  <FahrenheitToCelsiusResponse xmlns="http://tempuri.org/">

    <FahrenheitToCelsiusResult>short</FahrenheitToCelsiusResult>

  </FahrenheitToCelsiusResponse>

</soap12:Body>

</soap12:Envelope>

HTTP POST

The following is a sample HTTP POST request and response. The placeholders shown need to be replaced with actual values.

POST /webservices/tempconvert.asmx/FahrenheitToCelsius HTTP/1.1

Host: www.w3schools.com

Content-Type: application/x-www-form-urlencoded

Content-Length: length

Fahrenheit=string

HTTP/1.1 200 OK

Content-Type: text/xml; charset=utf-8

Content-Length: length

<?xml version="1.0" encoding="utf-8"?>

<short xmlns="http://tempuri.org/">short</short>


TempConvert Web Service

TempConvert

Click here for a complete list of operations.

CelsiusToFahrenheit

Test

To test the operation using the HTTP POST protocol, click the 'Invoke' button.

Parameter | Value
Celsius: | [TEditFormControlObj]

SOAP 1.1

The following is a sample SOAP 1.1 request and response. The placeholders shown need to be replaced with actual values.

POST /webservices/tempconvert.asmx HTTP/1.1

Host: www.w3schools.com

Content-Type: text/xml; charset=utf-8

Content-Length: length

SOAPAction: "http://tempuri.org/CelsiusToFahrenheit"

<?xml version="1.0" encoding="utf-8"?>

<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">

<soap:Body>

  <CelsiusToFahrenheit xmlns="http://tempuri.org/">

    <Celsius>short</Celsius>

  </CelsiusToFahrenheit>

</soap:Body>

</soap:Envelope>

HTTP/1.1 200 OK

Content-Type: text/xml; charset=utf-8

Content-Length: length

<?xml version="1.0" encoding="utf-8"?>

<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">

<soap:Body>

  <CelsiusToFahrenheitResponse xmlns="http://tempuri.org/">

    <CelsiusToFahrenheitResult>short</CelsiusToFahrenheitResult>

  </CelsiusToFahrenheitResponse>

</soap:Body>

</soap:Envelope>

SOAP 1.2

The following is a sample SOAP 1.2 request and response. The placeholders shown need to be replaced with actual values.

POST /webservices/tempconvert.asmx HTTP/1.1

Host: www.w3schools.com

Content-Type: application/soap+xml; charset=utf-8

Content-Length: length

<?xml version="1.0" encoding="utf-8"?>

<soap12:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope">

<soap12:Body>

  <CelsiusToFahrenheit xmlns="http://tempuri.org/">

    <Celsius>short</Celsius>

  </CelsiusToFahrenheit>

</soap12:Body>

</soap12:Envelope>

HTTP/1.1 200 OK

Content-Type: application/soap+xml; charset=utf-8

Content-Length: length

<?xml version="1.0" encoding="utf-8"?>

<soap12:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope">

<soap12:Body>

  <CelsiusToFahrenheitResponse xmlns="http://tempuri.org/">

    <CelsiusToFahrenheitResult>short</CelsiusToFahrenheitResult>

  </CelsiusToFahrenheitResponse>

</soap12:Body>

</soap12:Envelope>

HTTP POST

The following is a sample HTTP POST request and response. The placeholders shown need to be replaced with actual values.

POST /webservices/tempconvert.asmx/CelsiusToFahrenheit HTTP/1.1

Host: www.w3schools.com

Content-Type: application/x-www-form-urlencoded

Content-Length: length

Celsius=string

HTTP/1.1 200 OK

Content-Type: text/xml; charset=utf-8

Content-Length: length

<?xml version="1.0" encoding="utf-8"?>

<short xmlns="http://tempuri.org/">short</short>


Web Service Example

Any application can have a Web Service component.

Web Services can be created regardless of programming language.

An example ASP.NET Web Service

In this example we use ASP.NET to create a simple Web Service.

<%@ WebService Language="VB" Class="TempConvert" %>

Imports System

Imports System.Web.Services

Public Class TempConvert :Inherits WebService

<WebMethod()> Public Function FahrenheitToCelsius

(ByVal Fahrenheit As Int16) As Int16

Dim celsius As Int16

celsius = ((((Fahrenheit) - 32) / 9) * 5)

Return celsius

End Function

<WebMethod()> Public Function CelsiusToFahrenheit

(ByVal Celsius As Int16) As Int16

Dim fahrenheit As Int16

fahrenheit = ((((Celsius) * 9) / 5) + 32)

Return fahrenheit

End Function

End Class

This document is a .asmx file. This is the ASP.NET file extension for XML Web Services.

To run this example you will need a .NET server.

The first line in this document that it is a Web Service, written in VB and the class name is "TempConvert":

<%@ WebService Language="VB" Class="TempConvert" %>

The next lines imports the namespace "System.Web.Services" from the .NET framework.

Imports System

Imports System.Web.Services

The next line defines that the "TempConvert" class is a WebSerivce class type:

Public Class TempConvert :Inherits WebService

The next step is basic VB programming. This application has two functions. One to convert from Fahrenheit to Celsius, and one to convert from Celsius to Fahrenheit.

The only difference from a normal application is that this function is defined as a "WebMethod".

Use "WebMethod" to mark the functions in your application that you would like to make into web services.

<WebMethod()> Public Function FahrenheitToCelsius

(ByVal Fahrenheit As Int16) As Int16

Dim celsius As Int16

celsius = ((((Fahrenheit) - 32) / 9) * 5)

Return celsius

End Function

<WebMethod()> Public Function CelsiusToFahrenheit

(ByVal Celsius As Int16) As Int16

Dim fahrenheit As Int16

fahrenheit = ((((Celsius) * 9) / 5) + 32)

Return fahrenheit

End Function

The last thing to do is to end the function and the class:

End Function

End Class

If you save this as an .asmx file and publish it on a server with .NET support, you should have your first working Web Service. Like our

ASP.NET automates the process

With ASP.NET you do not have to write your own WSDL and SOAP documents.

If you look closer on our example Web Service. You will see that the ASP.NET has automatically created a WSDL and SOAP request.


Web Services Introduction - What is Web Services

Introduction to Web Services

Web Services can make your applications Web applications.

Web Services are published, found and used through the Web.

What You Should Already Know

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

· HTML
· XML

If you want to study these subjects first, find the tutorials on our Home page.

What are Web Services?

· Web services are application components
· Web services communicate using open protocols
· Web services are self-contained and self-describing
· Web services can be discovered using UDDI
· Web services can be used by other applications
· XML is the basis for Web services

How Does it Work?

The basic Web services platform is XML + HTTP.

The HTTP protocol is the most used Internet protocol.

XML provides a language which can be used between different platforms and programming languages and still express complex messages and functions.

Web services platform elements

· SOAP (Simple Object Access Protocol)
· UDDI (Universal Description, Discovery and Integration)
· WSDL (Web Services Description Language)

We will explain these topics later in the tutorial

The Future of Web services

Don't expect too much, too soon.

The Web Services platform is a simple, interoperable, messaging framework. It still misses many important features like security and routing. But, these pieces will come once SOAP becomes more advanced.

Hopefully, Web services can make it much easier for applications to communicate.


Web Services Introduction - Web Services Platform Elements

Web Services Platform Elements

Web Services have three basic platform elements.

These are called SOAP, WSDL and UDDI.

What is SOAP?

The basic Web services platform is XML plus HTTP.

· SOAP stands for Simple Object Access Protocol
· SOAP is a communication protocol
· SOAP is for communication between applications
· SOAP is a format for sending messages
· SOAP is designed to communicate via Internet
· SOAP is platform independent
· SOAP is language independent
· SOAP is based on XML
· SOAP is simple and extensible
· SOAP allows you to get around firewalls
· SOAP will be developed as a W3C standard

Read more about SOAP on our Home page.

What is WSDL?

WSDL is an XML-based language for describing Web services and how to access them.

· WSDL stands for Web Services Description Language
· WSDL is written in XML
· WSDL is an XML document
· WSDL is used to describe Web services
· WSDL is also used to locate Web services
· WSDL is not yet a W3C standard

Read more about WSDL on our .

What is UDDI?

UDDI is a directory service where businesses can register and search for Web services.

· UDDI stands for Universal Description, Discovery and Integration
· UDDI is a directory for storing information about web services
· UDDI is a directory of web service interfaces described by WSDL
· UDDI communicates via SOAP
· UDDI is built into the Microsoft .NET platform

Read more about UDDI on our Home page.


Web Services Summary

You Have Learned Web Services, Now What?

 Top Previous Next

Web Services Summary

This tutorial has taught you how to convert your applications into web-applications.

You have learned how to use XML to send messages between applications.

You have also learned how to export a function (create a web service) from your application.

Now You Know Web Services, What's Next?

The next step is to learn about WSDL and SOAP.

WSDL

WSDL is an XML-based language for describing Web services and how to access them.

WSDL describes a web service, along with the message format and protocol details for the web service.

If you want to learn more about WSDL, please visit our .

SOAP

SOAP is a simple XML-based protocol that allows applications to exchange information over HTTP.

Or more simply: SOAP is a protocol for accessing a web service.

If you want to learn more about SOAP, please visit our SOAP tutorial.


Web Service Use

Using our example ASP.NET Web Service

In the previous example we created an example Web Service.

The Fahrenheit to Celsius function can be tested here:

The Celsius to Fahrenheit function can be tested here: CelsiusToFahrenheit.

These functions will send you a XML reply.

These test use HTTP POST and will send a XML response like this:

<?xml version="1.0" encoding="utf-8" ?>

<short xmlns="http://tempuri.org/">38</short>

Use a form to access a Web Service.

Using a form and HTTP POST, you can put our web service on your site, like this:

Fahrenheit to Celsius: | [TEditFormControlObj]
Celsius to Fahrenheit: | [TEditFormControlObj]

You can put our Web Service on your site.

Here is the code to put our Web Service on your site:

<form target="_blank" action='http://www.w3schools.com

/webservices/tempconvert.asmx/FahrenheitToCelsius'

method="POST">

<table>

<tr>

<td>Fahrenheit to Celsius:</td>

<td><input class="frmInput" type="text"

size="30" name="Fahrenheit"></td>

</tr>

<tr>

<td></td>

<td align="right"> <input type="submit"

value="Submit" class="button"></td>

</tr>

</table>

</form>

<form target="_blank" action='http://www.w3schools.com

/webservices/tempconvert.asmx/CelsiusToFahrenheit'

method="POST">

<table>

<tr>

<td>Celsius to Fahrenheit:</td>

<td><input class="frmInput" type="text"

size="30" name="Celsius"></td>

</tr>

<tr>

<td></td>

<td align="right"> <input type="submit"

value="Submit" class="button"></td>

</tr>

</table>

</form>


Web Services Introduction - Why Web Services?

Why Web Services?

 Top Previous Next

A few years ago Web services were not fast enough to be interesting.

Thanks to the major IT development the last few years, most people and companies have broadband connection and use the web more and more.

Interoperability has highest priority.

When all major platforms could access the Web using Web browsers, different platforms could interact. For these platforms to work together, Web applications were developed.

Web applications are simple applications run on the web. These are built around the Web browser standards and can mostly be used by any browser on any platform.

Web services take Web applications to the next level.

Using Web services your application can publish its function or message to the rest of the world.

Web services uses XML to code and decode your data and SOAP to transport it using open protocols.

With Web services your accounting departments Win 2k servers billing system can connect with your IT suppliers UNIX server.

Web services have two types of uses.

Reusable application components

There are things different applications needs very often. So why make these over and over again?

Web services can offer application components like currency conversion, weather reports or even language translation as services.

Ideally, there will only be one type of each application component, and anyone can use it in their application.

Connect existing software

Web services help solve the interoperability problem by giving different applications a way to link their data.

Using Web services you can exchange data between different applications and different platforms.


WMLScript Tutorial

WMLScript Tutorial

wml

WMLScript is the scripting language used in WML pages.

WML pages can be displayed in a WAP browser.

WMLScript is used to validate user input, generate dialog boxes, view error messages, access facilities of the user agent, and much more.

Start learning WMLScript now!

WMLScript Libraries

At W3Schools you will find a complete reference of all the WMLScript Libraries.

· WMLScript Dialogs Library
· WMLScript Float Library
· WMLScript Lang Library
·
· WMLScript URL Library
· WMLScript WMLBrowser Library


WMLScript alert() Function

The alert() function displays a message, waits for a confirmation, and then returns an empty string.

Syntax

n = Dialogs.alert(message)

Part | Description
n | The empty string returned from the function
message | A string containing the message

Example

var a = Dialogs.alert("The value must be numeric!");

Result

a = ""


WMLScript confirm() Function

The confirm() function displays a message, waits for an answer, and then returns a boolean value depending on which answer the user selected. If the user selected the ok value the return value is true, and if the user selected the cancel value the return value is false.

Syntax

n = Dialogs.confirm(message, ok, cancel)

Part | Description
n | The Boolean value returned from the function
message | A string containing the message
ok | A string containing the OK text
cancel | A string containing the CANCEL text

Example

var a = Dialogs.confirm("Exit?","Yes","No");

Result

a = true (if "Yes" is selected)

a = false (if "No" is selected)


WMLScript prompt() Function

The prompt() function displays a message and waits for an input. The second parameter is a default input, that will be returned if the user does not enter a value. This function returns the user input or the default value.

Syntax

n = Dialogs.prompt(message, defaultinput)

Part | Description
n | The string returned from the function
message | A string containing the message (question)
defaultinput | A string containing the default input (answer)

Example

var a = Dialogs.prompt("Enter a number:","3");

Result

a = "5" (if the user entered the value 5)

a = "3" (if the user did not enter a value)


WMLScript ceil() Function

The ceil() function returns the nearest integer that is not smaller than the x parameter value.

Syntax

n = Float.ceil(x)

Part | Description
n | The integer returned from the function
x | A number

Example

var a = Float.ceil(5.32);

var b = Float.ceil(5.55);

var c = Float.ceil(-5.32);

Result

a = 6

b = 6

c = -5


WMLScript int() Function

The int() function returns the integer part of the x parameter.

Syntax

n = Float.int(x)

Part | Description
n | The integer returned from the function
x | A number

Example

var a = Float.int(5.32);

Result

a = 5


WMLScript maxFloat() Function

The maxFloat() function returns the largest possible floating-point number.

Syntax

n = Float.maxFloat()

Part | Description
n | The largest possible floating-point number (3.40282347E+38) returned from the function

Example

var a = Float.maxFloat();

Result

a = 3.40282347E+38


WMLScript minFloat() Function

The minFloat() function returns the smallest possible floating-point number.

Syntax

n = Float.minFloat()

Part | Description
n | The smallest floating-point number (1.17549435-38) returned from the function

Example

var a = Float.minFloat();

Result

a = 1.17549435-38


WMLScript pow() Function

The pow() function returns the value of x to the power of y (xy).

Syntax

n = Float.pow(x,y)

Part | Description
n | The floating-point number returned from the function
x | A number
y | A number

Example

var a = Float.pow(4,2);

var b = Float.pow(-2,3);

Result

a = 16

b = -8


WMLScript round() Function

The round() function rounds the x parameter to the nearest integer.

Syntax

n = Float.round(x)

Part | Description
n | The integer returned from the function
x | A number

Example

var a = Float.round(3.5);

var b = Float.round(3.4);

Result

a = 4

b = 3


WMLScript sqrt() Function

The sqrt() function returns the square root of the x parameter.

Syntax

n = Float.sqrt(x)

Part | Description
n | The floating-point number returned from the function
x | A number

Example

var a = Float.sqrt(9);

var b = Float.sqrt(6.25);

Result

a = 3

b = 2.5


WMLScript abort() Function

The abort() function aborts a WMLScript and returns a message to the caller of the script.

Syntax

Lang.abort(text)

Part | Description
text | A string

Example

var errtxt = "Illegal value";

Lang.abort("Error in function: " + errtxt);

Result

The script is aborted, and the string "Error in function: Illegal value" is returned to the caller of the script.


WMLScript abs() Function

The abs() function returns the absolute value of a number.

Syntax

n = Lang.abs(x)

Part | Description
n | The absolute value returned from the function
x | The number to calculate the absolute value from

Example

var a = Lang.abs(-5);

var b = Lang.abs(-3.4);

Result

a = 5

b = 3.4


WMLScript characterSet() Function

The characterSet() function returns an integer that defines the character-set supported by the WMLScript interpreter.

Syntax

n = Lang.characterSet()

Part | Description
n | The integer that defines the character set returned from the function

Example

var a = Lang.characterSet();

Result

a = 4


WMLScript exit() Function

The exit() function exits a WMLScript and returns a value to the caller of the script.

Syntax

Lang.exit(value)

Part | Description
value | Any value

Example

Lang.exit("Value is 500");

Result

The script ends, and the value "Value is: 500" is returned to the caller of the script.


WMLScript float() Function

The float() function returns a Boolean value that indicates if floating-point numbers are supported.

Syntax

n = Lang.float()

Part | Description
n | The Boolean value returned from the function. True indicates that floating-point numbers are supported.

Example

var a = Lang.float();

Result

var a = true


WMLScript isFloat() Function

The isFloat() function returns a boolean value that is true if the value parameter can be converted into a floating-point number by the parseFloat() function, and false if not.

Syntax

n = Lang.isFloat(value)

Part | Description
n | The Boolean value returned from the function
value | Any value

Example

var a = Lang.isFloat("576");

var b = Lang.isFloat("-576");

var c = Lang.isFloat("6.5");

var d = Lang.isFloat(" -9.45e2");

var e = Lang.isFloat("@13");

var f = Lang.isFloat("hello");

Result

a = true

b = true

c = true

d = true

e = false

f = false


WMLScript isInt() Function

The isInt() function returns a Boolean value that is true if the value parameter can be converted into an integer by the parseInt() function, and false if not.

Syntax

n = Lang.isInt(value)

Part | Description
n | The Boolean value returned from the function
value | Any value

Example

var a = Lang.isInt("576");

var b = Lang.isInt("-576");

var c = Lang.isInt("6.5");

var d = Lang.isInt("@13");

var e = Lang.isInt("hello");

Result

a = true

b = true

c = true

d = false

e = false


WMLScript max() Function

The max() function returns the number with the highest value of x and y.

Syntax

n = Lang.max(x,y)

Part | Description
n | The number returned from the function
x | A number
y | A number

Example

var a = Lang.max(20, 40.3);

var b = Lang.max(60, 59.7);

Result

a = 40.3

b = 60


WMLScript maxInt() Function

The maxInt() function returns the maximum possible integer value.

Syntax

n = Lang.maxInt()

Part | Description
n | The maximum integer value returned from the function

Example

var a = Lang.maxInt();

Result

a = 2147483647


WMLScript min() Function

The min() function returns the number with the lowest value of x and y.

Syntax

n = Lang.min(x,y)

Part | Description
n | The number returned from the function
x | A number
y | A number

Example

var a = Lang.min(20, 40.3);

var b = Lang.min(60, 59.7);

Result

a = 20

b = 59.7


WMLScript minInt() Function

The minInt() function returns the minimum possible integer value.

Syntax

n = Lang.minInt()

Part | Description
n | The minimum integer value returned from the function

Example

var a = Lang.minInt();

Result

a = -2147483648


WMLScript parseFloat() Function

The parseFloat() function returns a floating-point value defined by the string value.

The parsing ends on the first character that cannot be parsed as a floating-point value.

Syntax

n = Lang.parseFloat(string)

Part | Description
n | The floating-point value returned from the function
string | A string

Example

var a = Lang.parseFloat("2345.14");

var b = Lang.parseFloat(" -4.45e2 Kg");

var c = Lang.parseFloat(" +4.45e2 Kg");

var d = Lang.parseFloat("-.3 C");

var e = Lang.parseFloat(" 300 ");

Result

a = 2345.14

b = -4.45e2

c = 4.45e2

d = -0.3

e = 300.0


WMLScript parseInt() Function

The parseInt() function returns an integer defined by the string value.

The parsing ends on the first character that is not a leading "-", "+", or a decimal digit.

Syntax

n = Lang.parseInt(string)

Part | Description
n | The integer returned from the function
string | A string

Example

var a = Lang.parseInt("2345");

var b = Lang.parseInt("200 m/s");

Result

a = 2345

b = 200


WMLScript random() Function

The random() function returns a random integer between 0 and x.

Syntax

n = Lang.random(x)

Part | Description
n | The random integer returned from the function
x | A number

Example

var a = Lang.random(6.5);

Result

a = A random integer between 0 and 6


WMLScript seed() Function

The seed() function initializes the random number generator with the number parameter, and returns an empty string.

Syntax

n = Lang.seed(number)

Part | Description
n | The empty string returned from the function
number | A number

Example

var a = Lang.seed(8.2);

Result

a = ""


WMLScript charAt() Function

The charAt() function returns the character at the specified index position.

Syntax

n = String.charAt(string, index)

Part | Description
n | The string returned from the function
string | A string
index | A number that specifies the index position in the string

Example

var a = String.charAt("world",2);

var b = String.charAt("world",0);

var c = String.charAt("world",10);

Result

a = "r"

b = "w"

c = ""


WMLScript compare() Function

The compare() function compares two strings and returns a value that represents the result of the comparison.

The compare() function can return one of the following values:

· -1 (if string1 < string2)
· 0 (if string1 = string2)
· 1 (if string1 > string2)

Syntax

n = String.compare(string1, string2)

Part | Description
n | The integer returned from the function
string1 | A string
string2 | A string

Example

var a = String.compare("world","world");

var b = String.compare("I","world");

var c = String.compare("world","I");

Result

a = 0

b = -1

c = 1


WMLScript elementAt() Function

The elementAt() function divides a string into elements and returns the element at the specified index position.

Syntax

n = String.elementAt(string, index, separator)

Part | Description
n | The string returned from the function
string | The string to be parsed
index | An integer defining the part to be returned
separator | The separator that divides the strings

Example

NOTE: If index is negative, the first element is returned. If index is too high, the last element is returned.

var a= String.elementAt("Visit W3Schools today",0," ");

var b= String.elementAt("Visit W3Schools today",1," ");

var c= String.elementAt("Visit W3Schools today",2," ");

var d= String.elementAt("Apples+Bananas",0,"+");

var e= String.elementAt("Apples+Bananas",1,"+");

var f= String.elementAt("Apples+Bananas",5,"+");

Result

a = "Visit"

b = "W3Schools"

c = "today"

d = "Apples"

e = "Bananas"

f = "Bananas"


WMLScript elements Function

WMLScript The elements() Function

The elements() function returns the number of times a specified value appears in a string.

Syntax

n = String.elements(string, separator)

Part | Description
n | An integer that specifies the number of times the value specified in the separator parameter appears in the string parameter
string | The string to be searched
separator | The string value to search for in the string

Example

var a = String.elements("Visit W3Schools!","i");

var b = String.elements("Visit W3Schools!","V");

var c = String.elements("Visit W3Schools!"," ");

Result

a = 2

b = 1

c = 1


WMLScript find() Function

The find() function returns the position of a substring in a string.

Syntax

n = String.find(string, substring)

Part | Description
n | The integer returned from the function
string | The string to search
substring | The value to search for in the string

Example

var a = String.find("world","rl");

var b = String.find("world","hi");

var c = String.find("world","wo");

Result

a = 2

b = -1

c = 0


WMLScript format() Function

The format() function formats a value.

Syntax

n = String.format(format, value)

Part

Description

n

The string returned from the function

format

Specifies how to format the value.

The format consists of three parts: %width.precision type

width - Optional. Specifies the minimum number of characters printed.

precision - Optional. Sets the precision of the output value. Can take one of the following values:

· d (The minimum number of digits to print. Default is 1)
· f (The number of digits after the decimal point. Default is 6)
· s (The maximum number of characters to print. All characters are printed by default)

type - Required. Determines how to interpret the formatted value. Can take one of the following values:

· d (Integer - the output value has nd digits)
· f (Floating-Point - the output value has nf decimal digits)
· s (String - Characters are printed to the end of the string or until the precision value is reached)

value

The value to be formatted

Example

var b = String.format("%4.3d", 32);

var d = String.format("%3f", 10.1234);

var e = String.format("%2.2f", 2.3)

Result

b = " 032"

d = "10.123"

e = "2.30"


WMLScript insertAt() Function

The insertAt() function divides a string into elements and inserts a substring at the specified index position.

Syntax

n = String.insertAt(string, substring, index, separator)

Part | Description
n | The string returned from the function
string | The original string
substring | The substring to be inserted into the original string
index | An integer that specifies where to insert the substring
separator | The dividing separator

Example

var a = String.insertAt("Visit W3Schools!","us at",1," ");

Result

a = "Visit us at W3Schools!"


WMLScript isEmpty() Function

The isEmpty() function returns true if a string is empty, and false if not.

Syntax

n = String.isEmpty(string)

Part | Description
n | The Boolean value returned from the function
string | A string

Example

var a = String.isEmpty("");

var b = String.isEmpty("Hello world");

var c = String.isEmpty(23.4);

Result

a = true

b = false

c = false


WMLScript length() Function

The length() function returns the length of a string.

Syntax

n = String.length(string)

Part | Description
n | The length of the string
string | A string

Example

var a = String.length("");

var b = String.length("Hello world");

var c = String.length(23.4);

Result

a = 0

b = 11

c = 4


WMLScript removeAt() Function

The removeAt() function divides a string into elements and removes a specified element.

Syntax

n = String.removeAt(string, index, separator)

Part | Description
n | The string returned from the function
string | The original string
index | The index of the element to be removed
separator | The dividing separator

Example

var a = String.removeAt("Visit W3Schools!",0," ");

var b = String.removeAt("Visit W3Schools!",0,"W");

var c = String.removeAt("Visit W3Schools!",-2," ");

var d = String.removeAt("Visit W3Schools!",10," ");

Result

a = "W3Schools!"

b = "3Schools!"

c = "W3Schools!"

d = "Visit"


WMLScript replaceAt() Function

The replaceAt() function divides a string into elements and replaces a specified element.

Syntax

n = String.replaceAt(string, substring, index, separator)

Part | Description
n | The string returned from the function
string | The original string
substring | The substring to be replaced with a specified element in the original string
index | An integer that specifies where to replace the substring
separator | The dividing separator

Example

var a = String.replaceAt("Visit W3Schools!","I love",0," ");

var b = String.replaceAt("Visit W3Schools!","us!",2," ");

Result

a = "I love W3Schools!"

b = "Visit us!"


WMLScript replace() Function

The replace() function replaces a part of a string with a new string, and returns the result.

Syntax

n = String.replace(string, oldvalue, newvalue)

Part | Description
n | The string returned from the function
string | The original string
oldvalue | The value that is going to be replaced
newvalue | The value that will replace oldvalue

Example

var a = String.replace("world","wor","bo");

var b = String.replace("world", "ld","ry");

Result

a = "bold"

b = "worry"


WMLScript squeeze() Function

The squeeze() function reduces all multiple spaces to single spaces in a string.

Syntax

n = String.squeeze(string)

Part | Description
n | The string returned from the function
string | A string

Example

var a = String.squeeze("Visit   W3Schools!\r\n");

Result

a = "Visit W3Schools "


WMLScript subString() Function

The subString() function returns a specified part of a string.

Syntax

n = String.subString(string, start, length)

Part | Description
n | The new string returned from the function
string | The original string
start | The starting point
length | Specifies the length of the new string

Example

var a = String.subString("world",2,2);

var b = String.subString("world",0,5);

var c = String.subString("world",-2,3);

var d = String.subString("world",2,10);

var e = String.subString("world",10,10);

Result

a = "rl"

b = "world"

c = "wor"

d = "rld"

e = ""


WMLScript toString() Function

The toString() function converts a value to a string.

Syntax

n = String.toString(value)

Part | Description
n | The string returned from the function
value | Any value

Example

var a = String.toString(66);

var b = String.toString(world);

Result

a = "66"

b = "world"


WMLScript trim() Function

The trim() function returns a string without leading and trailing spaces.

Syntax

n = String.trim(string)

Part | Description
n | The string returned from the function
string | A string

Example

var a = String.trim(" Visit W3Schools ");

Result

a = "Visit W3Schools"


WMLScript escapeString() Function

The escapeString() function replaces special characters in a URL with an escape sequence, and return the result.

Syntax

n = URL.escapeString(url)

Part | Description
n | The string returned from the function
url | A string

Example

var a = URL.escapeString("http://w3Schools.com/wml/");

Result

a = "http%3a%2f%2fw3Schools.com%2fwml%2f"


WMLScript getFragment() Function

The getFragment() function returns the fragment in the url parameter.

Syntax

n = URL.getFragment(url)

Part | Description
n | The string returned from the function
url | A string

Example

var a = URL.getFragment("http://w3schools.com/wml#read");

var b = URL.getFragment("http://w3schools.com/wml");

Result

a = "read"

b = ""


WMLScript getHost() Function

The getHost() function returns the host specified in the url parameter.

Syntax

n = URL.getHost(url)

Part | Description
n | The string returned from the function
url | A string

Example

var a = URL.getHost("http://www.w3schools.com/wml");

var b = URL.getHost("/wml/functions");

Result

a = "www.w3schools.com"

b = ""


WMLScript getParameters() Function

The getParameters() function returns the parameter in the last path segment of the url parameter.

Syntax

n = URL.getParameters(url)

Part | Description
n | The string returned from the function
url | A string

Example

var a = URL.getParameters("http://w3schools.com/wml;tip");

var b = URL.getParameters("http://w3schools.com/wml");

Result

a = "tip"

b = ""


WMLScript getPath() Function

The getPath() function returns the path specified in the url parameter.

Syntax

n = URL.getPath(url)

Part | Description
n | The string returned from the function
url | A string

Example

var a = URL.getPath("http://w3schools.com/wml/tips.htm");

var b = URL.getPath("http://w3schools.com");

Result

a = "/wml/tips.htm"

b = ""


WMLScript getPort() Function

The getPort() function returns the port number specified in the url parameter.

Syntax

n = URL.getPort(url)

Part | Description
n | The string returned from the function
url | A string

Example

var a = URL.getPort("http://w3schools.com:80");

var b = URL.getPort("http://w3schools.com");

Result

a = "80"

b = ""


WMLScript getQuery() Function

The getQuery() function returns the query part in the specified URL.

Syntax

n = URL.getQuery(url)

Part | Description
n | The string returned from the function
url | A string

Example

var a=URL.getQuery("http://w3s.com/go.asp?name=bill");

var b=URL.getQuery("http://w3s.com");

Result

a = "bill"

b = ""


WMLScript getScheme() Function

The getScheme() function returns the scheme in the specified URL.

Syntax

n = URL.getScheme(url)

Part | Description
n | The string returned from the function
url | A string

Example

var a = URL.getScheme("http://www.w3schools.com");

var b = URL.getScheme("www.w3schools.com");

var c = URL.getScheme("ftp://www.w3schools.com");

Result

a = "http"

b = ""

c = "ftp"


WMLScript isValid() Function

The isValid() function returns a boolean value that is true if the specified URL has the right syntax, and false if not.

Syntax

n = URL.isValid(url)

Part | Description
n | The boolean value returned from the function
url | A string

Example

var a = URL.isValid("http://www.w3schools.com");

var b = URL.isValid("http//www.w3schools.com");

var c = URL.isValid("http://www.w3schools.com!!!!");

Result

a = "true"

b = "false"

c = "false"


WMLScript resolve() Function

The resolve() function returns an absolute URL from the specified baseurl and the specified relativeurl.

Syntax

n = URL.resolve(baseurl, relativeurl)

Part | Description
n | The string returned from the function
baseurl | A string
relativeurl | A string

Example

var a=URL.resolve("http://w3schools.com", "/wml/n.wml");

Result

a = "http://w3schools.com/wml/n.wml"


WMLScript unescapeString() Function

The unescapeString() function replaces the escape sequences in a URL with characters, and return the result.

Syntax

n = URL.unescapeString(string)

Part | Description
n | The string returned from the function
string | A string

Example

var a=URL.unescapeString("http%3a%2f%2fw3s.com%2wml");

Result

a = "http://w3s.com/wml"


WMLScript getCurrentCard() Function

The getCurrentCard() function returns the relative URL of the current card.

Syntax

n = WMLBrowser.getCurrentCard()

Part | Description
n | The string returned from the function

Example

var a = WMLBrowser.getCurrentCard();

Result

a = "card1#note"


WMLScript getVar() Function

The getVar() function returns the value of the specified variable in the browser context.

If the variable does not exists this function returns an empty string ("").

Syntax

n = WMLBrowser.getVar(variable)

Part | Description
n | The string returned from the function
variable | A string

Example

var a = WMLBrowser.getVar("weeks");

Result

a = "52"


WMLScript go() Function

The go() function goes to a new card (specified by the new URL), and returns an empty string.

Syntax

n = WMLBrowser.go(url)

Part | Description
n | The string returned from the function
url | A string

Example

var a = WMLBrowser.go(card);

Result

a = ""


WMLScript newContext() Function

The newContext() function clears all variables of the WML context, and returns an empty string.

Syntax

n = WMLBrowser.newContext()

Part | Description
n | The empty string returned from the function

Example

var a = WMLBrowser.newContext();

Result

a = ""


WMLScript prev() Function

The prev() function tells the WML browser to go back to the previous WML card, and returns an empty string.

Syntax

n = WMLBrowser.prev()

Part | Description
n | The empty string returned from the function

Example

var a = WMLBrowser.prev();

Result

a = ""


WMLScript refresh() Function

The refresh() function refreshes the current card, and returns an empty string if the refresh succeeded, or a non-empty string if it failed.

Syntax

n = WMLBrowser.refresh()

Part | Description
n | The string returned from the function

Example

var a = WMLBrowser.setVar("day",11);

var b = WMLBrowser.refresh();

Result

a = true

b = ""


WMLScript setVar() Function

The setVar() function sets the value of the specified variable in the browser context, and returns true if the new value where implemented successfully, and false if not

Syntax

n = WMLBrowser.setVar(variable, value)

Part | Description
n | The boolean value returned from the function
variable | A string
value | A string

Example

var a = WMLBrowser.setVar("weeks", 34);

Result

a = true


WMLScript How to

How to call a WMLScript from a WML page

Notice that WMLScripts are not embedded in WML pages. The WML pages only contains references to script URLs.

In the example below; if you select the go label the external script will direct you to http://www.w3schools.com/wap.wml:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card id="no1" title="Go to URL">

<do type="options" label="Go">

<go href="check.wmls#go_url('W3Schools')"/>

</do>

</card>

</wml>

The red line above contains a reference to a WMLScript. The script is in a file called check.wmls, and the name of the function is go_url.

Here is the WML page called check.wmls:

extern function go_url(the_url)

{

if (the_url=="W3Schools")

{

WMLBrowser.go("http://www.w3schools.com/wap.wml")

}

}

Note that the function is using the extern keyword. When using this keyword the function can be called by other functions or WML events outside the .wmls file. To keep a function private, drop the extern keyword.


WMLScript Introduction

Introduction to WMLScript

What you should already know

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

· HTML
· JavaScript
· WML

If you want to study these subjects first, find the tutorials on our Home .

What is WML?

WML stands for Wireless Markup Language. It is a mark-up language inherited from HTML, but WML is based on XML, so it is much stricter than HTML.

WML is used to create pages that can be displayed in a WAP browser. Pages in WML are called DECKS. Decks are constructed as a set of CARDS.

What is WMLScript?

· WMLScript is the scripting language used in WML pages
· WMLScript is a light version of the JavaScript language
· WML scripts are not embedded in the WML pages. WML pages only contains references to script URLs
· WMLScript is compiled into byte code on the server before it is sent to the WAP browser
· WMLScript is a part of the WAP specification

What is WMLScript used for?

· WMLScript is used to validate user input
· WMLScript is used to generate message boxes and dialog boxes locally, to view error messages and confirmations faster
· WMLScript is used to access facilities of the user agent


WMLScript Dialogs Library

The Dialogs library contains functions that displays alert messages.

WMLScript Dialogs Library Functions

Function | Description
 | Displays a message and waits for a confirmation
confirm() | Displays a message and waits for an answer
prompt() | Displays a question and waits for an input


WMLScript Float Library

The Float library contains a set of math functions.

WMLScript Float Library Functions

The Float library works only on clients that support floating-point numbers. If floating-point numbers are not supported, all functions should return invalid.

Function | Description
ceil(x) | Returns the nearest integer that is not smaller than a specified number
 | Returns the nearest integer that is not larger than a specified number
 | Returns the integer part of a specified number
maxFloat() | Returns the largest possible floating-point number
minFloat() | Returns the smallest possible floating-point number
pow(x,y) | Returns the value of x raised to the power of y
round(x) | Rounds a number to the nearest integer
sqrt(x) | Returns the square root of a number


WMLScript Lang Library

The Lang library contains functions for absolute value calculations, data type manipulation, and random number generation.

WMLScript Lang Library Functions

Function | Description
abort() | Aborts a WMLScript and returns a message to the caller of the script
abs(x) | Returns the absolute value of a number
characterSet() | Returns the character-set supported by the WMLScript interpreter
exit() | Exits a WMLScript and returns a message to the caller of the script
float() | Returns a Boolean value that indicates whether floating-point numbers are supported
isFloat() | Returns a Boolean value that indicates whether a value can be converted into a floating-point number by the parseFloat() function
isInt() | Returns a Boolean value that indicates whether a value can be converted into an integer by the parseInt() function
max(x,y) | Returns the number with the highest value of x and y
maxInt() | Returns the maximum possible integer value
min(x,y) | Returns the number with the lowest value of x and y
 | Returns the minimum possible integer value
parseFloat() | Returns a floating-point value defined by a string
parseInt() | Returns an integer defined by a string
random(x) | Returns a random integer between 0 and x
seed() | Initializes the random number generator with a number, and returns an empty string

Note: We think that the Lang library has a misleading name (should be named Math library or something like that). However, it is called the Lang library because it contains functions that are closely related to the core of the WMLScript engine.


WMLScript String Library

The String library contains functions for manipulating text.

WMLScript String Library Functions

Function | Description
charAt( | Returns the character at a specified position
 | Compares two strings and returns a value that represents the result of the comparison
elementAt() | Divides a string into elements and returns a specified element
elements() | Returns the number of times a specified value appears in a string
find() | Returns the position of a substring in a string
format() | Formats a value
insertAt() | Divides a string into elements and inserts a substring at a specified index position
isEmpty() | Checks whether a string is empty
length() | Returns the length of a string
removeAt() | Divides a string into elements and removes a specified element
replace() | Replaces a part of a string with a new string
replaceAt() | Divides a string into elements and replaces a specified element
squeeze() | Reduces all multiple spaces to single spaces in a string
 | Returns a specified part of a string
toString() | Converts a value to a string
trim() | Returns a string without leading and trailing spaces


WMLScript URL Library

The URL library contains functions for handling URLs.

WMLScript URL Library Functions

Function | Description
 | Replaces special characters in a URL with an escape sequence
getBase() |
 | Returns the fragment in a URL
getHost() | Returns the host specified in a URL
getParameters() | Returns the parameters in the last path segment of a URL
 | Returns the path specified in a URL
getPort() | Returns the port number specified in a URL
getQuery() | Returns the query part in a URL
getReferer() |
getScheme() | Returns the scheme in a URL
isValid() | Returns true if a URL has the right syntax, and false if not
loadString() | Returns the content and the content type of a specified URL
 | Returns an absolute URL from a base URL and a relative URL
unescapeString() | Replaces the escape sequences in a URL with characters


WMLScript WMLBrowser Library

The WMLBrowser library contains functions that can be used to access browser variables.

WMLScript WMLBrowser Library Functions

Function | Description
 | Returns the (relative) URL of the current card
 | Returns the value of a variable
go() | Goes to a new card
newContext() | Clears all variables
prev() | Goes to the previous card
refresh() | Refreshes the current card
setvar() | Sets the value of a variable

Note: The WML specification states that calls to library functions that are not supported by the browser should return invalid. Because of this, all the above functions should be tested against their return value, and proper action should be taken in case a function returns invalid.


Introduction to WSDL

WSDL is an XML-based language for describing Web services and how to access them.

What You Should Already Know

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

· XML
· XML Namespaces
· XML Schema

If you want to study these subjects first, find the tutorials on our Home page.

What is WSDL?

· WSDL stands for Web Services Description Language
· WSDL is written in XML
· WSDL is an XML document
· WSDL is used to describe Web services
· WSDL is also used to locate Web services
· WSDL is not yet a W3C standard

WSDL Describes Web Services

WSDL stands for Web Services Description Language.

WSDL is a document written in XML. The document describes a Web service. It specifies the location of the service and the operations (or methods) the service exposes.

WSDL Development History at W3C

WSDL 1.1 was submitted as a W3C Note by Ariba, IBM and Microsoft for describing services for the W3C XML Activity on XML Protocols in March 2001.

(a W3C Note is made available by the W3C for discussion only. Publication of a Note by W3C indicates no endorsement by W3C or the W3C Team, or any W3C Members)

The first Working Draft of WSDL 1.2 was released by W3C in July 2002.

Go to our to read more about specification status and timeline.


WSDL Tutorial

WSDL Tutorial

wsdl

WSDL (Web Services Description Language) is an XML-based language for describing Web services and how to access them.

Start learning WSDL!

Table of Contents

This introduction to WSDL explains what WSDL is.

WSDL Documents

This chapter explains the main parts of an WSDL document.

WSDL Ports

This chapter explains the WSDL port interface.

WSDL Binding

This chapter explains the WSDL binding interface.

WSDL and UDDI

This chapter explains how UDDI (Universal Description Discovery and Integration) is integrated with WSDL.

WSDL Syntax

The full WSDL syntax as listed in the W3C note.

WSDL Summary

This chapter contains a recommendation on what subject you should study after the WSDL tutorial.

WSDL Tool

One of our favorite tools here at W3schools, Altova XMLSpy, just added a newly redesigned and greatly simplified graphical WSDL editor that creates, edits, validates, visualizes, and generates WSDL files as well as the associated documentation for them. We recommend watching their online flash demo, which clearly demonstrates how easy it is to develop WSDL visually with drag-and-drop functionality:

Check out the XMLSpy WSDL editor in action


WSDL Bindings

WSDL bindings defines the message format and protocol details for a web service.

Binding to SOAP

A request-response operation example:

<message name="getTermRequest">

 <part name="term" type="xs:string"/>

</message>

<message name="getTermResponse">

 <part name="value" type="xs:string"/>

</message>

<portType name="glossaryTerms">

<operation name="getTerm">

    <input message="getTermRequest"/>

    <output message="getTermResponse"/>

</operation>

</portType>

<binding type="glossaryTerms" name="b1">

<soap:binding style="document"

transport="http://schemas.xmlsoap.org/soap/http" />

<operation>

  <soap:operation

   soapAction="http://example.com/getTerm"/>

  <input>

    <soap:body use="literal"/>

  </input>

  <output>

    <soap:body use="literal"/>

  </output>

</operation>

</binding>

The binding element has two attributes - the name attribute and the type attribute.

The name attribute (you can use any name you want) defines the name of the binding, and the type attribute points to the port for the binding, in this case the "glossaryTerms" port.

The soap:binding element has two attributes - the style attribute and the transport attribute.

The style attribute can be "rpc" or "document". In this case we use document. The transport attribute defines the SOAP protocol to use. In this case we use HTTP.

The operation element defines each operation that the port exposes.

For each operation the corresponding SOAP action has to be defined. You must also specify how the input and output are encoded. In this case we use "literal".


WSDL Documents

A WSDL document is just a simple XML document.

It contains set of definitions to describe a web service.

The WSDL Document Structure

A WSDL document describes a web service using these major elements:

Element | Defines
<portType> | The operations performed by the web service
<message> | The messages used by the web service
<types> | The data types used by the web service
<binding> | The communication protocols used by the web service

The main structure of a WSDL document looks like this:

<definitions>

<types>

 definition of types........

</types>

<message>

 definition of a message....

</message>

<portType>

 definition of a port.......

</portType>

<binding>

 definition of a binding....

</binding>

</definitions>

A WSDL document can also contain other elements, like extension elements and a service element that makes it possible to group together the definitions of several web services in one single WSDL document.

For a complete syntax overview go to the chapter WSDL Syntax.

WSDL Ports

The <portType> element is the most important WSDL element.

It describes a web service, the operations that can be performed, and the messages that are involved.

The <portType> element can be compared to a function library (or a module, or a class) in a traditional programming language.

WSDL Messages

The <message> element defines the data elements of an operation.

Each message can consist of one or more parts. The parts can be compared to the parameters of a function call in a traditional programming language.

WSDL Types

The <types> element defines the data type that are used by the web service.

For maximum platform neutrality, WSDL uses XML Schema syntax to define data types.

WSDL Bindings

The <binding> element defines the message format and protocol details for each port.

WSDL Example

This is a simplified fraction of a WSDL document:

<message name="getTermRequest">

 <part name="term" type="xs:string"/>

</message>

<message name="getTermResponse">

 <part name="value" type="xs:string"/>

</message>

<portType name="glossaryTerms">

<operation name="getTerm">

    <input message="getTermRequest"/>

    <output message="getTermResponse"/>

</operation>

</portType>

In this example the <portType> element defines "glossaryTerms" as the name of a port, and "getTerm" as the name of an operation.

The "getTerm" operation has an input message called "getTermRequest" and an output message called "getTermResponse".

The <message> elements define the parts of each message and the associated data types.

Compared to traditional programming, glossaryTerms is a function library, "getTerm" is a function with "getTermRequest" as the input parameter and getTermResponse as the return parameter.


WSDL Ports

A WSDL port describes the interfaces (legal operations) exposed by a web service.

WSDL Ports

The <portType> element is the most important WSDL element.

It defines a web service, the operations that can be performed, and the messages that are involved.

The port defines the connection point to a web service. It can be compared to a function library (or a module, or a class) in a traditional programming language. Each operation can be compared to a function in a traditional programming language.

Operation Types

The request-response type is the most common operation type, but WSDL defines four types:

Type | Definition
One-way | The operation can receive a message but will not return a response
Request-response | The operation can receive a request and will return a response
Solicit-response | The operation can send a request and will wait for a response
Notification | The operation can send a message but will not wait for a response

One-Way Operation

A one-way operation example:

<message name="newTermValues">

 <part name="term" type="xs:string"/>

 <part name="value" type="xs:string"/>

</message>

<portType name="glossaryTerms">

 <operation name="setTerm">

    <input name="newTerm" message="newTermValues"/>

 </operation>

</portType >

In this example the port "glossaryTerms" defines a one-way operation called "setTerm".

The "setTerm" operation allows input of new glossary terms messages using a "newTermValues" message with the input parameters "term" and "value". However, no output is defined for the operation.

Request-Response Operation

A request-response operation example:

<message name="getTermRequest">

 <part name="term" type="xs:string"/>

</message>

<message name="getTermResponse">

 <part name="value" type="xs:string"/>

</message>

<portType name="glossaryTerms">

<operation name="getTerm">

    <input message="getTermRequest"/>

    <output message="getTermResponse"/>

</operation>

</portType>

In this example the port "glossaryTerms" defines a request-response operation called "getTerm".

The "getTerm" operation requires an input message called "getTermRequest" with a parameter called "term", and will return an output message called "getTermResponse" with a parameter called "value".


WSDL Summary

You Have Learned WSDL, Now What?

 Top Previous Next

WSDL Summary

This tutorial has taught you how to create WSDL documents that describes a web service. It also specifies the location of the service and the operations (or methods) the service exposes.

You have learned how to define the message format and protocol details for a web service.

You have also learned that you can register and search for web services with UDDI.

Now You Know WSDL, What's Next?

The next step is to learn about SOAP and Web Services.

SOAP

SOAP is a simple XML-based protocol that allows applications to exchange information over HTTP.

Or more simply: SOAP is a protocol for accessing a web service.

If you want to learn more about SOAP, please visit our .

Web Services

Web services can convert your applications into web-applications.

By using XML, messages can be sent between applications.

If you want to learn more about web services, please visit our Web Services tutorial.


WSDL Syntax

The Full WSDL Syntax

The full WSDL 1.2 syntax as described in the W3C Working Draft is listed below.

<wsdl:definitions name="nmtoken"? targetNamespace="uri">

  <import namespace="uri" location="uri"/> *

  <wsdl:documentation .... /> ?

  <wsdl:types> ?

      <wsdl:documentation .... /> ?

      <xsd:schema .... /> *

  </wsdl:types>

  <wsdl:message name="ncname"> *

      <wsdl:documentation .... /> ?

      <part name="ncname" element="qname"? type="qname"?/> *

  </wsdl:message>

  <wsdl:portType name="ncname"> *

      <wsdl:documentation .... /> ?

      <wsdl:operation name="ncname"> *

          <wsdl:documentation .... /> ?

          <wsdl:input message="qname"> ?

              <wsdl:documentation .... /> ?

          </wsdl:input>

          <wsdl:output message="qname"> ?

              <wsdl:documentation .... /> ?

          </wsdl:output>

          <wsdl:fault name="ncname" message="qname"> *

              <wsdl:documentation .... /> ?

          </wsdl:fault>

      </wsdl:operation>

  </wsdl:portType>

  <wsdl:serviceType name="ncname"> *

      <wsdl:portType name="qname"/> +

  </wsdl:serviceType>

  <wsdl:binding name="ncname" type="qname"> *

      <wsdl:documentation .... /> ?

      <-- binding details --> *

      <wsdl:operation name="ncname"> *

          <wsdl:documentation .... /> ?

          <-- binding details --> *

          <wsdl:input> ?

              <wsdl:documentation .... /> ?

              <-- binding details -->

          </wsdl:input>

          <wsdl:output> ?

              <wsdl:documentation .... /> ?

              <-- binding details --> *

          </wsdl:output>

          <wsdl:fault name="ncname"> *

              <wsdl:documentation .... /> ?

              <-- binding details --> *

          </wsdl:fault>

      </wsdl:operation>

  </wsdl:binding>

  <wsdl:service name="ncname" serviceType="qname"> *

      <wsdl:documentation .... /> ?

      <wsdl:port name="ncname" binding="qname"> *

          <wsdl:documentation .... /> ?

          <-- address details -->

      </wsdl:port>

  </wsdl:service>

</wsdl:definitions>


WSDL and UDDI

Universal Description, Discovery and Integration (UDDI) is a directory service where businesses can register and search for Web services.

What is UDDI

UDDI is a platform-independent framework for describing services, discovering businesses, and integrating business services by using the Internet.

· UDDI stands for Universal Description, Discovery and Integration
· UDDI is a directory for storing information about web services
· UDDI is a directory of web service interfaces described by WSDL
· UDDI communicates via SOAP
· UDDI is built into the Microsoft .NET platform

What is UDDI Based On?

UDDI uses World Wide Web Consortium (W3C) and Internet Engineering Task Force (IETF) Internet standards such as XML, HTTP, and DNS protocols.

UDDI uses WSDL to describe interfaces to web services

Additionally, cross platform programming features are addressed by adopting SOAP, known as XML Protocol messaging specifications found at the W3C Web site.

UDDI Benefits

Any industry or businesses of all sizes can benefit from UDDI

Before UDDI, there was no Internet standard for businesses to reach their customers and partners with information about their products and services. Nor was there a method of how to integrate into each other's systems and processes.

Problems the UDDI specification can help to solve:

· Making it possible to discover the right business from the millions currently online
· Defining how to enable commerce once the preferred business is discovered
· Reaching new customers and increasing access to current customers
· Expanding offerings and extending market reach
· Solving customer-driven need to remove barriers to allow for rapid participation in the global Internet economy
· Describing services and business processes programmatically in a single, open, and secure environment

How can UDDI be Used

If the industry published an UDDI standard for flight rate checking and reservation, airlines could register their services into an UDDI directory. Travel agencies could then search the UDDI directory to find the airline's reservation interface. When the interface is found, the travel agency can communicate with the service immediately because it uses a well-defined reservation interface.

Who is Supporting UDDI?

UDDI is a cross-industry effort driven by all major platform and software providers like Dell, Fujitsu, HP, Hitachi, IBM, Intel, Microsoft, Oracle, SAP, and Sun, as well as a large community of marketplace operators, and e-business leaders.

Over 220 companies are members of the UDDI community.


Introduction To XForms

XForms is the next generation of HTML forms.

XForms uses XML to create input forms on the Web.

What You Should Already Know

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

· HTML
· HTML Forms
· XHTML
· XML

If you want to study these subjects first, find the tutorials on our Home Page.

What Is XForms?

· XForms is the next generation of HTML forms
· XForms is richer and more flexible than HTML forms
· XForms will be the forms standard in XHTML 2.0
· XForms is platform and device independent
· XForms separates data and logic from presentation
· XForms uses XML to define form data
· XForms stores and transports data in XML documents
· XForms contains features like calculations and validations of forms
· XForms reduces or eliminates the need for scripting
· XForms is a W3C Recommendation

XForms Is The Successors Of HTML Forms

Forms are an important part of many web applications today. An HTML form makes it possible for web applications to accept input from a user.

Today, ten years after HTML forms became a part of the HTML standard, web users do complex transactions that are starting to exceed the limitations of standard HTML forms.

XForms provides a richer, more secure, and device independent way of handling web input. We should expect future web solutions to demand the use of XForms-enabled browsers (All future browsers should support XForms).

XForms Separate Data From Presentation

XForms uses XML for data definition and HTML or XHTML for data display. XForms separates the data logic of a form from its presentation. This way the XForms data can be defined independent of how the end-user will interact with the application.

XForms Uses XML To Define Form Data

With XForms, the rules for describing and validating data are expressed in XML.

XForms Uses XML To Store And Transport Data

With XForms, the data displayed in a form are stored in an XML document, and the data submitted from the form, are transported over the internet using XML.

The data content is coded in, and transported as Unicode bytes.

XForms Is Device Independent

Separating data from presentation makes XForms device independent, because the data model can be used for all devices. The presentation can be customized for different user interfaces, like mobile phones, handheld devices, and Braille readers for the blind.

Since XForms is device independent and based on XML, it is also possible to add XForms elements directly into other XML applications like VoiceXML (speaking web data), WML (Wireless Markup Language), and SVG (Scalable Vector Graphics).

XForms Is A W3C Recommendation

XForms 1.0 became a W3C Recommendation in October 2003.

The official W3C recommendation can be found at this link:


XForms Actions

XForms Actions are handling response to events.

The Message Action

The XForms element <message> defines a message to be displayed in the XForms user interface.

Look at this simplified example:

<input ref="fname">

<label>First Name</label>

<message level="ephemeral" event="DOMFocusIn">

Input Your First Name

</message>

</input>

In the example above, the message "Input Your First Name" should be displayed as a tool tip when the user focus in on the input field.

The event="DomFocusIn" defines the event to trigger the action.

The level="ephemeral" defines the message to be displayed as a tool tip.

Other values for the level attribute are modal and modeless, defining different types of message boxes.

The Setvalue Action

The XForms element <setvalue> defines a value to be set in response to an event.

Look at this simplified example:

<input ref="size">

<label>Size</label>

<setvalue value="50" event="xforms-ready"/>

</input>

In the example above, the value 50 will be stored in the instance element <size> when the form opens.


XForms And XPath

XForms uses XPath to address data. This is called binding.

XForms Binding

XForms uses two sections to define data: The XForms model and the XForms user interface.

The XForms model is an XML template (instance) for the data, and the XForms user interface is a description of the input and display of the data.

XForms uses XPath to define the connection between the two sections. This is called binding.

XPath

XPath is a W3C standard syntax for defining parts of XML documents.

XPath uses path expressions to identify nodes in an XML document. These path expressions look much like the expressions you see when you work with a computer file system.

This XPath expression:

/person/fname

addresses the fname node in the XML document:

<person>

 <fname>Hege</fname>

 <lname>Refsnes</lname>

</person>

Learn more about XPath in our XPath tutorial

Binding Using Ref

With an XForms model instance like this:

<instance>

<person>

  <name>

    <fname/>

    <lname/>

  </name>

</person>

</instance>

The XForms user interface can bind <input> elements using the ref attribute:

<input ref="name/fname">

<label>First Name</label>

</input>

<input ref="name/lname">

<label>Last Name</label>

</input>

The ref="name/fname" attribute in the example above is an XPath expression pointing to the <fname> element in the instance model. This binds the input field to the <fname> element in the XML document (instance) that is collecting data from the form.

The XForms user interface could also use a reference like this:

<input ref="/person/name/fname">

<label>First Name</label>

</input>

<input ref="/person/name/lname">

<label>Last Name</label>

</input>

In the example above, the slash (/) at the beginning of the XPath expression indicates the root of the XML document.

Binding Using Bind

With an XForms model instance like this:

<model>

<instance>

<person>

  <name>

    <fname/>

    <lname/>

  </name>

</person>

</instance>

<bind nodeset="/person/name/fname" id="firstname"/>

<bind nodeset="/person/name/lname" id="lastname"/>

</model>

The XForms user interface can bind <input> elements using the bind attribute:

<input bind="firstname">

<label>First Name</label>

</input>

<input bind="lastname">

<label>Last Name</label>

</input>

Why two different ways to bind input control elements to instance data?

Well, when you start using XForms in complex applications, you will find binding using bind to be a more flexible way to deal with multiple forms and multiple instance models.


XForms Data Types

The XForms model supports XML Schema data types.

XML Schema Data Types

The XForms model supports XML Schema data types. This feature allows the XForms processor to check the data for correct input values.

You can learn more about XML Schema in our XML Schema tutorial.

To use XML Schema data types, you must add the XML Schema namespaces to your namespace declaration like this:

<html

xmlns:xf="http://www.w3.org/2002/xforms"

xmlns:xsd="http://www.w3.org/2001/XMLSchema"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

After adding the XML Schema namespaces, you can add type attributes to your XForms instance elements like this:

<xf:instance>

<person xmlns="">

<fname xsi:type="xsd:string"/>

<lname xsi:type="xsd:string"/>

<born  xsi:type="xsd:date>"/>

<size  xsi:type="xsd:integer"/>

</person>

</xf:instance>

XForms supports all XML Schema data types except for the following:

· duration
· ENTITY
· ENTITIES
· NOTATION

For a complete reference to XForms data types:

Complete XForms Data Type Reference

Try it yourself

Binding Datatypes

In XForms you can also use the <bind> element to associate data types with instance data:

<xf:bind nodeset="/person/size" type="xsd:integer"/>


XForms Example

Test It With Internet Explorer

You can test the example on this page using Internet Explorer 5 or later.

Just click on the link below the example.

An XForms Example

Take a look at this document using XForms:

<xforms>

<model>

<instance>

<person>

  <fname/>

  <lname/>

</person>

</instance>

<submission id="form1" method="get"

 action="submit.asp"/>

</model>

<input ref="fname">

<label>First Name</label></input><br />

<input ref="lname">

<label>Last Name</label></input><br /><br />

<submit submission="form1">

<label>Submit</label></submit>

</xforms>

The page will display pretty much like this:

First Name | [TEditFormControlObj]
Last Name | [TEditFormControlObj]

Try the example on your own computer


XForms Functions

XForms has some predefined functions. But you can also call functions defined in scripts.

XForms Functions

The XForms function library includes the entire XPath 1.0 core function library.

The XPath core functions can be found here: http://www.w3schools.com/xpath/xpath_functions.asp

The following table lists the additional functions within XForms:

Function

Description

boolean-from-string(string)

Returns true if the parameter string is "true" or "1" and false if the parameter string is "false" or "0"

if(booleantest, string1, string2)

Evaluates the Booleantest parameter and returns string1 if the test is true, and string2 if the test is false

avg(node-set)

Returns the average of all the nodes in the specified node-set. The value of each node is converted to a number. If the node-set is empty it returns NaN

<values>

<value>10</value>

<value>50</value>

<value>0</value>

</values>

avg(/values/value)

Returns: 20

min(node-set)

Returns the minimum value of all the nodes in the specified node-set. The value of each node is converted to a number. If the node-set is empty it returns NaN

<values>

<value>10</value>

<value>20</value>

<value>0</value>

</values>

min(/values/value)

Returns: 0

max(node-set)

Returns the maximum value of all the nodes in the specified node-set. The value of each node is converted to a number. If the node-set is empty it returns NaN

<values>

<value>10</value>

<value>20</value>

<value>0</value>

</values>

max(/values/value)

Returns: 20

count-non-empty(node-set)

Returns the number of non-empty nodes in the specified node-set

<values>

<value>10</value>

<value>20</value>

<value>0</value>

<value />

</values>

count-non-empty(/values/value)

Returns: 3

index(string)

Returns the current index for a given repeat set

property(string)

Returns the property named by the string parameter

· property("version") - returns the XForms version number
· property("conformance-level") - returns the XForms conformance level ("basic" or "full")

now()

Returns the current system date and time in xs:dateTime format

instance(string)

An XForms Model can contain more than one instance. This function returns the root node of the specified instance data

<xforms:instance id="orderform">

<firstName>John</firstName>

</xforms:instance>

ref="instance('orderform')/firstName"

This example returns a node-set that consists of the firstName element node from the instance named "orderform"

days-from-date(string)

If the string parameter represents a legal xs:date or xs:dateTime, it returns the number of days between the specified date and 1970-01-01, otherwise it returns NaN

days-from-date("2002-01-02") returns 11689

days-from-date("1969-12-29") returns -3

seconds-from-dateTime(string)

If the string parameter represents a legal xs:dateTime, it returns the number of seconds between the specified dateTime and 1970-01-01T00:00:00Z, otherwise it returns NaN

seconds(string)

If the string parameter represents a legal xs:duration, it returns the number specified in the seconds component plus 60 * the number specified in the minutes component, plus 60 * 60 * the number specified in the hours component, plus 60 * 60 * 24 * the number specified in the days component, otherwise it returns NaN

seconds("P1Y2M") returns 0

seconds("P3DT10H30M1.5S") returns 297001.5

seconds("3") returns NaN

months(string)

If the string parameter represents a legal xs:duration, it returns the number specified in the months component plus 12 * the number specified in the years component, otherwise it returns NaN

months("P1Y2M") returns 14

months("-P19M") returns -19


XForms Input Controls

The user interface of XForms uses XForms controls.

XForms Controls

The user interface elements in XForms are called XForms Controls.

The most commonly used control elements are <input> and <submit>.

Each control element has a ref attribute pointing back to the XForms data model.

Device Independent Controls

It is important to know that the XForms user interface does not describe exactly how to display the XForms controls.

Because XForms is platform and device independent, XForms leaves it up to the browser to decide how to display the controls.

This way XForms can be used for all types of devices, personal computers, cell phones, hand held computers and much more. XForms is also the perfect solution for defining user interfaces for people with disabilities (handicapped, blind).

The Input Control

The input control is the most common XForms control. It is used for input one line of text:

<input ref="name/fname">

<label>First Name</label>

</input>

Most often the input control will display as an input field like this:

First Name: [TEditFormControlObj]

The <label> Element

The <label> element is a mandatory child element for all XForms input controls.

The reason for this is to secure that the form can be used for all types of devices (because labels can be treated in different ways). For voice software the label has to be spoken, and for some hand held computers the label has to follow the input, screen by screen.

The Secret Control

The secret control is a special variant of the input control, designed to input passwords or other hidden information:

<secret ref="name/password">

<label>Password:</label>

</secret>

Most often the secret control will display as an input field like this:

Password: [TEditFormControlObj]

The Textarea Control

The textarea control is used for multi-line input:

<textarea ref="message">

<label>Message</label>

</textarea>

The textarea control might display as an input field like this:

Message:

[TTextAreaFormControlObj]

The Submit Control

The submit control is used for submitting the data:

<submit submission="form1">

<label>Submit</label>

</submit>

The Trigger Control

The trigger is used to trigger an action:

<trigger ref="calculate">

<label>Calculate!</label>

</trigger>

The Output Control

The output control is used to display XForms data:

<p>First Name: <output ref="name/fname" /></p>

<p>Last Name:  <output ref="name/lname" /></p>

The example above will simply output the content of the <fname> and <lname> node in the XForms XML document (XForms instance):

<instance>

<person>

  <name>

    <fname>Hege</fname>

    <lname>Refsnes</lname>

  </name>

</person>

</instance>

And display it like this:

First Name: Hege

Last Name: Refsnes

The Upload Control

The upload control is designed for uploading files to a server:

<upload bind="name">

<label>File to upload:</label>

<filename bind="file"/>

<mediatype bind="media"/>

</upload>


XForms Model

The XForms model defines a template for the data to be collected in a form.

The XForms Framework

The purpose of an HTML form is to collect data. XForms has the same purpose.

With XForms, input data is described in two different parts:

· The XForm model (to describe the data and the logic)
· The XForm user interface (to display and input the data)

The XForms model defines what the form is, what data it contains, and what it should do.

The XForms user interface defines the input fields and how they should be displayed.

The XForms Model

The XForms model is used to describe the data.

The data model is an instance (a template) of an XML document.

The XForms model defines a data model inside a <model> element:

<model>

<instance>

<person>

  <fname/>

  <lname/>

</person>

</instance>

<submission id="form1"

action="submit.asp"

method="get"/>

</model>

From the example above, you can see that the XForms model uses an <instance> element to define the XML template for data to be collected, and a <submission> element to describe how to submit the data.

The XForms model does not say anything about the visual part of the form (the user interface).

XForms Namespace

If you are missing the XForms namespace in these examples, or if you don't know what a namespace is, it will be introduced in the next chapter.

The <instance> Element

The XForms model uses an <instance> element to define the data to be collected.

XForms is always collecting data for an XML document. The <instance> element in the XForms model defines the XML document.

In the example above the "data instance" (the XML document) the form is collecting data for looks like this:

<person>

<fname/>

<lname/>

</person>

After collecting the data, the XML document might look like this:

<person>

<fname>John</fname>

<lname>Smith</lname>

</person>

The <submission> Element

The XForms model uses a <submission> element to describe how to submit the data.

The <submission> element defines a form and how it should be submitted. In the example above, the id="form1" attribute identifies the form, the action="submit.asp" attribute defines the URL to where the form should be submitted, and the method="get" attribute defines the method to use when submitting the data.

The XForms User Interface

The XForms user interface is used to display and input the data.

The user interface elements of XForms are called controls (or input controls):

<input ref="fname"><label>First Name</label></input>

<input ref="lname"><label>Last Name</label></input>

<submit submission="form1"><label>Submit</label></submit>

In the example above the two <input> elements define two input fields. The ref="fname" and ref="lname" attributes point to the <fname> and <lname> elements in the XForms model.

The <submit> element has a submission="form1" attribute which refers to the <submission> element in the XForms model. A submit element is usually displayed as a button.

Notice the <label> elements in the example. With XForms every input control element has a required <label> element.

You'll Need A Container

XForms is not designed to work alone. There is no such thing as an XForms document.

XForms has to run inside another XML document. It could run inside XHTML 1.0, and it will run inside XHTML 2.0.

All Together Now

If we put it all together the document will look like this:

<xforms>

<model>

<instance>

<person>

  <fname/>

  <lname/>

</person>

</instance>

<submission id="form1"

action="submit.asp"

method="get"/>

</model>

<input ref="fname"><label>First Name</label></input>

<input ref="lname"><label>Last Name</label></input>

<submit submission="form1"><label>Submit</label></submit>

</xforms>

And the page will display pretty much like this:

First Name | [TEditFormControlObj]
Last Name | [TEditFormControlObj]

The XForms Processor

An XForms Processor built into the browser will be responsible for submitting the XForms data to a target.

The data can be submitted as XML and could look something like this:

<person>

<fname>Hege</fname>

<lname>Refsnes</lname>

</person>

Or it can be submitted as text, looking something like this:

fname=Hege;lname=Refsnes


XForms Namespace

You should use an XForms namespace in HTML and XHTML 1.0.

But hopefully not in XHTML 2.0.

The XForms Namespace

The official namespace for XForms is: http://www.w3.org/2002/xforms

If you want to use XForms in HTML (or XHTML 1.0), you should declare all XForms elements with an XForms namespace.

XForms is expected to be a standard part of XHTML 2.0, eliminating the need for the XForms namespace.

This example uses the XForms namespace:

<html xmlns:xf="http://www.w3.org/2002/xforms">

<head>

<xf:model>

<xf:instance>

<person>

  <fname/>

  <lname/>

</person>

</xf:instance>

<xf:submission id="form1" method="get"

action="submit.asp"/>

</xf:model>

</head>

<body>

<xf:input ref="fname">

<xf:label>First Name</xf:label></xf:input>

<br />

<xf:input ref="lname">

<xf:label>Last Name</xf:label></xf:input>

<br />

<br />

<xf:submit submission="form1">

<xf:label>Submit</xf:label></xf:submit>

</body>

</html>

In the example above we have used the xf: prefix for the XForms namespace, but you are free to call the prefix anything you want.


XForms Properties

XForms properties define data restrictions, types and behaviors.

XForms Properties

XForms uses properties to define restrictions (or other attributes) that can affect the behavior of XForms controls.

Examples:

A required="true()" property will not allow the specified instance data to be submitted as an empty value.

A type="decimal" property will only allow a decimal value to be submitted.

A calculate property can calculate a value for the instance data.

Please refer to the properties reference at the bottom of this page.

Binding Properties To Data

XForms uses the <bind> element to bind XForms properties to XForms data:

<model>

<instance>

<person>

    <fname/>

    <lname/>

</person>

</instance>

<bind nodeset="person/lname" required="true()"/>

</model>

In the example above, the attribute nodeset="person/lname" binds the property required="true()" to the instance data element <lname>.

XForms Properties Reference

Name | Description
calculate | Defines a calculation to be performed on the item
constraint | Defines a constraint for the item
p3ptype | Defines a P3P data type for the item
readonly | Defines an edit restriction for the item (cannot be changed)
relevant | Defines how relevant the data is (for display or submission)
required | Defines if data item is required (cannot be blank)
type | Defines the data type for the item


XForms Reference - Datatypes

XForms Data Types Reference

Complete XForms Data Types Reference:

String Data Types

Name | Description
ID | A string that represents the ID attribute
IDREF | A string that represents the IDREF attribute
IDREFS |
language | A string that contains a valid language id (e.g. en, en-US)
Name | A string that contains a valid XML name
NCName |
NMTOKEN | A string that represents the NMTOKEN attribute
NMTOKENS |
normalizedString | A string that does not contain new line characters or tabs
QName |
string | A string. This is the default data type XForms will use if no data type is specified. Note: string may contain tab characters and new line characters
token | A string that does not contain line feeds, carriage returns, tabs, leading or trailing spaces, or multiple spaces

All string data types are derived from the string data type itself.

Date and Time Data Types

Name | Description
date | Defines a date value
dateTime | Defines a date and time value
gDay | Defines a part of a date - the day (DD)
gMonth | Defines a part of a date - the month (MM)
gMonthDay | Defines a part of a date - the month and day (MM-DD)
gYear | Defines a part of a date - the year (CCYY)
gYearMonth | Defines a part of a date - the year and month (CCYY-MM)
time | Defines a time value

Numeric Data Types

Name | Description
byte | A signed 8-bit integer
decimal | A decimal value
int | A signed 32-bit integer
integer | An integer value
long | A signed 64-bit integer
negativeInteger | An integer containing only negative values (..,-2,-1)
nonNegativeInteger | An integer containing only non-negative values (0,1,2,..)
nonPositiveInteger | An integer containing only non-positive values (..,-2,-1,0)
positiveInteger | An integer containing only positive values (1,2, ..)
short | A signed 16-bit integer
unsignedLong | An unsigned 64-bit integer
unsignedInt | An unsigned 32-bit integer
unsignedShort | An unsigned 16-bit integer
unsignedByte | An unsigned 8-bit integer

All numeric data types are derived from the decimal data type.

Miscellaneous Data Types

Name | Description
anyURI | Represents a URI, which includes web page addresses
base64Binary | Allows characters, including control characters, that otherwise aren't representable in XML
boolean | Defines a true/false or 1/0 value
double |
float |
hexBinary |

XForms Data Types

Name | Description
listItems | Represents a whitespace-separated list
listItem | Represents only non-whitespace characters. An excellent base type for a whitespace-separated list
dayTimeDuration | Represents a duration of a certain number of seconds
yearMonthDuration | Represents a duration of a certain number of months


XForms Selection Controls

The user interface of XForms uses XForms controls.

The Select1 Control

The select1 control is used for selecting one item from a list of items:

<select1 ref="status">

<label>Status:</label>

<item>

  <label>Male</label>

  <value>M</value>

</item>

<item>

  <label>Female</label>

  <value>F</value>

</item>

</select1>

In the example above, the user can choose one of to values, Male or Female. The data stored in the XForms instance (XML document) will be M or F.

Try it yourself

The Select Control

The select control is used for selecting items (one or many) from a list of items:

<select ref="languages">

<label>Languages:</label>

<item>

  <label>English</label>

  <value>E</value>

</item>

<item>

  <label>French</label>

  <value>F</value>

</item>

<item>

  <label>Spanish</label>

  <value>S</value>

</item>

<item>

  <label>German</label>

  <value>G</value>

</item>

</select>

In the example above, the user can choose one or many of the values.

The Range Control

The range control is used for selecting a value from a range of values:

<range ref="length" start="0" end="100" step="5">

<label>Length:</label>

</range>

In the example above, the user can choose a value between 0 and 100 in steps of 5.


XForms Tutorial

XForms Tutorial

XForms is the next generation of HTML forms.

In our XForms tutorial you will learn how to start using XForms in your applications.

Start learning XForms!

Table Of Contents

This chapter explains what XForms is and how it differs from HTML forms.

XForms Model

This chapter describes the XForms model.

XForms Namespace

This chapter describes the XForms namespace.

XForms Example

This chapter demonstrates an XForms example.

XForms and XPath

This chapter describes how XForms uses XPath to address data.

XForms Input

This chapter describes the XForms user interface controls.

XForms Data types

This chapter describes the data types used in XForms.

XForms Properties

This chapter describes XForms properties..

XForms Actions

This chapter describes XForms actions..

XForms Functions

XForms has some predefined functions. But you can also call functions defined in scripts.


tryit_xapp_view046b.html

First Name [TEditFormControlObj]

Last Name [TEditFormControlObj]

Submit


tryit_xapp_view189c.html

Status: [TComboFormControlObj]

Submit

M


tryit_xapp_view3411.html

Your Name [TEditFormControlObj]


tryit_xapp_viewe98b.html

Name [TEditFormControlObj]

Size [TEditFormControlObj]

Submit

Julia Smith C


tryit_xapp_viewf321.html

HegeRefsnes Hege Refsnes


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

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.

All the standard event attributes of the tags. This reference describes the attributes, and shows possible values for each.


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 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 | Value | Description
onload | script | 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 | Value | Description
onchange | script | Script to be run when the element changes
onsubmit | script | Script to be run when the form is submitted
onreset | script | Script to be run when the form is reset
onselect | script | Script to be run when the element is selected
onblur | script | Script to be run when the element loses focus
onfocus | script | 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 | Value | Description
onkeydown | script | What to do when key is pressed
onkeypress | script | What to do when key is pressed and released
onkeyup | script | 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 | Value | Description
onclick | script | What to do on a mouse click
ondblclick | script | What to do on a mouse doubleclick
onmousedown | script | What to do when mouse button is pressed
onmousemove | script | What to do when mouse pointer moves
onmouseover | script | What to do when mouse pointer moves over an element
onmouseout | script | What to do when mouse pointer moves out of an element
onmouseup | script | What to do when mouse button is released


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 Ståle 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 time-consuming 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 vs 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 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: validates the XHTML part of this page.

A click on this symbol: 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 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's too simple.

By splitting XHTML into modules, the W3C (World Wide web Consortium) has created small and well-defined sets of XHTML elements that can be used separately for small devices, or combined with other XML standards into larger and more complex applications.

With modular XHTML, 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 | Description
Applet Module | Defines the deprecated* applet element
Base Module | Defines the base element
Basic Forms Module | Defines the basic forms elements
Basic Tables Module | Defines the basic table elements
Bi-directional Text Module | Defines the bdo element
Client Image Map Module | Defines browser side image map elements
Edit Module | Defines the editing elements del and ins
Forms Module | Defines all elements used in forms
Frames Module | Defines the frameset elements
Hypertext Module | Defines the a element
Iframe Module | Defines the iframe element
Image Module | Defines the img element
Intrinsic Events Module | Defines event attributes like onblur and onchange
Legacy Module | Defines deprecated* elements and attributes
Link Module | Defines the link element
List Module | Defines the list elements ol, li, ul, dd, dt, and dl
Metainformation Module | Defines the meta element
Name Identification Module | Defines the deprecated* name attribute
Object Module | Defines the object and param elements
Presentation Module | Defines presentation elements like b and i
Scripting Module | Defines the script and noscript elements
Server Image Map Module | Defines server side image map elements
Structure Module | Defines the elements html, head, title and body
Style Attribute Module | Defines the style attribute
Style Sheet Module | Defines the style element
Tables Module | Defines the elements used in tables
Target Module | Defines the target attribute
Text Module | Defines text container elements like p and h1

* Deprecated elements should not be used in XHTML.


XHTML Quiz

You can test your XHTML skills with W3Schools' Quiz.

The Test

The test contains 20 questions and there is no time limit.

The test is not official, it's just a nice way to see how much you know, or don't know, about XHTML.

Your Score Will Be Counted

You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 20 points.

Good luck! Start the XHTML Quiz


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 | Value | Description
class | class_rule or style_rule | The class of the element
id | id_name | A unique id for the element
style | style_definition | An inline style definition
title | tooltip_text | A text to display in a tool tip

Language Attributes

Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.

Attribute | Value | Description
dir | ltr | rtl | Sets the text direction
lang | language_code | Sets the language code

Keyboard Attributes

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


XHTML Summary

You Have Learned XHTML, Now What?

 Top Previous Next

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.


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 | XHTML
compact | compact="compact"
checked | checked="checked"
declare | declare="declare"
readonly | readonly="readonly"
disabled | disabled="disabled"
selected | selected="selected"
defer | defer="defer"
ismap | ismap="ismap"
nohref | nohref="nohref"
noshade | noshade="noshade"
nowrap | nowrap="nowrap"
multiple | multiple="multiple"
noresize | 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 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:

[TEditFormControlObj]


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 "well-formed" 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 !!!


XLink and XPointer Tutorial

XLink and XPointer Tutorial

xpath

Linking in XML is divided into two parts: XLink and XPointer.

XLink defines a standard way of creating hyperlinks in XML documents.

XPointer allows the hyperlinks to point to more specific parts (fragments) in the XML document.

Start learning XLink and XPointer!

Table of Contents

XLink and XPointer Introduction

This chapter explaines what the XLink and XPointer languages are.

XLink and XPointer Syntax

The syntax of XLink and XPointer.

An example of using XLink in an XML document.

XPointer Example

An example of using XLink and XPointer in an XML document.

This chapter contains a summary on what you have learned in this tutorial and a recommendation on what subject you should study next.

XLink Reference

XLink attribute reference.


XLink Example

Let's try to learn some basic XLink syntax by looking at an example.

The XML Example Document

Look at the following XML document, "bookstore.xml", that represents a few books:

<?xml version="1.0" encoding="ISO-8859-1"?>

<bookstore xmlns:xlink="http://www.w3.org/1999/xlink">

<book title="Harry Potter">

<description

xlink:type="simple"

xlink:href="http://book.com/images/HPotter.gif"

xlink:show="new">

As his fifth year at Hogwarts School of Witchcraft and

Wizardry approaches, 15-year-old Harry Potter is.......

</description>

</book>

<book title="XQuery Kick Start">

<description

xlink:type="simple"

xlink:href="http://book.com/images/XQuery.gif"

xlink:show="new">

XQuery Kick Start delivers a concise introduction

to the XQuery standard.......

</description>

</book>

</bookstore>

bookstore.xml" file in your browser

In the example above the XLink namespace is declared at the top of the document (xmlns:xlink="http://www.w3.org/1999/xlink"). This means that the document has access to the XLink attributes and features.

The xlink:type="simple" creates a simple "HTML-like" link. You can also specify more complex links (multidirectional links), but for now, we will only use simple links.

The xlink:href attribute specifies the URL to link to, and the xlink:show attribute specifies where to open the link. xlink:show="new" means that the link (in this case, an image) should open in a new window.

XLink - Going Further

In the example above we have only demonstrated simple links. XLink is getting more interesting when we want to access remote locations as resources, instead of standalone pages. The <description> element in the example above sets the value of the xlink:show attribute to "new". This means that the link should open in a new window. We could have set the value of the xlink:show attribute to "embed". This means that the resource should be processed inline within the page. When you consider that this could be another XML document and not just an image, you could, for example, build a hierarchy of XML documents.

With XLink, you can also specify WHEN the resource should appear. This is handled by the xlink:actuate attribute. xlink:actuate="onLoad" specifies that the resource should be loaded and shown when the document loads. However, xlink:actuate="onRequest" means that the resource is not read or shown before the link is clicked. This is very handy for low-bandwidth settings.


Introduction to XLink and XPointer

XLink and XPointer Introduction

XLink defines a standard way of creating hyperlinks in XML documents.

XPointer allows the hyperlinks to point to more specific parts (fragments) in the XML document.

What You Should Already Know

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

· HTML / XHTML
· XML / XML Namespaces
· XPath

If you want to study these subjects first, find the tutorials on our Home page.

What is XLink?

· XLink is short for the XML Linking Language
· XLink is a language for creating hyperlinks in XML documents
· XLink is similar to HTML links - but it is a lot more powerful
· ANY element in an XML document can behave as an XLink
· XLink supports simple links (like HTML) and extended links (for linking multiple resources together)
· With XLink, the links can be defined outside of the linked files
· XLink is a W3C Recommendation

What is XPointer?

· XPointer is short for the XML Pointer Language
· XPointer allows the hyperlinks to point to specific parts of the XML document
· XPointer uses XPath expressions to navigate in the XML document
· XPointer is a W3C Recommendation

XLink and XPointer are W3C Recommendations

The XML Linking Language (XLink) became a W3C Recommendation 27. June 2001.

The XML Pointer Language (XPointer) became a W3C Recommendation 25. March 2003.

You can read more about XML standards in our W3C tutorial.

XLink and XPointer Browser Support

The browser support for XLink and XPointer is minimal.

There is some XLink support in Mozilla 0.98+, Netscape 6.02+, and Internet Explorer 6.0. Earlier versions of all of these browsers have no XLinks support at all!


XLink Reference

XLink Attribute Reference

Attribute | Value | Description
xlink:actuate | onLoad onRequest other none | Defines when the linked resource is read and shown
xlink:href | URL | The URL to link to
xlink:show | embed new replace other none | Where to open the link. Replace is default
xlink:type | simple extended locator arc resource title none | The type of link


XLink Summary

You Have Learned XLink, Now What?

 Top Previous Next

XLink Summary

This tutorial has taught you a standard way of creating hyperlinks in XML documents.

You have learned that linking in XML is divided into two parts: XLink and XPointer.

XLink defines a standard way of creating hyperlinks in XML documents and XPointer allows the hyperlinks to point to more specific parts (fragments) in the XML document.

For more information on XLink, please look at our .

Now You Know XLink, What's Next?

The next step is to learn about XQuery.

XQuery

XQuery is about querying XML data.

XQuery is designed to query anything that can appear as XML, including databases.

If you want to learn more about XQuery, please visit our XQuery tutorial.


XLink and XPointer Syntax

XLink Syntax

In HTML, we know (and all the browsers know!) that the <a> element defines a hyperlink. However, this is not how it works with XML. In XML documents, you can use whatever element names you want - therefore it is impossible for browsers to predict what hyperlink elements will be called in XML documents.

The solution for creating links in XML documents was to put a marker on elements that should act as hyperlinks.

Below is a simple example of how to use XLink to create links in an XML document:

<?xml version="1.0"?>

<homepages xmlns:xlink="http://www.w3.org/1999/xlink">

<homepage xlink:type="simple"

xlink:href="http://www.w3schools.com">Visit W3Schools</homepage>

<homepage xlink:type="simple"

xlink:href="http://www.w3.org">Visit W3C</homepage>

</homepages>

To get access to the XLink attributes and features we must declare the XLink namespace at the top of the document.

The XLink namespace is: "http://www.w3.org/1999/xlink".

The xlink:type and the xlink:href attributes in the <homepage> elements define that the type and href attributes come from the xlink namespace.

The xlink:type="simple" creates a simple, two-ended link (means "click from here to go there"). We will look at multi-ended (multidirectional) links later.

XPointer Syntax

In HTML, we can create a hyperlink that either points to an HTML page or to a bookmark inside an HTML page (using #).

Sometimes it is more useful to point to more specific content. For example, let's say that we want to link to the third item in a particular list, or to the second sentence of the fifth paragraph. This is easy with XPointer.

If the hyperlink points to an XML document, we can add an XPointer part after the URL in the xlink:href attribute, to navigate (with an XPath expression) to a specific place in the document.

For example, in the example below we use XPointer to point to the fifth item in a list with a unique id of "rock":

href="http://www.example.com/cdlist.xml#id('rock').child(5,item)"


XPointer Example

Let's try to learn some basic XPointer syntax by looking at an example.

XPointer Example

In this example, we will show you how to use XPointer in conjunction with XLink to point to a specific part of another document.

We will start by looking at the target XML document (the document we are going to link to).

The Target XML Document

The target XML document is called "dogbreeds.xml" and it lists a few different dog breeds:

<?xml version="1.0" encoding="ISO-8859-1"?>

<dogbreeds>

<dog breed="Rottweiler" id="Rottweiler">

<picture url="http://dog.com/rottweiler.gif" />

<history>

The Rottweiler's ancestors were probably Roman

drover dogs.....

</history>

<temperament>

Confident, bold, alert and imposing, the Rottweiler

is a popular choice for its ability to protect....

</temperament>

</dog>

<dog breed="FCRetriever" id="FCRetriever">

<picture url="http://dog.com/fcretriever.gif" />

<history>

One of the earliest uses of retrieving dogs was to

help fishermen retrieve fish from the water....

</history>

<temperament>

The flat-coated retriever is a sweet, exuberant,

lively dog that loves to play and retrieve....

</temperament>

</dog>

</dogbreeds>

View the " dogbreeds.xml" file in your browser

Note that the XML document above uses id attributes on each element we may want to link to!

The Linking XML Document

Instead of linking to the entire document (as with XLink), XPointer allows you to link to specific parts of the document. To link to a specific part of a page, add a number sign (#) and an XPointer expression after the URL in the xlink:href attributes.

The expression: #xpointer(id("Rottweiler")) refers to the element in the target document, with the id value of "Rottweiler".

So the xlink:href attribute would look like this: xlink:href="http://dog.com/dogbreeds.xml#xpointer(id('Rottweiler'))"

However, XPointer allows a shorthand form when linking to an element with an id. You can use the value of the id directly, like this: xlink:href="http://dog.com/dogbreeds.xml#Rottweiler"

The following XML document refers to information of the dog breed for each of my dogs :-), all through XLink and XPointer references:

<?xml version="1.0" encoding="ISO-8859-1"?>

<mydogs xmlns:xlink="http://www.w3.org/1999/xlink">

<mydog xlink:type="simple"

xlink:href="http://dog.com/dogbreeds.xml#Rottweiler">

<description xlink:type="simple"

xlink:href="http://myweb.com/mydogs/anton.gif">

Anton is my favorite dog. He has won a lot of.....

</description>

</mydog>

<mydog xlink:type="simple"

xlink:href="http://dog.com/dogbreeds.xml#FCRetriever">

<description xlink:type="simple"

xlink:href="http://myweb.com/mydogs/pluto.gif">

Pluto is the sweetest dog on earth......

</description>

</mydog>

</mydogs>


XML Introduction - What is XML?

Introduction to XML

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 You Should Already Know

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

· HTML / XHTML
· JavaScript or VBScript

If you want to study these subjects first, find the tutorials on our .

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

XML is a W3C Recommendation

The Extensible Markup Language (XML) became a W3C Recommendation 10. February 1998.

You can read more about XML standards in our W3C tutorial.

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 Joke

Question: When should I use XML?

Answer: When you need a buzzword in your resume.


HTML using XML data

W3Schools.com Internal Note

To:

From:


Save Data to an XML File

Usually, we save data in databases. However, if we want to make the data more portable, we can store the data in an XML file.

Create and Save an XML File

Storing data in XML files is useful if the data is to be sent to applications on non-Windows platforms. Remember that XML is portable across all platforms and the data will not need to be converted!

First we will learn how to create and save an XML file. The XML file below will be named "test.xml" and will be stored in the c directory on the server. We will use ASP and Microsoft's XMLDOM object to create and save the XML file:

<%

Dim xmlDoc, rootEl, child1, child2, p

'Create an XML document

Set xmlDoc = Server.CreateObject("Microsoft.XMLDOM")

'Create a root element and append it to the document

Set rootEl = xmlDoc.createElement("root")

xmlDoc.appendChild rootEl

'Create and append child elements

Set child1 = xmlDoc.createElement("child1")

Set child2 = xmlDoc.createElement("child2")

rootEl.appendChild child1

rootEl.appendChild child2

'Add an XML processing instruction

'and insert it before the root element

Set p=xmlDoc.createProcessingInstruction("xml","version='1.0'")

xmlDoc.insertBefore p,xmlDoc.childNodes(0)

'Save the XML file to the c directory

xmlDoc.Save "c:\test.xml"

%>

If you open the saved XML file it will look something like this ("test.xml"):

<?xml version="1.0"?>

<root>

<child1 />

<child2 />

</root>

Real Form Example

Now, we will look at a real HTML form example.

We will first look at the HTML form that will be used in this example: The HTML form below asks for the user's name, country, and e-mail address. This information will then be written to an XML file for storage.

"customers.htm":

<html>

<body>

<form action="saveForm.asp" method="post">

<p><b>Enter your contact information</b></p>

First Name: <input type="text" id="fname" name="fname"><br />

Last Name: <input type="text" id="lname" name="lname"><br />

Country: <input type="text" id="country" name="country"><br />

Email: <input type="text" id="email" name="email"><br />

<input type="submit" id="btn_sub" name="btn_sub" value="Submit">

<input type="reset" id="btn_res" name="btn_res" value="Reset">

</form>

</body>

</html>

The action for the HTML form above is set to "saveForm.asp". The "saveForm.asp" file is an ASP page that will loop through the form fields and store their values in an XML file:

<%

dim xmlDoc

dim rootEl,fieldName,fieldValue,attID

dim p,i

'Do not stop if an error occurs

On Error Resume Next

Set xmlDoc = server.CreateObject("Microsoft.XMLDOM")

xmlDoc.preserveWhiteSpace=true

'Create a root element and append it to the document

Set rootEl = xmlDoc.createElement("customer")

xmlDoc.appendChild rootEl

'Loop through the form collection

for i = 1 To Request.Form.Count

'Eliminate button elements in the form

if instr(1,Request.Form.Key(i),"btn_")=0 then

  'Create a field and a value element, and an id attribute

  Set fieldName = xmlDoc.createElement("field")

  Set fieldValue = xmlDoc.createElement("value")

  Set attID = xmlDoc.createAttribute("id")

  'Set the value of the id attribute equal to the name of

  'the current form field

  attID.Text = Request.Form.Key(i)

  'Append the id attribute to the field element

  fieldName.setAttributeNode attID

  'Set the value of the value element equal to

  'the value of the current form field

  fieldValue.Text = Request.Form(i)

  'Append the field element as a child of the root element

  rootEl.appendChild fieldName

  'Append the value element as a child of the field element

  fieldName.appendChild fieldValue

end if

next

'Add an XML processing instruction

'and insert it before the root element

Set p = xmlDoc.createProcessingInstruction("xml","version='1.0'")

xmlDoc.insertBefore p,xmlDoc.childNodes(0)

'Save the XML file

xmlDoc.save "c:\Customer.xml"

'Release all object references

set xmlDoc=nothing

set rootEl=nothing

set fieldName=nothing

set fieldValue=nothing

set attID=nothing

set p=nothing

'Test to see if an error occurred

if err.number<>0 then

response.write("Error: No information saved.")

else

response.write("Your information has been saved.")

end if

%>

Note: If the XML file name specified already exists, it will be overwritten!

The XML file that will be produced by the code above will look something like this ("Customer.xml"):

<?xml version="1.0" ?>

<customer>

<field id="firstName">

  <value>Hege</value>

</field>

<field id="lastName">

  <value>Refsnes</value>

</field>

<field id="country">

  <value>Norway</value>

</field>

<field id="email">

  <value>mymail@myaddress.com</value>

</field>

</customer>


The XMLHttpRequest Object

The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 9, and Netscape 7.

What is an HTTP Request?

With an HTTP request, a web page can make a request to, and get a response from a web server - without reloading the page. The user will stay on the same page, and he or she will not notice that scripts might request pages, or send data to a server in the background.

By using the XMLHttpRequest object, a web developer can change a page with data from the server after the page has loaded.

Google Suggest is using the XMLHttpRequest object to create a very dynamic web interface: When you start typing in Google's search box, a JavaScript sends the letters off to a server and the server returns a list of suggestions.

Is the XMLHttpRequest Object a W3C Standard?

The XMLHttpRequest object is a JavaScript object, and is not specified in any W3C recommendation.

However, the W3C DOM Level 3 "Load and Save" specification contains some similar functionality, but these are not implemented in any browsers yet. So, at the moment, if you need to send an HTTP request from a browser, you will have to use the XMLHttpRequest object.

Creating an XMLHttpRequest Object

For Mozilla, Firefox, Safari, Opera, and Netscape:

var xmlhttp=new XMLHttpRequest()

For Internet Explorer:

var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

Example

<script type="text/javascript">

var xmlhttp

function loadXMLDoc(url)

{

xmlhttp=null

// code for Mozilla, etc.

if (window.XMLHttpRequest)

{

xmlhttp=new XMLHttpRequest()

}

// code for IE

else if (window.ActiveXObject)

{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

}

if (xmlhttp!=null)

{

xmlhttp.onreadystatechange=state_Change

xmlhttp.open("GET",url,true)

xmlhttp.send(null)

}

else

{

alert("Your browser does not support XMLHTTP.")

}

}

function state_Change()

{

// if xmlhttp shows "loaded"

if (xmlhttp.readyState==4)

{

// if "OK"

if (xmlhttp.status==200)

  {

  // ...some code here...

  }

else

  {

  alert("Problem retrieving XML data")

  }

}

}

</script>

Try it yourself using JavaScript

The syntax is a little bit different in VBScript: Try it yourself using VBScript

Note: An important property in the example above is the onreadystatechange property. This property is an event handler which is triggered each time the state of the request changes. The states run from 0 (uninitialized) to 4 (complete). By having the function xmlhttpChange() check for the state changing, we can tell when the process is complete and continue only if it has been successful.

Why are we Using Async in our Examples?

All the examples here use the async mode (the third parameter of open() set to true).

The async parameter specifies whether the request should be handled asynchronously or not. True means that script continues to run after the send() method, without waiting for a response from the server. false means that the script waits for a response before continuing script processing. By setting this parameter to false, you run the risk of having your script hang if there is a network or server problem, or if the request is long (the UI locks while the request is being made) a user may even see the "Not Responding" message. It is safer to send asynchronously and design your code around the onreadystatechange event!

More Examples

Load a textfile into a div element with XML HTTP (JavaScript)

Make a HEAD request with XML HTTP (JavaScript)

Make a

List data from an XML file with XML HTTP (JavaScript)

The XMLHttpRequest Object Reference

Methods

Method

Description

abort()

Cancels the current request

getAllResponseHeaders()

Returns the complete set of http headers as a string

getResponseHeader("headername")

Returns the value of the specified http header

open("method","URL",async,"uname","pswd")

Specifies the method, URL, and other optional attributes of a request

The method parameter can have a value of "GET", "POST", or "PUT" (use "GET" when requesting data and use "POST" when sending data (especially if the length of the data is greater than 512 bytes.

The URL parameter may be either a relative or complete URL.

The async parameter specifies whether the request should be handled asynchronously or not. true means that script processing carries on after the send() method, without waiting for a response. false means that the script waits for a response before continuing script processing

send(content)

Sends the request

setRequestHeader("label","value")

Adds a label/value pair to the http header to be sent

Properties

Property | Description
onreadystatechange | An event handler for an event that fires at every state change
readyState | Returns the state of the object: 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete
responseText | Returns the response as a string
responseXML | Returns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties
status | Returns the status as a number (e.g. 404 for "Not Found" or 200 for "OK")
statusText | Returns the status as a string (e.g. "Not Found" or "OK")


Viewing XML Files

Raw XML files can be viewed in Mozilla, Firefox, Opera, Internet Explorer, and Netscape 6+.

However, to make XML documents display as nice web pages, you will have to add some display information.

Viewing XML Files

In Firefox and Internet Explorer:

Open the XML file (typically by clicking on a link) - The XML document will be displayed with color-coded root and child elements. A plus (+) or minus sign (-) to the left of the elements can be clicked to expand or collapse the element structure. To view the raw XML source (without the + and - signs), select "View Page Source" or "View Source" from the browser menu.

In Netscape 6:

Open the XML file, then right-click in XML file and select "View Page Source". The XML document will then be displayed with color-coded root and child elements.

In Opera 7 and 8:

In Opera 7: Open the XML file, then right-click in XML file and select "Frame" / "View Source". The XML document will be displayed as plain text. In Opera 8: Open the XML file, then right-click in XML file and select "Source". The XML document will be displayed as plain text.

Look at this XML file: note.xml

Note: Do not expect XML files to be formatted like HTML documents!

Viewing an Invalid XML File

If an erroneous XML file is opened, the browser will report the error.

Look at this XML file: note_error.xml

Other XML Examples

Viewing some XML documents will help you get the XML feeling.

An XML CD catalog

This is my father's CD collection, stored as XML data (old and boring titles I guess... :-)).

An XML plant catalog

This is a plant catalog from a plant shop, stored as XML data.

A Simple Food Menu

This is a breakfast food menu from a restaurant, stored as XML data.

Why Does XML Display Like This?

XML documents do not carry information about how to display the data.

Since XML tags are "invented" by the author of the XML document, browsers do not know if a tag like <table> describes an HTML table or a dining table.

Without any information about how to display the data, most browsers will just display the XML document as it is.

In the next chapters, we will take a look at different solutions to the display problem, using CSS, XSL, JavaScript, and XML Data Islands.


XML and CSS

Displaying XML with CSS

With CSS (Cascading Style Sheets) you can add display information to an XML document.

Displaying your XML Files with CSS?

It is possible to use CSS to format an XML document.

Below is an example of how to use a CSS style sheet to format an XML document:

Take a look at this XML file: The CD catalog

Then look at this style sheet: The CSS file

Finally, view: The CD catalog formatted with the CSS file

Below is a fraction of the XML file. The second line, <?xml-stylesheet type="text/css" href="cd_catalog.css"?>, links the XML file to the CSS file:

<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet type="text/css" href="cd_catalog.css"?>

<CATALOG>

<CD>

  <TITLE>Empire Burlesque</TITLE>

  <ARTIST>Bob Dylan</ARTIST>

  <COUNTRY>USA</COUNTRY>

  <COMPANY>Columbia</COMPANY>

  <PRICE>10.90</PRICE>

  <YEAR>1985</YEAR>

</CD>

<CD>

  <TITLE>Hide your heart</TITLE>

  <ARTIST>Bonnie Tyler</ARTIST>

  <COUNTRY>UK</COUNTRY>

  <COMPANY>CBS Records</COMPANY>

  <PRICE>9.90</PRICE>

  <YEAR>1988</YEAR>

</CD>

.

.

.

.

</CATALOG>

Note: Formatting XML with CSS is NOT the future of how to style XML documents. XML document should be styled by using the W3C's XSL standard!


XML and XSL

Displaying XML with XSL

With XSL you can add display information to your XML document.

Displaying XML with XSL

XSL is the preferred style sheet language of XML.

XSL (the eXtensible Stylesheet Language) is far more sophisticated than CSS. One way to use XSL is to transform XML into HTML before it is displayed by the browser as demonstrated in these examples:

View the XML file, the XSL style sheet, and View the result.

Below is a fraction of the XML file. The second line, <?xml-stylesheet type="text/xsl" href="simple.xsl"?>, links the XML file to the XSL file:

<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet type="text/xsl" href="simple.xsl"?>

<breakfast_menu>

<food>

  <name>Belgian Waffles</name>

  <price>$5.95</price>

  <description>

     two of our famous Belgian Waffles

  </description>

  <calories>650</calories>

</food>

</breakfast_menu>

If you want to learn more about XSL, please visit our XSL tutorial.


XML Application

This chapter demonstrates a small framework for an XML application.

Note: This example uses a Data Island, which only works in Internet Explorer.

The XML Example Document

Look at the following XML document ("cd_catalog.xml"), that represents a CD catalog:

<?xml version="1.0" encoding="ISO-8859-1"?>

<CATALOG>

<CD>

  <TITLE>Empire Burlesque</TITLE>

  <ARTIST>Bob Dylan</ARTIST>

  <COUNTRY>USA</COUNTRY>

  <COMPANY>Columbia</COMPANY>

  <PRICE>10.90</PRICE>

  <YEAR>1985</YEAR>

</CD>

.

.

... more ...

.

View the full " cd_catalog.xml" file in your browser.

Load the XML Document Into a Data Island

A Data Island can be used to access the XML file.

To get your XML document "inside" an HTML page, add an XML Data Island to the HTML page:

<xml src="cd_catalog.xml" id="xmldso" async="false">

</xml>

With the example code above, the XML file "cd_catalog.xml" will be loaded into an "invisible" Data Island called "xmldso". The async="false" attribute is added to make sure that all the XML data is loaded before any other HTML processing takes place.

Bind the Data Island to an HTML Table

To make the XML data visible on the HTML page, you must "bind" the Data Island to an HTML element.

To bind the XML data to an HTML table, add a datasrc attribute to the table element, and add datafld attributes to the span elements inside the table data:

<table datasrc="#xmldso" width="100%" border="1">

<thead>

<th>Title</th>

<th>Artist</th>

<th>Year</th>

</thead>

<tr align="left">

<td><span datafld="TITLE"></span></td>

<td><span datafld="ARTIST"></span></td>

<td><span datafld="YEAR"></span></td>

</tr>

</table>

If you have IE 5.0 or higher: See how the XML data is displayed inside an HTML table.

Bind the Data Island to <span> or <div> Elements

<span> or <div> elements can be used to display XML data.

You don't have to use the HTML table element to display XML data. Data from a Data Island can be displayed anywhere on an HTML page.

All you have to do is to add some <span> or <div> elements to your page. Use the datasrc attribute to bind the elements to the Data Island, and the datafld attribute to bind each element to an XML element, like this:

<br />Title:

<span datasrc="#xmldso" datafld="TITLE"></span>

<br />Artist:

<span datasrc="#xmldso" datafld="ARTIST"></span>

<br />Year:

<span datasrc="#xmldso" datafld="YEAR"></span>

or like this:

<br />Title:

<div datasrc="#xmldso" datafld="TITLE"></div>

<br />Artist:

<div datasrc="#xmldso" datafld="ARTIST"></div>

<br />Year:

<div datasrc="#xmldso" datafld="YEAR"></div>

If you have IE 5.0 or higher: See how the XML data is displayed inside the HTML elements.

Note that if you use an HTML <div> element, the data will be displayed on a new line.

With the examples above, you will only see one line of your XML data. To navigate to the next line of data, you have to add some scripting to your code.

Add a Navigation Script

Navigation has to be performed by a script.

To add navigation to the XML Data Island, create a script that calls the movenext() and moveprevious() methods of the Data Island.

<script type="text/javascript">

function movenext()

{

x=xmldso.recordset

if (x.absoluteposition < x.recordcount)

{

x.movenext()

}

}

function moveprevious()

{

x=xmldso.recordset

if (x.absoluteposition > 1)

{

x.moveprevious()

}

}

</script>

If you have IE 5.0 or higher: See how you can navigate through the XML records.

All Together Now

With a little creativity you can create a full application.

If you use what you have learned on this page, and a little imagination, you can easily develop this into a full application.

If you have IE 5.0 or higher: See how you can add a little fancy to this application.


XML Attributes

XML elements can have attributes in the start tag, just like HTML.

Attributes are used to provide additional information about elements.

XML Attributes

XML elements can have attributes.

From HTML you will remember this: <IMG SRC="computer.gif">. The SRC attribute provides additional information about the IMG element.

In HTML (and in XML) attributes provide additional information about elements:

<img src="computer.gif">

<a href="demo.asp">

Attributes often provide information that is not a part of the data. In the example below, the file type is irrelevant to the data, but important to the software that wants to manipulate the element:

<file type="gif">computer.gif</file>

Quote Styles, "female" or 'female'?

Attribute values must always be enclosed in quotes, but either single or double quotes can be used. For a person's sex, the person tag can be written like this:

<person sex="female">

or like this:

<person sex='female'>

Note: If the attribute value itself contains double quotes it is necessary to use single quotes, like in this example:

<gangster name='George "Shotgun" Ziegler'>

Note: If the attribute value itself contains single quotes it is necessary to use double quotes, like in this example:

<gangster name="George 'Shotgun' Ziegler">

Use of Elements vs. Attributes

Data can be stored in child elements or in attributes.

Take a look at these examples:

<person sex="female">

<firstname>Anna</firstname>

<lastname>Smith</lastname>

</person>

<person>

<sex>female</sex>

<firstname>Anna</firstname>

<lastname>Smith</lastname>

</person>

In the first example sex is an attribute. In the last, sex is a child element. Both examples provide the same information.

There are no rules about when to use attributes, and when to use child elements. My experience is that attributes are handy in HTML, but in XML you should try to avoid them. Use child elements if the information feels like data.

My Favorite Way

I like to store data in child elements.

The following three XML documents contain exactly the same information:

A date attribute is used in the first example:

<note date="12/11/2002">

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

A date element is used in the second example:

<note>

<date>12/11/2002</date>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

An expanded date element is used in the third: (THIS IS MY FAVORITE):

<note>

<date>

<day>12</day>

<month>11</month>

<year>2002</year>

</date>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

Avoid using attributes?

Should you avoid using attributes?

Some of the problems with using attributes are:

· attributes cannot contain multiple values (child elements can)
· attributes are not easily expandable (for future changes)
· attributes cannot describe structures (child elements can)
· attributes are more difficult to manipulate by program code
· attribute values are not easy to test against a Document Type Definition (DTD) - which is used to define the legal elements of an XML document

If you use attributes as containers for data, you end up with documents that are difficult to read and maintain. Try to use elements to describe data. Use attributes only to provide information that is not relevant to the data.

Don't end up like this (this is not how XML should be used):

<note day="12" month="11" year="2002"

to="Tove" from="Jani" heading="Reminder"

body="Don't forget me this weekend!">

</note>

An Exception to my Attribute Rule

Rules always have exceptions.

My rule about attributes has one exception:

Sometimes I assign ID references to elements. These ID references can be used to access XML elements in much the same way as the NAME or ID attributes in HTML. This example demonstrates this:

<messages>

<note id="p501">

  <to>Tove</to>

  <from>Jani</from>

  <heading>Reminder</heading>

  <body>Don't forget me this weekend!</body>

</note>

<note id="p502">

  <to>Jani</to>

  <from>Tove</from>

  <heading>Re: Reminder</heading>

  <body>I will not!</body>

</note>

</messages>

The ID in these examples is just a counter, or a unique identifier, to identify the different notes in the XML file, and not a part of the note data.

What I am trying to say here is that metadata (data about data) should be stored as attributes, and that data itself should be stored as elements.


XML Behaviors

XML DHTML Behaviors

Internet Explorer 5 introduced DHTML behaviors. Behaviors are a way to add DHTML functionality to HTML elements with the ease of CSS.

Behaviors - What are They?

IE5 introduced DHTML behaviors. Behaviors are a way to add DHTML functionality to HTML elements with the ease of CSS.

How do behaviors work? By using XML we can link behaviors to any element in a web page and manipulate that element.

DHTML behaviors do not use a <script> tag. Instead, they are using a CSS attribute called "behavior". This "behavior" specifies a URL to an HTC file which contains the actual behavior (The HTC file is written in XML).

Syntax

behavior: url(some_filename.htc)

Note: The behavior attribute is only supported by IE 5 and higher, all other browsers will ignore it. This means that Mozilla, Firefox, Netscape and other browsers will only see the regular content and IE 5+ can see the DHTML behaviors.

Example

The following HTML file has a <style> element that defines a behavior for the <h1> element:

<html>

<head>

<style type="text/css">

h1 { behavior: url(behave.htc) }

</style>

</head>

<body>

<h1>Mouse over me!!!</h1>

</body>

</html>

The XML document "behave.htc" is shown below:

<attach for="element" event="onmouseover" handler="hig_lite" />

<attach for="element" event="onmouseout" handler="low_lite" />

<script type="text/javascript">

function hig_lite()

{

element.style.color='red'

}

function low_lite()

{

element.style.color='blue'

}

</script>

The behavior file contains a JavaScript and the event handlers for the script.

Try it yourself (mouse over the text in the example).

The following HTML file has a <style> element that defines a behavior for elements with an id of "typing":

<html>

<head>

<style type="text/css">

#typing

{

behavior:url(typing.htc);

font-family:'courier new';

}

</style>

</head>

<body>

<span id="typing" speed="100">IE5 introduced DHTML behaviors.

Behaviors are a way to add DHTML functionality to HTML elements

with the ease of CSS.<br /><br />How do behaviors work?<br />

By using XML we can link behaviors to any element in a web page

and manipulate that element.</p>

</span>

</body>

</html>

The XML document "typing.htc" is shown below:

<attach for="window" event="onload" handler="beginTyping" />

<method name="type" />

<script type="text/javascript">

var i,text1,text2,textLength,t

function beginTyping()

{

i=0

text1=element.innerText

textLength=text1.length

element.innerText=""

text2=""

t=window.setInterval(element.id+".type()",speed)

}

function type()

{

text2=text2+text1.substring(i,i+1)

element.innerText=text2

i=i+1

if (i==textLength){clearInterval(t)}

}

</script>

Try it yourself


XML Browser Support

Nearly all major browsers have support for XML and XSLT.

Mozilla Firefox

As of version 1.0.2, Firefox has support for XML and XSLT (and CSS).

Mozilla

Mozilla includes Expat for XML parsing and has support to display XML + CSS. Mozilla also has some support for Namespaces.

Mozilla is available with an XSLT implementation.

Netscape

As of version 8, Netscape uses the Mozilla engine, and therefore it has the same XML / XSLT support as Mozilla.

Opera

As of version 9, Opera has support for XML and XSLT (and CSS). Version 8 supports only XML + CSS.

Internet Explorer

As of version 6, Internet Explorer supports XML, Namespaces, CSS, XSLT, and XPath.

Note: Internet Explorer 5 also has XML support, but the XSL part is NOT compatible with the official W3C XSL Recommendation!


XML CDATA

All text in an XML document will be parsed by the parser.

Only text inside a CDATA section will be ignored by the parser.

Parsed Data

XML parsers normally parse all the text in an XML document.

When an XML element is parsed, the text between the XML tags is also parsed:

<message>This text is also parsed</message>

The parser does this because XML elements can contain other elements, as in this example, where the <name> element contains two other elements (first and last):

<name><first>Bill</first><last>Gates</last></name>

and the parser will break it up into sub-elements like this:

<name>

 <first>Bill</first>

 <last>Gates</last>

</name>

Escape Characters

Illegal XML characters have to be replaced by entity references.

If you place a character like "<" inside an XML element, it will generate an error because the parser interprets it as the start of a new element. You cannot write something like this:

<message>if salary < 1000 then</message>

To avoid this, you have to replace the "<" character with an entity reference, like this:

<message>if salary &lt; 1000 then</message>

There are 5 predefined entity references in XML:

&lt; | < | less than
&gt; | > | greater than
&amp; | & | ampersand
&apos; | ' | apostrophe
&quot; | " | quotation mark

Note: Only the characters "<" and "&" are strictly illegal in XML. Apostrophes, quotation marks and greater than signs are legal, but it is a good habit to replace them.

CDATA

Everything inside a CDATA section is ignored by the parser.

If your text contains a lot of "<" or "&" characters - as program code often does - the XML element can be defined as a CDATA section.

A CDATA section starts with "<![CDATA[" and ends with "]]>":

<script>

<![CDATA[

function matchwo(a,b)

{

if (a < b && a < 0) then

 {

 return 1

 }

else

 {

 return 0

 }

}

]]>

</script>

In the example above, everything inside the CDATA section is ignored by the parser.

Notes on CDATA sections:

A CDATA section cannot contain the string "]]>", therefore, nested CDATA sections are not allowed.

Also make sure there are no spaces or line breaks inside the "]]>" string.


XML Data Islands

XML Data Island

With Internet Explorer, the unofficial <xml> tag can be used to create an XML data island.

XML Data Embedded in HTML

An XML data island is XML data embedded into an HTML page.

Here is how it works; assume we have the following XML document ("note.xml"):

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

Then, in an HTML document, you can embed the XML file above with the <xml> tag. The id attribute of the <xml> tag defines an ID for the data island, and the src attribute points to the XML file to embed:

<html>

<body>

<xml id="note" src="note.xml"></xml>

</body>

</html>

However, the embedded XML data is, up to this point, not visible for the user.

The next step is to format and display the data in the data island by binding it to HTML elements.

Bind Data Island to HTML Elements

In the next example, we will embed an XML file called "cd_catalog.xml" into an HTML file.

View " cd_catalog.xml".

The HTML file looks like this:

<html>

<body>

<xml id="cdcat" src="cd_catalog.xml"></xml>

<table border="1" datasrc="#cdcat">

<tr>

<td><span datafld="ARTIST"></span></td>

<td><span datafld="TITLE"></span></td>

</tr>

</table>

</body>

</html>

Example explained:

The datasrc attribute of the <table> tag binds the HTML table element to the XML data island. The datasrc attribute refers to the id attribute of the data island.

<td> tags cannot be bound to data, so we are using <span> tags. The <span> tag allows the datafld attribute to refer to the XML element to be displayed. In this case, it is datafld="ARTIST" for the <ARTIST> element and datafld="TITLE" for the <TITLE> element in the XML file. As the XML is read, additional rows are created for each <CD> element.

If you are running IE 5.0 or higher, you can try it yourself.

Also try this example, demonstrating <thead>, <tbody>, and <tfoot>.


XML DTD

XML Validation

XML with correct syntax is Well Formed XML.

XML validated against a DTD is Valid XML.

Well Formed XML Documents

A "Well Formed" XML document has correct XML syntax.

A "Well Formed" XML document is a document that conforms to the XML syntax rules that were described in the previous chapters:

· XML documents must have a root element
· XML elements must have a closing tag
· XML tags are case sensitive
· XML elements must be properly nested
· XML attribute values must always be quoted

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

Valid XML Documents

A "Valid" XML document also conforms to a DTD.

A "Valid" XML document is a "Well Formed" XML document, which also conforms to the rules of a Document Type Definition (DTD):

<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE note SYSTEM "InternalNote.dtd">

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

XML DTD

A DTD defines the legal elements of an XML document.

The purpose of a DTD is to define the legal building blocks of an XML document. It defines the document structure with a list of legal elements. You can read more about DTD, and how to validate your XML documents in our .

XML Schema

XML Schema is an XML based alternative to DTD.

W3C supports an alternative to DTD called XML Schema. You can read more about XML Schema in our Schema tutorial.

A General XML Validator

To help you check the syntax of your xml files, we have created this link so that you can syntax-check any XML file.


XML Editors

If you are serious about XML, you will benefit from using a professional XML Editor.

XML is Text-based

XML is a text-based markup language.

One great thing about XML is that XML files can be created and edited using a simple text-editor like Notepad.

However, when you start working with XML, you will soon find that it is better to edit XML documents using a professional XML editor.

Why Not Notepad?

Many web developers use Notepad to edit both HTML and XML documents because Notepad is included with the most common OS and it is simple to use. Personally I often use Notepad for quick editing of simple HTML, CSS, and XML files.

But, if you use Notepad for XML editing, you will soon run into problems.

Notepad does not know that you are writing XML, so it will not be able to assist you.

Why an XML Editor?

Today XML is an important technology, and development projects use XML-based technologies like:

· XML Schema to define XML structures and data types
· XSLT to transform XML data
· SOAP to exchange XML data between applications
· WSDL to describe web services
· RDF to describe web resources
· XPath and XQuery to access XML data
· SMIL to define graphics

To be able to write error-free XML documents, you will need an intelligent XML editor!

XML Editors

Professional XML editors will help you to write error-free XML documents, validate your XML against a DTD or a schema, and force you to stick to a valid XML structure.

An XML editor should be able to:

· Add closing tags to your opening tags automatically
· Force you to write valid XML
· Verify your XML against a DTD
· Verify your XML against a Schema
· Color code your XML syntax

Altova's XMLSpy

At W3Schools we have been using XMLSpy for many years. XMLSpy is our favorite XML editor. These are some of the features we especially like:

· Easy to use
· Syntax coloring
· Automatic tag completion
· Context-sensitive entry helpers
· Automatic well-formedness check
· Built in DTD and/or XML Schema-based validation
· Easy switching between text view and grid view
· Built in graphical XML Schema editor
· Powerful conversion utilities
· Database import and export
· Built in templates for most XML document types
· Built in XPath 1.0/2.0 analyzer
· XSLT 1.0/2.0 editor, profiler, and debugger
· XQuery editor, profiler, and debugger
· SOAP client and debugger
· Graphical WSDL editor
· Powerful project management capabilities
· Code generation in Java, C++, and C#


XML Elements

XML Elements are extensible and they have relationships.

XML Elements have simple naming rules.

XML Elements are Extensible

XML documents can be extended to carry more information.

Look at the following XML NOTE example:

<note>

<to>Tove</to>

<from>Jani</from>

<body>Don't forget me this weekend!</body>

</note>

Let's imagine that we created an application that extracted the <to>, <from>, and <body> elements from the XML document to produce this output:

MESSAGE

To: Tove

From: Jani

Don't forget me this weekend!

Imagine that the author of the XML document added some extra information to it:

<note>

<date>2002-08-01</date>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

Should the application break or crash?

No. The application should still be able to find the <to>, <from>, and <body> elements in the XML document and produce the same output.

XML documents are Extensible.

XML Elements have Relationships

Elements are related as parents and children.

To understand XML terminology, you have to know how relationships between XML elements are named, and how element content is described.

Imagine that this is a description of a book:

My First XML

Introduction to XML

· What is HTML
· What is XML

XML Syntax

· Elements must have a closing tag
· Elements must be properly nested

Imagine that this XML document describes the book:

<book>

<title>My First XML</title>

<prod id="33-657" media="paper"></prod>

<chapter>Introduction to XML

<para>What is HTML</para>

<para>What is XML</para>

</chapter>

<chapter>XML Syntax

<para>Elements must have a closing tag</para>

<para>Elements must be properly nested</para>

</chapter>

</book>

Book is the root element. Title, prod, and chapter are child elements of book. Book is the parent element of title, prod, and chapter. Title, prod, and chapter are siblings (or sister elements) because they have the same parent.

Elements have Content

Elements can have different content types.

An XML element is everything from (including) the element's start tag to (including) the element's end tag.

An element can have element content, mixed content, simple content, or empty content. An element can also have attributes.

In the example above, book has element content, because it contains other elements. Chapter has mixed content because it contains both text and other elements. Para has simple content (or text content) because it contains only text. Prod has empty content, because it carries no information.

In the example above only the prod element has attributes. The attribute named id has the value "33-657". The attribute named media has the value "paper".

Element Naming

XML elements must follow these naming rules:

· Names can contain letters, numbers, and other characters
· Names must not start with a number or punctuation character
· Names must not start with the letters xml (or XML, or Xml, etc)
· Names cannot contain spaces

Take care when you "invent" element names and follow these simple rules:

Any name can be used, no words are reserved, but the idea is to make names descriptive. Names with an underscore separator are nice.

Examples: <first_name>, <last_name>.

Avoid "-" and "." in names. For example, if you name something "first-name," it could be a mess if your software tries to subtract name from first. Or if you name something "first.name," your software may think that "name" is a property of the object "first."

Element names can be as long as you like, but don't exaggerate. Names should be short and simple, like this: <book_title> not like this: <the_title_of_the_book>.

XML documents often have a corresponding database, in which fields exist corresponding to elements in the XML document. A good practice is to use the naming rules of your database for the elements in the XML documents.

Non-English letters like éòá are perfectly legal in XML element names, but watch out for problems if your software vendor doesn't support them.

The ":" should not be used in element names because it is reserved to be used for something called namespaces (more later).


XML Encoding

XML documents may contain foreign characters, like Norwegian æ ø å , or French ê è é.

To let your XML parser understand these characters, you should save your XML documents as Unicode.

Windows 2000 Notepad

Windows 2000 Notepad can save files as Unicode.

Save the XML file below as Unicode (note that the document does not contain any encoding attribute):

<?xml version="1.0"?>

<note>

<from>Jani</from>

<to>Tove</to>

<message>Norwegian: æøå. French: êèé</message>

</note>

The file above, note_encode_none_u.xml will NOT generate an error in IE 5+, Firefox, or Opera, but it WILL generate an error in Netscape 6.2.

Windows 2000 Notepad with Encoding

Windows 2000 Notepad files saved as Unicode use "UTF-16" encoding.

If you add an encoding attribute to XML files saved as Unicode, windows encoding values will generate an error.

The following encoding (), will NOT give an error message:

<?xml version="1.0" encoding="windows-1252"?>

The following encoding (), will NOT give an error message:

<?xml version="1.0" encoding="ISO-8859-1"?>

The following encoding (open it), will NOT give an error message:

<?xml version="1.0" encoding="UTF-8"?>

The following encoding (open it), will NOT generate an error in IE 5+, Firefox, or Opera, but it WILL generate an error in Netscape 6.2.

<?xml version="1.0" encoding="UTF-16"?>

Error Messages

If you try to load an XML document into Internet Explorer, you can get two different errors indicating encoding problems:

An invalid character was found in text content.

You will get this error message if a character in the XML document does not match the encoding attribute. Normally you will get this error message if your XML document contains "foreign" characters, and the file was saved with a single-byte encoding editor like Notepad, and no encoding attribute was specified.

Switch from current encoding to specified encoding not supported.

You will get this error message if your file was saved as Unicode/UTF-16 but the encoding attribute specified a single-byte encoding like Windows-1252, ISO-8859-1 or UTF-8. You can also get this error message if your document was saved with single-byte encoding, but the encoding attribute specified a double-byte encoding like UTF-16.

Conclusion

The conclusion is that the encoding attribute has to specify the encoding used when the document was saved. My best advice to avoid errors is:

· Use an editor that supports encoding
· Make sure you know what encoding it uses
· Use the same encoding attribute in your XML documents


XML Examples

Viewing XML Files

In Firefox and Internet Explorer:

Open the XML file (typically by clicking on a link) - The XML document will be displayed with color-coded root and child elements. A plus (+) or minus sign (-) to the left of the elements can be clicked to expand or collapse the element structure. To view the raw XML source (without the + and - signs), select "View Page Source" or "View Source" from the browser menu.

In Netscape 6:

Open the XML file, then right-click in XML file and select "View Page Source". The XML document will then be displayed with color-coded root and child elements.

In Opera 7 and 8:

In Opera 7: Open the XML file, then right-click in XML file and select "Frame" / "View Source". The XML document will be displayed as plain text. In Opera 8: Open the XML file, then right-click in XML file and select "Source". The XML document will be displayed as plain text.

Viewing XML Files

View an XML plant catalog

View an XML food menu

Viewing XML files with a dtd

View note.xml with an internal dtd

View note.xml with an external dtd

The Microsoft XML parser

View a simple XML file (xml_note.xml)

Loading the same file into the parser

Traversing the node tree of the file

Loading the same file into HTML

Displaying using JavaScript

XML and CSS

View an XML CD catalog

View the corresponding CSS file

Display the CD catalog formatted with the CSS file

XML and XSL

View an XML food menu

View the corresponding XSL stylesheet

Display the food menu styled with the XSL stylesheet (IE6)

Display the food menu styled with the XSL stylesheet (IE5)

Data Binding

View an XML CD catalog

Add < thead> , < tfoot> , < tbody> elements

Database Output

Displayed as HTML

View an XML CD catalog

See how the CD catalog can be displayed inside an HTML table

See how to navigate the CD catalog

Requesting XML data from a server

Send a request to the server

Communicating with a server using XML

Using the XMLHttpRequest Object

Load a textfile into a div element with XML HTTP (JavaScript)

Make a HEAD request with XML HTTP (JavaScript)

Make a specified HEAD request with XML HTTP (JavaScript)

XML Behaviors

XML Behaviors


XML in Real Life

A real-life example of how XML can be used to carry information.

Example: XML News

XMLNews is a specification for exchanging news and other information.

Using such a standard makes it easier for both news producers and news consumers to produce, receive, and archive any kind of news information across different hardware, software, and programming languages.

An example XMLNews document:

<?xml version="1.0" encoding="ISO-8859-1"?>

<nitf>

<head>

<title>Colombia Earthquake</title>

</head>

<body>

<headline>

<hl1>143 Dead in Colombia Earthquake</hl1>

</headline>

<byline>

<bytag>By Jared Kotler, Associated Press Writer</bytag>

</byline>

<dateline>

<location>Bogota, Colombia</location>

<date>Monday January 25 1999 7:28 ET</date>

</dateline>

</body>

</nitf>


XML Namespaces

XML Namespaces provide a method to avoid element name conflicts.

Name Conflicts

Since element names in XML are not predefined, a name conflict will occur when two different documents use the same element names.

This XML document carries information in a table:

<table>

 <tr>

 <td>Apples</td>

 <td>Bananas</td>

 </tr>

</table>

This XML document carries information about a table (a piece of furniture):

<table>

 <name>African Coffee Table</name>

 <width>80</width>

 <length>120</length>

</table>

If these two XML documents were added together, there would be an element name conflict because both documents contain a <table> element with different content and definition.

Solving Name Conflicts Using a Prefix

This XML document carries information in a table:

<h:table>

 <h:tr>

 <h:td>Apples</h:td>

 <h:td>Bananas</h:td>

 </h:tr>

</h:table>

This XML document carries information about a piece of furniture:

<f:table>

 <f:name>African Coffee Table</f:name>

 <f:width>80</f:width>

 <f:length>120</f:length>

</f:table>

Now there will be no name conflict because the two documents use a different name for their <table> element (<h:table> and <f:table>).

By using a prefix, we have created two different types of <table> elements.

Using Namespaces

This XML document carries information in a table:

<h:table xmlns:h="http://www.w3.org/TR/html4/">

 <h:tr>

 <h:td>Apples</h:td>

 <h:td>Bananas</h:td>

 </h:tr>

</h:table>

This XML document carries information about a piece of furniture:

<f:table xmlns:f="http://www.w3schools.com/furniture">

 <f:name>African Coffee Table</f:name>

 <f:width>80</f:width>

 <f:length>120</f:length>

</f:table>

Instead of using only prefixes, we have added an xmlns attribute to the <table> tag to give the prefix a qualified name associated with a namespace.

The XML Namespace (xmlns) Attribute

The XML namespace attribute is placed in the start tag of an element and has the following syntax:

xmlns:namespace-prefix="namespaceURI"

When a namespace is defined in the start tag of an element, all child elements with the same prefix are associated with the same namespace.

Note that the address used to identify the namespace is not used by the parser to look up information. The only purpose is to give the namespace a unique name. However, very often companies use the namespace as a pointer to a real Web page containing information about the namespace.

Try to go to .

Uniform Resource Identifier (URI)

A Uniform Resource Identifier (URI) is a string of characters which identifies an Internet Resource. The most common URI is the Uniform Resource Locator (URL) which identifies an Internet domain address. Another, not so common type of URI is the Universal Resource Name (URN). In our examples we will only use URLs.

Default Namespaces

Defining a default namespace for an element saves us from using prefixes in all the child elements. It has the following syntax:

xmlns="namespaceURI"

This XML document carries information in a table:

<table xmlns="http://www.w3.org/TR/html4/">

 <tr>

 <td>Apples</td>

 <td>Bananas</td>

 </tr>

</table>

This XML document carries information about a piece of furniture:

<table xmlns="http://www.w3schools.com/furniture">

 <name>African Coffee Table</name>

 <width>80</width>

 <length>120</length>

</table>

Namespaces in Real Use

When you start using XSL, you will soon see namespaces in real use. XSL style sheets are used to transform XML documents into other formats, like HTML.

If you take a close look at the XSL document below, you will see that most of the tags are HTML tags. The tags that are not HTML tags have the prefix xsl, identified by the namespace "http://www.w3.org/1999/XSL/Transform":

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

<h2>My CD Collection</h2>

<table border="1">

  <tr>

    <th align="left">Title</th>

    <th align="left">Artist</th>

  </tr>

  <xsl:for-each select="catalog/cd">

  <tr>

    <td><xsl:value-of select="title"/></td>

    <td><xsl:value-of select="artist"/></td>

  </tr>

  </xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>


XML on the Server

XML can be generated on a server without installing any XML controls.

Storing XML on the Server

XML files can be stored on an Internet server exactly the same way as HTML files.

Start Windows Notepad and write the following lines:

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<from>Jani</from>

<to>Tove</to>

<message>Remember me this weekend</message>

</note>

Save the file on your web server with a proper name like "note.xml".

Generating XML with ASP

XML can be generated on a server without any installed XML software.

To generate an XML response from the server - simply write the following code and save it as an ASP file on the web server:

<%

response.ContentType="text/xml"

response.Write("<?xml version='1.0' encoding='ISO-8859-1'?>")

response.Write("<note>")

response.Write("<from>Jani</from>")

response.Write("<to>Tove</to>")

response.Write("<message>Remember me this weekend</message>")

response.Write("</note>")

%>

Note that the content type of the response must be set to "text/xml".

See how the ASP file will be returned from the server.

If you don't know how to write ASP, please visit our ASP tutorial

Getting XML From a Database

XML can be generated from a database without any installed XML software.

To generate an XML database response from the server, simply write the following code and save it as an ASP file on the web server:

<%

response.ContentType = "text/xml"

set conn=Server.CreateObject("ADODB.Connection")

conn.provider="Microsoft.Jet.OLEDB.4.0;"

conn.open server.mappath("/db/database.mdb")

sql="select fname,lname from tblGuestBook"

set rs=Conn.Execute(sql)

rs.MoveFirst()

response.write("<?xml version='1.0' encoding='ISO-8859-1'?>")

response.write("<guestbook>")

while (not rs.EOF)

response.write("<guest>")

response.write("<fname>" & rs("fname") & "</fname>")

response.write("<lname>" & rs("lname") & "</lname>")

response.write("</guest>")

rs.MoveNext()

wend

rs.close()

conn.close()

response.write("</guestbook>")

%>

See the real life database output from the ASP file above.

The example above uses ASP with ADO. If you don't know how to use ADO, please visit our ADO tutorial.


XML Parser

To read and update, create and manipulate an XML document, you will need an XML parser.

Examples

This example is a cross-browser example that loads an existing XML document ("note.xml") into the XML parser.

Parse an XML

This example is a cross-browser example on how to load and parse an XML string.

Parsing XML Documents

To manipulate an XML document, you need an XML parser. The parser loads the document into your computer's memory. Once the document is loaded, its data can be manipulated using the DOM. The DOM treats the XML document as a tree.

To learn more about the XML DOM, please read our .

There are some differences between Microsoft's XML parser and the XML parser used in Mozilla browsers. In this tutorial we will show you how to create cross browser scripts that will work in both Internet Explorer and Mozilla browsers.

Microsoft's XML Parser

Microsoft's XML parser is a COM component that comes with Internet Explorer 5 and higher. Once you have installed Internet Explorer, the parser is available to scripts.

Microsoft's XML parser supports all the necessary functions to traverse the node tree, access the nodes and their attribute values, insert and delete nodes, and convert the node tree back to XML.

To create an instance of Microsoft's XML parser, use the following code:

JavaScript:

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

VBScript:

set xmlDoc=CreateObject("Microsoft.XMLDOM")

ASP:

set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")

The following code fragment loads an existing XML document ("note.xml") into Microsoft's XML parser:

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.async="false";

xmlDoc.load("note.xml");

The first line of the script above creates an instance of the XML parser. The second line turns off asynchronized loading, to make sure that the parser will not continue execution of the script before the document is fully loaded. The third line tells the parser to load an XML document called "note.xml".

XML Parser in Mozilla, Firefox, and Opera

Mozilla's XML parser supports all the necessary functions to traverse the node tree, access the nodes and their attribute values, insert and delete nodes, and convert the node tree back to XML.

To create an instance of the XML parser in Mozilla browsers, use the following code:

JavaScript:

var xmlDoc=document.implementation.createDocument("ns","root",null);

The first parameter, ns, defines the namespace used for the XML document. The second parameter, root, is the XML root element in the XML file. The third parameter, null, is always null because it is not implemented yet.

The following code fragment loads an existing XML document ("note.xml") into Mozillas' XML parser:

var xmlDoc=document.implementation.createDocument("","",null);

xmlDoc.load("note.xml");

The first line of the script above creates an instance of the XML parser. The second line tells the parser to load an XML document called "note.xml".

Parsing an XML File - A Cross browser Example

The following example is a cross browser example that loads an existing XML document ("note.xml") into the XML parser:

<html>

<head>

<script type="text/javascript">

var xmlDoc;

function loadXML()

{

// code for IE

if (window.ActiveXObject)

{

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.async=false;

xmlDoc.load("note.xml");

getmessage();

}

// code for Mozilla, Firefox, Opera, etc.

else if (document.implementation &&

document.implementation.createDocument)

{

xmlDoc=document.implementation.createDocument("","",null);

xmlDoc.load("note.xml");

xmlDoc.onload=getmessage;

}

else

{

alert('Your browser cannot handle this script');

}

}

function getmessage()

{

document.getElementById("to").innerHTML=

xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;

document.getElementById("from").innerHTML=

xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;

document.getElementById("message").innerHTML=

xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;

}

</script>

</head>

<body onload="loadXML()">

<h1>W3Schools Internal Note</h1>

<p><b>To:</b> <span id="to"></span><br />

<b>From:</b> <span id="from"></span><br />

<b>Message:</b> <span id="message"></span>

</p>

</body>

</html>

Output:

W3Schools Internal Note

To: Tove

From: Jani

Message: Don't forget me this weekend!

Important Note

To extract the text (Jani) from an XML element like: <from>Jani</from>, the correct syntax is:

getElementsByTagName("from")[0].childNodes[0].nodeValue

IMPORTANT: getElementsByTagName returns an array of nodes. The array contains all elements with the specified name within the XML document. In this case there is only one "from" element, but you still have to specify the array index ( [0] ).

Parsing an XML String - A Cross browser Example

The following code is a cross-browser example on how to load and parse an XML string:

<html>

<body>

<script type="text/javascript">

var text="<note>";

text=text+"<to>Tove</to>";

text=text+"<from>Jani</from>";

text=text+"<heading>Reminder</heading>";

text=text+"<body>Don't forget me this weekend!</body>";

text=text+"</note>";

// code for IE

if (window.ActiveXObject)

{

var doc=new ActiveXObject("Microsoft.XMLDOM");

doc.async="false";

doc.loadXML(text);

}

// code for Mozilla, Firefox, Opera, etc.

else

{

var parser=new DOMParser();

var doc=parser.parseFromString(text,"text/xml");

}

// documentElement always represents the root node

var x=doc.documentElement;

document.write("Text of first child element: ");

document.write(x.childNodes[0].childNodes[0].nodeValue);

document.write("<br />");

document.write("Text of second child element: ");

document.write(x.childNodes[1].childNodes[0].nodeValue);

</script>

</body>

</html>

Output:

Text of first child element: Tove

Text of second child element: Jani

Note: Internet Explorer uses the loadXML() method to parse an XML string, while Mozilla browsers uses the DOMParser object.


XML Quiz

You can test your XML skills with W3Schools' Quiz.

The Test

The test contains 20 questions and there is no time limit.

The test is not official, it's just a nice way to see how much you know, or don't know, about XML.

Your Score Will be Counted

You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 20 points.

Good luck! Start the XML Quiz


XML Summary

You Have Learned XML, Now What?

 Top Previous Next

XML Summary

This tutorial has taught you how to use XML to describe data.

You have learned that XML should be used to separate the data from the HTML code.

You have also learned that XML can be used to exchange, share, and store data.

For more information on XML, please look at our XML examples.

Now You Know XML, What's Next?

The next step is to learn about the XML DOM and XSLT.

If you want to learn about validating XML, the next step is learning about DTD and XML Schema.

XML DOM

The XML DOM defines a standard way for accessing and manipulating XML documents.

The XML DOM is platform and language independent and can be used by any programming language like Java, JavaScript, and VBScript.

If you want to learn more about the DOM, please visit our XML DOM tutorial.

XSLT

XSLT is the style sheet language for XML files.

With XSLT you can transform XML documents into other formats, like XHTML.

If you want to learn more about XSLT, please visit our .

DTD and XML Schema

The purpose of a DTD is to define what elements, attributes and entities is legal in an XML document.

With DTD, each of your XML files can carry a description of its own format with it.

DTD can be used to verify that the data you receive, and your own data, is valid.

If you want to learn more about DTD, please visit our .

XML Schema will replace DTD.

XML Schema is an XML based alternative to DTD.

Unlike DTD, XML Schemas has support for datatypes, and XML Schema use XML Syntax.

If you want to learn more about XML Schema, please visit our XML Schema tutorial.


XML Syntax

XML Syntax Rules

The syntax rules of XML are very simple and very strict. The rules are very easy to learn, and very easy to use.

Because of this, creating software that can read and manipulate XML is very easy.

An Example XML Document

XML documents use a self-describing and simple syntax.

<?xml version="1.0" encoding="ISO-8859-1"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

The first line in the document - the XML declaration - defines the XML version and the character encoding used in the document. In this case the document conforms to the 1.0 specification of XML and uses the ISO-8859-1 (Latin-1/West European) character set.

The next line describes the root element of the document (like it was saying: "this document is a note"):

<note>

The next 4 lines describe 4 child elements of the root (to, from, heading, and body):

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

And finally the last line defines the end of the root element:

</note>

Can you detect from this example that the XML document contains a Note to Tove from Jani? Don't you agree that XML is pretty self-descriptive?

All XML Elements Must Have a Closing Tag

With XML, it is illegal to omit the closing tag.

In HTML some elements do not have to have a closing tag. The following code is legal in HTML:

<p>This is a paragraph

<p>This is another paragraph

In XML all elements must have a closing tag, like this:

<p>This is a paragraph</p>

<p>This is another paragraph</p>

Note: You might have noticed from the previous example that the XML declaration did not have a closing tag. This is not an error. The declaration is not a part of the XML document itself. It is not an XML element, and it should not have a closing tag.

XML Tags are Case Sensitive

Unlike HTML, XML tags are case sensitive.

With XML, the tag <Letter> is different from the tag <letter>.

Opening and closing tags must therefore be written with the same case:

<Message>This is incorrect</message>

<message>This is correct</message>

XML Elements Must be Properly Nested

Improper nesting of tags makes no sense to XML.

In HTML some elements can be improperly nested within each other like this:

<b><i>This text is bold and italic</b></i>

In XML all elements must be properly nested within each other like this:

<b><i>This text is bold and italic</i></b>

XML Documents Must Have a Root Element

All XML documents must contain a single tag pair to define a root element.

All other elements must be within this root element.

All elements can have sub elements (child elements). Sub elements must be correctly nested within their parent element:

<root>

<child>

  <subchild>.....</subchild>

</child>

</root>

XML Attribute Values Must be Quoted

With XML, it is illegal to omit quotation marks around attribute values.

XML elements can have attributes in name/value pairs just like in HTML. In XML the attribute value must always be quoted. Study the two XML documents below. The first one is incorrect, the second is correct:

<?xml version="1.0" encoding="ISO-8859-1"?>

<note date=12/11/2002>

<to>Tove</to>

<from>Jani</from>

</note>

<?xml version="1.0" encoding="ISO-8859-1"?>

<note date="12/11/2002">

<to>Tove</to>

<from>Jani</from>

</note>

The error in the first document is that the date attribute in the note element is not quoted.

This is correct: date="12/11/2002". This is incorrect: date=12/11/2002.

With XML, White Space is Preserved

With XML, the white space in your document is not truncated.

This is unlike HTML. With HTML, a sentence like this:

Hello my name is Tove,

will be displayed like this:

Hello my name is Tove,

because HTML reduces multiple, consecutive white space characters to a single white space.

With XML, CR / LF is Converted to LF

With XML, a new line is always stored as LF.

Do you know what a typewriter is? Well, a typewriter is a mechanical device which was used last century to produce printed documents. :-)

After you have typed one line of text on a typewriter, you have to manually return the printing carriage to the left margin position and manually feed the paper up one line.

In Windows applications, a new line is normally stored as a pair of characters: carriage return (CR) and line feed (LF). The character pair bears some resemblance to the typewriter actions of setting a new line. In Unix applications, a new line is normally stored as a LF character. Macintosh applications use only a CR character to store a new line.

Comments in XML

The syntax for writing comments in XML is similar to that of HTML.

<!-- This is a comment -->

There is Nothing Special About XML

There is nothing special about XML. It is just plain text with the addition of some XML tags enclosed in angle brackets.

Software that can handle plain text can also handle XML. In a simple text editor, the XML tags will be visible and will not be handled specially.

In an XML-aware application however, the XML tags can be handled specially. The tags may or may not be visible, or have a functional meaning, depending on the nature of the application.


XML Technologies

XML Related Technologies

Below is a list of XML-related technologies.

XHTML (Extensible HTML) is a stricter and cleaner version of HTML.

defines a standard way for accessing and manipulating XML documents.

- XSL consists of three parts: XSLT - a language for transforming XML documents, XPath - a language for navigating in XML documents, and XSL-FO - a language for formatting XML documents.

is used to transform XML documents into other XML formats, like XHTML.

is a language for navigating in XML documents.

XSL-FO (Extensible Style Sheet Language Formatting Objects) is an XML based markup language describing the formatting of XML data for output to screen, paper or other media.

XLink (XML Linking Language) is a language for creating hyperlinks in XML documents.

XPointer (XML Pointer Language) allows the XLink hyperlinks to point to more specific parts in the XML document.

DTD (Document Type Definition) is used to define the legal elements in an XML document.

XSD (XML Schema) is an XML-based alternative to DTDs.

XForms (XML Forms) uses XML to define form data.

XQuery (XML Query Language) is designed to query XML data.

SOAP (Simple Object Access Protocol) is an XML-based protocol to let applications exchange information over HTTP.

WSDL (Web Services Description Language) is an XML-based language for describing web services.

is an XML-based language for describing web resources.

is a format for syndicating news and the content of news-like sites.

WAP (Wireless Application Protocol) was designed to show internet contents on wireless clients, like mobile phones.

SMIL (Synchronized Multimedia Integration is a language for describing audiovisual presentations.

SVG (Scalable Vector Graphics) defines graphics in XML format.


XML Tutorial

XML Tutorial

XML stands for EXtensible Markup Language.

XML is designed to describe data and to focus on what data is.

In our XML tutorial you will learn about XML and the difference between XML and HTML. You will also learn how to start using XML in your applications.

Start learning XML!

XML Examples

Learn by examples! With our editor, you can edit XML and click on a test button to view the result.

Try-It-Yourself!

XML Quiz Test

Test your XML skills at W3Schools!

Start the XML Quiz!

Table of Contents

XML Basic

Introduction to XML

What is XML, and how does it differ from HTML?

How XML can be used

Some of the different ways XML can be used.

XML Syntax

The strict and very simple syntax rules of XML.

XML Elements, relationships, content and naming rules.

XML Attributes

How XML attributes can be used to describe elements or provide additional information about elements.

XML Validation

The difference between a well-formed and a valid XML document, and how a DTD is used to define the structure of an XML document.

XML Validator

A simple on-line tool for syntax-checking XML.

XML Browser support

About the XML-support in the most common browsers.

Viewing XML in Browsers

How to view XML files.

Displaying XML with CSS

How to use CSS to display an XML file.

Displaying XML with XSL

How to use XSL to display an XML file.

XML embedded in HTML

How to embed XML inside HTML documents.

XML in Real Life

A real-life example of how XML can be used to carry information.

XML Parser

To read and update, create and manipulate an XML document, you will need an XML parser.

XML Advanced

How to avoid element name conflicts using XML namespaces.

XML CDATA

How to tell an XML parser not to parse the text.

XML Encoding

How to encode your XML documents.

XML Server

How to generate XML on the server.

How to use IE to navigate in an XML file and how to create a complete XML application.

XML HTTP Requests

By using the XMLHttpRequest object, a web developer can change a page with data from the server after the page has loaded.

XML Save Data to an XML File

Usually, we save data in databases. However, if we want to make the data more portable, we can store the data in an XML file.

Behaviors for HTML and XML

How the CSS behavior selector can be used to create dynamic content.

XML Technologies

XML-related technologies.

XML Editor

Why you should use an XML editor when you edit XML documents.

XML Summary

This chapter contains a summary on what you have learned in this tutorial and a recommendation on what subject you should study next.

XML Examples/Quiz

XML Examples

Lots of XML Examples !!

XML Quiz!

Test your XML skills at W3Schools!


XML Usage

How can XML be Used?

 Top Previous Next

It is important to understand that XML was designed to store, carry, and exchange data. XML was not designed to display data.

XML can Separate Data from HTML

With XML, your data is stored outside your HTML.

When HTML is used to display data, the data is stored inside your HTML. With XML, data can be stored in separate XML files. This way you can concentrate on using HTML for data layout and display, and be sure that changes in the underlying data will not require any changes to your HTML.

XML data can also be stored inside HTML pages as "Data Islands". You can still concentrate on using HTML only for formatting and displaying the data.

XML is Used to Exchange Data

With XML, data can be exchanged between incompatible systems.

In the real world, computer systems and databases contain data in incompatible formats. One of the most time-consuming challenges for developers has been to exchange data between such systems over the Internet.

Converting the data to XML can greatly reduce this complexity and create data that can be read by many different types of applications.

XML and B2B

With XML, financial information can be exchanged over the Internet.

Expect to see a lot about XML and B2B (Business To Business) in the near future.

XML is going to be the main language for exchanging financial information between businesses over the Internet. A lot of interesting B2B applications are under development.

XML Can be Used to Share Data

With XML, plain text files can be used to share data.

Since XML data is stored in plain text format, XML provides a software- and hardware-independent way of sharing data.

This makes it much easier to create data that different applications can work with. It also makes it easier to expand or upgrade a system to new operating systems, servers, applications, and new browsers.

XML Can be Used to Store Data

With XML, plain text files can be used to store data.

XML can also be used to store data in files or in databases. Applications can be written to store and retrieve information from the store, and generic applications can be used to display the data.

XML Can Make your Data More Useful

With XML, your data is available to more users.

Since XML is independent of hardware, software and application, you can make your data available to other than only standard HTML browsers.

Other clients and applications can access your XML files as data sources, like they are accessing databases. Your data can be made available to all kinds of "reading machines" (agents), and it is easier to make your data available for blind people, or people with other disabilities.

XML Can be Used to Create New Languages

XML is the mother of WAP and WML.

The Wireless Markup Language (WML), used to markup Internet applications for handheld devices like mobile phones, is written in XML.

You can read more about WML in our WML tutorial.

If Developers Have Sense

If they DO have sense, all future applications will exchange their data in XML.

The future might give us word processors, spreadsheet applications and databases that can read each other's data in a pure text format, without any conversion utilities in between.

We can only pray that Microsoft and all the other software vendors will agree.


XML Validator

XML Errors will Stop you

Errors in XML documents will stop your XML program.

The W3C XML specification states that a program should not continue to process an XML document if it finds an error. The reason is that XML software should be easy to write, and that all XML documents should be compatible.

With HTML it was possible to create documents with lots of errors (like when you forget an end tag). One of the main reasons that HTML browsers are so big and incompatible, is that they have their own ways to figure out what a document should look like when they encounter an HTML error.

With XML this should not be possible.

Syntax-check your XML - IE Only

To help you syntax-check your xml, we have used Microsoft's XML parser to create an XML validator.

Paste your XML in the text area below, and syntax-check it by pressing the "Validate" button.

[TTextAreaFormControlObj]

Syntax-check your XML File - IE Only

You can also syntax-check your XML file by typing the URL of your file into the input field below, and then press the "Validate" button

Filename:

[TEditFormControlObj]

If you want to syntax-check an error-free XML file, you can paste the following address into the filename field: http://www.w3schools.com/xml/cd_catalog.xml

Note: If you get the error "Access denied" when accessing this file, it is because your Internet Explorer security settings do not allow access across domains!


tryit_view079b.html

Using the HttpRequest Object

status:

status text:

response:


tryit_view12a3.html

With a HEAD request, a server will return the headers of a resource (not the resource itself). This means you can find out the Content-Type or Last-Modified of a document, without downloading it itself.


tryit_view2b3e.html

Using the HttpRequest Object

status:

status text:

response:


tryit_view3d8d.html

Mouse over me!!!


tryit_view4ba9.html

Title | Artist | Year


tryit_view5561.html

Send a query to a server and receive the answer as XML:

Query: [TEditFormControlObj]

Answer from server is:

XML from server is:

[TTextAreaFormControlObj]


tryit_view5d41.html

Title:

Artist:

Year:


tryit_view608c.html

Sending a query to the server and receiving the answer as XML:

Query: [TEditFormControlObj]

Answer from server is:

XML from server is:

[TTextAreaFormControlObj]


tryit_view7273.html


tryit_view74c3.html

IE5 introduced DHTML behaviors. Behaviors are a way to add DHTML functionality to HTML elements with the ease of CSS.

How does behaviors work?

By using XML we can link behaviors to any element in a web page and manipulate that element.


tryit_view84c1.html

Click


tryit_view8c97.html


tryit_view969f.html

With a HEAD request, a server will return the headers of a resource (not the resource itself). This means you can find out the Content-Type or Last-Modified of a document, without downloading it itself.


tryit_viewb11c.html


tryit_viewd547.html

Title:

Artist:

Year:


tryit_viewdeef.html

Artist | Title
This is my CD collection


tryit_viewe30a.html


tryit_viewf7ab.html

Title:

Artist:

Year:

Country:

Company:

Price:

Click on one of the CDs in the list:

Title | Artist | Country | Company | Price | Year


cd_catalog.txt

xml\cd_catalog.txt

CATALOG

{

background-color: #ffffff;

width: 100%;

}

CD

{

display: block;

margin-bottom: 30pt;

margin-left: 0;

}

TITLE

{

color: #FF0000;

font-size: 20pt;

}

ARTIST

{

color: #0000FF;

font-size: 20pt;

}

COUNTRY,PRICE,YEAR,COMPANY

{

display: block;

color: #000000;

margin-left: 20pt;

}


test_xmlhttp.txt

xml\test_xmlhttp.txt

This is a test of using an XML HTTP request to show a text file.

If this text is inside a textarea, it worked!


test_xmlhttp2.txt

xml\test_xmlhttp2.txt

This is another text file that is shown in the textarea - WITHOUT re-loading the page! This is how the XML HTTP request object works!


Introduction to XPath

XPath Introduction

XPath is a language for finding information in an XML document. XPath is used to navigate through elements and attributes in an XML document.

What You Should Already Know

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

· HTML / XHTML
· XML / XML Namespaces

If you want to study these subjects first, find the tutorials on our .

What is XPath?

· XPath is a syntax for defining parts of an XML document
· XPath uses path expressions to navigate in XML documents
· XPath contains a library of standard functions
· XPath is a major element in XSLT
· XPath is a W3C Standard

XPath Path Expressions

XPath uses path expressions to select nodes or node-sets in an XML document. These path expressions look very much like the expressions you see when you work with a traditional computer file system.

XPath Standard Functions

XPath includes over 100 built-in functions. There are functions for string values, numeric values, date and time comparison, node and QName manipulation, sequence manipulation, Boolean values, and more.

XPath is Used in XSLT

XPath is a major element in the XSLT standard. Without XPath knowledge you will not be able to create XSLT documents.

You can read more about XSLT in our XSLT tutorial.

XQuery and XPointer are both built on XPath expressions. XQuery 1.0 and XPath 2.0 share the same data model and support the same functions and operators.

You can read more about XQuery in our XQuery tutorial.

XPath is a W3C Standard

XPath became a W3C Recommendation 16. November 1999.

XPath was designed to be used by XSLT, XPointer and other XML parsing software.

You can read more about the XPath standard in our W3C tutorial.


XPath Axes

The XML Example Document

We will use the following XML document in the examples below.

<?xml version="1.0" encoding="ISO-8859-1"?>

<bookstore>

<book>

<title lang="eng">Harry Potter</title>

<price>29.99</price>

</book>

<book>

<title lang="eng">Learning XML</title>

<price>39.95</price>

</book>

</bookstore>

XPath Axes

An axis defines a node-set relative to the current node.

AxisName | Result
ancestor | Selects all ancestors (parent, grandparent, etc.) of the current node
ancestor-or-self | Selects all ancestors (parent, grandparent, etc.) of the current node and the current node itself
attribute | Selects all attributes of the current node
child | Selects all children of the current node
descendant | Selects all descendants (children, grandchildren, etc.) of the current node
descendant-or-self | Selects all descendants (children, grandchildren, etc.) of the current node and the current node itself
following | Selects everything in the document after the closing tag of the current node
following-sibling | Selects all siblings after the current node
namespace | Selects all namespace nodes of the current node
parent | Selects the parent of the current node
preceding | Selects everything in the document that is before the start tag of the current node
preceding-sibling | Selects all siblings before the current node
self | Selects the current node

Location Path Expression

A location path can be absolute or relative.

An absolute location path starts with a slash ( / ) and a relative location path does not. In both cases the location path consists of one or more steps, each separated by a slash:

An absolute location path:

/step/step/...

A relative location path:

step/step/...

Each step is evaluated against the nodes in the current node-set.

A step consists of:

· an axis (defines the tree-relationship between the selected nodes and the current node)
· a node-test (identifies a node within an axis)
· zero or more predicates (to further refine the selected node-set)

The syntax for a location step is:

axisname::nodetest[predicate]

Examples

Example | Result
child::book | Selects all book nodes that are children of the current node
attribute::lang | Selects the lang attribute of the current node
child::* | Selects all children of the current node
attribute::* | Selects all attributes of the current node
child::text() | Selects all text child nodes of the current node
child::node() | Selects all child nodes of the current node
descendant::book | Selects all book descendants of the current node
ancestor::book | Selects all book ancestors of the current node
ancestor-or-self::book | Selects all book ancestors of the current node - and the current as well if it is a book node
child::*/child::price | Selects all price grandchildren of the current node


XPath Examples

Let's try to learn some basic XPath syntax by looking at some examples.

The XML Example Document

We will use the following XML document in the examples below.

"books.xml":

<?xml version="1.0" encoding="ISO-8859-1"?>

<bookstore>

<book category="COOKING">

<title lang="en">Everyday Italian</title>

<author>Giada De Laurentiis</author>

<year>2005</year>

<price>30.00</price>

</book>

<book category="CHILDREN">

<title lang="en">Harry Potter</title>

<author>J K. Rowling</author>

<year>2005</year>

<price>29.99</price>

</book>

<book category="WEB">

<title lang="en">XQuery Kick Start</title>

<author>James McGovern</author>

<author>Per Bothner</author>

<author>Kurt Cagle</author>

<author>James Linn</author>

<author>Vaidyanathan Nagarajan</author>

<year>2003</year>

<price>49.99</price>

</book>

<book category="WEB">

<title lang="en">Learning XML</title>

<author>Erik T. Ray</author>

<year>2003</year>

<price>39.95</price>

</book>

</bookstore>

books.xml" file in your browser.

Selecting Nodes

We will use the Microsoft XMLDOM object to load the XML document and the selectNodes() function to select nodes from the XML document:

set xmlDoc=CreateObject("Microsoft.XMLDOM")

xmlDoc.async="false"

xmlDoc.load("books.xml")

xmlDoc.selectNodes(path expression)

Select all book Nodes

The following example selects all the book nodes under the bookstore element:

xmlDoc.selectNodes("/bookstore/book")

If you have IE 5 or higher you can try it yourself.

Select the First book Node

The following example selects only the first book node under the bookstore element:

xmlDoc.selectNodes("/bookstore/book[0]")

If you have IE 5 or higher you can try it yourself.

Note: IE 5 and 6 has implemented that [0] should be the first node, but according to the W3C standard it should have been [1]!!

Note: This is corrected in IE 6 SP2!

Select the prices

The following example selects the text from all the price nodes:

xmlDoc.selectNodes("/bookstore/book/price/text()")

If you have IE 5 or higher you can try it yourself.

Selecting price Nodes with Price>35

The following example selects all the price nodes with a price higher than 35:

xmlDoc.selectNodes("/bookstore/book[price>35]/price")

If you have IE 5 or higher you can try it yourself.

Selecting title Nodes with Price>35

The following example selects all the title nodes with a price higher than 35:

xmlDoc.selectNodes("/bookstore/book[price>35]/title")

If you have IE 5 or higher you can try it yourself.


XPath Nodes

In XPath, there are seven kinds of nodes: element, attribute, text, namespace, processing-instruction, comment, and document (root) nodes.

XPath Terminology

Nodes

In XPath, there are seven kinds of nodes: element, attribute, text, namespace, processing-instruction, comment, and document (root) nodes. XML documents are treated as trees of nodes. The root of the tree is called the document node (or root node).

Look at the following XML document:

<?xml version="1.0" encoding="ISO-8859-1"?>

<bookstore>

<book>

<title lang="en">Harry Potter</title>

<author>J K. Rowling</author>

<year>2005</year>

<price>29.99</price>

</book>

</bookstore>

Example of nodes in the XML document above:

<bookstore> (document node)

<author>J K. Rowling</author> (element node)

lang="en" (attribute node)

Atomic values

Atomic values are nodes with no children or parent.

Example of atomic values:

J K. Rowling

"en"

Items

Items are atomic values or nodes.

Relationship of Nodes

Parent

Each element and attribute has one parent.

In the following example; the book element is the parent of the title, author, year, and price:

<book>

<title>Harry Potter</title>

<author>J K. Rowling</author>

<year>2005</year>

<price>29.99</price>

</book>

Children

Element nodes may have zero, one or more children.

In the following example; the title, author, year, and price elements are all children of the book element:

<book>

<title>Harry Potter</title>

<author>J K. Rowling</author>

<year>2005</year>

<price>29.99</price>

</book>

Siblings

Nodes that have the same parent.

In the following example; the title, author, year, and price elements are all siblings:

<book>

<title>Harry Potter</title>

<author>J K. Rowling</author>

<year>2005</year>

<price>29.99</price>

</book>

Ancestors

A node's parent, parent's parent, etc.

In the following example; the ancestors of the title element are the book element and the bookstore element:

<bookstore>

<book>

<title>Harry Potter</title>

<author>J K. Rowling</author>

<year>2005</year>

<price>29.99</price>

</book>

</bookstore>

Descendants

A node's children, children's children, etc.

In the following example; descendants of the bookstore element are the book, title, author, year, and price elements:

<bookstore>

<book>

<title>Harry Potter</title>

<author>J K. Rowling</author>

<year>2005</year>

<price>29.99</price>

</book>

</bookstore>


XPath Operators

An XPath expression returns either a node-set, a string, a Boolean, or a number.

XPath Operators

Below is a list of the operators that can be used in XPath expressions:

Operator | Description | Example | Return value
| | Computes two node-sets | //book | //cd | Returns a node-set with all book and cd elements
+ | Addition | 6 + 4 | 10
- | Subtraction | 6 - 4 | 2
* | Multiplication | 6 * 4 | 24
div | Division | 8 div 4 | 2
= | Equal | price=9.80 | true if price is 9.80 false if price is 9.90
!= | Not equal | price!=9.80 | true if price is 9.90 false if price is 9.80
< | Less than | price<9.80 | true if price is 9.00 false if price is 9.80
<= | Less than or equal to | price<=9.80 | true if price is 9.00 false if price is 9.90
> | Greater than | price>9.80 | true if price is 9.90 false if price is 9.80
>= | Greater than or equal to | price>=9.80 | true if price is 9.90 false if price is 9.70
or | or | price=9.80 or price=9.70 | true if price is 9.80 false if price is 9.50
and | and | price>9.00 and price<9.90 | true if price is 9.80 false if price is 8.50
mod | Modulus (division remainder) | 5 mod 2 | 1


XPath Summary

You Have Learned XPath, Now What?

 Top Previous Next

XPath Summary

This tutorial has taught you how to find information in an XML document.

You have learned how to use XPath to navigate through elements and attributes in an XML document.

You have also learned how to use some of the standard functions that are built-in in XPath.

For more information on XPath, please look at our .

Now You Know XPath, What's Next?

The next step is to learn about XSLT, XQuery, XLink, and XPointer.

XSLT

XSLT is the style sheet language for XML files.

With XSLT you can transform XML documents into other formats, like XHTML.

If you want to learn more about XSLT, please visit our XSLT tutorial.

XQuery

XQuery is about querying XML data.

XQuery is designed to query anything that can appear as XML, including databases.

If you want to learn more about XQuery, please visit our XQuery tutorial.

XLink and XPointer

Linking in XML is divided into two parts: XLink and XPointer.

XLink and XPointer define a standard way of creating hyperlinks in XML documents.

If you want to learn more about XLink and XPointer, please visit our XLink and XPointer tutorial.


XPath Syntax

XPath uses path expressions to select nodes or node-sets in an XML document. The node is selected by following a path or steps.

The XML Example Document

We will use the following XML document in the examples below.

<?xml version="1.0" encoding="ISO-8859-1"?>

<bookstore>

<book>

<title lang="eng">Harry Potter</title>

<price>29.99</price>

</book>

<book>

<title lang="eng">Learning XML</title>

<price>39.95</price>

</book>

</bookstore>

Selecting Nodes

XPath uses path expressions to select nodes in an XML document. The node is selected by following a path or steps. The most useful path expressions are listed below:

Expression | Description
nodename | Selects all child nodes of the node
/ | Selects from the root node
// | Selects nodes in the document from the current node that match the selection no matter where they are
. | Selects the current node
.. | Selects the parent of the current node
@ | Selects attributes

Examples

In the table below we have listed some path expressions and the result of the expressions:

Path Expression | Result
bookstore | Selects all the child nodes of the bookstore element
/bookstore | Selects the root element bookstore Note: If the path starts with a slash ( / ) it always represents an absolute path to an element!
bookstore/book | Selects all book elements that are children of bookstore
//book | Selects all book elements no matter where they are in the document
bookstore//book | Selects all book elements that are descendant of the bookstore element, no matter where they are under the bookstore element
//@lang | Selects all attributes that are named lang

Predicates

Predicates are used to find a specific node or a node that contains a specific value.

Predicates are always embedded in square brackets.

Examples

In the table below we have listed some path expressions with predicates and the result of the expressions:

Path Expression | Result
/bookstore/book[1] | Selects the first book element that is the child of the bookstore element
/bookstore/book[last()] | Selects the last book element that is the child of the bookstore element
/bookstore/book[last()-1] | Selects the last but one book element that is the child of the bookstore element
/bookstore/book[position()<3] | Selects the first two book elements that are children of the bookstore element
//title[@lang] | Selects all the title elements that have an attribute named lang
//title[@lang='eng'] | Selects all the title elements that have an attribute named lang with a value of 'eng'
/bookstore/book[price>35.00] | Selects all the book elements of the bookstore element that have a price element with a value greater than 35.00
/bookstore/book[price>35.00]/title | Selects all the title elements of the book elements of the bookstore element that have a price element with a value greater than 35.00

Selecting Unknown Nodes

XPath wildcards can be used to select unknown XML elements.

Wildcard | Description
* | Matches any element node
@* | Matches any attribute node
node() | Matches any node of any kind

Examples

In the table below we have listed some path expressions and the result of the expressions:

Path Expression | Result
/bookstore/* | Selects all the child nodes of the bookstore element
//* | Selects all elements in the document
//title[@*] | Selects all title elements which have any attribute

Selecting Several Paths

By using the | operator in an XPath expression you can select several paths.

Examples

In the table below we have listed some path expressions and the result of the expressions:

Path Expression | Result
//book/title | //book/price | Selects all the title AND price elements of all book elements
//title | //price | Selects all the title AND price elements in the document
/bookstore/book/title | //price | Selects all the title elements of the book element of the bookstore element AND all the price elements in the document


XPath Tutorial

XPath Tutorial

xpath1

XPath is a language for finding information in an XML document. XPath is used to navigate through elements and attributes in an XML document.

XPath is a major element in the W3C's XSLT standard - and XQuery and XPointer are both built on XPath expressions.

So an understanding of XPath is fundamental to a lot of advanced XML usage.

Start learning XPath!

XPath Reference

At W3Schools you will find a complete reference of all the built-in functions in XPath 2.0, XQuery 1.0 and XSLT 2.0.

XPath Functions

Table of Contents

XPath Introduction

This chapter explains what XPath is.

XPath Nodes

This chapter defines the different types of nodes in XPath and the relationship of nodes.

XPath Syntax

This chapter explains the XPath syntax.

XPath Axes

This chapter explains the XPath axes.

XPath Operators

This chapter lists the operators that can be used in XPath expressions.

This chapter uses the "books.xml" document to demonstrate some XPath examples.

XPath Summary

This chapter contains a summary on what you have learned in this tutorial and a recommendation on what subject you should study next.

XPath Reference

This reference library defines the built-in functions required for XPath 2.0, XQuery 1.0 and XSLT 2.0.


XPath, XQuery, and XSLT Function Reference

XPath, XQuery, and XSLT Functions

The following reference library defines the functions required for XPath 2.0, XQuery 1.0 and XSLT 2.0.

Functions Reference

· Accessor
· Error and Trace
· Numeric
·

· AnyURI
· Boolean
· Duration/Date/Time
· QName
·
· Sequence
· Context

The default prefix for the function namespace is fn:, and the URI is:

http://www.w3.org/2005/02/xpath-functions.

Accessor Functions

Name | Description
fn:node-name(node) | Returns the node-name of the argument node
fn:nilled(node) | Returns a Boolean value indicating whether the argument node is nilled
fn:data(item.item,...) | Takes a sequence of items and returns a sequence of atomic values
fn:base-uri() fn:base-uri(node) | Returns the value of the base-uri property of the current or specified node
fn:document-uri(node) | Returns the value of the document-uri property for the specified node

Error and Trace Functions

Name | Description
fn:error() fn:error(error) fn:error(error,description) fn:error(error,description,error-object) | Example: error(fn:QName('http://example.com/test', 'err:toohigh'), 'Error: Price is too high') Result: Returns http://example.com/test#toohigh and the string "Error: Price is too high" to the external processing environment
fn:trace(value,label) | Used to debug queries

Functions on Numeric Values

Name | Description
fn:number(arg) | Returns the numeric value of the argument. The argument could be a boolean, string, or node-set Example: number('100') Result: 100
fn:abs(num) | Returns the absolute value of the argument Example: abs(3.14) Result: 3.14 Example: abs(-3.14) Result: 3.14
fn:ceiling(num) | Returns the smallest integer that is greater than the number argument Example: ceiling(3.14) Result: 4
fn:floor(num) | Returns the largest integer that is not greater than the number argument Example: floor(3.14) Result: 3
fn:round(num) | Rounds the number argument to the nearest integer Example: round(3.14) Result: 3
fn:round-half-to-even() | Example: round-half-to-even(0.5) Result: 0 Example: round-half-to-even(1.5) Result: 2 Example: round-half-to-even(2.5) Result: 2

Functions on Strings

Name | Description
fn:string(arg) | Returns the string value of the argument. The argument could be a number, boolean, or node-set Example: string(314) Result: "314"
fn:codepoints-to-string(int,int,...) | Returns a string from a sequence of code points Example: codepoints-to-string(84, 104, 233, 114, 232, 115, 101) Result: 'Thérèse'
fn:string-to-codepoints(string) | Returns a sequence of code points from a string Example: string-to-codepoints("Thérèse") Result: 84, 104, 233, 114, 232, 115, 101
fn:codepoint-equal(comp1,comp2) | Returns true if the value of comp1 is equal to the value of comp2, according to the Unicode code point collation (http://www.w3.org/2005/02/xpath-functions/collation/codepoint), otherwise it returns false
fn:compare(comp1,comp2) fn:compare(comp1,comp2,collation) | Returns -1 if comp1 is less than comp2, 0 if comp1 is equal to comp2, or 1 if comp1 is greater than comp2 (according to the rules of the collation that is used) Example: compare('ghi', 'ghi') Result: 0
fn:concat(string,string,...) | Returns the concatenation of the strings Example: concat('XPath ','is ','FUN!') Result: 'XPath is FUN!'
fn:string-join((string,string,...),sep) | Returns a string created by concatenating the string arguments and using the sep argument as the separator Example: string-join(('We', 'are', 'having', 'fun!'), ' ') Result: ' We are having fun! ' Example: string-join(('We', 'are', 'having', 'fun!')) Result: 'Wearehavingfun!' Example:string-join((), 'sep') Result: ''
fn:substring(string,start,len) fn:substring(string,start) | Returns the substring from the start position to the specified length. Index of the first character is 1. If length is omitted it returns the substring from the start position to the end Example: substring('Beatles',1,4) Result: 'Beat' Example: substring('Beatles',2) Result: 'eatles'
fn:string-length(string) fn:string-length() | Returns the length of the specified string. If there is no string argument it returns the length of the string value of the current node Example: string-length('Beatles') Result: 7
fn:normalize-space(string) fn:normalize-space() | Removes leading and trailing spaces from the specified string, and replaces all internal sequences of white space with one and returns the result. If there is no string argument it does the same on the current node Example: normalize-space(' The XML ') Result: 'The XML'
fn:normalize-unicode() |
fn:upper-case(string) | Converts the string argument to upper-case Example: upper-case('The XML') Result: 'THE XML'
fn:lower-case(string) | Converts the string argument to lower-case Example: lower-case('The XML') Result: 'the xml'
fn:translate(string1,string2,string3) | Converts string1 by replacing the characters in string2 with the characters in string3 Example: translate('12:30','30','45') Result: '12:45' Example: translate('12:30','03','54') Result: '12:45' Example: translate('12:30','0123','abcd') Result: 'bc:da'
fn:escape-uri(stringURI,esc-res) | Example: escape-uri("http://example.com/test#car", true()) Result: "http%3A%2F%2Fexample.com%2Ftest#car" Example: escape-uri("http://example.com/test#car", false()) Result: "http://example.com/test#car" Example: escape-uri ("http://example.com/~bébé", false()) Result: "http://example.com/~b%C3%A9b%C3%A9"
fn:contains(string1,string2) | Returns true if string1 contains string2, otherwise it returns false Example: contains('XML','XM') Result: true
fn:starts-with(string1,string2) | Returns true if string1 starts with string2, otherwise it returns false Example: starts-with('XML','X') Result: true
fn:ends-with(string1,string2) | Returns true if string1 ends with string2, otherwise it returns false Example: ends-with('XML','X') Result: false
fn:substring-before(string1,string2) | Returns the start of string1 before string2 occurs in it Example: substring-before('12/10','/') Result: '12'
fn:substring-after(string1,string2) | Returns the remainder of string1 after string2 occurs in it Example: substring-after('12/10','/') Result: '10'
fn:matches(string,pattern) | Returns true if the string argument matches the pattern, otherwise, it returns false Example: matches("Merano", "ran") Result: true
fn:replace(string,pattern,replace) | Returns a string that is created by replacing the given pattern with the replace argument Example: replace("Bella Italia", "l", "*") Result: 'Be**a Ita*ia' Example: replace("Bella Italia", "l", "") Result: 'Bea Itaia'
fn:tokenize(string,pattern) | Example: tokenize("XPath is fun", "\s+") Result: ("XPath", "is", "fun")

Functions for anyURI

Name | Description
fn:resolve-uri(relative,base) |

Functions on Boolean Values

Name | Description
fn:boolean(arg) | Returns a boolean value for a number, string, or node-set
fn:not(arg) | The argument is first reduced to a boolean value by applying the boolean() function. Returns true if the boolean value is false, and false if the boolean value is true Example: not(true()) Result: false
fn:true() | Returns the boolean value true Example: true() Result: true
fn:false() | Returns the boolean value false Example: false() Result: false

Functions on Durations, Dates and Times

Component Extraction Functions on Durations, Dates and Times

Name | Description
fn:dateTime(date,time) | Converts the arguments to a date and a time
fn:years-from-duration(datetimedur) | Returns an integer that represents the years component in the canonical lexical representation of the value of the argument
fn:months-from-duration(datetimedur) | Returns an integer that represents the months component in the canonical lexical representation of the value of the argument
fn:days-from-duration(datetimedur) | Returns an integer that represents the days component in the canonical lexical representation of the value of the argument
fn:hours-from-duration(datetimedur) | Returns an integer that represents the hours component in the canonical lexical representation of the value of the argument
fn:minutes-from-duration(datetimedur) | Returns an integer that represents the minutes component in the canonical lexical representation of the value of the argument
fn:seconds-from-duration(datetimedur) | Returns a decimal that represents the seconds component in the canonical lexical representation of the value of the argument
fn:year-from-dateTime(datetime) | Returns an integer that represents the year component in the localized value of the argument Example: year-from-dateTime(xs:dateTime("2005-01-10T12:30-04:10")) Result: 2005
fn:month-from-dateTime(datetime) | Returns an integer that represents the month component in the localized value of the argument Example: month-from-dateTime(xs:dateTime("2005-01-10T12:30-04:10")) Result: 01
fn:day-from-dateTime(datetime) | Returns an integer that represents the day component in the localized value of the argument Example: day-from-dateTime(xs:dateTime("2005-01-10T12:30-04:10")) Result: 10
fn:hours-from-dateTime(datetime) | Returns an integer that represents the hours component in the localized value of the argument Example: hours-from-dateTime(xs:dateTime("2005-01-10T12:30-04:10")) Result: 12
fn:minutes-from-dateTime(datetime) | Returns an integer that represents the minutes component in the localized value of the argument Example: minutes-from-dateTime(xs:dateTime("2005-01-10T12:30-04:10")) Result: 30
fn:seconds-from-dateTime(datetime) | Returns a decimal that represents the seconds component in the localized value of the argument Example: seconds-from-dateTime(xs:dateTime("2005-01-10T12:30:00-04:10")) Result: 0
fn:timezone-from-dateTime(datetime) | Returns the time zone component of the argument if any
fn:year-from-date(date) | Returns an integer that represents the year in the localized value of the argument Example: year-from-date(xs:date("2005-04-23")) Result: 2005
fn:month-from-date(date) | Returns an integer that represents the month in the localized value of the argument Example: month-from-date(xs:date("2005-04-23")) Result: 4
fn:day-from-date(date) | Returns an integer that represents the day in the localized value of the argument Example: day-from-date(xs:date("2005-04-23")) Result: 23
fn:timezone-from-date(date) | Returns the time zone component of the argument if any
fn:hours-from-time(time) | Returns an integer that represents the hours component in the localized value of the argument Example: hours-from-time(xs:time("10:22:00")) Result: 10
fn:minutes-from-time(time) | Returns an integer that represents the minutes component in the localized value of the argument Example: minutes-from-time(xs:time("10:22:00")) Result: 22
fn:seconds-from-time(time) | Returns an integer that represents the seconds component in the localized value of the argument Example: seconds-from-time(xs:time("10:22:00")) Result: 0
fn:timezone-from-time(time) | Returns the time zone component of the argument if any
fn:adjust-dateTime-to-timezone(datetime,timezone) | If the timezone argument is empty, it returns a dateTime without a timezone. Otherwise, it returns a dateTime with a timezone
fn:adjust-date-to-timezone(date,timezone) | If the timezone argument is empty, it returns a date without a timezone. Otherwise, it returns a date with a timezone
fn:adjust-time-to-timezone(time,timezone) | If the timezone argument is empty, it returns a time without a timezone. Otherwise, it returns a time with a timezone

Functions Related to QNames

Name | Description
fn:QName() |
fn:local-name-from-QName() |
fn:namespace-uri-from-QName() |
fn:namespace-uri-for-prefix() |
fn:in-scope-prefixes() |
fn:resolve-QName() |

Functions on Nodes

Name | Description
fn:name() fn:name(nodeset) | Returns the name of the current node or the first node in the specified node set
fn:local-name() fn:local-name(nodeset) | Returns the name of the current node or the first node in the specified node set - without the namespace prefix
fn:namespace-uri() fn:namespace-uri(nodeset) | Returns the namespace URI of the current node or the first node in the specified node set
fn:lang(lang) | Returns true if the language of the current node matches the language of the specified language Example: Lang("en") is true for <p xml:lang="en">...</p> Example: Lang("de") is false for <p xml:lang="en">...</p>
fn:root() fn:root(node) | Returns the root of the tree to which the current node or the specified belongs. This will usually be a document node

Functions on Sequences

General Functions on Sequences

Name | Description
fn:index-of((item,item,...),searchitem) | Returns the positions within the sequence of items that are equal to the searchitem argument Example: index-of ((15, 40, 25, 40, 10), 40) Result: (2, 4) Example: index-of (("a", "dog", "and", "a", "duck"), "a") Result (1, 4) Example: index-of ((15, 40, 25, 40, 10), 18) Result: ()
fn:remove((item,item,...),position) | Returns a new sequence constructed from the value of the item arguments - with the item specified by the position argument removed Example: remove(("ab", "cd", "ef"), 0) Result: ("ab", "cd", "ef") Example: remove(("ab", "cd", "ef"), 1) Result: ("cd", "ef") Example: remove(("ab", "cd", "ef"), 4) Result: ("ab", "cd", "ef")
fn:empty(item,item,...) | Returns true if the value of the arguments IS an empty sequence, otherwise it returns false Example: empty(remove(("ab", "cd"), 1)) Result: false
fn:exists(item,item,...) | Returns true if the value of the arguments IS NOT an empty sequence, otherwise it returns false Example: exists(remove(("ab"), 1)) Result: false
fn:distinct-values((item,item,...),collation) | Returns only distinct (different) values Example: distinct-values((1, 2, 3, 1, 2)) Result: (1, 2, 3)
fn:insert-before((item,item,...),pos,inserts) | Returns a new sequence constructed from the value of the item arguments - with the value of the inserts argument inserted in the position specified by the pos argument Example: insert-before(("ab", "cd"), 0, "gh") Result: ("gh", "ab", "cd") Example: insert-before(("ab", "cd"), 1, "gh") Result: ("gh", "ab", "cd") Example: insert-before(("ab", "cd"), 2, "gh") Result: ("ab", "gh", "cd") Example: insert-before(("ab", "cd"), 5, "gh") Result: ("ab", "cd", "gh")
fn:reverse((item,item,...)) | Returns the reversed order of the items specified Example: reverse(("ab", "cd", "ef")) Result: ("ef", "cd", "ab") Example: reverse(("ab")) Result: ("ab")
fn:subsequence((item,item,...),start,len) | Returns a sequence of items from the position specified by the start argument and continuing for the number of items specified by the len argument. The first item is located at position 1 Example: subsequence(($item1, $item2, $item3,...), 3) Result: ($item3, ...) Example: subsequence(($item1, $item2, $item3, ...), 2, 2) Result: ($item2, $item3)
fn:unordered((item,item,...)) | Returns the items in an implementation dependent order

Functions That Test the Cardinality of Sequences

Name | Description
fn:zero-or-one(item,item,...) | Returns the argument if it contains zero or one items, otherwise it raises an error
fn:one-or-more(item,item,...) | Returns the argument if it contains one or more items, otherwise it raises an error
fn:exactly-one(item,item,...) | Returns the argument if it contains exactly one item, otherwise it raises an error

Equals, Union, Intersection and Except

Name | Description
fn:deep-equal(param1,param2,collation) | Returns true if param1 and param2 are deep-equal to each other, otherwise it returns false

Aggregate Functions

Name | Description
fn:count((item,item,...)) | Returns the count of nodes
fn:avg((arg,arg,...)) | Returns the average of the argument values Example: avg((1,2,3)) Result: 2
fn:max((arg,arg,...)) | Returns the argument that is greater than the others Example: max((1,2,3)) Result: 3 Example: max(('a', 'k')) Result: 'k'
fn:min((arg,arg,...)) | Returns the argument that is less than the others Example: min((1,2,3)) Result: 1 Example: min(('a', 'k')) Result: 'a'
fn:sum(arg,arg,...) | Returns the sum of the numeric value of each node in the specified node-set

Functions that Generate Sequences

Name | Description
fn:id((string,string,...),node) | Returns a sequence of element nodes that have an ID value equal to the value of one or more of the values specified in the string argument
fn:idref((string,string,...),node) | Returns a sequence of element or attribute nodes that have an IDREF value equal to the value of one or more of the values specified in the string argument
fn:doc(URI) |
fn:doc-available(URI) | Returns true if the doc() function returns a document node, otherwise it returns false
fn:collection() fn:collection(string) |

Context Functions

Name | Description
fn:position() | Returns the index position of the node that is currently being processed Example: //book[position()< =3] Result: Selects the first three book elements
fn:last() | Returns the number of items in the processed node list Example: //book[last()] Result: Selects the last book element
fn:current-dateTime() | Returns the current dateTime (with timezone)
fn:current-date() | Returns the current date (with timezone)
fn:current-time() | Returns the current time (with timezone)
fn:implicit-timezone() | Returns the value of the implicit timezone
fn:default-collation() | Returns the value of the default collation
fn:static-base-uri() | Returns the value of the base-uri


tryit_view5069.html


tryit_view6db6.html


tryit_view9118.html


tryit_viewaccf.html


tryit_viewe28f.html


XQuery Introduction

Introduction to XQuery

The best way to explain XQuery is to say that XQuery is to XML what SQL is to database tables.

XQuery is designed to query XML data - not just XML files, but anything that can appear as XML, including databases.

What You Should Already Know

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

· HTML / XHTML
· XML / XML Namespaces
· XPath

If you want to study these subjects first, find the tutorials on our Home page.

What is XQuery?

· XQuery is the language for querying XML data
· XQuery for XML is like SQL for databases
· XQuery is built on XPath expressions
· XQuery is supported by all the major database engines (IBM, Oracle, Microsoft, etc.)
· XQuery is a W3C Recommendation

XQuery is About Querying XML

XQuery is a language for finding and extracting elements and attributes from XML documents.

Here is an example of a question that XQuery could solve:

"Select all CD records with a price less than $10 from the CD collection stored in the XML document called cd_catalog.xml"

XQuery and XPath

XQuery 1.0 and XPath 2.0 share the same data model and support the same functions and operators. If you have already studied XPath you will have no problems with understanding XQuery.

You can read more about XPath in our .

XQuery - Examples of Use

XQuery can be used to:

· Extract information to use in a Web Service
· Generate summary reports
· Transform XML data to XHTML
· Search Web documents for relevant information

XQuery is a W3C Recommendation

XQuery is compatible with several W3C standards, such as XML, Namespaces, XSLT, XPath, and XML Schema.

XQuery 1.0 became a W3C Recommendation January 23, 2007.

To read more about the XQuery activity at W3C, please read our W3C Tutorial.


XQuery Tutorial

XQuery Tutorial

xpath

The best way to explain XQuery is to say that XQuery is to XML what SQL is to database tables.

XQuery was designed to query XML data.

XQuery is also known as XML Query.

Start learning XQuery!

XQuery Reference

At W3Schools you will find a complete reference of all the operators, built-in functions, and data types in XQuery 1.0.

XQuery Reference

Table of Contents

XQuery Introduction

An introduction to XQuery. What XQuery is and what it can be used for.

XQuery Example

This chapter demonstrates XQuery with an example.

XQuery FLWOR

This chapter explains XQuery FLWOR expressions.

This chapter demonstrates how to present an FLWOR result in an HTML list.

XQuery Terms

This chapter explains common used terms in XQuery.

XQuery Syntax

This chapter explains some basic syntax rules in XQuery.

XQuery Adding Elements and Attributes to the Result

This chapter explains how to add your own elements and attributes to the result.

This chapter explains how to select and filter elements with FLWOR.

XQuery Functions

Overview of XQuery built-in functions and operators and how to create user-defined functions.

XQuery Summary

This chapter contains a summary on what you have learned in this tutorial and a recommendation on what subject you should study next.

XQuery Reference

XQuery Reference

Pointers to XQuery operators, built-in functions, data types.


XQuery Adding Elements and Attributes

The XML Example Document

We will use the "books.xml" document in the examples below (same XML file as in the previous chapters).

View the " books.xml" file in your browser.

Adding Elements and Attributes to the Result

As we have seen in a previous chapter, we may include elements and attributes from the input document ("books.xml) in the result:

for $x in doc("books.xml")/bookstore/book/title

order by $x

return $x

The XQuery expression above will include both the title element and the lang attribute in the result, like this:

<title lang="en">Everyday Italian</title>

<title lang="en">Harry Potter</title>

<title lang="en">Learning XML</title>

<title lang="en">XQuery Kick Start</title>

The XQuery expression above returns the title elements the exact same way as they are described in the input document.

We now want to add our own elements and attributes to the result!

Add HTML Elements and Text

Now, we want to add some HTML elements to the result. We will put the result in an HTML list - together with some text:

<html>

<body>

<h1>Bookstore</h1>

<ul>

{

for $x in doc("books.xml")/bookstore/book

order by $x/title

return <li>{data($x/title)}. Category: {data($x/@category)}</li>

}

</ul>

</body>

</html>

The XQuery expression above will generate the following result:

<html>

<body>

<h1>Bookstore</h1>

<ul>

<li>Everyday Italian. Category: COOKING</li>

<li>Harry Potter. Category: CHILDREN</li>

<li>Learning XML. Category: WEB</li>

<li>XQuery Kick Start. Category: WEB</li>

</ul>

</body>

</html>

Add Attributes to HTML Elements

Next, we want to use the category attribute as a class attribute in the HTML list:

<html>

<body>

<h1>Bookstore</h1>

<ul>

{

for $x in doc("books.xml")/bookstore/book

order by $x/title

return <li class="{data($x/@category)}">{data($x/title)}</li>

}

</ul>

</body>

</html>

The XQuery expression above will generate the following result:

<html>

<body>

<h1>Bookstore</h1>

<ul>

<li class="COOKING">Everyday Italian</li>

<li class="CHILDREN">Harry Potter</li>

<li class="WEB">Learning XML</li>

<li class="WEB">XQuery Kick Start</li>

</ul>

</body>

</html>


XQuery Example

Let's try to learn some basic XQuery syntax by looking at an example.

The XML Example Document

We will use the following XML document in the examples below.

"books.xml":

<?xml version="1.0" encoding="ISO-8859-1"?>

<bookstore>

<book category="COOKING">

<title lang="en">Everyday Italian</title>

<author>Giada De Laurentiis</author>

<year>2005</year>

<price>30.00</price>

</book>

<book category="CHILDREN">

<title lang="en">Harry Potter</title>

<author>J K. Rowling</author>

<year>2005</year>

<price>29.99</price>

</book>

<book category="WEB">

<title lang="en">XQuery Kick Start</title>

<author>James McGovern</author>

<author>Per Bothner</author>

<author>Kurt Cagle</author>

<author>James Linn</author>

<author>Vaidyanathan Nagarajan</author>

<year>2003</year>

<price>49.99</price>

</book>

<book category="WEB">

<title lang="en">Learning XML</title>

<author>Erik T. Ray</author>

<year>2003</year>

<price>39.95</price>

</book>

</bookstore>

View the " books.xml" file in your browser.

How to Select Nodes From "books.xml"?

Functions

XQuery uses functions to extract data from XML documents.

The doc() function is used to open the "books.xml" file:

doc("books.xml")

Path Expressions

XQuery uses path expressions to navigate through elements in an XML document.

The following path expression is used to select all the title elements in the "books.xml" file:

doc("books.xml")/bookstore/book/title

(/bookstore selects the bookstore element, /book selects all the book elements under the bookstore element, and /title selects all the title elements under each book element)

The XQuery above will extract the following:

<title lang="en">Everyday Italian</title>

<title lang="en">Harry Potter</title>

<title lang="en">XQuery Kick Start</title>

<title lang="en">Learning XML</title>

Predicates

XQuery uses predicates to limit the extracted data from XML documents.

The following predicate is used to select all the book elements under the bookstore element that have a price element with a value that is less than 30:

doc("books.xml")/bookstore/book[price<30]

The XQuery above will extract the following:

<book category="CHILDREN">

<title lang="en">Harry Potter</title>

<author>J K. Rowling</author>

<year>2005</year>

<price>29.99</price>

</book>


XQuery FLWOR Expressions

The XML Example Document

We will use the "books.xml" document in the examples below (same XML file as in the previous chapter).

books.xml" file in your browser.

How to Select Nodes From "books.xml" With FLWOR

Look at the following path expression:

doc("books.xml")/bookstore/book[price>30]/title

The expression above will select all the title elements under the book elements that are under the bookstore element that have a price element with a value that is higher than 30.

The following FLWOR expression will select exactly the same as the path expression above:

for $x in doc("books.xml")/bookstore/book

where $x/price>30

return $x/title

The result will be:

<title lang="en">XQuery Kick Start</title>

<title lang="en">Learning XML</title>

With FLWOR you can sort the result:

for $x in doc("books.xml")/bookstore/book

where $x/price>30

order by $x/title

return $x/title

FLWOR is an acronym for "For, Let, Where, Order by, Return".

The for clause selects all book elements under the bookstore element into a variable called $x.

The where clause selects only book elements with a price element with a value greater than 30.

The order by clause defines the sort-order. Will be sort by the title element.

The return clause specifies what should be returned. Here it returns the title elements.

The result of the XQuery expression above will be:

<title lang="en">Learning XML</title>

<title lang="en">XQuery Kick Start</title>


XQuery FLWOR + HTML

The XML Example Document

We will use the "books.xml" document in the examples below (same XML file as in the previous chapters).

books.xml" .

Present the Result In an HTML List

Look at the following XQuery FLWOR expression:

for $x in doc("books.xml")/bookstore/book/title

order by $x

return $x

The expression above will select all the title elements under the book elements that are under the bookstore element, and return the title elements in alphabetical order.

Now we want to list all the book-titles in our bookstore in an HTML list. We add <ul> and <li> tags to the FLWOR expression:

<ul>

{

for $x in doc("books.xml")/bookstore/book/title

order by $x

return <li>{$x}</li>

}

</ul>

The result of the above will be:

<ul>

<li><title lang="en">Everyday Italian</title></li>

<li><title lang="en">Harry Potter</title></li>

<li><title lang="en">Learning XML</title></li>

<li><title lang="en">XQuery Kick Start</title></li>

</ul>

Now we want to eliminate the title element, and show only the data inside the title element:

<ul>

{

for $x in doc("books.xml")/bookstore/book/title

order by $x

return <li>{data($x)}</li>

}

</ul>

The result will be (an HTML list):

<ul>

<li>Everyday Italian</li>

<li>Harry Potter</li>

<li>Learning XML</li>

<li>XQuery Kick Start</li>

</ul>


XQuery Functions

XQuery 1.0, XPath 2.0, and XSLT 2.0 share the same functions library.

XQuery Functions

XQuery includes over 100 built-in functions. There are functions for string values, numeric values, date and time comparison, node and QName manipulation, sequence manipulation, Boolean values, and more. You can also define your own functions in XQuery.

XQuery Built-in Functions

The URI of the XQuery function namespace is:

http://www.w3.org/2005/02/xpath-functions

The default prefix for the function namespace is fn:.

Tip: Functions are often called with the fn: prefix, such as fn:string(). However, since fn: is the default prefix of the namespace, the function names do not need to be prefixed when called.

in our XPath tutorial.

Examples of Function Calls

A call to a function can appear where an expression may appear. Look at the examples below:

Example 1: In an element

<name>{uppercase($booktitle)}</name>

Example 2: In the predicate of a path expression

doc("books.xml")/bookstore/book[substring(title,1,5)='Harry']

Example 3: In a let clause

let $name := (substring($booktitle,1,4))

XQuery User-Defined Functions

If you cannot find the XQuery function you need, you can write your own.

User-defined functions can be defined in the query or in a separate library.

Syntax

declare function prefix:function_name($parameter AS datatype)

AS returnDatatype

{

(: ...function code here... :)

};

Notes on user-defined functions:

· Use the declare function keyword
· The name of the function must be prefixed
· The data type of the parameters are mostly the same as the data types defined in XML Schema
· The body of the function must be surrounded by curly braces

Example of a User-defined Function Declared in the Query

declare function local:minPrice(

$price as xs:decimal?,

$discount as xs:decimal?)

AS xs:decimal?

{

let $disc := ($price * $discount) div 100

return ($price - $disc)

};

(: Below is an example of how to call the function above :)

<minPrice>{local:minPrice($book/price, $book/discount)}</minPrice>


XQuery Reference

XQuery 1.0 and XPath 2.0 share the same data model and support the same functions and operators.

XQuery Functions

XQuery is built on XPath expressions. XQuery 1.0 and XPath 2.0 share the same data model and support the same functions and operators.

XPath Operators

XQuery Data Types

XQuery shares the same data types as XML Schema 1.0 (XSD).

XSD String

XSD Date

XSD Numeric

XSD Misc


XQuery Selecting and Filtering

The XML Example Document

We will use the "books.xml" document in the examples below (same XML file as in the previous chapters).

View the " file in your browser.

Selecting and Filtering Elements

As we have seen in the previous chapters, we are selecting and filtering elements with either a Path expression or with a FLWOR expression.

Look at the following FLWOR expression:

for $x in doc("books.xml")/bookstore/book

where $x/price>30

order by $x/title

return $x/title
· for - (optional) binds a variable to each item returned by the in expression
· let - (optional)
· where - (optional) specifies a criteria
· order by - (optional) specifies the sort-order of the result
· return - specifies what to return in the result

The for Clause

The for clause binds a variable to each item returned by the in expression. The for clause results in iteration. There can be multiple for clauses in the same FLWOR expression.

To loop a specific number of times in a for clause, you may use the to keyword:

for $x in (1 to 5)

return <test>{$x}</test>

Result:

<test>1</test>

<test>2</test>

<test>3</test>

<test>4</test>

<test>5</test>

The at keyword can be used to count the iteration:

for $x at $i in doc("books.xml")/bookstore/book/title

return <book>{$i}. {data($x)}</book>

Result:

<book>1. Everyday Italian</book>

<book>2. Harry Potter</book>

<book>3. XQuery Kick Start</book>

<book>4. Learning XML</book>

It is also allowed with more than one in expression in the for clause. Use comma to separate each in expression:

for $x in (10,20), $y in (100,200)

return <test>x={$x} and y={$y}</test>

Result:

<test>x=10 and y=100</test>

<test>x=10 and y=200</test>

<test>x=20 and y=100</test>

<test>x=20 and y=200</test>

The let Clause

The let clause allows variable assignments and it avoids repeating the same expression many times. The let clause does not result in iteration.

let $x := (1 to 5)

return <test>{$x}</test>

Result:

<test>1 2 3 4 5</test>

The where Clause

The where clause is used to specify one or more criteria for the result:

where $x/price>30 and $x/price<100

The order by Clause

The order by clause is used to specify the sort order of the result. Here we want to order the result by category and title:

for $x in doc("books.xml")/bookstore/book

order by $x/@category, $x/title

return $x/title

Result:

<title lang="en">Harry Potter</title>

<title lang="en">Everyday Italian</title>

<title lang="en">Learning XML</title>

<title lang="en">XQuery Kick Start</title>

The return Clause

The return clause specifies what is to be returned.

for $x in doc("books.xml")/bookstore/book

return $x/title

Result:

<title lang="en">Everyday Italian</title>

<title lang="en">Harry Potter</title>

<title lang="en">XQuery Kick Start</title>

<title lang="en">Learning XML</title>


XQuery Summary

You Have Learned XQuery, Now What?

 Top Previous Next

XQuery Summary

This tutorial has taught you how to query XML data.

You have learned that XQuery was designed to query anything that can appear as XML, including databases.

You have also learned how to query the XML data with FLWOR expressions, and how to construct XHTML output from the collected data.

For more information on XQuery, please look at our XQuery Reference.

Now You Know XQuery, What's Next?

The next step is to learn about XLink and XPointer.

XLink and XPointer

Linking in XML is divided into two parts: XLink and XPointer.

XLink and XPointer define a standard way of creating hyperlinks in XML documents.

If you want to learn more about XLink and XPointer, please visit our XLink and XPointer tutorial.


XQuery Syntax

XQuery is case-sensitive and XQuery elements, attributes, and variables must be valid XML names.

XQuery Basic Syntax Rules

Some basic syntax rules:

· XQuery is case-sensitive
· XQuery elements, attributes, and variables must be valid XML names
· An XQuery string value can be in single or double quotes
· An XQuery variable is defined with a $ followed by a name, e.g. $bookstore
· XQuery comments are delimited by (: and :), e.g. (: XQuery Comment :)

XQuery Conditional Expressions

"If-Then-Else" expressions are allowed in XQuery.

Look at the following example:

for $x in doc("books.xml")/bookstore/book

return if ($x/@category="CHILDREN")

then <child>{data($x/title)}</child>

else <adult>{data($x/title)}</adult>

Notes on the "if-then-else" syntax: parentheses around the if expression are required. else is required, but it can be just else ().

The result of the example above will be:

<adult>Everyday Italian</adult>

<child>Harry Potter</child>

<adult>Learning XML</adult>

<adult>XQuery Kick Start</adult>

XQuery Comparisons

In XQuery there are two ways of comparing values.

1. General comparisons: =, !=, <, <=, >, >=

2. Value comparisons: eq, ne, lt, le, gt, ge

The difference between the two comparison methods are shown below.

Look at the following XQuery expressions:

$bookstore//book/@q > 10

The expression above returns true if any q attributes

have values greater than 10.

$bookstore//book/@q gt 10

The expression above returns true if there is only one

q attribute returned by the expression, and its value

is greater than 10. If more than one q is returned,

an error occurs.


XQuery Terms

In XQuery, there are seven kinds of nodes: element, attribute, text, namespace, processing-instruction, comment, and document (root) nodes.

XQuery Terminology

Nodes

In XQuery, there are seven kinds of nodes: element, attribute, text, namespace, processing-instruction, comment, and document (root) nodes. XML documents are treated as trees of nodes. The root of the tree is called the document node (or root node).

Look at the following XML document:

<?xml version="1.0" encoding="ISO-8859-1"?>

<bookstore>

<book>

<title lang="en">Harry Potter</title>

<author>J K. Rowling</author>

<year>2005</year>

<price>29.99</price>

</book>

</bookstore>

Example of nodes in the XML document above:

<bookstore> (document node)

<author>J K. Rowling</author> (element node)

lang="en" (attribute node)

Atomic values

Atomic values are nodes with no children or parent.

Example of atomic values:

J K. Rowling

"en"

Items

Items are atomic values or nodes.

Relationship of Nodes

Parent

Each element and attribute has one parent.

In the following example; the book element is the parent of the title, author, year, and price:

<book>

<title>Harry Potter</title>

<author>J K. Rowling</author>

<year>2005</year>

<price>29.99</price>

</book>

Children

Element nodes may have zero, one or more children.

In the following example; the title, author, year, and price elements are all children of the book element:

<book>

<title>Harry Potter</title>

<author>J K. Rowling</author>

<year>2005</year>

<price>29.99</price>

</book>

Siblings

Nodes that have the same parent.

In the following example; the title, author, year, and price elements are all siblings:

<book>

<title>Harry Potter</title>

<author>J K. Rowling</author>

<year>2005</year>

<price>29.99</price>

</book>

Ancestors

A node's parent, parent's parent, etc.

In the following example; the ancestors of the title element are the book element and the bookstore element:

<bookstore>

<book>

<title>Harry Potter</title>

<author>J K. Rowling</author>

<year>2005</year>

<price>29.99</price>

</book>

</bookstore>

Descendants

A node's children, children's children, etc.

In the following example; descendants of the bookstore element are the book, title, author, year, and price elements:

<bookstore>

<book>

<title>Harry Potter</title>

<author>J K. Rowling</author>

<year>2005</year>

<price>29.99</price>

</book>

</bookstore>


Introduction to XSLT

XSLT is a language for transforming XML documents into XHTML documents or to other XML documents.

XPath is a language for navigating in XML documents.

What You Should Already Know

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

· HTML / XHTML
· XML / XML Namespaces
· XPath

If you want to study these subjects first, find the tutorials on our Home page.

What is XSLT?

· XSLT stands for XSL Transformations
· XSLT is the most important part of XSL
· XSLT transforms an XML document into another XML document
· XSLT uses XPath to navigate in XML documents
· XSLT is a W3C Recommendation

XSLT = XSL Transformations

XSLT is the most important part of XSL.

XSLT is used to transform an XML document into another XML document, or another type of document that is recognized by a browser, like HTML and XHTML. Normally XSLT does this by transforming each XML element into an (X)HTML element.

With XSLT you can add/remove elements and attributes to or from the output file. You can also rearrange and sort elements, perform tests and make decisions about which elements to hide and display, and a lot more.

A common way to describe the transformation process is to say that XSLT transforms an XML source-tree into an XML result-tree.

XSLT Uses XPath

XSLT uses XPath to find information in an XML document. XPath is used to navigate through elements and attributes in XML documents.

If you want to study XPath first, please read our .

How Does it Work?

In the transformation process, XSLT uses XPath to define parts of the source document that should match one or more predefined templates. When a match is found, XSLT will transform the matching part of the source document into the result document.

XSLT is a W3C Recommendation

XSLT became a W3C Recommendation 16. November 1999.

To read more about the XSLT activities at W3C, please read our W3C Tutorial.


XSL Languages

It started with XSL and ended up with XSLT, XPath, and XSL-FO.

It Started with XSL

XSL stands for EXtensible Stylesheet Language.

The World Wide Web Consortium (W3C) started to develop XSL because there was a need for an XML-based Stylesheet Language.

CSS = HTML Style Sheets

HTML uses predefined tags and the meaning of the tags are well understood.

The <table> element in HTML defines a table - and a browser knows how to display it.

Adding styles to HTML elements is simple. Telling a browser to display an element in a special font or color, is easy with CSS.

XSL = XML Style Sheets

XML does not use predefined tags (we can use any tag-names we like), and the meaning of these tags are not well understood.

A <table> element could mean an HTML table, a piece of furniture, or something else - and a browser does not know how to display it.

XSL describes how the XML document should be displayed!

XSL - More Than a Style Sheet Language

XSL consists of three parts:

· XSLT - a language for transforming XML documents
· XPath - a language for navigating in XML documents
· XSL-FO - a language for formatting XML documents

This Tutorial is About XSLT

The rest of this tutorial is about XSLT - the language for transforming XML documents.

But you can also study our XPath Tutorial and our XSL-FO Tutorial.


XSLT - Editing XML

Data stored in XML files can be edited from an Internet browser.

Open, Edit and Save XML

Now, we will show how to open, edit, and save an XML file that is stored on the server.

We will use XSL to transform the XML document into an HTML form. The values of the XML elements will be written to HTML input fields in an HTML form. The HTML form is editable. After editing the data, the data is going to be submitted back to the server and the XML file will be updated (this part is done with ASP).

The XML File and the XSL File

First, look at the XML document that will be used ("tool.xml"):

<?xml version="1.0" encoding="ISO-8859-1"?>

<tool>

<field id="prodName">

  <value>HAMMER HG2606</value>

</field>

<field id="prodNo">

  <value>32456240</value>

</field>

<field id="price">

  <value>$30.00</value>

</field>

</tool>

View the XML file.

Then, take a look at the following style sheet ("tool.xsl"):

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

<form method="post" action="edittool.asp">

<h2>Tool Information (edit):</h2>

<table border="0">

<xsl:for-each select="tool/field">

<tr>

<td>

<xsl:value-of select="@id"/>

</td>

<td>

<input type="text">

<xsl:attribute name="id">

<xsl:value-of select="@id" />

</xsl:attribute>

<xsl:attribute name="name">

<xsl:value-of select="@id" />

</xsl:attribute>

<xsl:attribute name="value">

<xsl:value-of select="value" />

</xsl:attribute>

</input>

</td>

</tr>

</xsl:for-each>

</table>

<br />

<input type="submit" id="btn_sub" name="btn_sub" value="Submit" />

<input type="reset" id="btn_res" name="btn_res" value="Reset" />

</form>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

.

The XSL file above loops through the elements in the XML file and creates one input field for each XML "field" element. The value of the XML "field" element's "id" attribute is added to both the "id" and "name" attributes of each HTML input field. The value of each XML "value" element is added to the "value" attribute of each HTML input field. The result is an editable HTML form that contains the values from the XML file.

Then, we have a second style sheet: "tool_updated.xsl". This is the XSL file that will be used to display the updated XML data. This style sheet will not result in an editable HTML form, but a static HTML table:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

<h2>Updated Tool Information:</h2>

<table border="1">

<xsl:for-each select="tool/field">

<tr>

<td><xsl:value-of select="@id" /></td>

<td><xsl:value-of select="value" /></td>

</tr>

</xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

View the XSL file.

The ASP File

The HTML form in the "tool.xsl" file above has an action attribute with a value of "edittool.asp".

The "edittool.asp" page contains two functions: The loadFile() function loads and transforms the XML file for display and the updateFile() function applies the changes to the XML file:

<%

function loadFile(xmlfile,xslfile)

Dim xmlDoc,xslDoc

'Load XML file

set xmlDoc = Server.CreateObject("Microsoft.XMLDOM")

xmlDoc.async = false

xmlDoc.load(xmlfile)

'Load XSL file

set xslDoc = Server.CreateObject("Microsoft.XMLDOM")

xslDoc.async = false

xslDoc.load(xslfile)

'Transform file

Response.Write(xmlDoc.transformNode(xslDoc))

end function

function updateFile(xmlfile)

Dim xmlDoc,rootEl,f

Dim i

'Load XML file

set xmlDoc = Server.CreateObject("Microsoft.XMLDOM")

xmlDoc.async = false

xmlDoc.load(xmlfile)

'Set the rootEl variable equal to the root element

Set rootEl = xmlDoc.documentElement

'Loop through the form collection

for i = 1 To Request.Form.Count

'Eliminate button elements in the form

if instr(1,Request.Form.Key(i),"btn_")=0 then

  'The selectSingleNode method queries the XML file for a

  'single node that matches a query. This query requests

  'the value element that is the child of a field element

  'that has an id attribute which matches the current key

  'value in the Form Collection. When there is a match -

  'set the text property equal to the value of the current

  'field in the Form Collection.

  set f = rootEl.selectSingleNode("field[@id='" & _

  Request.Form.Key(i) & "']/value")

  f.Text = Request.Form(i)

end if

next

'Save the modified XML file

xmlDoc.save xmlfile

'Release all object references

set xmlDoc=nothing

set rootEl=nothing

set f=nothing

'Load the modified XML file with a style sheet that

'allows the client to see the edited information

loadFile xmlfile,server.MapPath("tool_updated.xsl")

end function

'If the form has been submitted update the

'XML file and display result - if not,

'transform the XML file for editing

if Request.Form("btn_sub")="" then

loadFile server.MapPath("tool.xml"),server.MapPath("tool.xsl")

else

updateFile server.MapPath("tool.xml")

end if

%>

Tip: If you don't know how to write ASP, you can study our ASP tutorial.

Note: We are doing the transformation and applying the changes to the XML file on the server. This is a cross-browser solution. The client will only get HTML back from the server - which will work in any browser.


XSLT <xsl:apply-imports> Element

Definition and Usage

The <xsl:apply-imports> element applies a template rule from an imported style sheet.

Template rules in imported style sheets have lower precedence than template rules in main style sheets. The <xsl:apply-imports> is used when we want to use a template rule from the imported style sheet rather than an equivalent rule in the main style sheet.

Syntax

<xsl:apply-imports/>

Attributes

None

Example

Suppose we have a style sheet called "standard.xsl" that contains a template rule for message elements:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="message">

<h2><xsl:apply-templates/></h2>

</xsl:template>

</xsl:stylesheet>

Another style sheet could import "standard.xsl", and modify the message elements, like this:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:import href="standard.xsl"/>

<xsl:template match="message">

<div style="border:solid blue">

<xsl:apply-imports/>

</div>

</xsl:template>

</xsl:stylesheet>

The result would be to transform a message into an element of the form:

<div style="border:solid blue"><h2>...</h2></div>


XSLT <xsl:apply-templates> Element

Definition and Usage

The <xsl:apply-templates> element applies a template to the current element or to the current element's child nodes.

If we add a select attribute to the <xsl:apply-templates> element it will process only the child element that matches the value of the attribute. We can use the select attribute to specify in which order the child nodes are to be processed.

Syntax

<xsl:apply-templates select="expression" mode="name">

<!-- Content:(xsl:sort|xsl:with-param)* -->

</xsl:apply-templates>

Attributes

Attribute | Value | Description
select | expression | Optional. Specifies the nodes to be processed. An asterisk selects the entire node-set. If this attribute is omitted, all child nodes of the current node will be selected
mode | name | Optional. If there are multiple ways of processing defined for the same element, distinguishes among them

Example 1

Wrap a single h1 element around each title element in the document:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="title">

<h1><xsl:apply-templates/></h1>

</xsl:template>

</xsl:stylesheet>

Example 2

Wrap a single h1 element around all the title elements which are children of message:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="message">

<h1><xsl:apply-templates select="title"/></h1>

</xsl:template>

</xsl:stylesheet>

Example 3

Wrap a single h1 element around all the child nodes of message that have the mode attribute set to "big":

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="message">

<h1><xsl:apply-templates select="*" mode="big"/></h1>

</xsl:template>

</xsl:stylesheet>


XSLT <xsl:apply-templates> Element

The <xsl:apply-templates> element applies a template to the current element or to the current element's child nodes.

The <xsl:apply-templates> Element

The <xsl:apply-templates> element applies a template to the current element or to the current element's child nodes.

If we add a select attribute to the <xsl:apply-templates> element it will process only the child element that matches the value of the attribute. We can use the select attribute to specify the order in which the child nodes are processed.

Look at the following XSL style sheet:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

<h2>My CD Collection</h2>

<xsl:apply-templates/>

</body>

</html>

</xsl:template>

<xsl:template match="cd">

<p>

<xsl:apply-templates select="title"/>

<xsl:apply-templates select="artist"/>

</p>

</xsl:template>

<xsl:template match="title">

Title: <span style="color:#ff0000">

<xsl:value-of select="."/></span>

<br />

</xsl:template>

<xsl:template match="artist">

Artist: <span style="color:#00ff00">

<xsl:value-of select="."/></span>

<br />

</xsl:template>

</xsl:stylesheet>

The result of the transformation will look like this:

My CD Collection

Title: Empire Burlesque

Artist: Bob Dylan

Title: Hide your heart

Artist: Bonnie Tyler

Title: Greatest Hits

Artist: Dolly Parton

Title: Still got the blues

Artist: Gary Moore

Title: Eros

Artist: Eros Ramazzotti

Title: One night only

Artist: Bee Gees

Title: Sylvias Mother

Artist: Dr.Hook

Title: Maggie May

Artist: Rod Stewart

Title: Romanza

Artist: Andrea Bocelli

Title: When a man loves a woman

Artist: Percy Sledge

Title: Black angel

Artist: Savage Rose

Title: 1999 Grammy Nominees

Artist: Many

Title: For the good times

Artist: Kenny Rogers

Title: Big Willie style

Artist: Will Smith

Title: Tupelo Honey

Artist: Van Morrison

Title: Soulsville

Artist: Jorn Hoel

Title: The very best of

Artist: Cat Stevens

Title: Stop

Artist: Sam Brown

Title: Bridge of Spies

Artist: T`Pau

Title: Private Dancer

Artist: Tina Turner

Title: Midt om natten

Artist: Kim Larsen

Title: Pavarotti Gala Concert

Artist: Luciano Pavarotti

Title: The dock of the bay

Artist: Otis Redding

Title: Picture book

Artist: Simply Red

Title: Red

Artist: The Communards

Title: Unchain my heart

Artist: Joe Cocker

View the XML file, , and .


XSLT <xsl:attribute> Element

Definition and Usage

The <xsl:attribute> element is used to add attributes to elements.

Note: The <xsl:attribute> element replaces existing attributes with equivalent names.

Syntax

<xsl:attribute name="attributename" namespace="uri">

<!-- Content:template -->

</xsl:attribute>

Attributes

Attribute | Value | Description
name | attributename | Required. Specifies the name of the attribute
namespace | URI | Optional. Defines the namespace URI for the attribute

Example 1

Add a source attribute to the picture element:

<picture>

<xsl:attribute name="source"/>

</picture>

Example 2

Add a source attribute to the picture element and fill it with values from "images/name" :

<picture>

<xsl:attribute name="source">

  <xsl:value-of select="images/name" />

</xsl:attribute>

</picture>

Example 3

Create an attribute-set that can be applied to any output element:

<xsl:attribute-set name="font">

<xsl:attribute name="fname">Arial</xsl:attribute>

<xsl:attribute name="size">14px</xsl:attribute>

<xsl:attribute name="color">red</xsl:attribute>

</xsl:attribute-set>


XSLT <xsl:attribute-set> Element

Definition and Usage

The <xsl:attribute-set> element creates a named set of attributes. The attribute-set can be applied as whole to the output document.

Note: Must be child of <xsl:stylesheet> or <xsl:transform>.

Syntax

<xsl:attribute-set

name="name" use-attribute-sets="name-list">

<!-- Content:xsl:attribute* -->

</xsl:attribute-set>

Attributes

Attribute | Value | Description
name | name | Required. Specifies the name of the attribute-set
use-attribute-sets | name-list | Optional. A white space separated list of other attribute-sets to use in the attribute-set

Example 1

Create an attribute-set that can be applied to any output element:

<xsl:attribute-set name="font">

<xsl:attribute name="fname">Arial</xsl:attribute>

<xsl:attribute name="size">14px</xsl:attribute>

<xsl:attribute name="color">red</xsl:attribute>

</xsl:attribute-set>


XSLT <xsl:call-template> Element

Definition and Usage

The <xsl:call-template> element calls a named template.

Syntax

<xsl:call-template name="templatename">

<!-- Content:xsl:with-param* -->

</xsl:call-template>

Attributes

Attribute | Value | Description
name | templatename | Required. Specifies the name of the template to be called

Example 1

Call a template named "description" when the processor finds a car element:

<xsl:template match="car">

<xsl:call-template name="description"/>

</xsl:template>


XSLT <xsl:choose> Element

Definition and Usage

The <xsl:choose> element is used in conjunction with <xsl:when> and <xsl:otherwise> to express multiple conditional tests.

If no <xsl:when> is true, the content of <xsl:otherwise> is processed.

If no <xsl:when> is true, and no <xsl:otherwise> element is present, nothing is created.

Tip: For simple conditional testing, use the <xsl:if> element instead.

Syntax

<xsl:choose>

<!-- Content:(xsl:when+,xsl:otherwise?) -->

</xsl:choose>

Attributes

None

Example 1

The code below will add a pink background-color to the artist column WHEN the price of the CD is higher than 10.

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

  <h2>My CD Collection</h2>

  <table border="1">

    <tr bgcolor="#9acd32">

      <th>Title</th>

      <th>Artist</th>

    </tr>

    <xsl:for-each select="catalog/cd">

    <tr>

      <td><xsl:value-of select="title"/></td>

     <xsl:choose>

        <xsl:when test="price &gt; 10">

          <td bgcolor="#ff00ff">

          <xsl:value-of select="artist"/></td>

        </xsl:when>

        <xsl:otherwise>

          <td><xsl:value-of select="artist"/></td>

        </xsl:otherwise>

      </xsl:choose>

    </tr>

    </xsl:for-each>

  </table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

View the XML file, View the XSL file, and .

Example 2

Declare a variable named "color". Set its value to the color attribute of the current element. If the current element has no color attribute, the value of "color" will be "green":

<xsl:variable name="color">

<xsl:choose>

  <xsl:when test="@color">

    <xsl:value-of select="@color"/>

  </xsl:when>

  <xsl:otherwise>green</xsl:otherwise>

</xsl:choose>

</xsl:variable>


XSLT <xsl:choose> Element

The <xsl:choose> element is used in conjunction with <xsl:when> and <xsl:otherwise> to express multiple conditional tests.

The <xsl:choose> Element

Syntax

<xsl:choose>

<xsl:when test="expression">

  ... some output ...

</xsl:when>

<xsl:otherwise>

  ... some output ....

</xsl:otherwise>

</xsl:choose>

Where to put the Choose Condition

To insert a multiple conditional test against the XML file, add the <xsl:choose>, <xsl:when>, and <xsl:otherwise> elements to the XSL file:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

  <h2>My CD Collection</h2>

  <table border="1">

    <tr bgcolor="#9acd32">

      <th>Title</th>

      <th>Artist</th>

    </tr>

    <xsl:for-each select="catalog/cd">

    <tr>

      <td><xsl:value-of select="title"/></td>

    <xsl:choose>

        <xsl:when test="price &gt; 10">

          <td bgcolor="#ff00ff">

          <xsl:value-of select="artist"/></td>

        </xsl:when>

        <xsl:otherwise>

          <td><xsl:value-of select="artist"/></td>

        </xsl:otherwise>

      </xsl:choose>

    </tr>

    </xsl:for-each>

  </table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

The code above will add a pink background-color to the "Artist" column WHEN the price of the CD is higher than 10.

The result of the transformation will look like this:

My CD Collection

Title | Artist
Empire Burlesque | Bob Dylan
Hide your heart | Bonnie Tyler
Greatest Hits | Dolly Parton
Still got the blues | Gary Moore
Eros | Eros Ramazzotti
One night only | Bee Gees
Sylvias Mother | Dr.Hook
Maggie May | Rod Stewart
Romanza | Andrea Bocelli
When a man loves a woman | Percy Sledge
Black angel | Savage Rose
1999 Grammy Nominees | Many
For the good times | Kenny Rogers
Big Willie style | Will Smith
Tupelo Honey | Van Morrison
Soulsville | Jorn Hoel
The very best of | Cat Stevens
Stop | Sam Brown
Bridge of Spies | T`Pau
Private Dancer | Tina Turner
Midt om natten | Kim Larsen
Pavarotti Gala Concert | Luciano Pavarotti
The dock of the bay | Otis Redding
Picture book | Simply Red
Red | The Communards
Unchain my heart | Joe Cocker

View the XML file, View the XSL file, and

Another Example

Here is another example that contains two <xsl:when> elements:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

  <h2>My CD Collection</h2>

  <table border="1">

    <tr bgcolor="#9acd32">

      <th>Title</th>

      <th>Artist</th>

    </tr>

    <xsl:for-each select="catalog/cd">

    <tr>

      <td><xsl:value-of select="title"/></td>

    <xsl:choose>

        <xsl:when test="price &gt; 10">

          <td bgcolor="#ff00ff">

          <xsl:value-of select="artist"/></td>

        </xsl:when>

        <xsl:when test="price &gt; 9">

          <td bgcolor="#cccccc">

          <xsl:value-of select="artist"/></td>

        </xsl:when>

        <xsl:otherwise>

          <td><xsl:value-of select="artist"/></td>

        </xsl:otherwise>

      </xsl:choose>

    </tr>

    </xsl:for-each>

  </table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

The code above will add a pink background color to the "Artist" column WHEN the price of the CD is higher than 10, and a grey background-color WHEN the price of the CD is higher than 9 and lower or equal to 10.

The result of the transformation will look like this:

My CD Collection

Title | Artist
Empire Burlesque | Bob Dylan
Hide your heart | Bonnie Tyler
Greatest Hits | Dolly Parton
Still got the blues | Gary Moore
Eros | Eros Ramazzotti
One night only | Bee Gees
Sylvias Mother | Dr.Hook
Maggie May | Rod Stewart
Romanza | Andrea Bocelli
When a man loves a woman | Percy Sledge
Black angel | Savage Rose
1999 Grammy Nominees | Many
For the good times | Kenny Rogers
Big Willie style | Will Smith
Tupelo Honey | Van Morrison
Soulsville | Jorn Hoel
The very best of | Cat Stevens
Stop | Sam Brown
Bridge of Spies | T`Pau
Private Dancer | Tina Turner
Midt om natten | Kim Larsen
Pavarotti Gala Concert | Luciano Pavarotti
The dock of the bay | Otis Redding
Picture book | Simply Red
Red | The Communards
Unchain my heart | Joe Cocker

View the XML file, , and View the result


XSLT <xsl:comment> Element

Definition and Usage

The <xsl:comment> element is used to create a comment node in the result tree.

Syntax

<xsl:comment>

<!-- Content:template -->

</xsl:comment>

Attributes

None

Example 1

<xsl:comment>This is a comment!</xsl:comment>


XSLT <xsl:copy> Element

Definition and Usage

The <xsl:copy> element creates a copy of the current node.

Note: Namespace nodes of the current node are automatically copied as well, but child nodes and attributes of the current node are not automatically copied!

Syntax

<xsl:copy use-attribute-sets="name-list">

<!-- Content:template -->

</xsl:copy>

Attributes

Attribute | Value | Description
use-attribute-sets | name-list | Optional. A white space separated list of attribute-sets to apply to the output node, if the node is an element

Example 1

Copy the message node to the output document:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="message">

<xsl:copy>

  <xsl:apply-templates/>

</xsl:copy>

</xsl:template>

</xsl:stylesheet>


XSLT <xsl:copy-of> Element

Definition and Usage

The <xsl:copy-of> element creates a copy of the current node.

Note: Namespace nodes, child nodes, and attributes of the current node are automatically copied as well!

Tip: This element can be used to insert multiple copies of the same node into different places in the output.

Syntax

<xsl:copy-of select="expression"/>

Attributes

Attribute | Value | Description
select | expression | Required. Specifies what to be copied

Example 1

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:variable name="header">

<tr>

<th>Element</th>

<th>Description</th>

</tr>

</xsl:variable>

<xsl:template match="/">

<html>

<body>

<table>

  <xsl:copy-of select="$header" />

  <xsl:for-each select="reference/record">

  <tr>

  <xsl:if test="category='XML'">

    <td><xsl:value-of select="element"/></td>

    <td><xsl:value-of select="description"/></td>

  </xsl:if>

  </tr>

  </xsl:for-each>

</table>

<br />

<table>

  <xsl:copy-of select="$header" />

  <xsl:for-each select="table/record">

  <tr>

  <xsl:if test="category='XSL'">

    <td><xsl:value-of select="element"/></td>

    <td><xsl:value-of select="description"/></td>

  </xsl:if>

  </tr>

  </xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>


XSLT <xsl:decimal-format> Element

Definition and Usage

The <xsl:decimal-format> element defines the characters and symbols to be used when converting numbers into strings, with the format-number() function.

All countries do not use the same characters for separating the decimal part from the integer part, and for grouping digits. With the <xsl:decimal-format> element you can change special characters to other symbols.

This element is a top level element.

The format-number() function can refer to the <xsl:decimal-format> element by name.

Syntax

<xsl:decimal-format

name="name"

decimal-separator="char"

grouping-separator="char"

infinity="string"

minus-sign="char"

NaN="string"

percent="char"

per-mille="char"

zero-digit="char"

digit="char"

pattern-separator="char"/>

Attributes

Attribute | Value | Description
name | name | Optional. Specifies a name for this format
decimal-separator | char | Optional. Specifies the decimal point character. Default is "."
grouping-separator | char | Optional. Specifies the thousands separator character. Default is ","
infinity | string | Optional. Specifies the string used to represent infinity. Default is "Infinity"
minus-sign | char | Optional. Specifies the character to represent negative numbers. Default is "-"
NaN | string | Optional. Specifies the string used when the value is not a number". Default is "NaN"
percent | char | Optional. Specifies the percentage sign character. Default is "%"
per-mille | char | Optional. Specifies the per thousand sign character. Default is "‰"
zero-digit | char | Optional. Specifies the digit zero character. Default is "0"
digit | char | Optional. Specifies the character used to indicate a place where a digit is required. Default is #
pattern-separator | char | Optional. Specifies the character used to separate positive and negative subpatterns in a format pattern. Default is ";"

Example 1

The example below shows how to format to European currency (note that the third argument in format-number() refers to the name of the <xsl:decimal-format> element:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:decimal-format name="euro"

decimal-separator="," grouping-separator="."/>

<xsl:template match="/">

<xsl:value-of

select="format-number(26825.8, '#.###,00', 'euro')"/>

</xsl:template>

</xsl:stylesheet>

Output:

26.825,80


XSLT <xsl:element> Element

Definition and Usage

The <xsl:element> element is used to create an element node in the output document.

Syntax

<xsl:element

name="name"

namespace="URI"

use-attribute-sets="namelist">

<!-- Content:template -->

</xsl:element>

Attributes

Attribute | Value | Description
name | name | Required. Specifies the name of the element to be created (the value of the name attribute can be set to an expression that is computed at run-time, like this: <xsl:element name="{$country}" />
namespace | URI | Optional. Specifies the namespace URI of the element (the value of the namespace attribute can be set to an expression that is computed at run-time, like this: <xsl:element name="{$country}" namespace="{$someuri}"/>
use-attribute-sets | namelist | Optional. A white space separated list of attribute-sets containing attributes to be added to the element

Example 1

Create a "singer" element that contains the value of each artist element:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<xsl:for-each select="catalog/cd">

  <xsl:element name="singer">

    <xsl:value-of select="artist" />

  </xsl:element>

  <br />

</xsl:for-each>

</xsl:template>

</xsl:stylesheet>

View the XML file, View the XSL file, and View the result.


XSLT <xsl:fallback> Element

Definition and Usage

The <xsl:fallback> element specifies an alternate code to run if the XSL processor does not support an XSL element.

Syntax

<xsl:fallback>

<!-- Content: template -->

</xsl:fallback>

Attributes

None

Example 1

This example is supposed to loop through each "title" element with a made up <xsl:loop> element. If the XSL processor does not support this element (which it does not), it will use the <:xsl:for-each> element instead:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="catalog/cd">

<xsl:loop select="title">

  <xsl:fallback>

    <xsl:for-each select="title">

      <xsl:value-of select="."/>

    </xsl:for-each>

  </xsl:fallback>

</xsl:loop>

</xsl:template>

</xsl:stylesheet>


XSLT <xsl:for-each> Element

Definition and Usage

The <xsl:for-each> element loops through each node in a specified node set.

Syntax

<xsl:for-each

select="expression">

<!-- Content:(xsl:sort*,template) -->

</xsl:for-each>

Attributes

Attribute | Value | Description
select | expression | Required. The node set to be processed

Example 1

Loop through each "cd "element and use <xsl:value-of> to write each title and artist to the output:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

  <h2>My CD Collection</h2>

  <table border="1">

    <tr bgcolor="#9acd32">

      <th>Title</th>

      <th>Artist</th>

    </tr>

    <xsl:for-each select="catalog/cd">

    <tr>

      <td><xsl:value-of select="title"/></td>

      <td><xsl:value-of select="artist"/></td>

    </tr>

    </xsl:for-each>

  </table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

View the XML file, View the XSL file, and View the result.

Example 2

Loop through each "cd "element and use <xsl:value-of> to write each title and artist to the output (sorted by artist):

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

  <h2>My CD Collection</h2>

  <table border="1">

    <tr bgcolor="#9acd32">

      <th>Title</th>

      <th>Artist</th>

    </tr>

    <xsl:for-each select="catalog/cd">

    <xsl:sort select="artist"/>

    <tr>

      <td><xsl:value-of select="title"/></td>

      <td><xsl:value-of select="artist"/></td>

    </tr>

    </xsl:for-each>

  </table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

View the XML file, View the XSL file, and View the result.


XSLT <xsl:for-each> Element

The <xsl:for-each> element allows you to do looping in XSLT.

The <xsl:for-each> Element

The XSL <xsl:for-each> element can be used to select every XML element of a specified node-set:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

  <h2>My CD Collection</h2>

  <table border="1">

    <tr bgcolor="#9acd32">

      <th>Title</th>

      <th>Artist</th>

    </tr>

    <xsl:for-each select="catalog/cd">

    <tr>

      <td><xsl:value-of select="title"/></td>

      <td><xsl:value-of select="artist"/></td>

    </tr>

    </xsl:for-each>

  </table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

Note: The value of the select attribute is an XPath expression. An XPath expression works like navigating a file system; where a forward slash (/) selects subdirectories.

The result of the transformation above will look like this:

My CD Collection

Title | Artist
Empire Burlesque | Bob Dylan
Hide your heart | Bonnie Tyler
Greatest Hits | Dolly Parton
Still got the blues | Gary More
Eros | Eros Ramazzotti
One night only | Bee Gees
Sylvias Mother | Dr.Hook
Maggie May | Rod Stewart
Romanza | Andrea Bocelli
When a man loves a woman | Percy Sledge
Black angel | Savage Rose
1999 Grammy Nominees | Many
For the good times | Kenny Rogers
Big Willie style | Will Smith
Tupelo Honey | Van Morrison
Soulsville | Jorn Hoel
The very best of | Cat Stevens
Stop | Sam Brown
Bridge of Spies | T`Pau
Private Dancer | Tina Turner
Midt om natten | Kim Larsen
Pavarotti Gala Concert | Luciano Pavarotti
The dock of the bay | Otis Redding
Picture book | Simply Red
Red | The Communards
Unchain my heart | Joe Cocker

View the XML file, View the XSL file, and View the result

Filtering the Output

We can also filter the output from the XML file by adding a criterion to the select attribute in the <xsl:for-each> element.

<xsl:for-each select="catalog/cd[artist='Bob Dylan']">

Legal filter operators are:

· = (equal)
· != (not equal)
· &lt; less than
· &gt; greater than

Take a look at the adjusted XSL style sheet:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

<h2>My CD Collection</h2>

<table border="1">

 <tr bgcolor="#9acd32">

    <th>Title</th>

    <th>Artist</th>

 </tr>

<xsl:for-each select="catalog/cd[artist='Bob Dylan']">

 <tr>

    <td><xsl:value-of select="title"/></td>

    <td><xsl:value-of select="artist"/></td>

 </tr>

</xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

The result of the transformation above will look like this:

My CD Collection

Title | Artist
Empire Burlesque | Bob Dylan

View the XML file, View the XSL file, View the result


XSLT <xsl:if> Element

Definition and Usage

The <xsl:if> element contains a template that will be applied only if a specified condition is true.

Tip: Use <xsl:choose> in conjunction with <xsl:when> and <xsl:otherwise> to express multiple conditional tests!

Syntax

<xsl:if

test="expression">

<!-- Content: template -->

</xsl:if>

Attributes

Attribute | Value | Description
test | expression | Required. Specifies the condition to be tested

Example 1

Select the values of title and artist IF the price of the CD is higher than 10:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

  <h2>My CD Collection</h2>

  <table border="1">

    <tr bgcolor="#9acd32">

      <th>Title</th>

      <th>Artist</th>

    </tr>

    <xsl:for-each select="catalog/cd">

    <xsl:if test="price &gt; 10">

      <tr>

        <td><xsl:value-of select="title"/></td>

        <td><xsl:value-of select="artist"/></td>

      </tr>

    </xsl:if>

    </xsl:for-each>

  </table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

View the XML file, View the XSL file, and

Example 2

Display the title of each CD. Insert ", " between each CD-title if it is not the last CD or the last but one. If it is the last CD, add "!" behind the title. If it is the last but one CD, add ", and " behind the title:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

  <h2>My CD Collection</h2>

  <p>Titles:

  <xsl:for-each select="catalog/cd">

    <xsl:value-of select="title"/>

    <xsl:if test="position()!=last()">

      <xsl:text>, </xsl:text>

    </xsl:if>

    <xsl:if test="position()=last()-1">

      <xsl:text> and </xsl:text>

    </xsl:if>

    <xsl:if test="position()=last()">

      <xsl:text>!</xsl:text>

    </xsl:if>

  </xsl:for-each>

  </p>

</body>

</html>

</xsl:template>

</xsl:stylesheet>


XSLT <xsl:if> Element

The <xsl:if> element is used to put a conditional test against the content of the XML file.

The <xsl:if> Element

To put a conditional if test against the content of the XML file, add an <xsl:if> element to the XSL document.

Syntax

<xsl:if test="expression">

...

...some output if the expression is true...

...

</xsl:if>

Where to Put the <xsl:if> Element

To add a conditional test, add the <xsl:if> element inside the <xsl:for-each> element in the XSL file:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

  <h2>My CD Collection</h2>

  <table border="1">

    <tr bgcolor="#9acd32">

      <th>Title</th>

      <th>Artist</th>

    </tr>

    <xsl:for-each select="catalog/cd">

    <xsl:if test="price &gt; 10">

      <tr>

        <td><xsl:value-of select="title"/></td>

        <td><xsl:value-of select="artist"/></td>

      </tr>

    </xsl:if>

    </xsl:for-each>

  </table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

Note: The value of the required test attribute contains the expression to be evaluated.

The code above will only output the title and artist elements of the CDs that has a price that is higher than 10.

The result of the transformation above will look like this:

My CD Collection

Title | Artist
Empire Burlesque | Bob Dylan
Still got the blues | Gary Moore
One night only | Bee Gees
Romanza | Andrea Bocelli
Black Angel | Savage Rose
1999 Grammy Nominees | Many

View the XML file, View the XSL file, and View the result


XSLT <xsl:import> Element

Definition and Usage

The <xsl:import> element is a top-level element that is used to import the contents of one style sheet into another.

Note: An imported style sheet has lower precedence than the importing style sheet.

Note: This element must appear as the first child node of <xsl:stylesheet> or <xsl:transform>.

Note: Netscape 6 does not support import precedence, so this element will behave equivalent to <xsl:include>.

Syntax

<xsl:import href="URI"/>

Attributes

Attribute | Value | Description
href | URI | Required. Specifies the URI of the style sheet to import

Example 1

Suppose you have a style sheet called "cdcatalog_ex3.xsl":

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

 <h2>My CD Collection</h2>

 <table border="1">

   <tr bgcolor="#9acd32">

     <th>Title</th>

     <th>Artist</th>

   </tr>

   <tr>

    <td><xsl:value-of select="catalog/cd/title"/></td>

    <td><xsl:value-of select="catalog/cd/artist"/></td>

   </tr>

 </table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

A second style sheet called "cdcatalog_import.xsl" imports "cdcatalog_ex3.xsl":

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:import href="cdcatalog_ex3.xsl"/>

<xsl:template match="/">

<xsl:apply-imports/>

</xsl:template>

</xsl:stylesheet>

View the XML file, View the XSL file, and

Note: This example will not work in Netscape 6 because it does not support the <xsl:apply-imports> element!


XSLT <xsl:include> Element

Definition and Usage

The <xsl:include> element is a top-level element that includes the contents of one style sheet into another.

Note: An included style sheet has the same precedence as the including style sheet.

Note: This element must appear as a child node of <xsl:stylesheet> or <xsl:transform>.

Syntax

<xsl:include href="URI"/>

Attributes

Attribute | Value | Description
href | URI | Required. Specifies the URI of the style sheet to include

Example 1


XSLT <xsl:key> Element

Definition and Usage

The <xsl:key> element is a top-level element which declares a named key that can be used in the style sheet with the key() function.

Note: A key does not have to be unique!

Syntax

<xsl:key

name="name"

match="pattern"

use="expression"/>

Attributes

Attribute | Value | Description
name | name | Required. Specifies the name of the key
match | pattern | Required. Defines the nodes to which the key will be applied
use | expression | Required. The value of the key for each of the nodes

Example 1

Suppose you have an XML file called "persons.xml":

<persons>

<person name="Tarzan" id="050676"/>

<person name="Donald" id="070754"/>

<person name="Dolly" id="231256"/>

</persons>

You can define a key in an XSL file like this:

<xsl:key name="preg" match="person" use="@id"/>

To find the person with id="050676", write (in the XSL file):

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:key name="preg" match="person" use="@id"/>

<xsl:template match="/">

<html>

<body>

<xsl:for-each select="key('preg','050676')">

  <p>

  Id: <xsl:value-of select="@id"/><br />

  Name: <xsl:value-of select="@name"/>

  </p>

</xsl:for-each>

</body>

</html>

</xsl:template>

</xsl:stylesheet>


XSLT <xsl:message> Element

Definition and Usage

The <xsl:message> element writes a message to the output. This element is primarily used to report errors.

This element can contain almost any other XSL element (<xsl:text>, <xsl:value-of>, etc.).

The terminate attribute gives you the choice to either quit or continue the processing when an error occurs.

Syntax

<xsl:message terminate="yes|no">

<!-- Content:template -->

</xsl:message>

Attributes

Attribute | Value | Description
terminate | yes no | Optional. "yes" terminates the processing after the message is written to the output. "no" continues the processing after the message is written to the output. Default is "no".

Example 1

Check if artist is an empty string. If yes, we quit the XSL processor and display a message:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

<xsl:for-each select="catalog/cd">

  <p>Title: <xsl:value-of select="title"/><br />

  Artist:

  <xsl:if test="artist=''">

    <xsl:message terminate="yes">

      Error: Artist is an empty string!

    </xsl:message>

  </xsl:if>

  <xsl:value-of select="artist"/>

  </p>

</xsl:for-each>

</body>

</html>

</xsl:template>

</xsl:stylesheet>


XSLT <xsl:namespace-alias> Element

Definition and Usage

The <xsl:namespace-alias> element is used to replace a namespace in the style sheet to a different namespace in the output.

Note: <xsl:namespace-alias> is a top-level element, and must be a child node of <xsl:stylesheet> or <xsl:transform>.

Syntax

<xsl:namespace-alias

stylesheet-prefix="prefix|#default"

result-prefix="prefix|"#default"/>

Attributes

Attribute | Value | Description
stylesheet-prefix | prefix #default | Required. Specifies the namespace you wish to change
result-prefix | prefix #default | Required. Specifies the desired namespace for the output

Example 1

The wxsl prefix is converted to the xsl prefix in the output:

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

xmlns:wxsl="http://www.w3schools.com/w3style.xsl">

<xsl:namespace-alias stylesheet-prefix="wxsl" result-prefix="xsl"/>

<xsl:template match="/">

<wxsl:stylesheet>

  <xsl:apply-templates/>

</wxsl:stylesheet>

</xsl:template>

</xsl:stylesheet>


XSLT <xsl:number> Element

Definition and Usage

The <xsl:number> element is used to determine the integer position of the current node in the source. It is also used to format a number.

Syntax

<xsl:number

count="expression"

level="single|multiple|any"

from="expression"

value="expression"

format="formatstring"

lang="languagecode"

letter-value="alphabetic|traditional"

grouping-separator="character"

grouping-size="number"/>

Attributes

Attribute

Value

Description

count

expression

Optional. An XPath expression that specifies what nodes are to be counted

level

single

multiple

any

Optional. Controls how the sequence number is assigned

Can be one of the following:

· single (default)
· multiple
· any (not supported by Netscape 6)

from

expression

Optional. An XPath expression that specifies where the counting will start

value

expression

Optional. Specifies a user-provided number that is used in place of a sequence generated number

format

formatstring

Optional. Defines the output format for the number. Can be one of the following:

· format="1" results in 1 2 3 . .
· format="01" results in 01 02 03 (not supported by Netscape 6)
· format="a" results in a b c . . (not supported by Netscape 6)
· format="A" results in A B C. . (not supported by Netscape 6)
· format="i" results in i ii iii iv . . (not supported by Netscape 6)
· format="I" results in I II III IV . . (not supported by Netscape 6)

lang

languagecode

Optional. Specifies the language alphabet to be used for the numbering (Not supported by Netscape 6)

letter-value

alphabetic

traditional

Optional. Specifies whether the numbering in the selected language is alphabetic or traditional. The default is alphabetic

grouping-separator

character

Optional. Specifies what character should be used to separate groups of digits. The default is the comma

grouping-size

number

Optional. Specifies how many digits are in the groups that are being separated by the character specified in the grouping-separator attribute. The default is 3

Example 1

<xsl:number value="250000" grouping-separator="."/>

Output:

250.000

Example 2

<xsl:number value="250000" grouping-size="2"/>

Output:

25,00,00

Example 3

<xsl:number value="12" grouping-size="1"

grouping-separator="#" format="I"/>

Output:

X#I#I

Example 4

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

<p>

<xsl:for-each select="catalog/cd">

  <xsl:number value="position()" format="1" />

  <xsl:value-of select="title" /><br />

</xsl:for-each>

</p>

</body>

</html>

</xsl:template>

</xsl:stylesheet>


XSLT <xsl:otherwise> Element

Definition and Usage

The <xsl:otherwise> element specifies a default action for the <xsl:choose> element. This action will take place when none of the <xsl:when> conditions apply.

Syntax

<xsl:otherwise>

<!-- Content:template -->

</xsl:otherwise>

Attributes

None

Example 1

The code below will add a pink background-color to the artist column WHEN the price of the cd is higher than 10, OTHERWISE it will just print the name of the artist:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

  <h2>My CD Collection</h2>

  <table border="1">

    <tr bgcolor="#9acd32">

      <th>Title</th>

      <th>Artist</th>

    </tr>

    <xsl:for-each select="catalog/cd">

    <tr>

      <td><xsl:value-of select="title"/></td>

     <xsl:choose>

        <xsl:when test="price&gt;'10'">

          <td bgcolor="#ff00ff">

          <xsl:value-of select="artist"/></td>

        </xsl:when>

        <xsl:otherwise>

          <td><xsl:value-of select="artist"/></td>

        </xsl:otherwise>

      </xsl:choose>

    </tr>

    </xsl:for-each>

  </table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

View the XML file, View the XSL file, and View the result

Example 2

Declare a variable named "color". Set its value to the color attribute of the current element. If the current element has no color attribute, the value of "color" will be "green":

<xsl:variable name="color">

<xsl:choose>

  <xsl:when test="@color">

    <xsl:value-of select="@color"/>

  </xsl:when>

  <xsl:otherwise>green</xsl:otherwise>

</xsl:choose>

</xsl:variable>


XSLT <xsl:output> Element

Definition and Usage

The <xsl:output> element defines the format of the output document.

Note: <xsl:output> is a top-level element, and must appear as a child node of <xsl:stylesheet> or <xsl:transform>.

Syntax

<xsl:output

method="xml|html|text|name"

version="string"

encoding="string"

omit-xml-declaration="yes|no"

standalone="yes|no"

doctype-public="string"

doctype-system="string"

cdata-section-elements="namelist"

indent="yes|no"

media-type="string"/>

Attributes

Attribute | Value | Description
method | xml html text name | Optional. Defines the output format. The default is XML (but if the first child of the root node is <html> and there are no preceding text nodes, then the default is HTML) Netscape 6 only supports "html" and "xml"
version | string | Optional. Sets the W3C version number for the output format (only used with method="html" or method="xml")
encoding | string | Optional. Sets the value of the encoding attribute in the output
omit-xml-declaration | yes no | Optional. "yes" specifies that the XML declaration (<?xml...?>) should be omitted in the output. "no" specifies that the XML declaration should be included in the output. The default is "no"
standalone | yes no | Optional. "yes" specifies that a standalone declaration should occur in the output. "no" specifies that a standalone declaration should not occur in the output. The default is "no" This attribute is not supported by Netscape 6
doctype-public | string | Optional. Sets the value of the PUBLIC attribute of the DOCTYPE declaration in the output
doctype-system | string | Optional. Sets the value of the SYSTEM attribute of the DOCTYPE declaration in the output
cdata-section-elements | namelist | Optional. A white-space separated list of elements whose text contents should be written as CDATA sections
indent | yes no | Optional. "yes" indicates that the output should be indented according to its hierarchic structure. "no" indicates that the output should not be indented according to its hierarchic structure. This attribute is not supported by Netscape 6
media-type | string | Optional. Defines the MIME type of the output. The default is "text/xml" This attribute is not supported by Netscape 6

Example 1

The output in this example will be an XML document, version 1.0. The character encoding is set to "ISO-8859-1" and the output will be indented for readability:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="xml" version="1.0"

encoding="iso-8859-1" indent="yes"/>

...

...

</xsl:stylesheet>

Example 2

The output in this example will be an HTML document, version 4.0. The character encoding is set to "ISO-8859-1" and the output will be indented for readability:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html" version="4.0"

encoding="iso-8859-1" indent="yes"/>

...

...

</xsl:stylesheet>


XSLT <xsl:param> Element

Definition and Usage

The <xsl:param> element is used to declare a local or global parameter.

Note: The parameter is global if it's declared as a top-level element, and local if it's declared within a template.

Syntax

<xsl:param

name="name"

select="expression">

<!-- Content:template -->

</xsl:param>

Attributes

Attribute | Value | Description
name | name | Required. Specifies the name of the parameter
select | expression | Optional. Specifies an XPath expression that specifies a default value for the parameter

Example 1

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:variable name="xx">

<html>

<body>

<xsl:call-template name="show_title">

  <xsl:with-param name="title" />

</xsl:call-template>

</body>

</html>

</xsl:variable>

<xsl:template name="show_title" match="/">

<xsl:param name="title" />

<xsl:for-each select="catalog/cd">

  <p>Title: <xsl:value-of select="$title" /></p>

</xsl:for-each>

</xsl:template>

</xsl:stylesheet>


XSLT <xsl:preserve-space> and <xsl:strip-space> Elements

Definition and Usage

The <xsl:preserve-space> element is used to define the elements for which white space should be preserved.

The <xsl:strip-space> element is used to define the elements for which white space should be removed.

Note: Preserving white space is the default setting, so using the <xsl:preserve-space> element is only necessary if the <xsl:strip-space> element is used.

Note: The <xsl:preserve-space> element and the <xsl:strip-space> element are top-level elements.

Syntax

<xsl:preserve-space elements="list-of-element-names"/>

<xsl:strip-space elements="list-of-element-names"/>

Attributes

Attribute

Value

Description

elements

list-of-element-names

Required. A white space separated list of element names for which white space should be preserved/removed.

Note: The list can also contain "*" and "prefix:*" so that all elements or all elements from a particular namespace can be joined

Example 1

In the example below we preserve white space nodes for title and artist elements, and remove white space nodes for country, company, price, and year elements:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:strip-space elements="country company price year" />

<xsl:preserve-space elements="title artist" />

<xsl:template match="/">

<html>

<body>

<xsl:for-each select="catalog/cd">

  <p>

  <xsl:value-of select="title" /><br />

  <xsl:value-of select="artist" /><br />

  <xsl:value-of select="country" /><br />

  <xsl:value-of select="company" /><br />

  <xsl:value-of select="price" /><br />

  <xsl:value-of select="year" />

  </p>

</xsl:for-each>

</body>

</html>

</xsl:template>

</xsl:stylesheet>


XSLT <xsl:processing-instruction> Element

Definition and Usage

The <xsl:processing-instruction> element writes a processing instruction to the output.

Syntax

<xsl:processing-instruction

name="process-name">

<!-- Content:template -->

</xsl:processing-instruction>

Attributes

Attribute | Value | Description
name | process-name | Required. Specifies the name of the processing instruction

Example 1

This code:

<xsl:processing-instruction name="xml-stylesheet">

href="style.css" type="text/css"

</xsl:processing-instruction>

Creates this tag:

<?xml-stylesheet href="style.css" type="text/css"?>


XSLT <xsl:sort> Element

Definition and Usage

The <xsl:sort> element is used to sort the output.

Note: <xsl:sort> is always within <xsl:for-each> or <xsl:apply-templates>.

Syntax

<xsl:sort

select="expression"

lang="language-code"

data-type="text|number|qname"

order="ascending|descending"

case-order="upper-first|lower-first"/>

Attributes

Attribute | Value | Description
select | XPath-expression | Optional. Specifies which node/node-set to sort on
lang | language-code | Optional. Specifies which language is to be used by the sort
data-type | text number qname | Optional. Specifies the data-type of the data to be sorted. Default is "text"
order | ascending descending | Optional. Specifies the sort order. Default is "ascending"
case-order | upper-first lower-first | Optional. Specifies whether upper- or lowercase letters are to be ordered first

Example 1

The example below will sort the output by artist:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

  <h2>My CD Collection</h2>

  <table border="1">

    <tr bgcolor="#9acd32">

      <th>Title</th>

      <th>Artist</th>

    </tr>

    <xsl:for-each select="catalog/cd">

    <xsl:sort select="artist"/>

    <tr>

      <td><xsl:value-of select="title"/></td>

      <td><xsl:value-of select="artist"/></td>

    </tr>

    </xsl:for-each>

  </table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

, View the XSL file, and View the result.


XSLT <xsl:sort> Element

The <xsl:sort> element is used to sort the output.

Where to put the Sort Information

To sort the output, simply add an <xsl:sort> element inside the <xsl:for-each> element in the XSL file:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

  <h2>My CD Collection</h2>

  <table border="1">

    <tr bgcolor="#9acd32">

      <th>Title</th>

      <th>Artist</th>

    </tr>

    <xsl:for-each select="catalog/cd">

    <xsl:sort select="artist"/>

    <tr>

      <td><xsl:value-of select="title"/></td>

      <td><xsl:value-of select="artist"/></td>

    </tr>

    </xsl:for-each>

  </table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

Note: The select attribute indicates what XML element to sort on.

The result of the transformation above will look like this:

My CD Collection

Title | Artist
Romanza | Andrea Bocelli
One night only | Bee Gees
Empire Burlesque | Bob Dylan
Hide your heart | Bonnie Tyler
The very best of | Cat Stevens
Greatest Hits | Dolly Parton
Sylvias Mother | Dr.Hook
Eros | Eros Ramazzotti
Still got the blues | Gary Moore
Unchain my heart | Joe Cocker
Soulsville | Jorn Hoel
For the good times | Kenny Rogers
Midt om natten | Kim Larsen
Pavarotti Gala Concert | Luciano Pavarotti
1999 Grammy Nominees | Many
The dock of the bay | Otis Redding
When a man loves a woman | Percy Sledge
Maggie May | Rod Stewart
Stop | Sam Brown
Black angel | Savage Rose
Picture book | Simply Red
Bridge of Spies | T`Pau
Red | The Communards
Private Dancer | Tina Turner
Tupelo Honey | Van Morrison
Big Willie style | Will Smith

View the XML file, View the XSL file, and View the result


XSLT <xsl:stylesheet> and <xsl:transform> Elements

Definition and Usage

The <xsl:stylesheet> and <xsl:transform> elements are completely synonymous elements. Both are used to define the root element of the style sheet.

Syntax

<xsl:stylesheet

id="name"

version="version"

extension-element-prefixes="list"

exclude-result-prefixes="list">

<!-- Content:(<xsl:import>*,top-level-elements) -->

</xsl:stylesheet>

<xsl:transform

id="name"

version="version"

extension-element-prefixes="list"

exclude-result-prefixes="list">

<!-- Content:(<xsl:import>*,top-level-elements) -->

</xsl:transform>

Attributes

Attribute | Value | Description
version | version | Required. Specifies the XSLT version of the style sheet
extension-element-prefixes | list | Optional. A white space separated list of namespace prefixes used for extension elements This attribute is not supported by Netscape 6
exclude-result-prefixes | list | Optional. A white space separated list of namespace prefixes that should not be sent to the output
id | name | Optional. A unique id for the style sheet This attribute is not supported by Netscape 6

Example 1

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

....

....

</xsl:stylesheet>

Example 2

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:transform version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

....

....

</xsl:transform>


XSLT <xsl:template> Element

Definition and Usage

The <xsl:template> element contains rules to apply when a specified node is matched.

The match attribute is used to associate the template with an XML element. The match attribute can also be used to define a template for a whole branch of the XML document (i.e. match="/" defines the whole document).

Note: <xsl:template> is a top-level element.

Syntax

<xsl:template

name="name"

match="pattern"

mode="mode"

priority="number">

<!-- Content:(<xsl:param>*,template) -->

</xsl:template>

Attributes

Attribute | Value | Description
name | name | Optional. Specifies a name for the template. Note: If this attribute is omitted there must be a match attribute
match | pattern | Optional. The match pattern for the template. Note: If this attribute is omitted there must be a name attribute
mode | mode | Optional. Specifies a mode for this template
priority | number | Optional. A number which indicates the numeric priority of the template

Example

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

<h2>My CD Collection</h2>

<xsl:apply-templates/>

</body>

</html>

</xsl:template>

<xsl:template match="cd">

<p>

<xsl:apply-templates select="title"/>

<xsl:apply-templates select="artist"/>

</p>

</xsl:template>

<xsl:template match="title">

Title: <span style="color:#ff0000">

<xsl:value-of select="."/></span>

<br />

</xsl:template>

<xsl:template match="artist">

Artist: <span style="color:#00ff00">

<xsl:value-of select="."/></span>

<br />

</xsl:template>

</xsl:stylesheet>

View the XML file, View the XSL file, and View the result.


XSLT <xsl:template> Element

An XSL style sheet consists of one or more set of rules that are called templates.

Each template contains rules to apply when a specified node is matched.

The <xsl:template> Element

The <xsl:template> element is used to build templates.

The match attribute is used to associate a template with an XML element. The match attribute can also be used to define a template for the entire XML document. The value of the match attribute is an XPath expression (i.e. match="/" defines the whole document).

Ok, let's look at a simplified version of the XSL file from the previous chapter:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

 <h2>My CD Collection</h2>

 <table border="1">

   <tr bgcolor="#9acd32">

     <th>Title</th>

     <th>Artist</th>

   </tr>

   <tr>

     <td>.</td>

     <td>.</td>

   </tr>

 </table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

Since an XSL style sheet is an XML document itself, it always begins with the XML declaration: <?xml version="1.0" encoding="ISO-8859-1"?>.

The next element, <xsl:stylesheet>, defines that this document is an XSLT style sheet document (along with the version number and XSLT namespace attributes).

The <xsl:template> element defines a template. The match="/" attribute associates the template with the root of the XML source document.

The content inside the <xsl:template> element defines some HTML to write to the output.

The last two lines define the end of the template and the end of the style sheet.

The result of the transformation above will look like this:

My CD Collection

Title | Artist
. | .

, View the XSL file, and View the result

The result from this example was a little disappointing, because no data was copied from the XML document to the output.

In the next chapter you will learn how to use the <xsl:value-of> element to select values from the XML elements.


XSLT <xsl:text> Element

Definition and Usage

The <xsl:text> element is used to write literal text to the output.

Tip: This element may contain literal text, entity references, and #PCDATA.

Syntax

<xsl:text

disable-output-escaping="yes|no">

<!-- Content:#PCDATA -->

</xsl:text>

Attributes

Attribute | Value | Description
disable-output-escaping | yes no | Optional. "yes" indicates that special characters (like "<") should be output as is. "no" indicates that special characters (like "<") should be output as "&lt;". Default is "no". This attribute is not supported by Netscape 6

Example 1

Displays the title of each CD. Inserts a ", " between each cd-title if it is not the last CD - or the last but one. If it is the last CD, it will add a "!" behind the title. If it is the last but one, add a ", and " behind the title:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

  <h2>My CD Collection</h2>

  <p>Titles:

  <xsl:for-each select="catalog/cd">

    <xsl:value-of select="title"/>

    <xsl:if test="position() < last()-1">

      <xsl:text>, </xsl:text>

    </xsl:if>

    <xsl:if test="position()=last()-1">

      <xsl:text>, and </xsl:text>

    </xsl:if>

    <xsl:if test="position()=last()">

      <xsl:text>!</xsl:text>

    </xsl:if>

  </xsl:for-each>

  </p>

</body>

</html>

</xsl:template>

</xsl:stylesheet>


XSLT <xsl:value-of> Element

Definition and Usage

The <xsl:value-of> element element extracts the value of a selected node.

The <xsl:value-of> element can be used to select the value of an XML element and add it to the output.

Note: The value of the required select attribute contains an XPath expression. It works like navigating a file system where a forward slash (/) selects subdirectories.

Syntax

<xsl:value-of

select="expression"

disable-output-escaping="yes|no"/>

Attributes

Attribute | Value | Description
select | expression | Required. An XPath expression that specifies which node/attribute to extract the value from
disable-output-escaping | yes no | Optional. "yes" indicates that special characters (like "<") should be output as is. "no" indicates that special characters (like "<") should be output as "&lt;". Default is "no"

Example 1

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

 <h2>My CD Collection</h2>

 <table border="1">

   <tr bgcolor="#9acd32">

     <th>Title</th>

     <th>Artist</th>

   </tr>

   <tr>

    <td><xsl:value-of select="catalog/cd/title"/></td>

    <td><xsl:value-of select="catalog/cd/artist"/></td>

   </tr>

 </table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

View the XML file, , and View the result.

Example 2

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

  <h2>My CD Collection</h2>

  <table border="1">

    <tr bgcolor="#9acd32">

      <th>Title</th>

      <th>Artist</th>

    </tr>

    <xsl:for-each select="catalog/cd">

    <tr>

      <td><xsl:value-of select="title"/></td>

      <td><xsl:value-of select="artist"/></td>

    </tr>

    </xsl:for-each>

  </table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

View the XML file, View the XSL file, and View the result.


XSLT <xsl:value-of> Element

The <xsl:value-of> element is used to extract the value of a selected node.

The <xsl:value-of> Element

The <xsl:value-of> element can be used to extract the value of an XML element and add it to the output stream of the transformation:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

 <h2>My CD Collection</h2>

 <table border="1">

   <tr bgcolor="#9acd32">

     <th>Title</th>

     <th>Artist</th>

   </tr>

   <tr>

    <td><xsl:value-of select="catalog/cd/title"/></td>

    <td><xsl:value-of select="catalog/cd/artist"/></td>

   </tr>

 </table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

Note: The value of the select attribute is an XPath expression. An XPath expression works like navigating a file system; where a forward slash (/) selects subdirectories.

The result of the transformation above will look like this:

My CD Collection

Title | Artist
Empire Burlesque | Bob Dylan

View the XML file, View the XSL file, and View the result

The result from this example was also a little disappointing, because only one line of data was copied from the XML document to the output.

In the next chapter you will learn how to use the <xsl:for-each> element to loop through the XML elements, and display all of the records.


XSLT <xsl:variable> Element

Definition and Usage

The <xsl:variable> element is used to declare a local or global variable.

Note: The variable is global if it's declared as a top-level element, and local if it's declared within a template.

Note: Once you have set a variable's value, you cannot change or modify that value!

Tip: You can add a value to a variable by the content of the <xsl:variable> element OR by the select attribute!

Syntax

<xsl:variable

name="name"

select="expression">

<!-- Content:template -->

</xsl:variable>

Attributes

Attribute | Value | Description
name | name | Required. Specifies the name of the variable
select | expression | Optional. Defines the value of the variable

Example 1

If the select attribute is present, the <xsl:variable> element cannot contain any content. If the select attribute contains a literal string, the string must be within quotes. The following two examples assign the value "red" to the variable "color":

<xsl:variable name="color" select="'red'" />

<xsl:variable name="color" select='"red"' />

Example 2

If the <xsl:variable> element only contains a name attribute, and there is no content, then the value of the variable is an empty string:

<xsl:variable name="j" />

Example 3

The following example adds a value to the variable "header" by the content of the <xsl:variable> element:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:variable name="header">

<tr>

<th>Element</th>

<th>Description</th>

</tr>

</xsl:variable>

<xsl:template match="/">

<html>

<body>

<table>

  <xsl:copy-of select="$header" />

  <xsl:for-each select="reference/record">

  <tr>

  <xsl:if category="XML">

    <td><xsl:value-of select="element"/></td>

    <td><xsl:value-of select="description"/></td>

  </xsl:if>

  </tr>

  </xsl:for-each>

</table>

<br />

<table>

  <xsl:copy-of select="$header" />

  <xsl:for-each select="table/record">

  <tr>

  <xsl:if category="XSL">

    <td><xsl:value-of select="element"/></td>

    <td><xsl:value-of select="description"/></td>

  </xsl:if>

  </tr>

  </xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>


XSLT <xsl:when> Element

Definition and Usage

The <xsl:when> element is used to specify an action for the <xsl:choose> element. The <xsl:when> element evaluates an expression, and if it returns true, an action is performed.

Note: The <xsl:when> element is used in conjunction with <xsl:choose> and <xsl:otherwise> to express multiple conditional tests.

Syntax

<xsl:when

test="boolean-expression">

<!-- Content: template -->

</xsl:when>

Attributes

Attribute | Value | Description
test | boolean-expression | Required. Specifies a Boolean expression to be tested

Example 1

The code below will add a pink background-color to the artist column WHEN the price of the cd is higher than 10.

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

  <h2>My CD Collection</h2>

  <table border="1">

    <tr bgcolor="#9acd32">

      <th>Title</th>

      <th>Artist</th>

    </tr>

    <xsl:for-each select="catalog/cd">

    <tr>

      <td><xsl:value-of select="title"/></td>

     <xsl:choose>

        <xsl:when test="price&gt;'10'">

          <td bgcolor="#ff00ff">

          <xsl:value-of select="artist"/></td>

        </xsl:when>

        <xsl:otherwise>

          <td><xsl:value-of select="artist"/></td>

        </xsl:otherwise>

      </xsl:choose>

    </tr>

    </xsl:for-each>

  </table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

View the XML file, , and View the result.

Example 2

Declare a variable named "color". Set its value to the color attribute of the current element. If the current element has no color attribute, the value of "color" will be "green":

<xsl:variable name="color">

<xsl:choose>

  <xsl:when test="@color">

    <xsl:value-of select="@color"/>

  </xsl:when>

  <xsl:otherwise>green</xsl:otherwise>

</xsl:choose>

</xsl:variable>


XSLT <xsl:with-param> Element

Definition and Usage

The <xsl:with-param> element defines the value of a parameter to be passed into a template.

Note: The value of the name attribute of <xsl:with-param> must match a name in an <xsl:param> element (the <xsl:with-param> element is ignored if there is no match).

Note: The <xsl:with-param> element is allowed within <xsl:apply-templates> and <xsl:call-template>.

Tip: You can add a value to the parameter by the content of the <xsl:with-param> element OR by the select attribute!

Syntax

<xsl:with-param

name="name"

select="expression">

<!-- Content:template -->

</xsl:with-param>

Attributes

Attribute | Value | Description
name | name | Required. Specifies the name of the parameter
select | expression | Optional. An XPath expression that defines the value of the parameter

Example 1

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:variable name="xx">

<html>

<body>

<xsl:call-template name="show_title">

  <xsl:with-param name="title" />

</xsl:call-template>

</body>

</html>

</xsl:variable>

<xsl:template name="show_title" match="/">

<xsl:param name="title" />

<xsl:for-each select="catalog/cd">

  <p>Title: <xsl:value-of select="$title" /></p>

</xsl:for-each>

</xsl:template>

</xsl:stylesheet>


XSLT Browsers

Nearly all major browsers have support for XML and XSLT.

Mozilla Firefox

As of version 1.0.2, Firefox has support for XML and XSLT (and CSS).

Mozilla

Mozilla includes Expat for XML parsing and has support to display XML + CSS. Mozilla also has some support for Namespaces.

Mozilla is available with an XSLT implementation.

Netscape

As of version 8, Netscape uses the Mozilla engine, and therefore it has the same XML / XSLT support as Mozilla.

Opera

As of version 9, Opera has support for XML and XSLT (and CSS). Version 8 supports only XML + CSS.

Internet Explorer

As of version 6, Internet Explorer supports XML, Namespaces, CSS, XSLT, and XPath.

Version 5 is NOT compatible with the official W3C XSL Recommendation.


XSLT current() Function

Definition and Usage

The current() function returns a node-set that contains only the current node. Usually the current node and the context node are the same.

<xsl:value-of select="current()"/>

is equal to

<xsl:value-of select="."/>

However, there is one difference. Look at the following XPath expression: "catalog/cd". This expression selects the <catalog> child nodes of the current node, and then it selects the <cd> child nodes of the <catalog> nodes. This means that on each step of evaluation, the "." has a different meaning.

The following line:

<xsl:apply-templates select="//cd[@title=current()/@ref]"/>

will process all cd elements that have a title attribute with value equal to the value of the current node's ref attribute.

This is different from

<xsl:apply-templates select="//cd[@title=./@ref]"/>

that will process all cd elements that have a title attribute and a ref attribute with the same value.

Syntax

node-set current()

Example 1

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

<xsl:for-each select="catalog/cd/artist">

  Current node: <xsl:value-of select="current()"/>

  <br />

</xsl:for-each>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

View the XML file, , and View the result.


XSLT document() Function

Definition and Usage

The document() function is used to access nodes in an external XML document. The external XML document must be valid and parsable.

One way to use this function is to look up data in an external document. For example we want to find the Celsius value from a Fahrenheit value and we refer to a document that contains some pre-computed results:

<xsl:value-of select="document('celsius.xml')/celsius/result[@value=$value]"/>

Syntax

node-set document(object,node-set?)

Parameters

Parameter | Description
object | Required. Defines an URI to an external XML document
node-set | Optional. Used to resolve relative URI


XSLT element-available() Function

Definition and Usage

The element-available() function returns a Boolean value that indicates whether the element specified is supported by the XSLT processor.

This function can only be used to test elements that can occur in a template body. These elements are:

· xsl:apply-imports
· xsl:apply-templates
· xsl:attributes
· xsl:call-template
· xsl:choose
· xsl:comment
· xsl:copy
· xsl:copy-of
· xsl:element
· xsl:fallback
· xsl:for-each
· xsl:if
· xsl:message
· xsl:number
· xsl:processing instruction
· xsl:text
· xsl:value-of
· xsl:variable

Syntax

boolean element-available(string)

Parameters

Parameter | Description
string | Required. Specifies the element to test

Example 1

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

<xsl:choose>

<xsl:when test="element-available('xsl:comment')">

<p>xsl:comment is supported.</p>

</xsl:when>

<xsl:otherwise>

<p>xsl:comment is not supported.</p>

</xsl:otherwise>

</xsl:choose>

<xsl:choose>

<xsl:when test="element-available('xsl:delete')">

<p>xsl:delete is supported.</p>

</xsl:when>

<xsl:otherwise>

<p>xsl:delete is not supported.</p>

</xsl:otherwise>

</xsl:choose>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

View the XSL file and View the result.


XSLT format-number() Function

Definition and Usage

The format-number() function is used to convert a number into a string.

Syntax

string format-number(number,format,[decimalformat])

Parameters

Parameter

Description

number

Required. Specifies the number to be formatted

format

Required. Specifies the format pattern. Here are some of the characters used in the formatting pattern:

· # (Denotes a digit. Example: ####)
· 0 (Denotes leading and following zeros. Example: 0000.00)
· . (The position of the decimal point Example: ###.##)
· , (The group separator for thousands. Example: ###,###.##)
· % (Displays the number as a percentage. Example: ##%)
· ; (Pattern separator. The first pattern will be used for positive numbers and the second for negative numbers)

decimalformat

Optional.

Example 1

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

<xsl:value-of select='format-number(500100, "#.00")' />

<br />

<xsl:value-of select='format-number(500100, "#.0")' />

<br />

<xsl:value-of select='format-number(500100, "###,###.00")' />

<br />

<xsl:value-of select='format-number(0.23456, "##%")' />

<br />

<xsl:value-of select='format-number(500100, "#######")' />

</body>

</html>

</xsl:template>

</xsl:stylesheet>

View the XSL file and View the result.


XSLT function-available() Function

Definition and Usage

The function-available() function returns a Boolean value that indicates whether the function specified is supported by the XSLT processor.

You may test the XSLT functions and the inherited XPath functions.

Syntax

boolean function-available(string)

Parameters

Parameter | Description
string | Required. Specifies the function to test

Example 1

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

<xsl:choose>

<xsl:when test="function-available('sum')">

<p>sum() is supported.</p>

</xsl:when>

<xsl:otherwise>

<p>sum() is not supported.</p>

</xsl:otherwise>

</xsl:choose>

<xsl:choose>

<xsl:when test="function-available('current')">

<p>current() is supported.</p>

</xsl:when>

<xsl:otherwise>

<p>current() is not supported.</p>

</xsl:otherwise>

</xsl:choose>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

View the XSL file and


XSLT Functions

XQuery 1.0, XPath 2.0, and XSLT 2.0 share the same functions library.

XSLT Functions

XSLT includes over 100 built-in functions. There are functions for string values, numeric values, date and time comparison, node and QName manipulation, sequence manipulation, Boolean values, and more.

The URI of the XSLT function namespace is:

http://www.w3.org/2005/02/xpath-functions

The default prefix for the function namespace is fn:.

Tip: Functions are often called with the fn: prefix, such as fn:string(). However, since fn: is the default prefix of the namespace, the function names do not need to be prefixed when called.

2.0 functions is located in our XPath tutorial.

In addition, there are the following built-in XSLT functions:

Name | Description
 | Returns the current node
document() | Used to access the nodes in an external XML document
element-available() | Tests whether the element specified is supported by the XSLT processor
format-number() | Converts a number into a string
function-available() | Tests whether the function specified is supported by the XSLT processor
generate-id() | Returns a string value that uniquely identifies a specified node
key() | Returns a node-set using the index specified by an <xsl:key> element
system-property() | Returns the value of the system properties
 | Returns the URI of an unparsed entity


XSLT generate-id() Function

Definition and Usage

The generate-id() function returns a string value that uniquely identifies a specified node.

If the node-set specified is empty, an empty string is returned. If you omit the node-set parameter, it defaults to the current node.

Syntax

string generate-id(node-set?)

Parameters

Parameter | Description
node-set | Optional. Specifies on which node-set to generate a unique id

Example 1

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

<h3>Artists:</h3>

<ul>

<xsl:for-each select="catalog/cd">

<li>

<a href="#{generate-id(artist)}">

<xsl:value-of select="artist" /></a>

</li>

</xsl:for-each>

</ul>

<hr />

<xsl:for-each select="catalog/cd">

Artist: <a name="{generate-id(artist)}">

<xsl:value-of select="artist" /></a>

<br />

Title: <xsl:value-of select="title" />

<br />

Price: <xsl:value-of select="price" />

<hr />

</xsl:for-each>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

View the XML file, , and View the result.


XSLT key() Function

Definition and Usage

The key() function returns a node-set from the document, using the index specified by an <xsl:key> element.

Syntax

node-set key(string, object)

Parameters

Parameter | Description
string | Required. Specifies the name of an xsl:key element
object | Required. A string to search for

Example 1

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:key name="cdlist" match="cd" use="title" />

<xsl:template match="/">

<html>

<body>

<xsl:for-each select="key('cdlist', 'Empire Burlesque')">

<p>

Title: <xsl:value-of select="title" />

<br />

Artist: <xsl:value-of select="artist" />

<br />

Price: <xsl:value-of select="price" />

</p>

</xsl:for-each>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

View the XML file, View the XSL file, and View the result.


XSLT - On the Client

If your browser supports it, XSLT can be used to transform the document to XHTML in your browser.

A JavaScript Solution

In the previous chapters we have explained how XSLT can be used to transform a document from XML to XHTML. We did this by adding an XSL style sheet to the XML file and let the browser do the transformation.

Even if this works fine, it is not always desirable to include a style sheet reference in an XML file (e.g. it will not work in a non XSLT aware browser.)

A more versatile solution would be to use a JavaScript to do the transformation.

By using a JavaScript, we can:

· do browser-specific testing
· use different style sheets according to browser and user needs

That is the beauty of XSLT! One of the design goals for XSLT was to make it possible to transform data from one format to another, supporting different browsers and different user needs.

XSLT transformation on the client side is bound to be a major part of the browsers work tasks in the future, as we will see a growth in the specialized browser market (Braille, aural browsers, Web printers, handheld devices, etc.)

The XML File and the XSL File

Look at the XML document that you have seen in the previous chapters:

<?xml version="1.0" encoding="ISO-8859-1"?>

<catalog>

<cd>

  <title>Empire Burlesque</title>

  <artist>Bob Dylan</artist>

  <country>USA</country>

  <company>Columbia</company>

  <price>10.90</price>

  <year>1985</year>

</cd>

.

.

.

</catalog>

View the XML file.

And the accompanying XSL style sheet:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

  <h2>My CD Collection</h2>

  <table border="1">

    <tr bgcolor="#9acd32">

      <th align="left">Title</th>

      <th align="left">Artist</th>

    </tr>

    <xsl:for-each select="catalog/cd">

    <tr>

      <td><xsl:value-of select="title" /></td>

      <td><xsl:value-of select="artist" /></td>

    </tr>

    </xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

View the XSL file.

Notice that the XML file does not have a reference to the XSL file.

IMPORTANT: The above sentence indicates that an XML file could be transformed using many different XSL style sheets.

Transforming XML to XHTML in the Browser

Here is the source code needed to transform the XML file to XHTML on the client:

<html>

<body>

<script type="text/javascript">

// Load XML

var xml = new ActiveXObject("Microsoft.XMLDOM")

xml.async = false

xml.load("cdcatalog.xml")

// Load XSL

var xsl = new ActiveXObject("Microsoft.XMLDOM")

xsl.async = false

xsl.load("cdcatalog.xsl")

// Transform

document.write(xml.transformNode(xsl))

</script>

</body>

</html>

Tip: If you don't know how to write JavaScript, you can study our JavaScript tutorial.

The first block of code creates an instance of the Microsoft XML parser (XMLDOM), and loads the XML file into memory. The second block of code creates another instance of the parser and loads the XSL file into memory. The last line of code transforms the XML document using the XSL document, and displays the result as XHTML in your browser. Nice!

See how it works in IE.


XSLT - On the Server

Since not all browsers support XSLT, one solution is to transform the XML to XHTML on the server.

A Cross Browser Solution

In the previous chapter we explained how XSLT can be used to transform a document from XML to XHTML in the browser. We created a JavaScript that used an XML parser to do the transformation. The JavaScript solution will not work in a browser that doesn't have an XML parser.

To make XML data available to all kind of browsers, we must transform the XML document on the SERVER and send it as XHTML back to the browser.

That's another beauty of XSLT. One of the design goals for XSLT was to make it possible to transform data from one format to another on a server, returning readable data to all kinds of browsers.

The XML File and the XSLT File

Look at the XML document that you have seen in the previous chapters:

<?xml version="1.0" encoding="ISO-8859-1"?>

<catalog>

<cd>

  <title>Empire Burlesque</title>

  <artist>Bob Dylan</artist>

  <country>USA</country>

  <company>Columbia</company>

  <price>10.90</price>

  <year>1985</year>

</cd>

.

.

.

</catalog>

View the XML file.

And the accompanying XSL style sheet:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

  <h2>My CD Collection</h2>

  <table border="1">

    <tr bgcolor="#9acd32">

      <th align="left">Title</th>

      <th align="left">Artist</th>

    </tr>

    <xsl:for-each select="catalog/cd">

    <tr>

      <td><xsl:value-of select="title" /></td>

      <td><xsl:value-of select="artist" /></td>

    </tr>

    </xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

View the XSL file.

Notice that the XML file does not have a reference to the XSL file.

IMPORTANT: The above sentence indicates that an XML file could be transformed using many different XSL style sheets.

Transforming XML to XHTML on the Server

Here is the ASP source code needed to transform the XML file to XHTML on the server:

<%

'Load XML

set xml = Server.CreateObject("Microsoft.XMLDOM")

xml.async = false

xml.load(Server.MapPath("cdcatalog.xml"))

'Load XSL

set xsl = Server.CreateObject("Microsoft.XMLDOM")

xsl.async = false

xsl.load(Server.MapPath("cdcatalog.xsl"))

'Transform file

Response.Write(xml.transformNode(xsl))

%>

Tip: If you don't know how to write ASP, you can study our ASP tutorial.

The first block of code creates an instance of the Microsoft XML parser (XMLDOM), and loads the XML file into memory. The second block of code creates another instance of the parser and loads the XSL file into memory. The last line of code transforms the XML document using the XSL document, and sends the result as XHTML to your browser. Nice!

See how it works.


XSLT Reference

XSLT Elements Reference

The XSLT elements from the W3C Recommendation (XSLT Version 1.0).

XSLT Elements

The links in the "Element" column point to attributes and more useful information about each specific element.

· N: indicates the earliest version of Netscape that supports the tag
· IE: indicates the earliest version of Internet Explorer that supports the tag

Note: Elements supported in IE 5 may have NON-standard behavior, because IE 5 was released before XSLT became an official W3C Recommendation.

Element | Description | IE | N
apply-imports | Applies a template rule from an imported style sheet | 6.0 |
apply-templates | Applies a template rule to the current element or to the current element's child nodes | 5.0 | 6.0
attribute | Adds an attribute | 5.0 | 6.0
attribute-set | Defines a named set of attributes | 6.0 | 6.0
call-template | Calls a named template | 6.0 | 6.0
choose | Used in conjunction with <when> and <otherwise> to express multiple conditional tests | 5.0 | 6.0
comment | Creates a comment node in the result tree | 5.0 | 6.0
copy | Creates a copy of the current node (without child nodes and attributes) | 5.0 | 6.0
 | Creates a copy of the current node (with child nodes and attributes) | 6.0 | 6.0
decimal-format | Defines the characters and symbols to be used when converting numbers into strings, with the format-number() function | 6.0 |
element | Creates an element node in the output document | 5.0 | 6.0
fallback | Specifies an alternate code to run if the processor does not support an XSLT element | 6.0 |
for-each | Loops through each node in a specified node set | 5.0 | 6.0
if | Contains a template that will be applied only if a specified condition is true | 5.0 | 6.0
import | Imports the contents of one style sheet into another. Note: An imported style sheet has lower precedence than the importing style sheet | 6.0 | 6.0
include | Includes the contents of one style sheet into another. Note: An included style sheet has the same precedence as the including style sheet | 6.0 | 6.0
key | Declares a named key that can be used in the style sheet with the key() function | 6.0 | 6.0
message | Writes a message to the output (used to report errors) | 6.0 | 6.0
namespace-alias | Replaces a namespace in the style sheet to a different namespace in the output | 6.0 |
number | Determines the integer position of the current node and formats a number | 6.0 | 6.0
otherwise | Specifies a default action for the <choose> element | 5.0 | 6.0
output | Defines the format of the output document | 6.0 | 6.0
param | Declares a local or global parameter | 6.0 | 6.0
preserve-space | Defines the elements for which white space should be preserved | 6.0 | 6.0
 | Writes a processing instruction to the output | 5.0 | 6.0
sort | Sorts the output | 6.0 | 6.0
strip-space | Defines the elements for which white space should be removed | 6.0 | 6.0
stylesheet | Defines the root element of a style sheet | 5.0 | 6.0
template | Rules to apply when a specified node is matched | 5.0 | 6.0
 | Writes literal text to the output | 5.0 | 6.0
 | Defines the root element of a style sheet | 6.0 | 6.0
value-of | Extracts the value of a selected node | 5.0 | 6.0
variable | Declares a local or global variable | 6.0 | 6.0
when | Specifies an action for the <choose> element | 5.0 | 6.0
 | Defines the value of a parameter to be passed into a template | 6.0 | 6.0


XSLT Summary

You Have Learned XSLT, Now What?

 Top Previous Next

XSLT Summary

This tutorial has taught you how to use XSLT to transform XML documents into other formats, like XHTML.

You have learned how to add/remove elements and attributes to or from the output file.

You have also learned how to rearrange and sort elements, perform tests and make decisions about which elements to hide and display.

For more information on XSLT, please look at our XSLT reference.

Now You Know XSLT, What's Next?

XSL includes 3 languages: XSLT, XPath and XSL-FO, so the next step is to learn about XPath and XSL-FO.

XPath

XPath is used to navigate through elements and attributes in an XML document.

XPath is a major element in the W3C's XSL standard. An understanding of XPath is fundamental for advanced use of XML.

Without any XPath knowledge, you will not be able to create XSLT documents.

If you want to learn more about the XPath, please visit our .

XSL-FO

XSL-FO describes the formatting of XML data for output to screen, paper or other media.

XSL-FO documents are XML files with information about the output layout and output content.

If you want to learn more about XSL-FO, please visit our .


XSLT system-property() Function

Definition and Usage

The system-property() function returns the value of the system property specified by the name.

System properties in the XSLT namespace:

· xsl:version - The version of XSLT implemented by the processor
· xsl:vendor - The vendor of the XSLT processor
· xsl:vendor-url - The URL identifying the vendor of the XSLT processor

Syntax

object system-property(string)

Parameters

Parameter | Description
string | Required. Specifies the system property to return the value of

Example 1

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

<p>

Version:

<xsl:value-of select="system-property('xsl:version')" />

<br />

Vendor:

<xsl:value-of select="system-property('xsl:vendor')" />

<br />

Vendor URL:

<xsl:value-of select="system-property('xsl:vendor-url')" />

</p>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

and View the result


XSLT - Transformation

Example study: How to transform XML into XHTML using XSLT.

The details of this example will be explained in the next chapter.

Correct Style Sheet Declaration

The root element that declares the document to be an XSL style sheet is <xsl:stylesheet> or <xsl:transform>.

Note: <xsl:stylesheet> and <xsl:transform> are completely synonymous and either can be used!

The correct way to declare an XSL style sheet according to the W3C XSLT Recommendation is:

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

or:

<xsl:transform version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

To get access to the XSLT elements, attributes and features we must declare the XSLT namespace at the top of the document.

The xmlns:xsl="http://www.w3.org/1999/XSL/Transform" points to the official W3C XSLT namespace. If you use this namespace, you must also include the attribute version="1.0".

Start with a Raw XML Document

We want to transform the following XML document ("cdcatalog.xml") into XHTML:

<?xml version="1.0" encoding="ISO-8859-1"?>

<catalog>

<cd>

  <title>Empire Burlesque</title>

  <artist>Bob Dylan</artist>

  <country>USA</country>

  <company>Columbia</company>

  <price>10.90</price>

  <year>1985</year>

</cd>

.

.

.

</catalog>

Viewing XML Files in Firefox and Internet Explorer: Open the XML file (typically by clicking on a link) - The XML document will be displayed with color-coded root and child elements. A plus (+) or minus sign (-) to the left of the elements can be clicked to expand or collapse the element structure. To view the raw XML source (without the + and - signs), select "View Page Source" or "View Source" from the browser menu.

Viewing XML Files in Netscape 6: Open the XML file, then right-click in XML file and select "View Page Source". The XML document will then be displayed with color-coded root and child elements.

Viewing XML Files in Opera 7: Open the XML file, then right-click in XML file and select "Frame" / "View Source". The XML document will be displayed as plain text.

View " cdcatalog.xml"

Create an XSL Style Sheet

Then you create an XSL Style Sheet ("cdcatalog.xsl") with a transformation template:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

  <h2>My CD Collection</h2>

  <table border="1">

  <tr bgcolor="#9acd32">

    <th align="left">Title</th>

    <th align="left">Artist</th>

  </tr>

  <xsl:for-each select="catalog/cd">

  <tr>

    <td><xsl:value-of select="title"/></td>

    <td><xsl:value-of select="artist"/></td>

  </tr>

  </xsl:for-each>

  </table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

View " cdcatalog.xsl"

Link the XSL Style Sheet to the XML Document

Add the XSL style sheet reference to your XML document ("cdcatalog.xml"):

<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>

<catalog>

<cd>

  <title>Empire Burlesque</title>

  <artist>Bob Dylan</artist>

  <country>USA</country>

  <company>Columbia</company>

  <price>10.90</price>

  <year>1985</year>

</cd>

.

.

.

</catalog>

If you have an XSLT compliant browser it will nicely transform your XML into XHTML.

View the result

The details of the example above will be explained in the next chapters.


XSLT Tutorial

XSLT Tutorial

XSL stands for EXtensible Stylesheet Language.

The World Wide Web Consortium (W3C) started to develop XSL because there was a need for an XML-based style sheet language.

XSLT stands for XSL Transformations. In this tutorial you will learn how to use XSLT to transform XML documents into other formats, like XHTML.

Start

XSLT References

Description of all the XSLT elements from the W3C Recommendation, and information about browser support.

XSLT includes over 100 built-in functions. There are functions for string values, numeric values, date and time comparison, node and QName manipulation, sequence manipulation, Boolean values, and more.

Table of Contents

XSL Languages

Defines the sub-languages of XSL: XSLT, XPath and XSL-FO.

XSLT Introduction

An introduction to XSLT. What it is, and what it can do.

XSLT Browsers

Overview of browser support for XSLT.

XSLT Transformation

How XSLT can be used to transform XML documents into XHTML documents.

XSLT Templates

The <xsl:template> element contains rules to apply when a specified node is matched.

XSLT < Element

The <xsl:value-of> element extracts the value of a selected node.

XSLT < xsl:for-each> Element

The <xsl:for-each> element allows you to do looping in XSL.

XSLT < xsl:sort> Element

The <xsl:sort> element is used to sort the output.

XSLT < xsl:if> Element

The <xsl:if> element is used to put a conditional test against the content of the XML file.

XSLT < xsl:choose> Element

The <xsl:choose> element is used in conjunction with <xsl:when> and <xsl:otherwise> to express multiple conditional tests.

XSLT < xsl:apply-templates> Element

The <xsl:apply-templates> element applies a template rule to the current element or to the current element's child nodes.

XSL on the Client

How to transform an XML document to an XHTML document on the client.

XSL on the Server

How to transform an XML document to an XHTML document on the server.

XSL Editing XML

Data stored in XML files can be edited from an Internet browser. This chapter shows how to open, edit, and save an XML file that is stored on the server.

XSL Editors

Why you should use an XML editor when you edit your XSL documents.

XSLT Summary

This chapter contains a summary on what you have learned in this tutorial and a recommendation on what subject you should study next.

XSLT References

XSLT W3C Elements

All the XSLT elements from the W3C Recommendation, and information about browser support.

XSLT Functions

XSLT includes over 100 built-in functions. There are functions for string values, numeric values, date and time comparison, node and QName manipulation, sequence manipulation, Boolean values, and more.


XSLT unparsed-entity-uri() Function

Definition and Usage

The unparsed-entity-uri() function returns the URI of an unparsed entity. The name of the entity must match the passed argument. If there is no such entity an empty string is returned.

If the DTD contains the following declaration:

<!ENTITY pic SYSTEM "http://www.w3schools.com/picture.jpg" NDATA JPEG>

the following expression:

unparsed-entity-uri('pic')

will return the URI for the file "picture.jpg".

Syntax

string unparsed-entity-uri(string)

Parameters

Parameter | Description
string | Required. Specifies the name of an unparsed entity


cdcatalog.html

My CD Collection

Title | Artist
Empire Burlesque | Bob Dylan
Hide your heart | Bonnie Tyler
Greatest Hits | Dolly Parton
Still got the blues | Gary Moore
Eros | Eros Ramazzotti
One night only | Bee Gees
Sylvias Mother | Dr.Hook
Maggie May | Rod Stewart
Romanza | Andrea Bocelli
When a man loves a woman | Percy Sledge
Black angel | Savage Rose
1999 Grammy Nominees | Many
For the good times | Kenny Rogers
Big Willie style | Will Smith
Tupelo Honey | Van Morrison
Soulsville | Jorn Hoel
The very best of | Cat Stevens
Stop | Sam Brown
Bridge of Spies | T`Pau
Private Dancer | Tina Turner
Midt om natten | Kim Larsen
Pavarotti Gala Concert | Luciano Pavarotti
The dock of the bay | Otis Redding
Picture book | Simply Red
Red | The Communards
Unchain my heart | Joe Cocker


XSL-FO Tutorial

XSL-FO Tutorial

In our XSL-FO tutorial you will learn what XSL-FO is.

You will learn how to use XSL-FO to format your XML documents for output.

Start

Table of Contents

XSL-FO Introduction

An introduction to XSL-FO. What it is and what it can do.

XSL-FO Documents

This chapter describes the structure of XSL-FO documents.

XSL-FO Areas

This chapter describes the area model of XSL-FO.

XSL-FO Output

This chapter describes the "Output Elements" of XSL-FO documents.

XSL-FO Flow

This chapter describes the "Output Flow" of XSL-FO documents.

XSL-FO Pages

This chapter describes how XSL-FO defines page layout.

XSL-FO Blocks

This chapter describes XSL-FO output blocks.

XSL-FO Lists

This chapter describes how XSL-FO defines lists.

XSL-FO Tables

This chapter describes how XSL-FO defines tables.

XSL-FO &

This chapter describes how XSL-FO uses XSLT.

XSL-FO Software

This chapter describes our favorite XSL-FO software.

XSL-FO Objects Reference

The full list of XSL-FO objects and their properties.


XSL-FO basic-link Object

Definition and Usage

The <fo:basic-link> object represents the start resource of a link.

Syntax

<fo:basic-link>

<!--

Contents:(#PCDATA|bidi-override|character|

external-graphic|instream-foreign-object|

inline|page-number|page-number-citation|

basic-link|multi-toggle|block|block-container|

table-and-caption|table|list-block)*

-->

</fo:basic-link>

Properties

Property [A-I] | Property [J-Z]
alignment-adjust | keep-with-next
alignment-baseline | keep-with-previous
background-attachment | left
background-color | line-height
background-image | margin-bottom
background-repeat | margin-left
background-position-horizontal | margin-right
background-position-vertical |
baseline-shift |
border-after-color | padding-before
border-after-style | padding-bottom
 | padding-end
border-before-color | padding-left
border-before-style |
 | padding-top
border-bottom-style |
border-bottom-width |
border-end-color | pitch
 | pitch-range
border-end-width |
border-left-color | relative-position
border-left-style | richness
 | right
border-right-color | role
border-right-style | show-destination
border-right-width | source-document
border-start-color | space-end
border-start-style | space-start
border-start-width | speak
border-top-color | speak-header
 | speak-numeral
border-top-width | speak-punctuation
bottom | speech-rate
cue-after | stress
 | target-presentation-context
destination-placement-offset | target-processing-context
dominant-baseline | target-stylesheet
elevation | top
external-destination | voice-family
 | volume
indicate-destination |
internal-destination |


XSL-FO bidi-override Object

Definition and Usage

The <fo:bidi-override> object is used to override the default Unicode BIDI direction for different scripts in mixed-language documents.

This object forces a string to be written in a specific direction.

Syntax

<fo:bidi-override>

<!--

Contents:(#PCDATA|bidi-override|

character|external-graphic|

instream-foreign-object|inline|

inline-container|leader|page-number|

page-number-citation|basic-link|

multi-toggle|block|block-container|

table-and-caption|table|list-block)*

-->

</fo:bidi-override>

Properties

Property [A-P] | Property [Q-Z]
azimuth | relative-position
bottom | richness
color | right
cue-after | score-spaces
cue-before | speak
direction | speak-header
elevation | speak-numeral
font-family | speak-punctuation
font-selection-strategy |
font-size |
font-size-adjust |
font-stretch | unicode-bidi
font-style | voice-family
font-variant | volume
font-weight | word-spacing
id |
left |
letter-spacing |
line-height |
pause-after |
pause-before |
pitch |


XSL-FO block-container Object

Definition and Usage

The <fo:block-container> object is used to create a block-level reference-area - which often contains a different writing-mode or a different reference-orientation to rotate the content.

Syntax

<fo:block-container>

<!--

Contents:(block|block-container|

table-and-caption|table|list-block)+

-->

</fo:block-container>

Properties

Property [A-C] | Property [D-Z]
absolute-position | display-align
background-attachment | end-indent
 | height
background-image | id
background-repeat | inline-progression-dimension
background-position-horizontal | intrusion-displace
background-position-vertical | keep-together
border-after-color | keep-with-next
border-after-style | keep-with-previous
border-after-width | left
border-before-color |
border-before-style | margin-left
border-before-width | margin-right
 | margin-top
 | overflow
 | padding-after
border-end-color | padding-before
border-end-style | padding-bottom
border-end-width | padding-end
border-left-color | padding-left
border-left-style |
border-left-width |
border-right-color | padding-top
border-right-style | reference-orientation
border-right-width | right
border-start-color | space-after
border-start-style | space-before
 | span
 | start-indent
border-top-style | top
border-top-width | width
bottom | writing-mode
break-after | z-index
break-before |
clip |


XSL-FO block Object

Definition and Usage

The <fo:block> object defines a block of output. Blocks are sequences of output in rectangular boxes.

The <fo:block> object is used to format paragraphs, titles, headlines, etc.

Syntax

<fo:block>

<!--

Contents:(#PCDATA|bidi-override|character|

external-graphic|instream-foreign-object|

inline|inline-container|leader|page-number|

page-number-citation|basic-link|multi-toggle|

block|block-container|table-and-caption|

table|list-block)*

-->

</fo:block>

Properties

Property [A-J] | Property [K-Z]
azimuth | keep-together
background-attachment | keep-with-next
background-color | keep-with-previous
background-image | language
background-repeat | last-line-end-indent
background-position-horizontal |
background-position-vertical | linefeed-treatment
border-after-color | line-height
border-after-style | line-height-shift-adjustment
border-after-width | line-stacking-strategy
border-before-color | margin-bottom
border-before-style | margin-left
 | margin-right
border-bottom-color | margin-top
border-bottom-style | orphans
border-bottom-width | padding-after
 | padding-before
border-end-style | padding-bottom
border-end-width | padding-end
border-left-color | padding-left
border-left-width | padding-start
border-right-color | padding-top
border-right-style | pause-after
border-right-width | pause-before
border-start-color |
border-start-style | pitch-range
border-start-width | play-during
border-top-color | relative-position
border-top-style | richness
border-top-width |
bottom | role
break-after | script
break-before | source-document
color | space-after
country | space-before
 | span
cue-before | speak
elevation |
font-family |
font-selection-strategy | speech-rate
font-size | start-indent
font-size-adjust | stress
font-stretch | text-align
font-style | text-align-last
font-variant | text-altitude
font-weight | text-depth
hyphenate | text-indent
hyphenation-character | top
hyphenation-keep |
hyphenation-ladder-count | voice-family
hyphenation-push-character-count | volume
hyphenation-remain-character-count | white-space-collapse
id | white-space-treatment
intrusion-displace | widows
 | wrap-option

Example 1

Blocks are sequences of output in rectangular boxes:

<fo:block

border-width="1mm">

This block of output will have a one millimeter border around it.

</fo:block>

Example 2

Blocks are sequences of output that can be styled individually:

<fo:block

font-size="12pt"

font-family="sans-serif">

This block of output will be written in a 12pt sans-serif font.

</fo:block>

Example 3

<fo:block

  font-size="14pt" font-family="verdana" color="red"

  space-before="5mm" space-after="5mm">

W3Schools

</fo:block>

<fo:block

  text-indent="5mm"

  font-family="verdana" font-size="12pt"

  space-before="5mm" space-after="5mm">

At W3Schools you will find all the Web-building tutorials you

need, from basic HTML and XHTML to advanced XML, XSL, Multimedia

and WAP.

</fo:block>

Result:

W3Schools

At W3Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.


XSL-FO character Object

Definition and Usage

The <fo:character> object specifies a character that will be mapped to a glyph for presentation.

Syntax

<fo:character>

<!--

Contents:EMPTY

-->

</fo:character>

Properties

Property [A-G] | Property [H-Z]
alignment-adjust | hyphenate
alignment-baseline | hyphenation-character
azimuth | hyphenation-push-character-count
background-attachment | hyphenation-remain-character-count
background-color | id
background-image | keep-with-next
background-position-horizontal | language
background-position-vertical |
baseline-shift |
border-after-color | line-height
border-after-style |
border-after-width | margin-left
border-before-color | margin-right
border-before-style |
border-before-width |
border-bottom-color |
border-bottom-style | padding-bottom
border-end-color | padding-left
border-end-style | padding-right
border-end-width | padding-start
 | padding-top
border-left-style | pause-after
border-left-width | pause-before
border-right-color | pitch
border-right-style | pitch-range
 | play-during
border-start-color | relative-position
border-start-style | richness
border-start-width | right
border-top-color | score-spaces
border-top-style | script
border-top-width | space-end
bottom | space-start
character | speak
color | speak-header
country | speak-numeral
cue-after | speak-punctuation
 | speech-rate
dominant-baseline |
elevation | suppress-at-line-break
font-family | text-altitude
font-selection-strategy | text-depth
font-size | text-decoration
font-size-adjust | text-shadow
font-stretch | text-transform
font-style | top
font-variant | treat-as-word-space
font-weight | visibility
glyph-orientation-horizontal | voice-family
glyph-orientation-vertical | volume
 | word-spacing


XSL-FO color-profile Object

Definition and Usage

The <fo:color-profile> object defines a color-profile for a stylesheet.

The color-profile is referenced via the name in the "color-profile-name" property and identified by the URI in the "src" property.

Syntax

<fo:color-profile>

<!--

Contents:EMPTY

-->

</fo:color-profile>

Properties

Property

color-profile-name

rendering-intent

src


XSL-FO conditional-page-master-reference Object

Definition and Usage

The <fo:conditional-page-master-reference> object specifies a page-master to be used when the conditions defined are true.

This allows different page-masters to be used for different pages (e.g. odd and even pages, first page, blank pages).

Three properties, page-position, odd-or-even, blank-or-not-blank, specifies the conditions. All three conditions must be true for the <fo:conditional-page-master-reference> to be true.

· page-position is true if the generated page has the specified position (first, last, rest, any)
· odd-or-even is true if the value is "any" or if the value (odd, even) matches the page number
· blank-or-not-blank is true, if the value is "not-blank" and the page has areas generated by descendants of <fo:flow>; if the value is "blank" and the page has no areas from <fo:flow>; or if the value is "any"

Syntax

<fo:conditional-page-master-reference>

<!--

Contents:EMPTY

-->

</fo:conditional-page-master-reference>

Properties

Property

blank-or-not-blank

odd-or-even

page-postion


XSL-FO declarations Object

Definition and Usage

The <fo:declarations> object is used to group global declarations for a stylesheet.

The <fo:declarations> object is a wrapper for objects whose content is to be used as a resource to the formatting process.

Syntax

<fo:declarations>

<!--

Contents:(color-profile)+

-->

</fo:declarations>

Properties

None


XSL-FO external-graphic Object

Definition and Usage

The <fo:external-graphic> object is used for a graphic where the graphics data resides outside of the <fo:element> tree.

An <fo:external-graphic> may be placed block-level by enclosing it in an <fo:block>.

A "line-stacking-strategy" of "max-height" or "line-height" is typically used for stacking one or more lines with <fo:external-graphic> content.

Syntax

<fo:external-graphic>

<!--

Contents:EMPTY

-->

</fo:external-graphic>

Properties

Property [A-J] | Property [K-Z]
alignment-adjust | keep-with-next
alignment-baseline | keep-with-previous
azimuth | language
background-attachment | left
 | line-height
background-image |
background-repeat | margin-left
background-position-horizontal | margin-right
background-position-vertical |
baseline-shift | overflow
block-progression-dimension | padding-after
border-after-color | padding-before
border-after-style | padding-bottom
border-after-width | padding-end
border-before-color | padding-left
border-before-style | padding-right
 | padding-top
 | pause-after
border-bottom-width |
 | pitch
border-end-style | pitch-range
border-end-width | play-during
border-left-color | relative-position
border-left-style |
border-left-width | right
border-right-color | role
border-right-style | scaling
border-right-width | scaling-method
border-start-color | script
border-start-style | source-document
border-start-width | space-end
border-top-color | space-start
border-top-style | speak
border-top-width | speak-header
bottom | speak-numeral
clip | speak-punctuation
content-height | speech-rate
content-type | src
content-width | stress
 | text-align
cue-after | text-indent
 | top
display-align | voice-family
dominant-baseline | volume
 | width
height |
inline-progression-dimension |


XSL-FO float Object

Definition and Usage

The <fo:float> object is typically used to position an image in a separate area at the beginning of a page OR to position an image to one side, with the content flowing along-side of the image.

It is an error if <fo:float> is a descendant of a flow that is not assigned to a region-body.

It is also an error if <fo:float> is a descendant of an fo:block-container that generates an absolutely positioned area.

<fo:float> cannot have an <fo:float>, <fo:footnote> or <fo:marker> as a descendant.

Syntax

<fo:float>

<!--

Contents:(block|block-container|

table-and-caption|table|

list-block)+

-->

</fo:float>

Properties

Property

float

clear


XSL-FO flow Object

Definition and Usage

XSL-FO pages are filled with content from the <fo:flow> object.

The <fo:flow> object contains all elements to be printed to the page.

When the page is full, the same page master will be used over (and over) again until all the text is printed.

The <fo:flow> object has a "flow-name" property that defines where the content will go.

Syntax

<fo:flow>

<!--

Contents:(block|block-container|

table-and-caption|table|

list-block)+

-->

</fo:flow>

Properties

Property

flow-name

Example 1

A "real" XSL-FO example:

<?xml version="1.0" encoding="ISO-8859-1"?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">

<fo:layout-master-set>

<fo:simple-page-master master-name="A4">

</fo:simple-page-master>

</fo:layout-master-set>

<fo:page-sequence master-reference="A4">

<fo:flow flow-name="xsl-region-body">

<fo:block>Hello W3Schools</fo:block>

</fo:flow>

</fo:page-sequence>

</fo:root>

The output from the code above would be something like this:

Hello W3Schools


XSL-FO footnote-body Object

Definition and Usage

The <fo:footnote> object defines the content of the footnote.

Syntax

<fo:footnote-body>

<!--

Contents:(block|block-container|

table-and-caption|table|

list-block)+

-->

</fo:footnote-body>

Properties

Property

role


XSL-FO footnote Object

Definition and Usage

The <fo:footnote> object defines a footnote within the region-body of a page.

It is an error if an <fo:footnote> occurs as a descendant of a flow that is not assigned to a region-body.

It is also an error if an <fo:footnote> occurs as a descendant of an fo:block-container that generates absolutely positioned areas.

Additionally the <fo:footnote> object cannot have an <fo:float>, <fo:footnote>, or <fo:marker> as a descendant.

Syntax

<fo:footnote>

<!--

Contents:(inline|footnote-body)

-->

</fo:footnote>

Properties

Property

role

source-document


XSL-FO initial-property-set Object

Definition and Usage

The <fo:initial-property-set> object is used to format the first line of an <fo:block>.

Syntax

<fo:initial-property-set>

<!--

Contents:EMPTY

-->

</fo:initial-property-set>

Properties

Property [A-G] | Property [H-Z]
 | id
background-attachment | left
background-color | letter-spacing
background-image |
background-repeat | padding-after
background-position-horizontal | padding-before
background-position-vertical | padding-bottom
border-after-color | padding-end
border-after-style | padding-left
border-after-width | padding-right
 | padding-start
border-before-style | padding-top
 | pause-after
border-bottom-color | pause-before
border-bottom-style |
border-bottom-width | pitch-range
border-end-color |
border-end-style | relative-position
border-end-width | richness
border-left-color | right
border-left-style | role
 | score-spaces
border-right-color | source-document
border-right-style | speak
border-right-width | speak-header
border-start-color | speak-numeral
border-start-style | speak-punctuation
border-start-width | speech-rate
border-top-color | stress
border-top-style | text-decoration
border-top-width | text-shadow
bottom | text-transform
color |
 | voice-family
cue-before | volume
elevation | word-spacing
font-family |
font-selection-strategy |
font-size |
font-size-adjust |
font-stretch |
font-style |
font-variant |
font-weight |


XSL-FO inline-container Object

Definition and Usage

The <fo:inline-container> object generates an inline reference-area. Typically, the area contains text blocks with a different writing-mode.

Syntax

<fo:inline-container>

<!--

Contents:(block|block-container|

table-and-caption|table|list-block)+

-->

</fo:inline-container>

Properties

Property [A-B] | Property [C-Z]
alignment-adjust | clip
alignment-baseline | display-align
 | dominant-baseline
background-color | height
background-image | id
 | inline-progression-dimension
background-position-horizontal | keep-together
background-position-vertical | keep-with-next
baseline-shift | keep-with-previous
block-progression-dimension |
border-after-color |
 | margin-bottom
border-after-width |
 | margin-right
border-before-style | margin-top
border-before-width | overflow
border-bottom-color | padding-after
border-bottom-style | padding-before
border-bottom-width | padding-bottom
border-end-color | padding-end
 | padding-left
border-end-width | padding-right
border-left-color | padding-start
border-left-style | padding-top
border-left-width | reference-orientation
 | relative-position
border-right-style | right
border-right-width | space-end
border-start-color | space-start
 | top
 | width
 | writing-mode
border-top-width |


XSL-FO inline Object

Definition and Usage

The <fo:inline> object is used to format a part of a text with a background or enclosing it in a border.

Syntax

<fo:inline>

<!--

Contents:(#PCDATA|bidi-override|character|

external-graphic|instream-foreign-object|

inline|inline-container|leader|page-number|

page-number-citation|basic-link|multi-toggle|

block|block-container|table-and-caption|

table|list-block)*

-->

</fo:inline>

Properties

Property [A-G] | Property [H-Z]
azimuth | height
alignment-adjust | id
alignment-baseline | inline-progression-dimension
background-attachment | keep-together
background-color | keep-with-next
background-image |
background-repeat |
background-position-horizontal | line-height
background-position-vertical | margin-bottom
baseline-shift |
block-progression-dimension | margin-right
border-after-color | margin-top
border-after-style | padding-after
 | padding-before
border-before-color | padding-bottom
border-before-style |
 | padding-left
 | padding-right
border-bottom-style | padding-start
border-bottom-width |
border-end-color | pause-after
border-end-style | pause-before
border-end-width | pitch
 | pitch-range
border-left-style | play-during
border-left-width |
border-right-color | richness
border-right-style | right
 | role
 | source-document
border-start-style | space-end
border-start-width | space-start
border-top-color | speak
border-top-style |
border-top-width | speak-numeral
bottom |
cue-after | stress
cue-before | text-decoration
dominant-baseline | top
elevation | visibility
font-family | voice-family
font-selection-strategy |
font-size | width
font-size-adjust | wrap-option
font-stretch |
font-style |
font-variant |
font-weight |


XSL-FO instream-foreign-object Object

Definition and Usage

The <fo:instream-foreign-object> object is used for inline graphics or for "generic" objects where the object's data resides as descendants of <fo:instream-foreign-object>, typically as an XML element sub-tree in a non-XSL namespace (a common format is SVG).

The content size of this object is defined by taking the size of the object and scaling specified by the content-height, content-width, and scaling properties.

If the content is too large for the area after scaling, the overflow property controls the clipping and scroll bars.

Syntax

<fo:instream-foreign-object>

<!--

Contents:(see below)

-->

</fo:instream-foreign-object>

This object has a child from a non-XSL namespace. It also may have additional attributes in the non-XSL namespace.

Properties

Property [A-J] | Property [K-Z]
alignment-adjust |
alignment-baseline |
background-attachment | left
 | line-height
 | margin-bottom
background-repeat |
background-position-horizontal | margin-right
background-position-vertical |
baseline-shift | overflow
block-progression-dimension | padding-after
border-after-color |
border-after-style | padding-bottom
 | padding-end
border-before-color | padding-left
border-before-style | padding-right
border-before-width | padding-start
 | padding-top
border-bottom-style | pause-after
border-bottom-width | pause-before
border-end-color | pitch
border-end-style |
border-end-width | play-during
border-left-color | relative-position
border-left-style |
border-left-width | right
 | role
border-right-style | scaling
border-right-width | scaling-method
border-start-color | script
 | source-document
border-start-width | space-end
 | space-start
border-top-style | speak
 | speak-header
 | speak-numeral
clip | speak-punctuation
content-height | speech-rate
content-type | stress
content-width | text-align
country | text-indent
cue-after | top
 | voice-family
display-align | volume
dominant-baseline |
height |
id |
inline-progression-dimension |


XSL-FO layout-master-set Object

Definition and Usage

The <fo:layout-master-set> object holds all masters used in a document.

Note: <fo:root> is the parent of <fo:layout-master-set>.

Note: The master-name of each child of the <fo:layout-master-set> must be unique within the document.

Syntax

<fo:layout-master-set>

<!--

Contents:(simple-page-master|page-sequence-master)+

-->

</fo:layout-master-set>

Properties

NONE

Example 1

XSL-FO documents have a structure like this:

<?xml version="1.0" encoding="ISO-8859-1"?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">

<fo:layout-master-set>

<fo:simple-page-master master-name="A4">

  <!-- Page template goes here -->

</fo:simple-page-master>

</fo:layout-master-set>

<fo:page-sequence master-reference="A4">

<!-- Page content goes here -->

</fo:page-sequence>

</fo:root>


XSL-FO leader Object

Definition and Usage

The <fo:leader> object can be used used to:

· generate "." to separate titles from page numbers in table of contents
· create input fields in forms
· create horizontal rules

If the leader's length is too long to fit in the area, the leader will begin a new line.

The children of the <fo:leader> object are ignored unless the leader-pattern property is "use-content". If the <fo:leader> has no children and the leader-pattern property is "use-content", the leader is filled with blank space.

If the leader should fill all space on a line, the max length of the leader should be at least as large as the width of the column.

Syntax

<fo:leader>

<!--

Contents:(#PCDATA|bidi-override|character|

external-graphic|instream-foreign-object|

inline|page-number|page-number-citation|

basic-link|multi-toggle)*

-->

</fo:leader>

Properties

Property [A-K] | Property [L-Z]
azimuth | leader-alignment
alignment-adjust | leader-length
alignment-baseline | leader-pattern
background-attachment | leader-pattern-width
 | left
background-image | letter-spacing
background-repeat | line-height
background-position-horizontal | margin-bottom
background-position-vertical | margin-left
baseline-shift | margin-right
border-after-color | margin-top
border-after-style | padding-after
border-after-width |
border-before-color |
border-before-style |
border-before-width | padding-left
border-bottom-color | padding-right
border-bottom-style | padding-start
border-bottom-width | padding-top
border-end-color | pause-after
 | pause-before
 | pitch
border-left-color |
border-left-style |
border-left-width | relative-position
border-right-color | richness
border-right-style |
border-right-width | role
border-start-color | rule-style
border-start-style | rule-thickness
border-start-width | source-document
border-top-color | space-end
border-top-style | space-start
border-top-width |
bottom |
color | speak-numeral
cue-after | speak-punctuation
cue-before |
dominant-baseline | stress
 | text-altitude
font-family | text-depth
font-selection-strategy | text-shadow
font-size | top
font-size-adjust | visibility
font-stretch | voice-family
font-style |
font-variant | word-spacing
font-weight |
id |
keep-with-next |
keep-with-previous |


XSL-FO list-block Object

Definition and Usage

The <fo:list-block> object is used to format the whole list.

There are four XSL-FO objects used to create lists:

· fo:list-block (contains the whole list)
· fo:list-item (contains each item in the list)
· fo:list-item-label (contains the label for the list-item - typically an <fo:block> containing a number, character, etc.)
· fo:list-item-body (contains the content/body of the list-item - typically one or more <fo:block> objects)

Syntax

<fo:list-block>

<!--

Contents:(list-item+)

-->

</fo:list-block>

Properties

Property [A-J] | Property [K-Z]
azimuth |
background-attachment | keep-with-next
background-color | keep-with-previous
background-image | left
background-repeat | margin-bottom
background-position-horizontal | margin-left
background-position-vertical | margin-right
border-after-color | margin-top
border-after-style | padding-after
border-after-width | padding-before
 | padding-bottom
border-before-style | padding-end
border-before-width | padding-left
border-bottom-color | padding-right
border-bottom-style | padding-start
border-bottom-width | padding-top
 | pause-after
 | pause-before
border-end-width | pitch
 | pitch-range
 | play-during
border-left-width | provisional-distance-between-starts
border-right-color | provisional-label-separation
 | relative-position
border-right-width | richness
border-start-color | right
border-start-style | role
border-top-color | space-after
border-top-style | space-before
border-top-width | speak
bottom | speak-header
break-after |
break-before | speak-punctuation
 | speech-rate
elevation | stress
 | top
id | voice-family
intrusion-displace | volume

Example 1

An XSL-FO list example:

<fo:list-block>

<fo:list-item>

<fo:list-item-label>

 <fo:block>*</fo:block>

</fo:list-item-label>

<fo:list-item-body>

 <fo:block>Volvo</fo:block>

</fo:list-item-body>

</fo:list-item>

<fo:list-item>

<fo:list-item-label>

 <fo:block>*</fo:block>

</fo:list-item-label>

<fo:list-item-body>

 <fo:block>Saab</fo:block>

</fo:list-item-body>

</fo:list-item>

</fo:list-block>

The output from this code would be:

* Volvo

* Saab


XSL-FO list-item-body Object

Definition and Usage

The <fo:list-item-body> object contains the content/body of the list-item - typically one or more <fo:block> objects.

There are four XSL-FO objects used to create lists:

· fo:list-block (contains the whole list)
· fo:list-item (contains each item in the list)
· fo:list-item-label (contains the label for the list-item - typically an <fo:block> containing a number, character, etc.)
· fo:list-item-body (contains the content/body of the list-item - typically one or more <fo:block> objects)

Syntax

<fo:list-item-body>

<!--

Contents:(block|block-container|

table-and-caption|table|list-block|

list-item)+

-->

</fo:list-item-body>

Properties

Property

keep-together

role

Example 1

An XSL-FO list example:

<fo:list-block>

<fo:list-item>

<fo:list-item-label>

 <fo:block>*</fo:block>

</fo:list-item-label>

<fo:list-item-body>

 <fo:block>Volvo</fo:block>

</fo:list-item-body>

</fo:list-item>

<fo:list-item>

<fo:list-item-label>

 <fo:block>*</fo:block>

</fo:list-item-label>

<fo:list-item-body>

 <fo:block>Saab</fo:block>

</fo:list-item-body>

</fo:list-item>

</fo:list-block>

The output from this code would be:

* Volvo

* Saab


XSL-FO list-item-label Object

Definition and Usage

The <fo:list-item-label> object contains the label for the list-item - typically an <fo:block> containing a number, character, etc..

There are four XSL-FO objects used to create lists:

· fo:list-block (contains the whole list)
· fo:list-item (contains each item in the list)
· fo:list-item-label (contains the label for the list-item - typically an <fo:block> containing a number, character, etc.)
· fo:list-item-body (contains the content/body of the list-item - typically one or more <fo:block> objects)

Syntax

<fo:list-item-label>

<!--

Contents:(block|block-container|

table-and-caption|table|list-block|

list-item)+

-->

</fo:list-item-label>

Properties

Property

id

keep-together

source-document

Example 1

An XSL-FO list example:

<fo:list-block>

<fo:list-item>

<fo:list-item-label>

 <fo:block>*</fo:block>

</fo:list-item-label>

<fo:list-item-body>

 <fo:block>Volvo</fo:block>

</fo:list-item-body>

</fo:list-item>

<fo:list-item>

<fo:list-item-label>

 <fo:block>*</fo:block>

</fo:list-item-label>

<fo:list-item-body>

 <fo:block>Saab</fo:block>

</fo:list-item-body>

</fo:list-item>

</fo:list-block>

The output from this code would be:

* Volvo

* Saab


XSL-FO list-item Object

Definition and Usage

There will be one <fo:list-item> object for each item in a list.

There are four XSL-FO objects used to create lists:

· fo:list-block (contains the whole list)
· fo:list-item (contains each item in the list)
· fo:list-item-label (contains the label for the list-item - typically an <fo:block> containing a number, character, etc.)
· fo:list-item-body (contains the content/body of the list-item - typically one or more <fo:block> objects)

Syntax

<fo:list-item>

<!--

Contents:(list-item-label,list-item-body)

-->

</fo:list-item>

Properties

Property [A-J] | Property [K-Z]
azimuth | keep-together
background-attachment | keep-with-next
background-color | keep-with-previous
background-image |
background-repeat | margin-bottom
background-position-horizontal | margin-left
background-position-vertical | margin-right
 | margin-top
border-after-style | padding-after
border-after-width | padding-before
border-before-color | padding-bottom
border-before-style | padding-end
 | padding-left
border-bottom-color | padding-right
border-bottom-style | padding-start
border-bottom-width | padding-top
 | pause-after
border-end-style | pause-before
border-end-width | pitch
border-left-color | pitch-range
border-left-style | play-during
 | relative-align
border-right-color | relative-position
 | richness
border-right-width |
border-start-color | role
border-start-style | source-document
border-start-width | space-after
border-top-color | space-before
border-top-style |
border-top-width | speak-header
bottom | speak-numeral
break-after | speak-punctuation
break-before |
cue-after |
cue-before |
elevation | top
end-indent | voice-family
id |
intrusion-displace |

Example 1

An XSL-FO list example:

<fo:list-block>

<fo:list-item>

<fo:list-item-label>

 <fo:block>*</fo:block>

</fo:list-item-label>

<fo:list-item-body>

 <fo:block>Volvo</fo:block>

</fo:list-item-body>

</fo:list-item>

<fo:list-item>

<fo:list-item-label>

 <fo:block>*</fo:block>

</fo:list-item-label>

<fo:list-item-body>

 <fo:block>Saab</fo:block>

</fo:list-item-body>

</fo:list-item>

</fo:list-block>

The output from this code would be:

* Volvo

* Saab


XSL-FO marker Object

Definition and Usage

The <fo:marker> object is used with <fo:retrieve-marker> to create running headers or footers (e.g. headers showing the page's chapter and section titles).

Note: An <fo:marker> object is only permitted as the descendant of an <fo:flow>.

Syntax

<fo:marker>

<!--

Contents:(#PCDATA|bidi-override|

character|external-graphic|

instream-foreign-object|inline|

inline-container|leader|page-number|

page-number-citation|basic-link|

multi-toggle|block|block-container|

table-and-caption|table|list-block)*

-->

</fo:marker>

Properties

Property

marker-class-name


XSL-FO multi-case Object

Definition and Usage

The <fo:multi-case> object contains (within an <fo:multi-switch>) each alternative sub-tree of XSL-FO objects. The parent <fo:multi-switch> will choose which alternative to show and hide the rest.

Syntax

<fo:multi-case>

<!--

Contents:(#PCDATA|bidi-override|character|

external-graphic|instream-foreign-object|

inline|inline-container|leader|page-number|

page-number-citation|basic-link|multi-toggle|

block|block-container|table-and-caption|

table|list-block)*

-->

</fo:multi-case>

Properties

Property

case-name

case-title

id

source-document

starting-state


XSL-FO multi-properties Object

Definition and Usage

The <fo:multi-properties> object is used to switch between two or more property-sets.

This object can be used to give a different layout to a portion of content. For example, when a link changes from unvisited to visited, the layout could change (this is done by changing the property-set). Note: Be careful in changing properties that causes reflowing of the text. Properties like "color" or "text-decoration" does not reflow the text.

Syntax

<fo:multi-properties>

<!--

Contents:(multi-property-set+,wrapper)

-->

</fo:multi-properties>

Properties

Property

id

role

source-document


XSL-FO multi-property-set Object

Definition and Usage

The <fo:multi-property-set> object specifies an alternative set of formatting properties to be used for an alternate presentation.

Syntax

<fo:multi-property-set>

<!--

Contents:EMPTY

-->

</fo:multi-property-set>

Properties

Property

active-state

id


XSL-FO multi-switch Object

Definition and Usage

The <fo:multi-switch> object holds one or more <fo:multi-case> objects and controls the switching between them (activated by <fo:multi-toggle>)

This object can be used for interactive tasks such as table-of-content views and next/previous views.

The children of this object are one or more <fo:multi-case> objects. However, only one <fo:multi-case> can be visible at a single time. Each <fo:multi-case> object may contain one or more <fo:multi-toggle> objects, which controls the <fo:multi-case> switching of the <fo:multi-switch>.

Syntax

<fo:multi-switch>

<!--

Contents:(multi-case+)

-->

</fo:multi-switch>

Properties

Property

auto-restore

id

role


XSL-FO multi-toggle Object Object

XSL-FO multi-toggle Object

Definition and Usage

The <fo:multi-toggle> object is used to create an area that when activated (e.g. clicked), switches from one <fo:multi-case> to another.

The "switch-to" property typically matches the "case-name" property of the <fo:multi-case> to switch to.

An <fo:multi-toggle> object must be a descendant of an <fo:multi-case> object.

Syntax

<fo:multi-toggle>

<!--

Contents:(#PCDATA|bidi-override|character|

external-graphic|instream-foreign-object|

inline|inline-container|leader|page-number|

page-number-citation|basic-link|multi-toggle|

block|block-container|table-and-caption|

table|list-block)*

-->

</fo:multi-toggle>

Properties

Property

id

source-document

switch-to


XSL-FO page-number-citation Object

Definition and Usage

The <fo:page-number-citation> object references the page-number for the page that contains the first normal area returned by the cited object.

The cited page-number is the number of the page containing, as a descendant, the first normal area returned with an id matching the ref-id of the <fo:page-number-citation>.

This object can be used to provide the page-numbers in the table of contents, cross-references, and indexes.

Syntax

<fo:page-number-citation>

<!--

Contents:EMPTY

-->

</fo:page-number-citation>

Properties

Property [A-J] | Property [K-Z]
azimuth | keep-with-next
alignment-adjust | keep-with-previous
alignment-baseline | left
background-attachment | letter-spacing
background-color | line-height
 | margin-bottom
background-repeat |
background-position-horizontal | margin-right
background-position-vertical | margin-top
baseline-shift | padding-after
border-after-color | padding-before
border-after-style | padding-bottom
border-after-width |
border-before-color |
border-before-style |
border-before-width | padding-start
border-bottom-color | padding-top
border-bottom-style | pause-after
border-bottom-width |
border-end-color | pitch
border-end-style | pitch-range
border-end-width | play-during
border-left-color | ref-id
border-left-style | relative-position
border-left-width | richness
border-right-color |
 | role
border-right-width | score-spaces
border-start-color | source-document
border-start-style | space-end
 | space-start
border-top-color | speak
border-top-style | speak-header
border-top-width | speak-numeral
bottom | speak-punctuation
cue-after |
cue-before |
dominant-baseline | text-altitude
elevation | text-decoration
font-family | text-depth
font-selection-strategy | text-shadow
font-size | text-transform
font-size-adjust | top
font-stretch | visibility
font-style | voice-family
font-variant | volume
font-weight | word-spacing
id | wrap-option


XSL-FO page-number Object

Definition and Usage

The <fo:page-number> object is used to represent the current page-number.

Syntax

<fo:page-number>

<!--

Contents:EMPTY

-->

</fo:page-number>

Properties

Property [A-J] | Property [K-Z]
azimuth | keep-with-next
alignment-adjust | keep-with-previous
alignment-baseline | left
background-attachment |
background-color | line-height
background-image | margin-bottom
background-repeat | margin-left
background-position-horizontal | margin-right
background-position-vertical | margin-top
baseline-shift | padding-after
 | padding-before
border-after-style | padding-bottom
 | padding-end
 | padding-left
 | padding-right
 | padding-start
 | padding-top
border-bottom-style | pause-after
border-bottom-width | pause-before
border-end-color | pitch
border-end-style | pitch-range
border-end-width | play-during
border-left-color |
border-left-style |
border-left-width | right
border-right-style | score-spaces
border-right-width | source-document
border-start-color | space-end
border-start-style | space-start
border-start-width | speak
border-top-color | speak-header
border-top-style | speak-numeral
border-top-width |
bottom | speech-rate
cue-after | stress
cue-before | text-altitude
dominant-baseline | text-decoration
elevation | text-depth
font-family | text-shadow
font-selection-strategy | text-transform
font-size | top
font-size-adjust |
font-stretch |
font-style | volume
font-variant | word-spacing
font-weight | wrap-option
id |


XSL-FO page-sequence-master Object

Definition and Usage

The <fo:page-sequence-master> object specifies which simple-page-masters are to be used and in which order.

Syntax

<fo:page-sequence-master>

<!--

Contents:(single-page-master-reference|

repeatable-page-master-reference|

repeatable-page-master-alternatives)+

-->

</fo:page-sequence-master>

Properties

Property

master-name


XSL-FO page-sequence Object

Definition and Usage

The <fo:page-sequence> object is used as a container for page output elements.

There will be one <fo:page-sequence> object for each page layout. The children of the <fo:page-sequence> provide the content of the pages.

Each fo:page-sequence object references either an <fo:page-sequence-master> or a <fo:simple-page-master>.

Syntax

<fo:page-sequence>

<!--

Contents:title?,static-content*,flow

-->

</fo:page-sequence>

Properties

Property

country

force-page-count

format

grouping-separator

grouping-size

id

initial-page-number

language

letter-value

Example 1

XSL-FO documents have a structure like this:

<?xml version="1.0" encoding="ISO-8859-1"?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">

<fo:layout-master-set>

<fo:simple-page-master master-name="A4">

  <!-- Page template goes here -->

</fo:simple-page-master>

</fo:layout-master-set>

<fo:page-sequence master-reference="A4">

<!-- Page content goes here -->

</fo:page-sequence>

</fo:root>

Example 2

A "real" XSL-FO example:

<?xml version="1.0" encoding="ISO-8859-1"?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">

<fo:layout-master-set>

<fo:simple-page-master master-name="A4">

</fo:simple-page-master>

</fo:layout-master-set>

<fo:page-sequence master-reference="A4">

<fo:flow flow-name="xsl-region-body">

<fo:block>Hello W3Schools</fo:block>

</fo:flow>

</fo:page-sequence>

</fo:root>

The output from the code above would be something like this:

Hello W3Schools


XSL-FO region-after Object

Definition and Usage

The <fo:region-after> object defines the bottom region of a page (footer).

XSL-FO uses the following elements to define the regions of a page:

· <fo:region-body> defines the body region
· <fo:region-before> defines the top region (header)
· <fo:region-after> defines the bottom region (footer)
· <fo:region-start> defines the left region (left sidebar)
· <fo:region-end> defines the right region (right sidebar)

Note: region-before, region-after, region-start, and region-end is a part of the region-body. To avoid text in the region-body to overwrite text in the other regions, the region-body must have margins at least the size of these regions.

Note: According to version 1.0 of the XSL-FO Recommendation, the padding and border-width properties must be 0.

Syntax

<fo:region-after>

<!--

Contents:EMPTY

-->

</fo:region-after>

Properties

Property [A-B] | Property [C-Z]
 | clip
background-color | display-align
background-image | extent
background-repeat | overflow
background-position-horizontal | padding-after
background-position-vertical |
border-after-color | padding-bottom
border-after-style |
 | padding-left
border-before-color | padding-right
border-before-style |
border-before-width | padding-top
border-bottom-color | precedence
 | region-name
border-bottom-width | reference-orientation
 | writing-mode
border-end-style |
border-end-width |
border-left-color |
border-left-style |
border-right-color |
border-right-style |
border-right-width |
border-start-color |
border-start-style |
border-start-width |
border-top-color |
border-top-style |
border-top-width |

Example 1

XSL-FO uses page templates called "Page Masters" to define the layout of pages. Each template must have a unique name:

<fo:simple-page-master master-name="intro">

<fo:region-body margin="5in" />

</fo:simple-page-master>

<fo:simple-page-master master-name="left">

<fo:region-body margin-left="2in" margin-right="3in" />

</fo:simple-page-master>

<fo:simple-page-master master-name="right">

<fo:region-body margin-left="3in" margin-right="2in" />

</fo:simple-page-master>

In the example above, three <fo:simple-page-master> elements, define three different templates. Each template (page-master) has a different name.

The first template is called "intro". It could be used as a template for introduction pages.

The second and third templates are called "left" and "right". They could be used as templates for even and odd page numbers.

Example 2

This is an extract from an XSL-FO document:

<fo:simple-page-master master-name="A4"

page-width="297mm" page-height="210mm"

margin-top="1cm"  margin-bottom="1cm"

margin-left="1cm" margin-right="1cm">

<fo:region-body   margin="3cm"/>

<fo:region-before extent="2cm"/>

<fo:region-after  extent="2cm"/>

<fo:region-start  extent="2cm"/>

<fo:region-end    extent="2cm"/>

</fo:simple-page-master>

The code above defines a "Simple Page Master Template" with the name "A4".

The width of the page is 297 millimeters and the height is 210 millimeters.

The top, bottom, left, and right margins of the page are all 1 centimeter.

The body has a 3 centimeter margin (on all sides).

The before, after, start, and end regions (of the body) are all 2 centimeters.

The width of the body in the example above can be calculated by subtracting the left and right margins and the region-body margins from the width of the page itself:

297mm - (2 x 1cm) - (2 x 3cm) = 297mm - 20mm - 60mm = 217mm.

Note that the regions (region-start and region-end) are not a part of the calculation. As described earlier, these regions are parts of the body.


XSL-FO region-before Object

Definition and Usage

The <fo:region-before> object defines the top region of a page (header).

XSL-FO uses the following elements to define the regions of a page:

· <fo:region-body> defines the body region
· <fo:region-before> defines the top region (header)
· <fo:region-after> defines the bottom region (footer)
· <fo:region-start> defines the left region (left sidebar)
· <fo:region-end> defines the right region (right sidebar)

Note: region-before, region-after, region-start, and region-end is a part of the region-body. To avoid text in the region-body to overwrite text in the other regions, the region-body must have margins at least the size of these regions.

Note: According to version 1.0 of the XSL-FO Recommendation, the padding and border-width properties must be 0.

Syntax

<fo:region-before>

<!--

Contents:EMPTY

-->

</fo:region-before>

Properties

Property [A-B] | Property [C-Z]
background-attachment | clip
background-color | display-align
background-image | extent
background-repeat | overflow
background-position-horizontal | padding-after
background-position-vertical | padding-before
border-after-color | padding-bottom
border-after-style | padding-end
border-after-width |
border-before-color | padding-right
border-before-style | padding-start
border-before-width | padding-top
border-bottom-color | precedence
border-bottom-style | region-name
border-bottom-width | reference-orientation
border-end-color | writing-mode
border-end-style |
border-end-width |
border-left-color |
border-left-style |
border-left-width |
border-right-color |
border-right-width |
border-start-color |
border-start-style |
border-start-width |
border-top-color |
border-top-style |
border-top-width |

Example 1

XSL-FO uses page templates called "Page Masters" to define the layout of pages. Each template must have a unique name:

<fo:simple-page-master master-name="intro">

<fo:region-body margin="5in" />

</fo:simple-page-master>

<fo:simple-page-master master-name="left">

<fo:region-body margin-left="2in" margin-right="3in" />

</fo:simple-page-master>

<fo:simple-page-master master-name="right">

<fo:region-body margin-left="3in" margin-right="2in" />

</fo:simple-page-master>

In the example above, three <fo:simple-page-master> elements, define three different templates. Each template (page-master) has a different name.

The first template is called "intro". It could be used as a template for introduction pages.

The second and third templates are called "left" and "right". They could be used as templates for even and odd page numbers.

Example 2

This is an extract from an XSL-FO document:

<fo:simple-page-master master-name="A4"

page-width="297mm" page-height="210mm"

margin-top="1cm"  margin-bottom="1cm"

margin-left="1cm" margin-right="1cm">

<fo:region-body   margin="3cm"/>

<fo:region-before extent="2cm"/>

<fo:region-after  extent="2cm"/>

<fo:region-start  extent="2cm"/>

<fo:region-end    extent="2cm"/>

</fo:simple-page-master>

The code above defines a "Simple Page Master Template" with the name "A4".

The width of the page is 297 millimeters and the height is 210 millimeters.

The top, bottom, left, and right margins of the page are all 1 centimeter.

The body has a 3 centimeter margin (on all sides).

The before, after, start, and end regions (of the body) are all 2 centimeters.

The width of the body in the example above can be calculated by subtracting the left and right margins and the region-body margins from the width of the page itself:

297mm - (2 x 1cm) - (2 x 3cm) = 297mm - 20mm - 60mm = 217mm.

Note that the regions (region-start and region-end) are not a part of the calculation. As described earlier, these regions are parts of the body.


XSL-FO region-body Object

Definition and Usage

The <fo:region-body> object defines the body region of a page.

XSL-FO uses the following elements to define the regions of a page:

· <fo:region-body> defines the body region
· <fo:region-before> defines the top region (header)
· <fo:region-after> defines the bottom region (footer)
· <fo:region-start> defines the left region (left sidebar)
· <fo:region-end> defines the right region (right sidebar)

Note: region-before, region-after, region-start, and region-end is a part of the region-body. To avoid text in the region-body to overwrite text in the other regions, the region-body must have margins at least the size of these regions.

Tip: To provide multiple columns in the region-body set the column-count property to greater than 1!

Note: If the overflow property has the value of "scroll", you cannot specify a column-count other than 1!

Note: According to version 1.0 of the XSL-FO Recommendation, the padding and border-width properties must be 0.

Syntax

<fo:region-body>

<!--

Contents:EMPTY

-->

</fo:region-body>

Properties

Property [A-B] | Property [C-Z]
background-attachment | clip
background-color | column-count
background-image | column-gap
background-repeat | display-align
background-position-horizontal |
background-position-vertical | margin-bottom
border-after-color | margin-left
border-after-width |
 | overflow
border-before-style |
border-before-width | padding-before
border-bottom-color | padding-bottom
border-bottom-style | padding-end
border-bottom-width | padding-left
border-end-color | padding-right
 | padding-start
border-end-width | padding-top
border-left-color | region-name
 | reference-orientation
border-left-width | space-after
border-right-color |
border-right-style | writing-mode
border-right-width |
border-start-color |
border-start-style |
border-top-color |
border-top-style |

Example 1

XSL-FO uses page templates called "Page Masters" to define the layout of pages. Each template must have a unique name:

<fo:simple-page-master master-name="intro">

<fo:region-body margin="5in" />

</fo:simple-page-master>

<fo:simple-page-master master-name="left">

<fo:region-body margin-left="2in" margin-right="3in" />

</fo:simple-page-master>

<fo:simple-page-master master-name="right">

<fo:region-body margin-left="3in" margin-right="2in" />

</fo:simple-page-master>

In the example above, three <fo:simple-page-master> elements, define three different templates. Each template (page-master) has a different name.

The first template is called "intro". It could be used as a template for introduction pages.

The second and third templates are called "left" and "right". They could be used as templates for even and odd page numbers.

Example 2

This is an extract from an XSL-FO document:

<fo:simple-page-master master-name="A4"

page-width="297mm" page-height="210mm"

margin-top="1cm"  margin-bottom="1cm"

margin-left="1cm" margin-right="1cm">

<fo:region-body   margin="3cm"/>

<fo:region-before extent="2cm"/>

<fo:region-after  extent="2cm"/>

<fo:region-start  extent="2cm"/>

<fo:region-end    extent="2cm"/>

</fo:simple-page-master>

The code above defines a "Simple Page Master Template" with the name "A4".

The width of the page is 297 millimeters and the height is 210 millimeters.

The top, bottom, left, and right margins of the page are all 1 centimeter.

The body has a 3 centimeter margin (on all sides).

The before, after, start, and end regions (of the body) are all 2 centimeters.

The width of the body in the example above can be calculated by subtracting the left and right margins and the region-body margins from the width of the page itself:

297mm - (2 x 1cm) - (2 x 3cm) = 297mm - 20mm - 60mm = 217mm.

Note that the regions (region-start and region-end) are not a part of the calculation. As described earlier, these regions are parts of the body.


XSL-FO region-end Object

Definition and Usage

The <fo:region-end> object defines the right region of a page (right sidebar).

XSL-FO uses the following elements to define the regions of a page:

· <fo:region-body> defines the body region
· <fo:region-before> defines the top region (header)
· <fo:region-after> defines the bottom region (footer)
· <fo:region-start> defines the left region (left sidebar)
· <fo:region-end> defines the right region (right sidebar)

Note: region-before, region-after, region-start, and region-end is a part of the region-body. To avoid text in the region-body to overwrite text in the other regions, the region-body must have margins at least the size of these regions.

Note: According to version 1.0 of the XSL-FO Recommendation, the padding and border-width properties must be 0.

Syntax

<fo:region-end>

<!--

Contents:EMPTY

-->

</fo:region-end>

Properties

Property [A-B] | Property [C-Z]
background-attachment | clip
background-color | display-align
 | extent
background-repeat | overflow
background-position-horizontal | padding-after
background-position-vertical | padding-before
border-after-color | padding-bottom
border-after-style | padding-end
border-after-width |
border-before-color | padding-right
border-before-style | padding-start
border-bottom-color | region-name
border-bottom-style | reference-orientation
border-bottom-width | writing-mode
border-end-color |
border-end-width |
border-left-color |
border-left-style |
border-left-width |
border-right-color |
border-right-style |
border-right-width |
border-start-color |
border-start-style |
border-start-width |
border-top-color |
border-top-style |
border-top-width |

Example 1

XSL-FO uses page templates called "Page Masters" to define the layout of pages. Each template must have a unique name:

<fo:simple-page-master master-name="intro">

<fo:region-body margin="5in" />

</fo:simple-page-master>

<fo:simple-page-master master-name="left">

<fo:region-body margin-left="2in" margin-right="3in" />

</fo:simple-page-master>

<fo:simple-page-master master-name="right">

<fo:region-body margin-left="3in" margin-right="2in" />

</fo:simple-page-master>

In the example above, three <fo:simple-page-master> elements, define three different templates. Each template (page-master) has a different name.

The first template is called "intro". It could be used as a template for introduction pages.

The second and third templates are called "left" and "right". They could be used as templates for even and odd page numbers.

Example 2

This is an extract from an XSL-FO document:

<fo:simple-page-master master-name="A4"

page-width="297mm" page-height="210mm"

margin-top="1cm"  margin-bottom="1cm"

margin-left="1cm" margin-right="1cm">

<fo:region-body   margin="3cm"/>

<fo:region-before extent="2cm"/>

<fo:region-after  extent="2cm"/>

<fo:region-start  extent="2cm"/>

<fo:region-end    extent="2cm"/>

</fo:simple-page-master>

The code above defines a "Simple Page Master Template" with the name "A4".

The width of the page is 297 millimeters and the height is 210 millimeters.

The top, bottom, left, and right margins of the page are all 1 centimeter.

The body has a 3 centimeter margin (on all sides).

The before, after, start, and end regions (of the body) are all 2 centimeters.

The width of the body in the example above can be calculated by subtracting the left and right margins and the region-body margins from the width of the page itself:

297mm - (2 x 1cm) - (2 x 3cm) = 297mm - 20mm - 60mm = 217mm.

Note that the regions (region-start and region-end) are not a part of the calculation. As described earlier, these regions are parts of the body.


XSL-FO region-start Object

Definition and Usage

The <fo:region-start> object defines the left region of a page (left sidebar).

XSL-FO uses the following elements to define the regions of a page:

· <fo:region-body> defines the body region
· <fo:region-before> defines the top region (header)
· <fo:region-after> defines the bottom region (footer)
· <fo:region-start> defines the left region (left sidebar)
· <fo:region-end> defines the right region (right sidebar)

Note: region-before, region-after, region-start, and region-end is a part of the region-body. To avoid text in the region-body to overwrite text in the other regions, the region-body must have margins at least the size of these regions.

Note: According to version 1.0 of the XSL-FO Recommendation, the padding and border-width properties must be 0.

Syntax

<fo:region-start>

<!--

Contents:EMPTY

-->

</fo:region-start>

Properties

Property [A-B] | Property [C-Z]
background-attachment | clip
 | display-align
background-image | extent
 | overflow
background-position-horizontal | padding-after
background-position-vertical | padding-before
border-after-style | padding-end
border-after-width |
border-before-color | padding-right
border-before-style | padding-start
border-before-width | padding-top
border-bottom-color | region-name
border-bottom-style | reference-orientation
border-bottom-width | writing-mode
border-end-color |
border-left-color |
border-left-style |
border-left-width |
border-right-color |
border-right-style |
border-right-width |
border-start-style |
border-start-width |
border-top-color |
border-top-style |

Example 1

XSL-FO uses page templates called "Page Masters" to define the layout of pages. Each template must have a unique name:

<fo:simple-page-master master-name="intro">

<fo:region-body margin="5in" />

</fo:simple-page-master>

<fo:simple-page-master master-name="left">

<fo:region-body margin-left="2in" margin-right="3in" />

</fo:simple-page-master>

<fo:simple-page-master master-name="right">

<fo:region-body margin-left="3in" margin-right="2in" />

</fo:simple-page-master>

In the example above, three <fo:simple-page-master> elements, define three different templates. Each template (page-master) has a different name.

The first template is called "intro". It could be used as a template for introduction pages.

The second and third templates are called "left" and "right". They could be used as templates for even and odd page numbers.

Example 2

This is an extract from an XSL-FO document:

<fo:simple-page-master master-name="A4"

page-width="297mm" page-height="210mm"

margin-top="1cm"  margin-bottom="1cm"

margin-left="1cm" margin-right="1cm">

<fo:region-body   margin="3cm"/>

<fo:region-before extent="2cm"/>

<fo:region-after  extent="2cm"/>

<fo:region-start  extent="2cm"/>

<fo:region-end    extent="2cm"/>

</fo:simple-page-master>

The code above defines a "Simple Page Master Template" with the name "A4".

The width of the page is 297 millimeters and the height is 210 millimeters.

The top, bottom, left, and right margins of the page are all 1 centimeter.

The body has a 3 centimeter margin (on all sides).

The before, after, start, and end regions (of the body) are all 2 centimeters.

The width of the body in the example above can be calculated by subtracting the left and right margins and the region-body margins from the width of the page itself:

297mm - (2 x 1cm) - (2 x 3cm) = 297mm - 20mm - 60mm = 217mm.

Note that the regions (region-start and region-end) are not a part of the calculation. As described earlier, these regions are parts of the body.


XSL-FO repeatable-page-master-alternatives Object

Definition and Usage

The <fo:repeatable-page-master-alternatives> object specifies repetition of a set of simple-page-masters.

The children of this object are fo:conditional-page-master-references (called alternatives).

Which alternative should be used depends on the evaluation of the condition (the conditions allow different page-masters to be used for the first page, for odd and even pages, and for blank pages).

The conditions are tested in order, and the last alternative should reference the page-master to be used for all pages without a special layout.

Syntax

<fo:repeatable-page-master-alternatives>

<!--

Contents:(conditional-page-master-reference+)

-->

</fo:repeatable-page-master-alternatives>

Properties

Property

maximum-repeats


XSL-FO repeatable-page-master-reference Object

Definition and Usage

The <fo:repeatable-page-master-reference> object specifies repetition of a single simple-page-master.

Syntax

<fo:repeatable-page-master-reference>

<!--

Contents:EMPTY

-->

</fo:repeatable-page-master-reference>

Properties

Property

maximum-repeats


XSL-FO retrieve-marker Object

Definition and Usage

The <fo:retrieve-marker> object is used with <fo:marker> to create running headers or footers (e.g. headers showing the page's chapter and section titles).

Note: An <fo:retrieve-marker> object is only permitted as the descendant of an <fo:static-content>.

Syntax

<fo:retrieve-marker>

<!--

Contents:EMPTY

-->

</fo:retrieve-marker>

Properties

Property

retrieve-boundary

retrieve-class-name

retrieve-position


XSL-FO root Object

Definition and Usage

The <fo:root> object is the root (top) node for XSL-FO documents.

The children of the <fo:root> object are a single <fo:layout-master-set> object (which holds all masters used in the document), an optional <fo:declarations> object, and one or more <fo:page-sequence> objects.

Note: An XSL-FO document can contain multiple <fo:page-sequences> (e.g. each chapter of a document could be a separate <fo:page-sequence> - this would allow chapter-specific content, such as the chapter title, to be placed within the header or footer).

Syntax

<fo:root>

<!--

Children:layout-master-set,declarations?,

page-sequence+

-->

</fo:root>

Properties

Property

Example 1

XSL-FO documents have a structure like this:

<?xml version="1.0" encoding="ISO-8859-1"?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">

<fo:layout-master-set>

<fo:simple-page-master master-name="A4">

  <!-- Page template goes here -->

</fo:simple-page-master>

</fo:layout-master-set>

<fo:page-sequence master-reference="A4">

<!-- Page content goes here -->

</fo:page-sequence>

</fo:root>


XSL-FO simple-page-master Object

Definition and Usage

The <fo:simple-page-master> object defines the size and shape of a page. There will be one named simple-page-master for each page layout.

A page can contain up to five regions: region-body, region-before, region-after, region-start, and region-end.

The <fo:simple-page-master> will be referenced from a <fo:page-sequence-master> object or from a <fo:page-sequence> object.

Syntax

<fo:simple-page-master>

<!--

Contents:(region-body,region-before?,

region-after?,region-start?,region-end?)

-->

</fo:simple-page-master>

Properties

Property

end-indent

margin-bottom

margin-left

margin-right

margin-top

master-name

page-width

reference-orientation

space-after

space-before

start-indent

writing-mode

Example 1

XSL-FO documents have a structure like this:

<?xml version="1.0" encoding="ISO-8859-1"?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">

<fo:layout-master-set>

<fo:simple-page-master master-name="A4">

  <!-- Page template goes here -->

</fo:simple-page-master>

</fo:layout-master-set>

<fo:page-sequence master-reference="A4">

<!-- Page content goes here -->

</fo:page-sequence>

</fo:root>

Example 2

A "real" XSL-FO example:

<?xml version="1.0" encoding="ISO-8859-1"?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">

<fo:layout-master-set>

<fo:simple-page-master master-name="A4">

</fo:simple-page-master>

</fo:layout-master-set>

<fo:page-sequence master-reference="A4">

<fo:flow flow-name="xsl-region-body">

<fo:block>Hello W3Schools</fo:block>

</fo:flow>

</fo:page-sequence>

</fo:root>

The output from the code above would be something like this:

Hello W3Schools


XSL-FO single-page-master-reference Object

Definition and Usage

The <fo:single-page-master-reference> object holds a reference to a particular page-master to be used at a given point in the sequence of pages.

Note: <fo:page-sequence-master> is the parent of <fo:single-page-master-reference>.

Syntax

<fo:single-page-master-reference>

<!--

Contents:EMPTY

-->

</fo:single-page-master-reference>

Properties

Property

master-reference


XSL-FO static-content Object

Definition and Usage

The <fo:static-content> object contains static content (e.g. headers and footers) that will be repeated on many pages.

The <fo:static-content> object has a "flow-name" property that defines where the content of the <fo:static-content> object will go.

Syntax

<fo:static-content>

<!--

Contents:(block|block-container|

table-and-caption|table|

list-block)+

-->

</fo:static-content>

Properties

Property


XSL-FO table-and-caption Object

Definition and Usage

There are nine XSL-FO objects used to create tables:

· fo:table-and-caption
· fo:table
· fo:table-caption
· fo:table-column
· fo:table-header
· fo:table-footer
· fo:table-body
· fo:table-row
· fo:table-cell

The <fo:table-and-caption> object is a container for all table objects and it is used to format the table and its caption.

The <fo:table-and-caption> object contains a <fo:table> and an optional <fo:caption> object.

Syntax

<fo:table-and-caption>

<!--

Contents:(table-caption?,table)

-->

</fo:table-and-caption>

Properties

Property [A-J] | Property [K-Z]
azimuth | keep-together
background-attachment |
background-color |
background-repeat | margin-bottom
background-position-horizontal | margin-left
background-position-vertical | margin-right
border-after-color | margin-top
 | padding-after
border-after-width | padding-before
border-before-color | padding-bottom
border-before-style | padding-end
border-before-width | padding-left
border-bottom-color | padding-right
border-bottom-style | padding-start
 | padding-top
border-end-color | pause-after
border-end-style | pause-before
 | pitch
border-left-color |
 | play-during
border-left-width | relative-position
border-right-color | richness
 | right
border-right-width | role
border-start-color | source-document
border-start-style | space-after
border-start-width | space-before
border-top-color | speak
border-top-style | speak-header
border-top-width | speak-numeral
bottom | speak-punctuation
break-after | speech-rate
break-before | start-indent
caption-side | stress
 | text-align
 | top
 | voice-family
end-indent | volume
id |
intrusion-displace |

Example 1

A simple table:

<fo:table-and-caption>

<fo:table>

<fo:table-column column-width="25mm"/>

<fo:table-column column-width="25mm"/>

<fo:table-header>

<fo:table-cell>

  <fo:block font-weight="bold">Car</fo:block>

</fo:table-cell>

<fo:table-cell>

  <fo:block font-weight="bold">Price</fo:block>

</fo:table-cell>

</fo:table-header>

<fo:table-body>

<fo:table-row>

  <fo:table-cell>

    <fo:block>Volvo</fo:block>

  </fo:table-cell>

  <fo:table-cell>

    <fo:block>$50000</fo:block>

  </fo:table-cell>

</fo:table-row>

<fo:table-row>

  <fo:table-cell>

    <fo:block>SAAB</fo:block>

  </fo:table-cell>

  <fo:table-cell>

    <fo:block>$48000</fo:block>

  </fo:table-cell>

</fo:table-row>

</fo:table-body>

</fo:table>

</fo:table-and-caption>

The output from this code would something like this:

Car | Price
Volvo | $50000
SAAB | $48000


XSL-FO table-body Object

Definition and Usage

The <fo:table-body> object is a container for the table rows and table cells of the table.

Syntax

<fo:table-body>

<!--

Contents:(table-row+|table-cell+)

-->

</fo:table-body>

Properties

Note: The border properties can only be used if the value of border-collapse is "collapse" or "collapse-with-precedence" for the table.

Property [A-B] | Property [C-Z]
azimuth | cue-after
background-attachment |
background-color | elevation
background-image | id
background-repeat |
background-position-horizontal | pause-after
background-position-vertical | pause-before
border-after-color |
border-after-precedence | pitch-range
border-after-style |
border-after-width |
 | richness
border-before-precedence | role
border-before-style | right
border-before-width | source-document
border-bottom-color | speak
border-bottom-style | speak-header
border-bottom-width | speak-numeral
border-collapse | speak-punctuation
border-end-color | speech-rate
border-end-precedence |
 | top
border-end-width | visibility
border-left-color | voice-family
border-left-style | volume
border-left-width |
border-right-width |
border-separation |
border-start-color |
border-start-precedence |
border-start-style |
border-start-width |
bottom |

Example 1

A simple table:

<fo:table-and-caption>

<fo:table>

<fo:table-column column-width="25mm"/>

<fo:table-column column-width="25mm"/>

<fo:table-header>

<fo:table-cell>

  <fo:block font-weight="bold">Car</fo:block>

</fo:table-cell>

<fo:table-cell>

  <fo:block font-weight="bold">Price</fo:block>

</fo:table-cell>

</fo:table-header>

<fo:table-body>

<fo:table-row>

  <fo:table-cell>

    <fo:block>Volvo</fo:block>

  </fo:table-cell>

  <fo:table-cell>

    <fo:block>$50000</fo:block>

  </fo:table-cell>

</fo:table-row>

<fo:table-row>

  <fo:table-cell>

    <fo:block>SAAB</fo:block>

  </fo:table-cell>

  <fo:table-cell>

    <fo:block>$48000</fo:block>

  </fo:table-cell>

</fo:table-row>

</fo:table-body>

</fo:table>

</fo:table-and-caption>

The output from this code would something like this:

Car | Price
Volvo | $50000
SAAB | $48000


XSL-FO table-caption Object

Definition and Usage

The <fo:table-caption> object contains the caption for the table when using the <fo:table-and-caption> object.

Syntax

<fo:table-caption>

<!--

Contents:(block|block-container|

list-block)+

-->

</fo:table-caption>

Properties

Property [A-J] | Property [K-Z]
background-attachment | left
background-color | padding-after
background-image | padding-before
 | padding-bottom
background-position-horizontal | padding-end
background-position-vertical | padding-left
block-progression-dimension | padding-right
border-after-color | padding-start
border-after-style | padding-top
border-after-width |
border-before-color |
border-before-style | pitch
border-before-width | pitch-range
border-bottom-color | play-during
border-bottom-width |
border-end-color | right
border-end-style | role
border-end-width | source-document
border-left-color |
border-left-style | speak-header
border-left-width | speak-numeral
 | speak-punctuation
border-right-style | speech-rate
border-right-width | stress
 | top
border-start-style | voice-family
 | volume
border-top-style |
border-top-width |
bottom |
cue-after |
elevation |
height |
id |
inline-progression-dimension |
intrusion-displace |

Example 1

A simple table:

<fo:table-and-caption>

<fo:table-caption>

<fo:block>Caption for this table</fo:block>

</fo:table-caption>

<fo:table>

<fo:table-column column-width="25mm"/>

<fo:table-column column-width="25mm"/>

<fo:table-header>

<fo:table-cell>

  <fo:block font-weight="bold">Car</fo:block>

</fo:table-cell>

<fo:table-cell>

  <fo:block font-weight="bold">Price</fo:block>

</fo:table-cell>

</fo:table-header>

<fo:table-body>

<fo:table-row>

  <fo:table-cell>

    <fo:block>Volvo</fo:block>

  </fo:table-cell>

  <fo:table-cell>

    <fo:block>$50000</fo:block>

  </fo:table-cell>

</fo:table-row>

<fo:table-row>

  <fo:table-cell>

    <fo:block>SAAB</fo:block>

  </fo:table-cell>

  <fo:table-cell>

    <fo:block>$48000</fo:block>

  </fo:table-cell>

</fo:table-row>

</fo:table-body>

</fo:table>

</fo:table-and-caption>

The output from this code would something like this:

Caption for this table

Car | Price
Volvo | $50000
SAAB | $48000


XSL-FO table-cell Object

Definition and Usage

The <fo:table-cell> object is a container for the content in a table cell.

Syntax

<fo:table-cell>

<!--

Contents:(block|block-container|

table-and-caption|table|list-block)+

-->

</fo:table-cell>

Properties

Property [A-C] | Property [D-Z]
azimuth | display-align
background-attachment | elevation
background-color | empty-cells
background-image | ends-row
background-repeat | height
background-position-horizontal | id
background-position-vertical | inline-progression-dimension
block-progression-dimension |
border-after-color | number-columns-spanned
border-after-precedence | number-rows-spanned
border-after-style | padding-after
 | padding-before
border-before-color |
border-before-precedence | padding-end
border-before-style | padding-left
 | padding-right
border-bottom-color | padding-start
border-bottom-style | padding-top
border-bottom-width |
border-end-color | pause-before
border-end-precedence | pitch
border-end-style | pitch-range
border-end-width | play-during
 | relative align
border-left-style | relative-position
border-left-width | richness
 | right
border-right-style | role
border-right-width | source-document
border-start-color | speak
border-start-precedence |
border-start-style | speak-numeral
 | speak-punctuation
border-top-color | speech-rate
 | starts-row
border-top-width | stress
 | top
column-number | voice-family
cue-after | volume
cue-before | width

Example 1

A simple table:

<fo:table-and-caption>

<fo:table>

<fo:table-column column-width="25mm"/>

<fo:table-column column-width="25mm"/>

<fo:table-header>

<fo:table-cell>

  <fo:block font-weight="bold">Car</fo:block>

</fo:table-cell>

<fo:table-cell>

  <fo:block font-weight="bold">Price</fo:block>

</fo:table-cell>

</fo:table-header>

<fo:table-body>

<fo:table-row>

  <fo:table-cell>

    <fo:block>Volvo</fo:block>

  </fo:table-cell>

  <fo:table-cell>

    <fo:block>$50000</fo:block>

  </fo:table-cell>

</fo:table-row>

<fo:table-row>

  <fo:table-cell>

    <fo:block>SAAB</fo:block>

  </fo:table-cell>

  <fo:table-cell>

    <fo:block>$48000</fo:block>

  </fo:table-cell>

</fo:table-row>

</fo:table-body>

</fo:table>

</fo:table-and-caption>

The output from this code would something like this:

Car | Price
Volvo | $50000
SAAB | $48000


XSL-FO table-column Object

Definition and Usage

The <fo:table-column> object is used to specify the characteristics of table cells that are in the same column.

The most important property for this object is "column-width".

Syntax

<fo:table-column>

<!--

Contents:EMPTY

-->

</fo:table-column>

Properties

Note: The border properties can only be used if the value of border-collapse is "collapse" or "collapse-with-precedence" for the table.

Property

background-attachment

background-color

background-image

background-position-horizontal

background-position-vertical

border-after-color

border-after-precedence

border-after-width

border-before-color

border-before-precedence

border-before-style

border-before-width

border-bottom-color

border-bottom-style

border-bottom-width

border-collapse

border-end-color

border-end-precedence

border-end-style

border-left-color

border-left-style

border-right-color

border-right-style

border-right-width

border-separation

border-start-color

border-start-precedence

border-start-style

border-start-width

border-top-color

border-top-style

column-number

column-width

number-columns-repeated

number-columns-spanned

visibility

Example 1

A simple table:

<fo:table-and-caption>

<fo:table>

<fo:table-column column-width="25mm"/>

<fo:table-column column-width="25mm"/>

<fo:table-header>

<fo:table-cell>

  <fo:block font-weight="bold">Car</fo:block>

</fo:table-cell>

<fo:table-cell>

  <fo:block font-weight="bold">Price</fo:block>

</fo:table-cell>

</fo:table-header>

<fo:table-body>

<fo:table-row>

  <fo:table-cell>

    <fo:block>Volvo</fo:block>

  </fo:table-cell>

  <fo:table-cell>

    <fo:block>$50000</fo:block>

  </fo:table-cell>

</fo:table-row>

<fo:table-row>

  <fo:table-cell>

    <fo:block>SAAB</fo:block>

  </fo:table-cell>

  <fo:table-cell>

    <fo:block>$48000</fo:block>

  </fo:table-cell>

</fo:table-row>

</fo:table-body>

</fo:table>

</fo:table-and-caption>

The output from this code would something like this:

Car | Price
Volvo | $50000
SAAB | $48000


XSL-FO table-footer Object

Definition and Usage

The <fo:table-footer> object contains the content of the table footer.

Syntax

<fo:table-footer>

<!--

Contents:(table-row+|table-cell+)

-->

</fo:table-footer>

Properties

Note: The border properties can only be used if the value of border-collapse is "collapse" or "collapse-with-precedence" for the table.

Property [A-B] | Property [C-Z]
azimuth | cue-after
background-attachment | cue-before
background-color | elevation
background-repeat | left
background-position-horizontal | pause-after
background-position-vertical |
border-after-color | pitch
border-after-precedence | pitch-range
border-after-style | play-during
border-after-width | relative-position
border-before-color |
border-before-precedence | right
 | role
border-before-width | source-document
border-bottom-color | speak
border-bottom-style | speak-header
border-bottom-width | speak-numeral
border-collapse | speak-punctuation
 | speech-rate
border-end-precedence | stress
border-end-style | top
border-end-width |
border-left-color | voice-family
border-left-style |
border-left-width |
border-right-color |
border-right-style |
border-right-width |
border-separation |
border-start-color |
border-start-precedence |
border-start-style |
border-start-width |
border-top-color |
border-top-style |

Example 1

A simple table:

<fo:table-and-caption>

<fo:table>

<fo:table-column column-width="25mm"/>

<fo:table-column column-width="25mm"/>

<fo:table-header>

<fo:table-cell>

  <fo:block font-weight="bold">Car</fo:block>

</fo:table-cell>

<fo:table-cell>

  <fo:block font-weight="bold">Price</fo:block>

</fo:table-cell>

</fo:table-header>

<fo:table-body>

<fo:table-row>

  <fo:table-cell>

    <fo:block>Volvo</fo:block>

  </fo:table-cell>

  <fo:table-cell>

    <fo:block>$50000</fo:block>

  </fo:table-cell>

</fo:table-row>

<fo:table-row>

  <fo:table-cell>

    <fo:block>SAAB</fo:block>

  </fo:table-cell>

  <fo:table-cell>

    <fo:block>$48000</fo:block>

  </fo:table-cell>

</fo:table-row>

</fo:table-body>

<fo:table-footer>

<fo:table-cell>

  <fo:block font-weight="bold">Some text</fo:block>

</fo:table-cell>

<fo:table-cell>

  <fo:block font-weight="bold">Some text</fo:block>

</fo:table-cell>

</fo:table-footer>

</fo:table>

</fo:table-and-caption>

The output from this code would something like this:

Car | Price
Volvo | $50000
SAAB | $48000
Some text | Some text


XSL-FO table-header Object

Definition and Usage

The <fo:table-header> object contains the content of the table header.

Syntax

<fo:table-header>

<!--

Contents:(table-row+|table-cell+)

-->

</fo:table-header>

Properties

Note: The border properties can only be used if the value of border-collapse is "collapse" or "collapse-with-precedence" for the table.

Property [A-B] | Property [C-Z]
azimuth | cue-after
background-attachment | cue-before
 | elevation
background-image |
background-repeat | left
background-position-horizontal | pause-after
background-position-vertical | pause-before
border-after-color |
border-after-precedence | pitch-range
border-after-style | play-during
border-after-width | relative-position
border-before-color | richness
border-before-precedence | right
border-before-style |
border-before-width |
border-bottom-color |
border-bottom-style | speak-header
border-bottom-width | speak-numeral
border-collapse | speak-punctuation
border-end-color | speech-rate
border-end-precedence | stress
border-end-style |
border-end-width | visibility
border-left-color | voice-family
 | volume
border-left-width |
border-right-color |
border-right-style |
border-right-width |
border-separation |
border-start-color |
border-start-precedence |
border-start-width |
border-top-color |
border-top-style |
border-top-width |
bottom |

Example 1

A simple table:

<fo:table-and-caption>

<fo:table>

<fo:table-column column-width="25mm"/>

<fo:table-column column-width="25mm"/>

<fo:table-header>

<fo:table-cell>

  <fo:block font-weight="bold">Car</fo:block>

</fo:table-cell>

<fo:table-cell>

  <fo:block font-weight="bold">Price</fo:block>

</fo:table-cell>

</fo:table-header>

<fo:table-body>

<fo:table-row>

  <fo:table-cell>

    <fo:block>Volvo</fo:block>

  </fo:table-cell>

  <fo:table-cell>

    <fo:block>$50000</fo:block>

  </fo:table-cell>

</fo:table-row>

<fo:table-row>

  <fo:table-cell>

    <fo:block>SAAB</fo:block>

  </fo:table-cell>

  <fo:table-cell>

    <fo:block>$48000</fo:block>

  </fo:table-cell>

</fo:table-row>

</fo:table-body>

<fo:table-footer>

<fo:table-cell>

  <fo:block font-weight="bold">Some text</fo:block>

</fo:table-cell>

<fo:table-cell>

  <fo:block font-weight="bold">Some text</fo:block>

</fo:table-cell>

</fo:table-footer>

</fo:table>

</fo:table-and-caption>

The output from this code would something like this:

Car | Price
Volvo | $50000
SAAB | $48000
Some text | Some text


XSL-FO table-row Object

Definition and Usage

The <fo:table-row> object defines a table row.

Syntax

<fo:table-row>

<!--

Contents:(table-cell+)

-->

</fo:table-row>

Properties

Note: The border properties can only be used if the value of border-collapse is "collapse" or "collapse-with-precedence" for the table.

Property [A-B] | Property [C-Z]
azimuth | cue-after
background-attachment | cue-before
background-color | elevation
background-image |
background-repeat | id
background-position-horizontal | keep-together
background-position-vertical | keep-with-next
block-progression-dimension | keep-with-previous
border-after-color |
border-after-precedence | pause-after
 | pause-before
border-after-width | pitch
border-before-color |
border-before-precedence | play-during
border-before-style |
border-before-width | richness
border-bottom-color | right
border-bottom-style | role
border-bottom-width | source-document
border-collapse | speak
border-end-color | speak-header
border-end-precedence | speak-numeral
 | speak-punctuation
 | speech-rate
border-left-color | stress
border-left-style | top
border-left-width |
border-right-color | voice-family
border-right-style | volume
border-right-width |
border-separation |
border-start-color |
border-start-precedence |
border-start-style |
border-top-color |
border-top-width |
bottom |
break-after |
break-before |

Example 1

A simple table:

<fo:table-and-caption>

<fo:table>

<fo:table-column column-width="25mm"/>

<fo:table-column column-width="25mm"/>

<fo:table-header>

<fo:table-cell>

  <fo:block font-weight="bold">Car</fo:block>

</fo:table-cell>

<fo:table-cell>

  <fo:block font-weight="bold">Price</fo:block>

</fo:table-cell>

</fo:table-header>

<fo:table-body>

<fo:table-row>

  <fo:table-cell>

    <fo:block>Volvo</fo:block>

  </fo:table-cell>

  <fo:table-cell>

    <fo:block>$50000</fo:block>

  </fo:table-cell>

</fo:table-row>

<fo:table-row>

  <fo:table-cell>

    <fo:block>SAAB</fo:block>

  </fo:table-cell>

  <fo:table-cell>

    <fo:block>$48000</fo:block>

  </fo:table-cell>

</fo:table-row>

</fo:table-body>

</fo:table>

</fo:table-and-caption>

The output from this code would something like this:

Car | Price
Volvo | $50000
SAAB | $48000


XSL-FO table Object

Definition and Usage

The <fo:table> object is used to format the tabular material of a table.

The <fo:table> object contains optional <fo:table-column> objects, an optional <fo:table-header> object, a <fo:table-body> object, and an optional <fo:table-footer> object. Each of these objects has one or more <fo:table-row> objects, with one or more <fo:table-cell> objects:

Syntax

<fo:table>

<!--

Contents:(table-column*,table-header?,

table-footer?,table-body+)

-->

</fo:table>

Properties

Property [A-J] | Property [K-Z]
 | keep-together
background-attachment | keep-with-next
background-color | keep-with-previous
background-image | left
background-repeat | margin-bottom
background-position-horizontal | margin-left
background-position-vertical |
block-progression-dimension | margin-top
border-after-color | padding-after
border-after-precedence | padding-before
border-after-style | padding-bottom
border-after-width | padding-end
border-before-color |
border-before-precedence | padding-right
border-before-style | padding-start
border-before-width | padding-top
border-bottom-color | pause-after
border-bottom-style | pause-before
border-bottom-width | pitch
border-collapse | pitch-range
border-end-color | play-during
border-end-precedence |
border-end-style | richness
 | right
border-left-color | role
border-left-style | source-document
border-left-width | space-after
border-right-style | speak
border-right-width | speak-header
border-separation | speak-numeral
border-start-color |
border-start-precedence | speech-rate
border-start-style | start-indent
border-start-width | stress
border-top-color | table-layout
border-top-style | table-omit-footer-at-break
border-top-width | table-omit-header-at-break
bottom | top
break-after | voice-family
break-before |
cue-after |
cue-before | writing-mode
elevation |
end-indent |
height |
id |
inline-progression-dimension |
intrusion-displace |

Example 1

A simple table:

<fo:table-and-caption>

<fo:table>

<fo:table-column column-width="25mm"/>

<fo:table-column column-width="25mm"/>

<fo:table-header>

<fo:table-cell>

  <fo:block font-weight="bold">Car</fo:block>

</fo:table-cell>

<fo:table-cell>

  <fo:block font-weight="bold">Price</fo:block>

</fo:table-cell>

</fo:table-header>

<fo:table-body>

<fo:table-row>

  <fo:table-cell>

    <fo:block>Volvo</fo:block>

  </fo:table-cell>

  <fo:table-cell>

    <fo:block>$50000</fo:block>

  </fo:table-cell>

</fo:table-row>

<fo:table-row>

  <fo:table-cell>

    <fo:block>SAAB</fo:block>

  </fo:table-cell>

  <fo:table-cell>

    <fo:block>$48000</fo:block>

  </fo:table-cell>

</fo:table-row>

</fo:table-body>

</fo:table>

</fo:table-and-caption>

The output from this code would something like this:

Car | Price
Volvo | $50000
SAAB | $48000


XSL-FO title Object

Definition and Usage

The <fo:title> object specifies a title for a page-sequence. The title may be used to identify the page. For example, the content of the title can be displayed in a "title" window or in a "tool tip".

Syntax

<fo:title>

<!--

Contents:(#PCDATA|bidi-override|

character|external-graphic|

instream-foreign-object|inline|

inline-container|leader|page-number|

page-number-citation|basic-link|

multi-toggle)*

-->

</fo:title>

Properties

Property [A-K] | Property [L-Z]
azimuth | line-height
background-attachment | margin-bottom
background-color | margin-left
 | margin-right
background-repeat | margin-top
background-position-horizontal | padding-after
background-position-vertical | padding-before
border-after-color | padding-bottom
border-after-style | padding-end
 | padding-left
border-before-color |
border-before-style | padding-start
 | padding-top
border-bottom-color | pause-after
border-bottom-style |
 | pitch
border-end-color |
 | play-during
border-end-width | richness
border-left-color | role
 | source-document
 | space-end
border-right-color |
border-right-style | speak
border-right-width | speak-header
border-start-color | speak-numeral
border-start-style | speak-punctuation
border-start-width | speech-rate
border-top-color | stress
border-top-style | visibility
border-top-width | voice-family
color | volume
cue-before |
font-family |
font-selection-strategy |
font-size |
font-size-adjust |
font-stretch |
font-style |
font-variant |
font-weight |


XSL-FO wrapper Object

Definition and Usage

The <fo:wrapper> object specifies inherited properties for a group of XSL-FO objects.

<fo:wrapper> can only have children that is permitted to be children of the parent object.

Syntax

<fo:wrapper>

<!--

Contents:(#PCDATA|bidi-override|

character|external-graphic|

instream-foreign-object|inline|

inline-container|leader|page-number|

page-number-citation|basic-link|

multi-toggle|block|block-container|

table-and-caption|table|list-block)*

-->

</fo:wrapper>

Properties

Property


XSL-FO azimuth Property

Definition and Usage

The azimuth property is used only in Aural Stylesheets.

The aural rendering of a document combines sounds and voices to go through the content of a document. Aural presentation occurs often by converting the document to plain text and then feeding this to a screen reader.

Situations and markets for listening to information could be:

· for blind people
· in the car
· help users learning to read

Azimuth and elevation are important properties for aural presentation. These properties are used to keep several voices apart. In real life, all the people do not stand in the same spot in a room.

The azimuth property specifies what side the sound should come from.

Details

· Inherited: yes
· Percentages: N/A
· Media: aural

Property Values

Value

Description

angle

A fixed value within the range -360deg to 360deg.

· 0deg means ahead in the center
· 90deg is to the right
· 180deg is behind
· 270deg (or -90deg) is to the left

left-side

270deg and behind 270deg

far-left

300deg and behind 240deg

left

320deg and behind 220deg

center-left

340deg and behind 200deg

center

Default. 0deg and behind 180deg

center-right

20deg and behind 160deg

right

40deg and behind 140deg

far-right

60deg and behind 120deg

right-side

90deg and behind 90deg

leftwards

The sound moves to the left

rightwards

The sound moves to the right


XSL-FO background-attachment Property

Definition and Usage

The background-attachment property sets whether a background image is to be fixed or scrolls within the enclosing object.

Details

· Inherited: no
· Percentages: N/A
· Media: visual

Property Values

Value | Description
scroll | Default. The background-image may scroll within the enclosing object
fixed | The background-image is fixed within the enclosing object


XSL-FO background-color Property

Definition and Usage

The background-color property sets the background color of an object.

Details

· Inherited: no
· Percentages: N/A
· Media: visual

Property Values

Value | Description
transparent | Default. The background color is transparent (means that the underlying color will shine through)
color | The color value can be a color name (red), a rgb value (rgb(255,0,0)), or a hex number (#ff0000)


XSL-FO background-image Property

Definition and Usage

The background-image property sets the background image of an object.

Details

· Inherited: no
· Percentages: N/A
· Media: visual

Property Values

Value | Description
none | Default. No background image
URL | The path to an image


XSL-FO background-repeat Property

Definition and Usage

The background-repeat property sets if/how a background image will be repeated.

Details

· Inherited: no
· Percentages: N/A
· Media: visual

Property Values

Value | Description
repeat | The background image will be repeated vertically and horizontally
repeat-x | The background image will be repeated horizontally
repeat-y | The background image will be repeated vertically
no-repeat | The background-image will be displayed only once


XSL-FO border color Property

XSL-FO border color Properties Property

Definition and Usage

The border-before-color property specifies the color of the border on the before-edge of the area.

The border-after-color property specifies the color of the border on the after-edge of the area.

The border-top-color property specifies the color of the border on the top-edge of the area.

The border-bottom-color property specifies the color of the border on the bottom-edge of the area.

The border-start-color property specifies the color of the border on the start-edge of the area.

The border-end-color property specifies the color of the border on the end-edge of the area.

The border-left-color property specifies the color of the border on the left-edge of the area.

The border-right-color property specifies the color of the border on the right-edge of the area.

Details

· Inherited: no
· Percentages: N/A
· Media: visual

Property Values

Value | Description
color | Any valid color specification


XSL-FO border style Property

XSL-FO border style Properties Property

Definition and Usage

The border-before-style property specifies the border-style on the before-edge.

The border-after-style property specifies the border-style on the after-edge.

The border-top-style property specifies the border-style on the top-edge.

The border-bottom-style property specifies the border-style on the bottom-edge.

The border-start-style property specifies the border-style on the start-edge.

The border-end-style property specifies the border-style on the end-edge.

The border-left-style property specifies the border-style on the left-edge.

The border-right-style property specifies the border-style on the right-edge.

Details

· Inherited: no
· Percentages: N/A
· Media: visual

Property Values

Value | Description
none | Default. No border
hidden | A hidden border
dotted | The border is a dotted line
dashed | The border is a series of short line segments
solid | The border is a solid line
double | The border is two solid lines
groove | The border looks like it were carved into the canvas
ridge | The border "comes out" of the canvas
inset | The border looks like it were embedded in the canvas
outset | The border "comes out" of the canvas


XSL-FO border width Property

XSL-FO border width Properties Property

Definition and Usage

The border-before-width property specifies the width of the border on the before-edge.

The border-after-width property specifies the width of the border on the after-edge.

The border-top-width property specifies the width of the border on the top-edge.

The border-bottom-width property specifies the width of the border on the bottom-edge.

The border-start-width property specifies the width of the border on the start-edge.

The border-end-width property specifies the width of the border on the end-edge.

The border-left-width property specifies the width of the border on the left-edge.

The border-right-width property specifies the width of the border on the right-edge.

Details

· Inherited: no
· Percentages: N/A
· Media: visual

Property Values

Value | Description
thin | A thin border
medium | Default. A medium border
thick | A thick border
length | Specifies a fixed width for the border
length-conditional | A compound value that specifies the width and any conditionality of the border


XSL-FO break-after Property

Definition and Usage

The break-after property specifies that the first area generated by the next XSL-FO object, shall be the first one placed in a particular context (e.g. page-area, column-area).

Details

· Inherited: no
· Percentages: N/A
· Media: visual

Property Values

Value | Description
auto | Default. No break shall be forced
column | Creates a page-break condition within column-areas
page | Creates a page-break condition within page-areas
even-page | Creates a page-break condition within even page-areas
odd-page | Creates a page-break condition within odd page-areas


XSL-FO break-before Property

Definition and Usage

The break-before property specifies that the first area generated by this XSL-FO object shall be the first one placed in a particular context (e.g. page-area, column-area).

Details

· Inherited: no
· Percentages: N/A
· Media: visual

Property Values

Value | Description
auto | Default. No break shall be forced
column | Creates a page-break condition within column-areas
page | Creates a page-break condition within page-areas
even-page | Creates a page-break condition within even page-areas
odd-page | Creates a page-break condition within odd page-areas


XSL-FO color Property

Definition and Usage

The color property specifies the text color of an object.

Details

· Inherited: yes
· Percentages: N/A
· Media: visual

Property Values

Value | Description
color | The color value can be a color name (red), a rgb value (rgb(255,0,0)), or a hex number (#ff0000)


XSL-FO country Property

Definition and Usage

The country property specifies the country to be used by the formatter in language-coupled services.

Details

· Inherited: yes
· Percentages: N/A
· Media: visual

Property Values

Value | Description
country | Specifies a country in conformance with RFC3066
none | Default. Country unknown


XSL-FO cue-before and cue-after Property

XSL-FO cue-before and cue-after Properties

Definition and Usage

The cue-before and cue-after properties are used only in Aural Stylesheets.

The aural rendering of a document combines sounds and voices to go through the content of a document. Aural presentation occurs often by converting the document to plain text and then feeding this to a screen reader.

Situations and markets for listening to information could be:

· for blind people
· in the car
· help users learning to read

Azimuth and elevation are important properties for aural presentation. These properties are used to keep several voices apart. In real life, all the people do not stand in the same spot in a room.

The cue-before property specifies a sound to play before a specific element.

The cue-after property specifies a sound to play after a specific element.

Details

· Inherited: no
· Percentages: N/A
· Media: aural

Property Values

Value | Description
URI | An URI to an audio file
none | Default. No audio file specified


XSL-FO elevation Property

Definition and Usage

The elevation property is used only in Aural Stylesheets.

The aural rendering of a document combines sounds and voices to go through the content of a document. Aural presentation occurs often by converting the document to plain text and then feeding this to a screen reader.

Situations and markets for listening to information could be:

· for blind people
· in the car
· help users learning to read

Azimuth and elevation are important properties for aural presentation. These properties are used to keep several voices apart. In real life, all the people do not stand in the same spot in a room.

The elevation property specifies if the sound should come from above, below or in level with the listener.

Details

· Inherited: yes
· Percentages: N/A
· Media: aural

Property Values

Value

Description

angle

A fixed value within the range -90deg to 90deg.

· 0deg means in level with the listener
· 90deg means above
· -90deg means below

below

-90deg

level

Default. 0deg

above

90deg

higher

Current elevation + 10deg

lower

Currents elevation - 10deg


XSL-FO end-indent Property

Definition and Usage

The end-indent property specifies the distance from the end-edge of the content-rectangle of the block-area to the end-edge of the content-rectangle of the containing reference-area.

Note: If this property has a negative value, it indicates an outdent.

Details

· Inherited: yes
· Percentages: yes
· Media: visual

Property Values

Value | Description
length | Default is 0pt. The end-indent specified as a fixed length
% | The end-indent specified as a % of the inline-progression-dimension of the containing reference-area


XSL-FO float Property

Definition and Usage

The float property specifies whether a box should float to the left, right, or not at all.

Details

· Inherited: no
· Percentages: N/A
· Media: visual

Property Values

Value | Description
before | Specifies that the box shall be descendant of a before-float-reference-area generated by a sub-region of a region-body
start | Specifies that the box shall float toward the start-edge of the reference area
end | Specifies that the box shall float toward the end-edge of the reference area
left | Specifies that the box shall float to the left. Content flows on the right side of the box. Interpreted as float='start'
right | Specifies that the box shall float to the right. Content flows on the left side of the box. Interpreted as float='end'
none | Default. The box is not floated


XSL-FO flow-name Property

Definition and Usage

The flow-name property defines where the content of the <fo:flow> or <fo:static-content> object will go.

The flow-name property assigns the flow's or static-content's content to a specific region in the layout. This is done by specifying the name of the target region as the flow-name. (e.g. flow-name="xsl-region-body").

Details

· Inherited: no
· Percentages: N/A
· Media: visual

Property Values

Value

Description

name

Default is an empty name. Defines the name of the flow.

Flow-names reserved in XSL:

· xsl-region-body
· xsl-region-before
· xsl-region-after
· xsl-region-start
· xsl-region-end
· xsl-before-float-separator
· xsl-footnote-separator


XSL-FO height Property

Definition and Usage

The height property specifies the content height of a box.

Details

· Inherited: no
· Percentages: refer to height of containing block
· Media: visual

Property Values

Value | Description
auto | Default. The browser calculates the actual height
length | Specifies a fixed height in px, cm, etc. Negative values are not allowed
% | Defines the height in % of the parent element's height


XSL-FO hyphenation-keep Property

Definition and Usage

The hyphenation-keep property specifies whether hyphenation can be performed on the last line in a given area.

Details

· Inherited: yes
· Percentages: N/A
· Media: visual

Property Values

Value | Description
auto | Default. No restriction. The word may be hyphenated
column | Both parts of a hyphenated word shall lie within a single column
page | Both parts of a hyphenated word shall lie within a single page


XSL-FO hyphenation-ladder-count Property

Definition and Usage

The hyphenation-ladder-count property specifies a limit of hyphenated line-areas in a block-area.

Details

· Inherited: yes
· Percentages: N/A
· Media: visual

Property Values

Value | Description
no-limit | Default. Any number of successive lines may be hyphenated
number | An integer >= 1


XSL-FO id Property

Definition and Usage

The id property is used to specify a unique identifier for the object.

Details

· Inherited: no
· Percentages: N/A
· Media: all

Property Values

Value | Description
id | A unique id. Must be unique within all objects in the result tree with the fo: namespace


XSL-FO intrusion-displace Property

Definition and Usage

The intrusion-displace property defines the displacement strategy in the presence of intrusions.

Note: Displacing the start edge and/or end edge of a block, displaces the edges of all lines and blocks within that block.

Details

· Inherited: yes
· Percentages: N/A
· Media: visual

Property Values

Value | Description
auto | Default. Treated as if "block" had been specified for reference-areas. For any other area, this value is treated as if "line" had been specified
none | No areas are displaced
line | The start and end edges of line areas are displaced
indent | The start and end edge of each line within the block area is displaced
block | The start and end edge of the block is displaced by the least amount necessary


XSL-FO keep-together Property

Definition and Usage

The keep-together property creates keep-together conditions on XSL-FO objects.

Details

· Inherited: yes
· Percentages: N/A
· Media: visual

Property Values

Value | Description
auto | Default. No keep-together conditions created
always | Creates a keep-together condition with the strength of "always"
integer | Creates a keep-together condition with strength of a given integer


XSL-FO keep-with-next Property

Definition and Usage

The keep-with-next property creates keep-with-next conditions on XSL-FO objects.

Details

· Inherited: yes
· Percentages: N/A
· Media: visual

Property Values

Value | Description
auto | Default. No keep-with-next conditions created
always | Creates a keep-with-next condition with the strength of "always"
integer | Creates a keep-with-next condition with strength of a given integer


XSL-FO keep-with-previous Property

Definition and Usage

The keep-with-previous property creates keep-with-previous conditions on XSL-FO objects.

Details

· Inherited: yes
· Percentages: N/A
· Media: visual

Property Values

Value | Description
auto | Default. No keep-with-previous conditions created
always | Creates a keep-with-previous condition with the strength of "always"
integer | Creates a keep-with-previous condition with strength of a given integer


XSL-FO language Property

Definition and Usage

The language property specifies the language to be used by the formatter in language-coupled services.

Details

· Inherited: yes
· Percentages: N/A
· Media: visual

Property Values

Value | Description
language | Specifies a language in conformance with
none | Default. Language unknown


XSL-FO left and right Property

Definition and Usage

The left property specifies how far the box's left edge is to the right of the left edge of the box's containing block.

The right property specifies how far the box's right edge is to the left of the right edge of the box's containing block.

Note: If the width property of the object is "auto" and both the left and right properties have a value other than "auto", the width is overridden!

Details

· Inherited: no
· Percentages: refer to width of containing block
· Media: visual

Property Values

Value | Description
auto | Default. The browser calculates the left/right position
length | Sets the left/right position in px, cm, etc. from the left/right edge of the containing block
% |


XSL-FO letter-spacing Property

Definition and Usage

The letter-spacing property defines the space between characters.

Details

· Inherited: yes
· Percentages: N/A
· Media: visual

Property Values

Value | Description
normal | Default is 0pt. The letter-spacing is normal
length | Indicates inter-character space in addition to the default space. Negative values are allowed
space | The user may specify a range of adjustments in addition to the default space


XSL-FO line-height Property

Definition and Usage

CSS2 definition:

If the line-height property is set on a block-level element, it specifies the minimal height of each generated inline box.

If the line-height property is set on an inline-level element, it specifies the exact height of each box generated by the element.

XSL modifications:

In XSL the line-height property is used to determine the half-leading trait.

Details

· Inherited: yes
· Percentages: refer to the font size of the element itself
· Media: visual

Property Values

Value | Description
normal | Default. Sets the line-height to a reasonable value based on the font size (between 1.0 and 1.2)
length | Specifies the height of the box. Negative values are not allowed
number | Sets the line-height to a number that will be multiplied with the element's font size. Negative values are not allowed
percentage | Sets the line-height to a percentage that will be multiplied with the element's font size. Negative values are not allowed
space |


XSL-FO linefeed-treatment Property

Definition and Usage

The linefeed-treatment property specifies the treatment of linefeeds.

Details

· Inherited: yes
· Percentages: N/A
· Media: visual

Property Values

Value | Description
ignore | Any character with Unicode U+000A (linefeed) will be discarded
preserve | Specifies no special action
treat-as-space | Default. Any character with Unicode U+000A (linefeed) shall be converted into Unicode U+0020 (space)
treat-as-zero-width-space | Any character with Unicode U+000A (linefeed) shall be converted into Unicode U+200B (zero-width space)


XSL-FO margin-top, margin-bottom, margin-left, margin-right Property

XSL-FO margin Properties

Definition and Usage

The margin-top property specifies the top margin of a box.

The margin-bottom property specifies the bottom margin of a box.

The margin-left property specifies the left margin of a box.

The margin-right property specifies the right margin of a box.

Details

· Inherited: no
· Percentages: refer to width of containing block
· Media: visual

Property Values

Value | Description
auto | The browser sets the margins
length | Default 0 pt. Specifies a fixed width. Note: Negative values are allowed, but there may be browser-specific limits!
percentage | Specifies a width in %. The % is calculated with respect to the width of the box's containing block


XSL-FO master-name Property

Definition and Usage

The master-name property identifies the name of the master.

For the <fo:simple-page-master> object this property identifies the name of the master. This name is referenced as the value of properties on the following objects: <fo:single-page-master-reference>, <fo:repeatable-page-master-reference>, and <fo:conditional-page-master-reference> to request the use of this master when creating a page instance. It may also be used on <fo:page-sequence> to specify the use of this master when creating page instances.

For the <fo:page-sequence-master> object this property identifies the name of the master. This name is referenced as the value of properties on the <fo:page-sequence> to request the use of this page-sequence-master when creating page instances.

If the name is empty or if a name-conflict occurs, an error shall be reported. However, the processor may continue processing.

Details

· Inherited: no
· Percentages: N/A
· Media: visual

Property Values

Value | Description
name | Default: an empty name. A name that identifies a master. The name must be unique across all page-masters and page-sequence-masters


XSL-FO master-reference Property

Definition and Usage

The master-reference property defines a reference to a master.

For the <fo:page-sequence> object this property defines a reference to the <fo:simple-page-master> or a <fo:page-sequence-master>.

For the <fo:single-page-master-reference> object this property specifies the name of the page-master (<fo:simple-page-master>) to be used to create a single page.

For the <fo:repeatable-page-master-reference> object this property specifies the name of the page-master (<fo:simple-page-master>) to be used in repetition until the content is exhausted or the maximum-repeats limit is reached.

For the <fo:conditional-page-master-reference> object this property specifies the name of the page-master (<fo:simple-page-master>) to be used whenever this alternative is chosen.

If the name is empty or if a name-conflict occurs, an error shall be reported. However, the processor may continue processing.

Details

· Inherited: no
· Percentages: N/A
· Media: visual

Property Values

Value | Description
name | Default: an empty name. The name does not have to be unique, but must refer to a master-name that exists in the document


XSL-FO media-usage Property

Definition and Usage

The media-usage property controls how the display medium is used to present the page.

Details

· Inherited: no
· Percentages: N/A
· Media: visual

Property Values

Value | Description
auto | Default. The user agent determines which value of "media-usage" is to be used
paginate | A sequence of pages is generated from the <fo:page-sequence> objects that are children of the <fo:root>
bounded-in-one-dimension | Only one page is generated per <fo:page-sequence>. One "page-height" or "page-width" must be specified in the first page master that is used
unbounded | Only one page is generated per <fo:page-sequence>. Neither "page-height" nor "page-width" may be specified on any page master that is used


XSL-FO padding Property

XSL-FO padding Properties Property

Definition and Usage

The padding-start property specifies the padding on the start-edge of the area.

The padding-end property specifies the padding on the end-edge of the area.

The padding-before property specifies the padding on the before-edge of the area.

The padding-after property specifies the padding on the after-edge of the area.

The padding-top property specifies the padding on the top-edge of the area.

The padding-bottom property specifies the padding on the bottom-edge of the area.

The padding-left property specifies the padding on the left-edge of the area.

The padding-right property specifies the padding on the right-edge of the area.

Details

· Inherited: no
· Percentages: refer to width of containing block
· Media: visual

Property Values

Value | Description
auto | The browser sets the padding
length | Default 0 pt. Specifies a fixed width
percentage | Specifies a width in %. The % is calculated with respect to the width of the box's containing block
length-conditional | A compound value that specifies the width and any conditionality of the padding


XSL-FO page-height Property

Definition and Usage

The page-height property defines the height of a page.

Details

· Inherited: no
· Percentages: N/A
· Media: visual

Property Values

Value | Description
auto | Default. The height shall be set from the size of the browser window or from the size of the media
indefinite | The height of the page is set from the size of the laid-out content
length | Defines a fixed height for the page


XSL-FO page-width Property

Definition and Usage

The page-width property defines the width of a page.

Details

· Inherited: no
· Percentages: N/A
· Media: visual

Property Values

Value | Description
auto | Default. The width shall be set from the size of the browser window or from the size of the media
indefinite | The width of the page is set from the size of the laid-out content
length | Defines a fixed width for the page


XSL-FO pause-before and pause-after Property

XSL-FO pause-before and pause-after Properties

Definition and Usage

The pause-before and pause-after properties are used only in Aural Stylesheets.

The aural rendering of a document combines sounds and voices to go through the content of a document. Aural presentation occurs often by converting the document to plain text and then feeding this to a screen reader.

Situations and markets for listening to information could be:

· for blind people
· in the car
· help users learning to read

Azimuth and elevation are important properties for aural presentation. These properties are used to keep several voices apart. In real life, all the people do not stand in the same spot in a room.

The pause-before property specifies a pause to be inserted before speaking the content of a specific element.

The pause-after property specifies a pause to be inserted after speaking a content of a specific element.

Details

· Inherited: no
· Percentages: yes
· Media: aural

Property Values

Value | Description
time | Specifies the pause in seconds and milliseconds
% | Specifies the pause in % of the speech-rate property (e.g. if the speech-rate is 120 words/minute and a word takes 500ms to read, then a pause-before of 100% means a pause of 500ms - a half second)


XSL-FO pitch-range Property

Definition and Usage

The pitch-range property is used only in Aural Stylesheets.

The aural rendering of a document combines sounds and voices to go through the content of a document. Aural presentation occurs often by converting the document to plain text and then feeding this to a screen reader.

Situations and markets for listening to information could be:

· for blind people
· in the car
· help users learning to read

The pitch-range property specifies the variation in the average pitch of the speaking voice.

Details

· Inherited: yes
· Percentages: N/A
· Media: aural

Property Values

Value

Description

number

Default is 50. Specifies a value between 0 and 100.

· 0 = a flat, monotonic voice
· 50 = normal voice
· Above 50 = an animated voice


XSL-FO pitch Property

Definition and Usage

The pitch property is used only in Aural Stylesheets.

The aural rendering of a document combines sounds and voices to go through the content of a document. Aural presentation occurs often by converting the document to plain text and then feeding this to a screen reader.

Situations and markets for listening to information could be:

· for blind people
· in the car
· help users learning to read

The pitch property specifies the average pitch (a frequency) of the speaking voice.

The average pitch depends on the voice family. The average pitch for a male voice is 120Hz, and for a female voice, it's 210Hz.

Details

· Inherited: yes
· Percentages: N/A
· Media: aural

Property Values

Value | Description
frequency | The average pitch of the speaking voice is specified in hertz
x-low | Defines an extra low frequency (the value depend on the voice family)
low | Defines a low frequency (the value depend on the voice family)
medium | Default. Defines a medium frequency (the value depend on the voice family)
high | Defines a high frequency (the value depend on the voice family)
x-high | Defines an extra high frequency (the value depend on the voice family)


XSL-FO play-during Property

Definition and Usage

The play-during property is used only in Aural Stylesheets.

The aural rendering of a document combines sounds and voices to go through the content of a document. Aural presentation occurs often by converting the document to plain text and then feeding this to a screen reader.

Situations and markets for listening to information could be:

· for blind people
· in the car
· help users learning to read

The play-during property specifies a background-sound to be played while the content of an element is spoken.

Details

· Inherited: no
· Percentages: N/A
· Media: aural

Property Values

Value | Description
URI | An URI to an audio file
mix | The sound from the parent element's play-during property continues to play + the sound specified in URI is mixed with it. Example: play-during: url("sea.wav") mix
repeat | The sound will be repeated if it stops before the entire content is spoken. Example: play-during: url("sea.wav") repeat
auto | Default. The sound of the parent element continues to play
none | Silence


XSL-FO reference-orientation Property

Definition and Usage

The reference-orientation property defines the direction for top for the content-rectangle of the reference-area.

Details

· Inherited: yes
· Percentages: N/A
· Media: visual

Property Values

Value | Description
0 | Default. The orientation of this area has the same orientation as the containing reference-area
90 | The orientation is rotated 90 degrees from the orientation of the containing reference-area
180 | The orientation is rotated 180 degrees from the orientation of the containing reference-area
270 | The orientation is rotated 270 degrees from the orientation of the containing reference-area
-90 | Same as specifying 270
-180 | Same as specifying 180
-270 | Same as specifying 90


XSL-FO relative-position Property

Definition and Usage

The relative-position property is used to place the area in a static or relative position.

Details

· Inherited: no
· Percentages: N/A
· Media: visual

Property Values

Value | Description
static | Default. The area is placed in a normal position (according to the normal flow)
relative | Moves the area relative to its normal position


XSL-FO richness Property

Definition and Usage

The richness property is used only in Aural Stylesheets.

The aural rendering of a document combines sounds and voices to go through the content of a document. Aural presentation occurs often by converting the document to plain text and then feeding this to a screen reader.

Situations and markets for listening to information could be:

· for blind people
· in the car
· help users learning to read

The richness property specifies the richness (brightness) of the speaking voice.

Details

· Inherited: yes
· Percentages: N/A
· Media: aural

Property Values

Value | Description
number | Default is 50. A number between 0 and 100 (the voice will "carry" more on a high value)


XSL-FO role Property

Definition and Usage

The role property defines a hint for alternate renderers (aural readers, etc.) as to the role of the XML element that was used to construct this XSL-FO object. This information can be used to use alternate renderings when the normal rendering of an XSL-FO object is not appropriate.

Details

· Inherited: no
· Percentages: N/A
· Media: all

Property Values

Value | Description
uri-specification | Defines a URI-specification that indicates an RDF resource (that is, an XML object that is valid with respect to the RDF grammar)
string | Specifies a semantic identifier to be used in rendering this XSL-FO object
none | Indicates that no semantic tag is cited by this XSL-FO object


XSL-FO source-document Property

Definition and Usage

The source-document property provides a pointer back to the original XML document used to create the XSL-FO tree.

W3C Accessibility guidelines strongly encourage the use of this property either on <fo:root> or on the first XSL-FO object generated from the source document.

Details

· Inherited: no
· Percentages: N/A
· Media: all

Property Values

Value | Description
uri-specification | Specifies a URI to the source document. This URI is useful for alternate renderers when the structure of the XSL-FO tree is inappropriate for that renderer
none | The source document is unspecified


XSL-FO space-before and space-after Property

XSL-FO space-before and space-after Properties

Definition and Usage

The space-before property specifies the value of the space-specifier for the space before the areas generated by this XSL-FO object.

The space-after property specifies the value of the space-specifier for the space after the areas generated by this XSL-FO object.

A space-specifier have the following components: minimum, optimum, maximum, conditionality, and precedence.

Minimum, optimum, and maximum are lengths that define a constraint on a distance, specifying that the distance should preferably be the optimum, in no case less than the minimum or more than the maximum.

The conditionality component specifies whether a space-specifier has effect at the beginning or end of an area. Possible values are retain and discard.

Precedence is either an integer or the special token force.

Details

· Inherited: no
· Percentages: N/A
· Media: visual

Property Values

Value

Description

space

Specifies the minimum, optimum, and maximum values for the space before or after areas generated by this XSL-FO object and the conditionality and precedence of this space.

Default value is: space.minimum=0pt, .optimum=0pt, .maximum=0pt, .conditionality=discard, .precedence=0


XSL-FO speak-header Property

Definition and Usage

The speak-header property is used only in Aural Stylesheets.

The aural rendering of a document combines sounds and voices to go through the content of a document. Aural presentation occurs often by converting the document to plain text and then feeding this to a screen reader.

Situations and markets for listening to information could be:

· for blind people
· in the car
· help users learning to read

The speak-header property specifies whether table headers will be spoken before each cell OR spoken only once (before the series of cells associated with the header ).

Details

· Inherited: yes
· Percentages: N/A
· Media: aural

Property Values

Value | Description
once | Default. The table header will be spoken once (before the series of cells associated with the header )
always | The table header will be spoken before each cell


XSL-FO speak-numeral Property

Definition and Usage

The speak-numeral property is used only in Aural Stylesheets.

The aural rendering of a document combines sounds and voices to go through the content of a document. Aural presentation occurs often by converting the document to plain text and then feeding this to a screen reader.

Situations and markets for listening to information could be:

· for blind people
· in the car
· help users learning to read

The speak-numeral property specifies how numerals will be spoken.

Details

· Inherited: yes
· Percentages: N/A
· Media: aural

Property Values

Value | Description
digits | Numerals will be spoken as individual digits (e.g "145" is spoken "one four five")
continuous | Default. Numerals will be spoken as a full number (e.g "145" is spoken "one hundred forty five")


XSL-FO speak-punctuation Property

Definition and Usage

The speak-punctuation property is used only in Aural Stylesheets.

The aural rendering of a document combines sounds and voices to go through the content of a document. Aural presentation occurs often by converting the document to plain text and then feeding this to a screen reader.

Situations and markets for listening to information could be:

· for blind people
· in the car
· help users learning to read

The speak-punctuation property specifies how punctuation will be spoken.

Details

· Inherited: yes
· Percentages: N/A
· Media: aural

Property Values

Value | Description
code | Punctuation will be spoken literally
none | Default. Punctuation will not be spoken. Instead it will render naturally with various pauses


XSL-FO speak Property

Definition and Usage

The speak property is used only in Aural Stylesheets.

The aural rendering of a document combines sounds and voices to go through the content of a document. Aural presentation occurs often by converting the document to plain text and then feeding this to a screen reader.

Situations and markets for listening to information could be:

· for blind people
· in the car
· help users learning to read

The speak property specifies whether or not the text will be rendered aurally.

Details

· Inherited: yes
· Percentages: N/A
· Media: aural

Property Values

Value | Description
normal | Default. Uses language-dependent pronunciation rules for rendering an element and its children
none | Suppresses aural rendering (the element requires no time to render)
spell-out | Spells the text letter by letter


XSL-FO speech-rate Property

Definition and Usage

The speech-rate property is used only in Aural Stylesheets.

The aural rendering of a document combines sounds and voices to go through the content of a document. Aural presentation occurs often by converting the document to plain text and then feeding this to a screen reader.

Situations and markets for listening to information could be:

· for blind people
· in the car
· help users learning to read

The speech-rate property specifies how fast the text should be read - the speaking rate.

Details

· Inherited: yes
· Percentages: N/A
· Media: aural

Property Values

Value | Description
number | A number that specifies the speaking rate in words per minute
x-slow | 80 words per minute
slow | 120 words per minute
medium | Default. 180-200 words per minute
fast | 300 words per minute
x-fast | 500 words per minute
faster | Current speech-rate + 40
slower | Current speech-rate - 40


XSL-FO start-indent Property

Definition and Usage

The start-indent property specifies the distance from the start-edge of the content-rectangle of the containing reference-area to the start-edge of the content-rectangle of that block-area.

Note: If this property has a negative value, it indicates an outdent.

Details

· Inherited: yes
· Percentages: yes
· Media: visual

Property Values

Value | Description
length | Default is 0pt. The start-indent specified as a fixed length
% | The start-indent specified as a % of the inline-progression-dimension of the containing reference-area


XSL-FO stress Property

Definition and Usage

The stress property is used only in Aural Stylesheets.

The aural rendering of a document combines sounds and voices to go through the content of a document. Aural presentation occurs often by converting the document to plain text and then feeding this to a screen reader.

Situations and markets for listening to information could be:

· for blind people
· in the car
· help users learning to read

The stress property specifies the height of "local peaks" in the speaking voice.

Details

· Inherited: yes
· Percentages: N/A
· Media: aural

Property Values

Value | Description
number | Default is 50. A specified value between 0 and 100. The meaning of values depends on the language. A value of 50 for an English speaking voice would be different from a value of 50 for an Italian voice


XSL-FO text-altitude Property

Definition and Usage

The text-altitude property specifies the "height" for the ascent above the dominant baseline.

Details

· Inherited: no
· Percentages: refer to the font's em-height
· Media: visual

Property Values

Value | Description
use-font-metrics | Default. Uses a value for the height of the font above the baseline
length | Replaces the height value in the font with a specified length


XSL-FO text-depth Property

Definition and Usage

The text-depth property specifies the "depth" for the descent below the dominant baseline.

Details

· Inherited: no
· Percentages: refer to the font's em-height
· Media: visual

Property Values

Value | Description
use-font-metrics | Default. Uses a value for the depth of the font below the baseline
length | Replaces the depth value in the font with a specified length


XSL-FO top and bottom Property

Definition and Usage

The top property specifies how far the box's top position is below the top edge of the box's containing block.

The botttom property specifies how far the box's bottom position is above the bottom edge of the box's containing block.

Note: If the height property of the object is "auto" and both the top and bottom properties have a value other than "auto", the height is overridden!

Details

· Inherited: no
· Percentages: refer to height of containing block
· Media: visual

Property Values

Value | Description
auto | Default. The browser calculates the top/bottom position
length | Sets the top/bottom position in px, cm, etc. from the top/bottom edge of the containing block
% |


XSL-FO visibility Property

Definition and Usage

The visibility property specifies whether the box generated are visible or not.

Details

· Inherited: yes
· Percentages: N/A
· Media: visual

Property Values

Value | Description
visible | Default. The box is visible
hidden | The box is invisible, but still affects layout
collapse | When used in table elements, this value removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If this value is used on other elements, it renders as "hidden"


XSL-FO voice-family Property

Definition and Usage

The voice-family property is used only in Aural Stylesheets.

The aural rendering of a document combines sounds and voices to go through the content of a document. Aural presentation occurs often by converting the document to plain text and then feeding this to a screen reader.

Situations and markets for listening to information could be:

· for blind people
· in the car
· help users learning to read

The voice-family property specifies a comma-separated list of voice-family names for the speaking voice.

Details

· Inherited: yes
· Percentages: N/A
· Media: aural

Property Values

Value

Description

generic-voice

Specifies a voice-family. Possible values are:

· male
· female
· child

specific-voice

A specific instance (e.g. comedian, carlos)


XSL-FO volume Property

Definition and Usage

The volume property is used only in Aural Stylesheets.

The aural rendering of a document combines sounds and voices to go through the content of a document. Aural presentation occurs often by converting the document to plain text and then feeding this to a screen reader.

Situations and markets for listening to information could be:

· for blind people
· in the car
· help users learning to read

The volume property specifies the volume of the speaking voice. User agents should allow the volume to be changed by the listener.

Details

· Inherited: yes
· Percentages: yes
· Media: aural

Property Values

Value | Description
number | A number between 0 and 100. 0 represents the lowest possible volume and 100 represents the maximum volume
% | A % calculated relative to the inherited value
silent | No sound at all. Note: silent is not the same as 0
x-soft | Same as 0
soft | Same as 25
medium | Same as 50
loud | Same as 75
x-loud | Same as 100


XSL-FO width Property

Definition and Usage

The width property specifies the content width of a box.

Details

· Inherited: no
· Percentages: refer to width of containing block
· Media: visual

Property Values

Value | Description
auto | Default. The browser calculates the actual width
length | Specifies a fixed width in px, cm, etc. Negative values are not allowed
% | Defines the width in % of the parent element's width


XSL-FO writing-mode Property

Definition and Usage

For <fo:simple-page-master> the writing-mode property is used to specify the placement of the five regions on the master.

For <fo:region-*> the writing-mode property defines the column-progression within each region.

For <fo:table> the writing-mode property controls the layout of the rows and columns.

Details

· Inherited: yes
· Percentages: N/A
· Media: visual

Property Values

Value | Description
lr-tb | Default. Text are written left-to-right and top-to-bottom (normal "alphabetic" text)
rl-tb | Text are written right-to-left and top-to-bottom (Arabic and Hebrew text)
tb-rl | Text are written top-to-bottom and right-to-left (Chinese and Japanese text)
lr | Same as lr-tb
rl | Same as rl-tb
tb | Same as tb-rl


XSL-FO Areas Property

XSL-FO Areas

XSL-FO uses rectangular boxes (areas) to display output.

XSL-FO Areas

The XSL formatting model defines a number of rectangular areas (boxes) to display output.

All output (text, pictures, etc.) will be formatted into these boxes and then displayed or printed to a target media.

We will take a closer look at the following areas:

· Pages
· Regions
· Block areas
· Line areas
· Inline areas

XSL-FO Pages

XSL-FO output is formatted into pages. Printed output will normally go into many separate pages. Browser output will often go into one long page.

XSL-FO Pages contain Regions.

XSL-FO Regions

Each XSL-FO Page contains a number of Regions:

· region-body (the body of the page)
· region-before (the header of the page)
· region-after (the footer of the page)
· region-start (the left sidebar)
· region-end (the right sidebar)

XSL-FO Regions contain Block areas.

XSL-FO Block Areas

XSL-FO Block areas define small block elements (the ones that normally starts with a new line) like paragraphs, tables and lists.

XSL-FO Block areas can contain other Block areas, but most often they contain Line areas.

XSL-FO Line Areas

XSL-FO Line areas define text lines inside Block areas.

XSL-FO Line areas contain Inline areas.

XSL-FO Inline Areas

XSL-FO Inline areas define text inside Lines (bullets, single character, graphics, and more).


XSL-FO Blocks

XSL-FO output goes into blocks.

XSL-FO Pages, Flow, and Block

"Blocks" of content "Flow" into "Pages" of the output media.

XSL-FO output is normally nested inside <fo:block> elements, nested inside <fo:flow> elements, nested inside <fo:page-sequence> elements:

<fo:page-sequence>

<fo:flow flow-name="xsl-region-body">

  <fo:block>

    <!-- Output goes here -->

  </fo:block>

</fo:flow>

</fo:page-sequence>

Block Area Attributes

Blocks are sequences of output in rectangular boxes:

<fo:block

border-width="1mm">

This block of output will have a one millimeter border around it.

</fo:block>

Since block areas are rectangular boxes, they share many common area properties:

· space before and space after
· margin
· border
· padding

space before

margin

border

padding

content

space after

The space before and space after is the empty space separating the block from the other blocks.

The margin is the empty area on the outside of the block.

The border is the rectangle drawn around the external edge of the area. It can have different widths on all four sides. It can also be filled with different colors and background images.

The padding is the area between the border and the content area.

The content area contains the actual content like text, pictures, graphics, or whatever.

Block Margin

· margin
· margin-top
· margin-bottom
· margin-left
· margin-right

Block Border

Border style attributes:

· border-style
· border-before-style
· border-after-style
· border-start-style
· border-end-style
· border-top-style (same as border-before)
· border-bottom-style (same as border-after)
· border-left-style (same as border-start)
· border-right-style (same as border-end)

Border color attributes:

· border-color
· border-before-color
· border-after-color
· border-start-color
· border-end-color
· border-top-color (same as border-before)
· border-bottom-color (same as border-after)
· border-left-color (same as border-start)
· border-right-color (same as border-end)

Border width attributes:

· border-width
· border-before-width
· border-after-width
· border-start-width
· border-end-width
· border-top-width (same as border-before)
· border-bottom-width (same as border-after)
· border-left-width (same as border-start)
· border-right-width (same as border-end)

Block Padding

· padding
· padding-before
· padding-after
· padding-start
· padding-end
· padding-top (same as padding-before)
· padding-bottom (same as padding-after)
· padding-left (same as padding-start)
· padding-right (same as padding-end)

Block Background

· background-color
· background-image
· background-repeat
· background-attachment (scroll or fixed)

Block Styling Attributes

Blocks are sequences of output that can be styled individually:

<fo:block

font-size="12pt"

font-family="sans-serif">

This block of output will be written in a 12pt sans-serif font.

</fo:block>

Font attributes:

· font-family
· font-weight
· font-style
· font-size
· font-variant

Text attributes:

· text-align
· text-align-last
· text-indent
· start-indent
· end-indent
· wrap-option (defines word wrap)
· break-before (defines page breaks)
· break-after (defines page breaks)
· reference-orientation (defines text rotation in 90" increments)

Example

<fo:block

  font-size="14pt" font-family="verdana" color="red"

  space-before="5mm" space-after="5mm">

W3Schools

</fo:block>

<fo:block

  text-indent="5mm"

  font-family="verdana" font-size="12pt"

  space-before="5mm" space-after="5mm">

At W3Schools you will find all the Web-building tutorials you

need, from basic HTML and XHTML to advanced XML, XSL, Multimedia

and WAP.

</fo:block>

Result:

W3Schools

At W3Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.

When you look at the example above, you can see that it will take a lot of code to produce a document with many headers and paragraphs.

Normally XSL-FO document do not combine formatting information and content like we have done here.

With a little help from XSLT we can put the formatting information into templates and write a cleaner content.

You will learn more about how to combine XSL-FO with XSLT templates in a later chapter in this tutorial.


XSL-FO Documents

XSL-FO documents are XML files with output information.

XSL-FO Documents

XSL-FO documents are XML files with output information. They contain information about the output layout and output contents.

XSL-FO documents are stored in files with a .fo or a .fob file extension. It is also quite common to see XSL-FO documents stored with an .xml extension, because this makes them more accessible to XML editors.

XSL-FO Document Structure

XSL-FO documents have a structure like this:

<?xml version="1.0" encoding="ISO-8859-1"?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">

<fo:layout-master-set>

<fo:simple-page-master master-name="A4">

  <!-- Page template goes here -->

</fo:simple-page-master>

</fo:layout-master-set>

<fo:page-sequence master-reference="A4">

<!-- Page content goes here -->

</fo:page-sequence>

</fo:root>

Structure explained

XSL-FO documents are XML documents, and must always start with an XML declaration:

<?xml version="1.0" encoding="ISO-8859-1"?>

The <fo:root> element is the root element of XSL-FO documents. The root element also declares the namespace for XSL-FO:

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">

<!-- The full XSL-FO document goes here -->

</fo:root>

The <fo:layout-master-set> element contains one or more page templates:

<fo:layout-master-set>

<!-- All page templates go here -->

</fo:layout-master-set>

Each <fo:simple-page-master> element contains a single page template. Each template must have a unique name (master-name):

<fo:simple-page-master master-name="A4">

<!-- One page template goes here -->

</fo:simple-page-master>

One or more <fo:page-sequence> elements describe the page contents. The master-reference attribute refers to the simple-page-master template with the same name:

<fo:page-sequence master-reference="A4">

<!-- Page content goes here -->

</fo:page-sequence>

Note: The master-reference "A4" does not actually describe a predefined page format. It is just a name. You can use any name like "MyPage", "MyTemplate", etc.


XSL-FO Flow

XSL-FO pages are filled with data from <fo:flow> elements.

XSL-FO Page Sequences

XSL-FO uses <fo:page-sequence> elements to define output pages.

Each output page refers to a page master which defines the layout.

Each output page has a <fo:flow> element defining the output.

Each output page is printed (or displayed) in sequence.

XSL-FO Flow

XSL-FO pages are filled with content from the <fo:flow> element.

The <fo:flow> element contains all the elements to be printed to the page.

When the page is full, the same page master will be used over (and over) again until all the text is printed.

Where To Flow?

The <fo:flow> element has a "flow-name" attribute.

The value of the flow-name attribute defines where the content of the <fo:flow> element will go.

The legal values are:

· xsl-region-body (into the region-body)
· xsl-region-before (into the region-before)
· xsl-region-after (into the region-after)
· xsl-region-start (into the region-start)
· xsl-region-end (into the region-end)


XSL-FO Introduction

Introduction to XSL-FO

XSL-FO is about formatting XML data for output.

What You Should Already Know

Before you study XSL-FO you should have a basic understanding of XML and XML Namespaces.

If you want to study these subjects first, please read our XML Tutorial.

What is XSL-FO?

· XSL-FO is a language for formatting XML data
· XSL-FO stands for Extensible Stylesheet Language Formatting Objects
· XSL-FO is a W3C Recommendation
· XSL-FO is now formally named XSL

XSL-FO is About Formatting

XSL-FO is an XML-based markup language describing the formatting of XML data for output to screen, paper or other media.

XSL-FO is Formally Named XSL

Why this confusion? Is XSL-FO and XSL the same thing?

Yes it is, but we will give you an explanation:

Styling is both about transforming and formatting information. When the World Wide Web Consortium (W3C) made their first XSL Working Draft, it contained the language syntax for both transforming and formatting XML documents.

Later, the XSL Working Group at W3C split the original draft into separate Recommendations:

· XSLT, a language for transforming XML documents
· XSL or XSL-FO, a language for formatting XML documents
· XPath, a language for navigating through elements and attributes in XML documents

The rest of this tutorial is about formatting XML documents: XSL-FO, also called XSL.

You can read more about XSLT in our XSLT Tutorial.

You can read more about XPath in our XPath Tutorial.

XSL-FO is a Web Standard

XSL-FO became a W3C Recommendation 15. October 2001. Formally named XSL.

To read more about the XSL activities at W3C please read our .


XSL-FO Output

XSL-FO defines output inside <fo:flow> elements.

XSL-FO Page, Flow, and Block

"Blocks" of content "Flows" into "Pages" and then to the output media.

XSL-FO output is normally nested inside <fo:block> elements, nested inside <fo:flow> elements, nested inside <fo:page-sequence> elements:

<fo:page-sequence>

<fo:flow flow-name="xsl-region-body">

  <fo:block>

    <!-- Output goes here -->

  </fo:block>

</fo:flow>

</fo:page-sequence>

XSL-FO Example

It is time to look at a real XSL-FO example:

<?xml version="1.0" encoding="ISO-8859-1"?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">

<fo:layout-master-set>

<fo:simple-page-master master-name="A4">

</fo:simple-page-master>

</fo:layout-master-set>

<fo:page-sequence master-reference="A4">

<fo:flow flow-name="xsl-region-body">

  <fo:block>Hello W3Schools</fo:block>

</fo:flow>

</fo:page-sequence>

</fo:root>

The output from this code would be something like this:

Hello W3Schools


XSL-FO Pages

XSL-FO uses page templates called "Page Masters" to define the layout of pages.

XSL-FO Page Templates

XSL-FO uses page templates called "Page Masters" to define the layout of pages. Each template must have a unique name:

<fo:simple-page-master master-name="intro">

<fo:region-body margin="5in" />

</fo:simple-page-master>

<fo:simple-page-master master-name="left">

<fo:region-body margin-left="2in" margin-right="3in" />

</fo:simple-page-master>

<fo:simple-page-master master-name="right">

<fo:region-body margin-left="3in" margin-right="2in" />

</fo:simple-page-master>

In the example above, three <fo:simple-page-master> elements, define three different templates. Each template (page-master) has a different name.

The first template is called "intro". It could be used as a template for introduction pages.

The second and third templates are called "left" and "right". They could be used as templates for even and odd page numbers.

XSL-FO Page Size

XSL-FO uses the following attributes to define the size of a page:

· page-width defines the width of a page
· page-height defines the height of a page

XSL-FO Page Margins

XSL-FO uses the following attributes to define the margins of a page:

· margin-top defines the top margin
· margin-bottom defines the bottom margin
· margin-left defines the left margin
· margin-right defines the right margin
· margin defines all four margins

XSL-FO Page Regions

XSL-FO uses the following elements to define the regions of a page:

· region-body defines the body region
· region-before defines the top region (header)
· region-after defines the bottom region (footer)
· region-start defines the left region (left sidebar)
· region-end defines the right region (right sidebar)

Note that the region-before, region-after, region-start, and region-end is a part of the body region. To avoid text in the body region to overwrite text in these regions, the body region must have margins at least the size of these regions.

Margin Top

M

a

r

g

i

n

L

e

f

t

REGION BEFORE

R

E

G

I

O

N

S

T

A

R

T

REGION BODY

R

E

G

I

O

N

E

N

D

REGION AFTER

M

a

r

g

i

n

R

i

g

h

t

Margin Bottom

XSL-FO Example

This is an extract from an XSL-FO document:

<fo:simple-page-master master-name="A4"

page-width="297mm" page-height="210mm"

margin-top="1cm"  margin-bottom="1cm"

margin-left="1cm" margin-right="1cm">

<fo:region-body   margin="3cm"/>

<fo:region-before extent="2cm"/>

<fo:region-after  extent="2cm"/>

<fo:region-start  extent="2cm"/>

<fo:region-end    extent="2cm"/>

</fo:simple-page-master>

The code above defines a "Simple Page Master Template" with the name "A4".

The width of the page is 297 millimeters and the height is 210 millimeters.

The top, bottom, left, and right margins of the page are all 1 centimeter.

The body has a 3 centimeter margin (on all sides).

The before, after, start, and end regions (of the body) are all 2 centimeters.

The width of the body in the example above can be calculated by subtracting the left and right margins and the region-body margins from the width of the page itself:

297mm - (2 x 1cm) - (2 x 3cm) = 297mm - 20mm - 60mm = 217mm.

Note that the regions (region-start and region-end) are not a part of the calculation. As described earlier, these regions are parts of the body.


XSL-FO Reference

XSL Formatting Objects Reference

The process that converts a description into a presentation is called formatting.

Object | Description
basic-link | Represents the start resource of a link
bidi-override | Overrides the default Unicode BIDI direction
 | Defines a block of output (e.g. paragraphs and titles)
 | Defines a block-level reference-area
 | Specifies a character that will be mapped to a glyph for presentation
color-profile | Defines a color-profile for a stylesheet
 | Specifies a page-master to be used when the conditions defined are true
declarations | Groups global declarations for a stylesheet
external-graphic | Used for a graphic where the graphics data resides outside of the XML result tree
float | Typically used to position an image in a separate area at the beginning of a page OR to position an image to one side, with the content flowing along-side of the image
 | Contains all elements to be printed to a page
footnote | Defines a footnote within the region-body of a page
 | Defines the content of the footnote
initial-property-set | Formats the first line of an <fo:block>
inline | Formats a part of a text with a background or enclosing it in a border
inline-container | Defines an inline reference-area
instream-foreign-object | Used for inline graphics or for "generic" objects where the object's data resides as descendants of <fo:instream-foreign-object>
layout-master-set | Holds all masters used in a document
leader | Used to generate "." to separate titles from page numbers in table of contents, or to create input fields in forms, or to create horizontal rules
list-block | Defines a list
list-item | Contains each item in the list
list-item-body | Contains the content/body of the list-item
list-item-label | Contains the label for the list-item (typically a number, character, etc.)
marker | Used with <fo:retrieve-marker> to create running headers or footers
 | Contains (within an <fo:multi-switch>) each alternative sub-tree of XSL-FO objects. The parent <fo:multi-switch> will choose which alternative to show and hide the rest
 | Used to switch between two or more property-sets
multi-property-set | Specifies an alternative property-set that will be applied depending on the state of the user agent
multi-switch | Holds one or more <fo:multi-case> objects and controls the switching between them (activated by <fo:multi-toggle>)
multi-toggle | Used to switch to another <fo:multi-case>
page-number | Represents the current page-number
page-number-citation | References the page-number for the page that contains the first normal area returned by the cited object
page-sequence | A container for page output elements. There will be one <fo:page-sequence> object for each page layout
page-sequence-master | Specifies which simple-page-masters are to be used and in which order
region-after | Defines a page footer
region-before | Defines a page header
region-body | Defines a page body
region-end | Defines the right sidebar of a page
 | Defines the left sidebar of a page
repeatable-page-master-alternatives | Specifies repetition of a set of simple-page-masters
repeatable-page-master-reference | Specifies repetition of a single simple-page-master
retrieve-marker | Used with <fo:marker> to create running headers or footers
root | The root (top) node for XSL-FO documents
simple-page-master | Defines the size and shape of a page
single-page-master-reference | Specifies a page-master to be used at a given point in the sequence of pages
static-content | Contains static content (e.g. headers and footers) that will be repeated on many pages
table | Formats the tabular material of a table
 | Formats a table and its caption
table-body | Container for table rows and table cells
table-caption | Contains the caption for a table
table-cell | Defines a table cell
table-column | Formats the columns of a table
 | Defines a table footer
 | Defines a table header
table-row | Defines a table row
title | Defines a title for a page-sequence
wrapper | Specifies inherited properties for a group of XSL-FO objects


XSL-FO Software

XSL-FO needs formatting software to produce output.

XSL-FO Processors

An XSL-FO processor is a software program for formatting XSL documents for output.

Most XSL-FO processors can output PDF documents and quality print, as well as HTML and other formats.

Some well-known XSL-FO processors are described below.

XSL Formatter

XSL Formatter is a software to format XML documents for production-quality printing and output to PDF.

Antenna House has been providing version V2 of the same product since January, 2002 in the global market, and XSL Formatter was rated as one of the best quality product at the XML 2002, XML 2003 conferences held in Europe.

Building on over 4 years of experience developing XSL-FO software, Antenna House has completely written from scratch an entirely new Formatter that offers significant enhancements and provides a solid foundation on which to continue to move forward.

Visit Antenna House

Xinc Beta Release

Xinc is an XSL-FO processor by Lunasil LTD.

Xinc is designed to be fast, multithreaded and memory efficient. A Swing based XSL-FO viewer allows you to view and print XSL-FO files as well as generate PDF files with the click of a button. Xinc can be used as a server component via its Java API. Xinc can also be used in a Microsoft server environment by using its COM interface. New features include hyphenation, basic-link, PDF output, memory/speed optimizations and a simple COM interface.

Visit Lunasil Ltd

Scriptura

Inventive Designers Scriptura is a cross-platform document design and generation solution based on XSLT and XSL-FO.

Scriptura has a WYSIWYG design tool and engine. The XSL-FO formatter used in the engine is no longer based on Apache FOP, but is written from scratch by Inventive Designers. The new features in this release are: support for bulleted and numbered lists, 'break-before' and 'break-after' properties, extended bar code options and improved number and currency formatting. A free trial version is available for download.

Visit Inventive Designers


XSL-FO Tables

XSL-FO uses the <fo:table-and-caption> element to define tables.

XSL-FO Tables

The XSL-FO table model is not very different from the HTML table model.

There are nine XSL-FO objects used to create tables:

· fo:table-and-caption
· fo:table
· fo:table-caption
· fo:table-column
· fo:table-header
· fo:table-footer
· fo:table-body
· fo:table-row
· fo:table-cell

XSL-FO uses the <fo:table-and-caption> element to define a table. It contains a <fo:table> and an optional <fo:caption> element.

The <fo:table> element contains optional <fo:table-column> elements, an optional <fo:table-header> element, a <fo:table-body> element, and an optional <fo:table-footer> element. Each of these elements has one or more <fo:table-row> elements, with one or more <fo:table-cell> elements:

<fo:table-and-caption>

<fo:table>

<fo:table-column column-width="25mm"/>

<fo:table-column column-width="25mm"/>

<fo:table-header>

<fo:table-row>

  <fo:table-cell>

    <fo:block font-weight="bold">Car</fo:block>

  </fo:table-cell>

  <fo:table-cell>

    <fo:block font-weight="bold">Price</fo:block>

  </fo:table-cell>

</fo:table-row>

</fo:table-header>

<fo:table-body>

<fo:table-row>

  <fo:table-cell>

    <fo:block>Volvo</fo:block>

  </fo:table-cell>

  <fo:table-cell>

    <fo:block>$50000</fo:block>

  </fo:table-cell>

</fo:table-row>

<fo:table-row>

  <fo:table-cell>

    <fo:block>SAAB</fo:block>

  </fo:table-cell>

  <fo:table-cell>

    <fo:block>$48000</fo:block>

  </fo:table-cell>

</fo:table-row>

</fo:table-body>

</fo:table>

</fo:table-and-caption>

The output from this code would something like this:

Car | Price
Volvo | $50000
SAAB | $48000


XSL-FO and XSLT

 Top Previous

XSL-FO and XSLT can help each other.

Remember this Example?

<fo:block

  font-size="14pt" font-family="verdana" color="red"

  space-before="5mm" space-after="5mm">

W3Schools

</fo:block>

<fo:block

  text-indent="5mm"

  font-family="verdana" font-size="12pt"

  space-before="5mm" space-after="5mm">

At W3Schools you will find all the Web-building tutorials you

need, from basic HTML and XHTML to advanced XML, XSL, Multimedia

and WAP.

</fo:block>

Result:

W3Schools

At W3Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.

The example above is from the chapter about XSL-FO Blocks.

With a Little Help from XSLT

Remove the XSL-FO information from the document:

<header>

W3Schools

</header>

<paragraph>

At W3Schools you will find all the Web-building tutorials you

need, from basic HTML and XHTML to advanced XML, XSL, Multimedia

and WAP.

</paragraph>

Add an XSLT transformation:

<xsl:template match="header">

<fo:block

  font-size="14pt" font-family="verdana" color="red"

  space-before="5mm" space-after="5mm">

  <xsl:apply-templates/>

</fo:block>

</xsl:template>

<xsl:template match="paragraph">

<fo:block

  text-indent="5mm"

  font-family="verdana" font-size="12pt"

  space-before="5mm" space-after="5mm">

  <xsl:apply-templates/>

</fo:block>

</xsl:template>

And the result will be the same:

W3Schools

At W3Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.