Source Code


HTML Basic
A very simple HTML document
HTML headings
HTML paragraphs
HTML links
HTML images
Examples explained
HTML Headings
HTML headings
Insert comments in the HTML source code
Insert horizontal lines
Examples explained
HTML Paragraphs
HTML paragraphs
More paragraphs
The use of line breaks
Poem problems (some problems with HTML formatting)
Examples explained
HTML Text Formatting
Text formatting
Preformatted text (how to control line breaks and spaces)
Different computer-output tags
Insert contact information
Abbreviations and acronyms
Text direction
Long and short quotations
How to mark deleted and inserted text
Examples explained
HTML Styles
Style HTML elements
Style background color
Style font, color, and size
Style alignment of text
Examples explained
HTML Links
How to create hyperlinks
Use an image as a link
Open 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)
Another mailto link
Examples explained
HTML Images
Insert images
Insert images from another folder or another server
Aligning images
Let the image float to the left/right of a paragraph
Make a hyperlink of an image
Create an image-map, with clickable regions
Examples explained
HTML Tables
Simple tables
Different table borders
Tables without borders
Table headers
Table with a caption
Table cells that span more than one row/column
Tags inside a table
Cell padding (control the white space between cell content and the borders
Cell spacing (control the distance between cells)
The frame attribute
Examples explained
HTML Lists
An unordered list
An ordered list
Different types of ordered lists
Different types of unordered Lists
Nested list
Nested list 2
Definition list
Examples explained
HTML Forms and Input
Create text fields
Create password field
Checkboxes
Radio buttons
Simple drop-down list
Drop-down list with a pre-selected value
Textarea (a multi-line text input field)
Create a button
Draw a border around form-data
Form with text fields and a submit button
Form with checkboxes and a submit button
Form with radiobuttons and a submit button
Send e-mail from a form
Examples explained
HTML Frames
A vertical frameset
A horizontal frameset
How to use the <noframes> tag
How to mix a frameset in rows and columns
Frameset with noresize="noresize"
How to create a navigation frame
Inline frame (a frame inside an HTML page)
Jump to a specified section within a frame
Jump to a specified section with frame navigation
Examples explained
HTML and Styles
Using styles in HTML
Link that is not underlined
Link to an external style sheet
Examples explained
HTML head Elements
Specify a title for a document
One target for all links on a page
Examples explained
HTML <meta> Tags
Document description
Document keywords
Redirect a user
Examples explained
HTML Scripts
Insert a script
Use of the <noscript> tag
Examples explained


CSS Examples

CSS Backgrounds
Set the background color of a page
Set the background color of different elements
Set an image as the background of a page
Bad background image
How to repeat a background image only horizontally
How to position a background image
A fixed background image (this image will not scroll with the rest of the page)
All the background properties in one declaration
Advanced background example
Background properties explained
CSS Text
Set the text color of different elements
Align the text
Remove the line under links
Decorate the text
Control the letters in a text
Indent text
Specify the space between characters
Specify the space between lines
Set the text direction of an element
Increase the white space between words
Disable text wrapping inside an element
Vertical alignment of an image inside text
Text properties explained
CSS Fonts
Set the font of a text
Set the size of the font
Set the size of the font in px
Set the size of the font in em
Set the size of the font in percent and em
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
Font properties explained
CSS Links
Add different colors to visited/unvisited links
Use of text-decoration on links
Specify a background color for links
Add other styles to hyperlinks
Advanced - Create link boxes
Link properties explained
CSS Lists
All the different list item markers in lists
Set an image as the list-item marker
Set an image as the list-item marker - Crossbrowser solution
All list properties in one declaration
List properties explained
CSS Tables
Specify a black border for table, th, and td elements
Use of border-collapse
Specify the width and height of a table
Set the horizontal alignment of content (text-align)
Set the vertical alignment of content (vertical-align)
Specify the padding for th and td elements
Specify the color of the table borders
Set the position of the table caption
Create a fancy table
Table properties explained
CSS Box Model
Specify an element with a total width of 250px
Specify an element with a total width of 250px - Crossbrowser solution
Box model explained
CSS Border
Set the width of the four borders
Set the width of the top border
Set the width of the bottom border
Set the width of the left border
Set the width of the right border

Set the style of the four borders
Set the style of the top border
Set the style of the bottom border
Set the style of the left border
Set the style of the right border

Set the color of the four borders
Set the color of the top border
Set the color of the bottom border
Set the color of the left border
Set the color of the right border

All the border properties in one declaration

Set different borders on each side
All the top border properties in one declaration
All the bottom border properties in one declaration
All the left border properties in one declaration
All the right border properties in one declaration
Border properties explained
CSS Outline
Draw a line around an element (outline)
Set the style of an outline
Set the color of an outline
Set the width of an outline
Outline properties explained
CSS Margin
Specify margins for an element
The margin shorthand property
Set the top margin of a text using a cm value
Set the bottom margin of a text using a percent value
Set the left margin of a text using a cm value
Margin properties explained
CSS Padding
Set the left padding of an element
Set the right padding of an element
Set the top padding of an element
Set the bottom padding of an element
All the padding properties in one declaration
Padding properties explained
CSS Grouping and Nesting
Group selectors
Nested (descendant) selectors
Grouping and nesting explained
CSS Dimension
Set the height of an image using a pixel value
Set the height of an image using percent
Set the width of an element using a pixel value
Set the width of an element using percent
Set the maximum height of an element
Set the maximum width of an element using a pixel value
Set the maximum width of an element using percent
Set the minimum height of an element
Set the minimum width of an element using a pixel value
Set the minimum width of an element using percent
Dimension properties explained
CSS Display
How to hide an element (visibility:hidden)
How to not display an element (display:none)
How to display an element as an inline element
How to display an element as a block element
How to make a table element collapse
Display properties explained
CSS Positioning
Position an element relative to the browser window
Position an element relative to its normal position
Position an element with an absolute value
Overlapping elements
Set the shape of an element
How to create a scroll bar when an element's content is too big to fit
How to set the browser to automatically handle overflow
Set the top edge of an image using a pixel value
Set the bottom edge of an image using a pixel value
Set the left edge of an image using a pixel value
Set the right edge of an image using a pixel value
Change the cursor
Positioning properties explained
CSS Floating
A simple use of the float property
An image with border and margins that floats to the right in a paragraph
An image with a caption that floats to the right
Let the first letter of a paragraph float to the left
Create an image gallery with the float property
Turn of float - with the clear property
Creating a horizontal menu
Creating a homepage without tables
Float properties explained
CSS Aligning Elements
Center aligning with margin
Left/Right aligning with position
Left/Right aligning with position - Crossbrowser solution
Left/Right aligning with float
Left/Right aligning with float - Crossbrowser solution
Align properties explained
CSS Generated Content
Insert the URL in parenthesis after each link with the content property
Numbering sections and sub-sections with "Section 1", "1.1", "1.2", etc.
Specify the quotation marks with the quotes property
CSS Pseudo-classes
Add different colors to a hyperlink
Add other styles to hyperlinks
Use of :focus
:first-child - match the first p element
:first-child - match the first i element in all p elements
:first-child - Match all i elements in all first child p elements
Use of :lang
Pseudo-classes explained
CSS Pseudo-elements
Make the first letter special in a text
Make the first line special in a text
Make the first letter and first line special
Use :before to insert some content before an element
Use :after to insert some content after an element
Pseudo-elements explained
CSS Navigation Bars
Fully styled vertical navigation bar
Fully styled horizontal navigation bar
Navigation bars explained
CSS Image Gallery
Image gallery
Image gallery explained
CSS Image Opacity
Creating transparent images - mouseover effect
Creating a transparent box with text on a background image
Image opacity explained
CSS Image Sprites
An image sprite
An image sprite - a navigation list
An image sprite with hover effect
Image sprites explained
CSS Attribute Selectors
Select elements with a title attribute
Select elements with title=a specific value
Select elements with title=a specific value (even if the attribute has space-separated values)
Select elements with title=a specific value (even if the attribute has hyphen-separated values)
Attribute selectors explained

 

XML Examples

Viewing XML Files
View a simple XML file (note.xml)
View the same XML file with an error
View an XML CD catalog
View an XML plant catalog
View an XML food menu
Examples explained
XML and CSS
View an XML CD catalog
View the corresponding CSS file
Display the CD catalog formatted with the CSS file
Examples explained
XML and XSLT
View an XML food menu
View the corresponding XSLT stylesheet
Display the food menu styled with the XSLT stylesheet
Examples explained
Parsing XML and the XML DOM
View a simple XML file (note.xml)
Parse the XML file - Crossbrowser example
Parse an XML string - Crossbrowser example
Examples explained
XML to HTML
View an XML CD catalog
Display XML data in an HTML table
Examples explained
XML Applications
View an XML CD catalog
Show XML data inside an HTML div element
Navigate through XML nodes
A simple CD catalog application
Examples explained
XML Output From a Server
See how ASP can return XML
See how PHP can return XML
View XML output from a database
Examples explained
XML DOM Advanced
Get the value of an XML element
Get the value of an XML attribute
Change the value of an XML element
Add a new attribute to an XML element
Create a new XML element
Remove an XML element
Examples explained


JavaScript Examples

Basic JavaScript Examples

Write to the Document with JavaScript
Change HTML elements with JavaScript
An external JavaScript
Examples explained

JavaScript Statements, Comments and Blocks

JavaScript statements.
JavaScript blocks.
Single line comments.
Multiple lines comments.
Single line comment to prevent execution.
Multiple lines comment to prevent execution.
Examples explained

JavaScript Variables

Declare a variable, assign a value to it, and display it
Examples explained

JavaScript Conditional If ... Else

If statement
If...else statement
Random link
Switch statement
Examples explained

JavaScript Popup Boxes

Alert box
Alert box with line breaks
Confirm box
Prompt box
Examples explained

JavaScript Functions

Call a function
Function with an argument
Function with an argument 2
Function that returns a value
Function with arguments, that returns a value
Examples explained

JavaScript Loops

For loop
Looping through HTML headers
While loop
Do While loop
Break a loop
Break and continue a loop
Use a for...in statement to loop through the elements of an object
Examples explained

JavaScript Events

Acting to the onclick event
Acting to the onmouseover event
Examples explained

JavaScript Error Handling

The try...catch statement
The try...catch statement with a confirm box
The onerror event
Examples explained

Advanced JavaScript Examples

Create a welcome cookie
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 an object constructor

JavaScript Objects Examples

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()
Replace characters in a string - replace()
More String object examples in our JavaScript reference.

Date Object

Use Date() to return today's date and time
Use getTime() to calculate the years since 1970
Use setFullYear() to set a specific date
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 JavaScript reference.

Array Object

Create an array
Join two arrays - concat()
Join three arrays - concat()
Join all elements of an array into a string - join()
Remove the last element of an array - pop()
Add new elements to the end of an array - push()
Reverse the order of the elements in an array - reverse()
Remove the first element of an array - shift()
Select elements from an array - slice()
Sort an array (alphabetically and ascending) - sort()
Sort numbers (numerically and ascending) - sort()
Sort numbers (numerically and descending) - sort()
Add an element to position 2 in an array - splice()
Convert an array to a string - toString()
Add new elements to the beginning of an array - unshift()
More Array object examples in our JavaScript reference.

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
Use min() to return the number with the lowest value of two specified numbers
Convert Celsius to Fahrenheit

General

Use a for...in statement to loop through the elements of an object
More Math object examples in our JavaScript reference.

JavaScript Browser Objects Examples

Window Object

Display an alert box
Display an alert box with line-breaks
Display a confirm box, and alert what the visitor clicked
Display a prompt box
Create a pop-up window Open a new window when clicking on a button
Open a new window and control its appearance
Open multiple new windows
Assure that the new window does NOT get focus (send it to the background)
Assure that the new window GETS focus
Close the new window
Checks whether the new window has been closed or not
Return the name of the new window
Write some text to the source (parent) window
Move the new window relative to its current position
Move the new window to the specified position
Print the current page
Resize a window by the specified pixels
Resize a window to a specified size
Scroll the content by the specified number of pixels
Scroll the content to a specified position
A simple timing
Set and stop a timer with setTimeout() and clearTimeout()
Set and stop a timer with setInterval() and clearInterval()
More Window object examples in our JavaScript reference.

Navigator Object

All details about the visitor's browser
More Navigator object examples in our JavaScript reference.

Screen Object

All details about the visitor's screen
More Screen object examples in our JavaScript reference.

History Object

Return the number of URLs in the history list
Create a back button on a page
Create a forward button on a page
Load a specific URL from the history list
More History object examples in our JavaScript reference.

Location Object

Return the hostname and port of the current URL
Return the entire URL of the current page
Return the path name of the current URL
Return the protocol portion of the current URL
Load a new document
Reload the current document
Replace the current document
Break out of a frame
More Location object examples in our JavaScript reference.

JavaScript HTML DOM Examples

Examples of using JavaScript to access and manipulate the HTML DOM objects.

Document Object

Write text to the output with document.write()
Write formatted text to the output with document.write()
Return the number of anchors in a document
Return the innerHTML of the first anchor in a document
Return the number of forms in a document
Return the name of the first form in a document
Return the number of images in a document
Return the id of the first image in a document
Return the number of links in a document
Return the id of the first link in a document
Return all name/value pairs of cookies in a document
Return the domain name of the server that loaded the document
Return the date and time the document was last modified
Return the URL of the document that loaded the current document
Return the title of a document
Return the full URL of a document
Open an output stream, and add some text
Open an output stream in a new window, and add some text
Difference between write() and writeln()
Alert innerHTML of an element with a specific ID
Alert the number of elements with a specific name
Alert the number of elements with a specific tagname
More Document object examples in our JavaScript reference.

Anchor Object

Return and set the value of the charset attribute of a link
Return the value of the href attribute of a link
Return and set the value of the hreflang attribute of a link
Return the name of an anchor
Return the relationship between the current document and the linked document
Change the target attribute of a link
Return the value of the type attribute of a link
More Anchor object examples in our JavaScript reference.

Area Object

Return the alternate text for an area in an image-map
Return the coordinates of an area in an image-map
Return the anchor part of the href attribute of an area
Return the hostname:port for an area in an image-map
Return the hostname for an area in an image-map
Return the port for an area in an image-map
Return the href of an area in an image-map
Return the pathname for an area in an image-map
Return the protocol for an area in an image-map
Return the querystring part of the href attribute of an area
Return the shape of an area in an image-map
Return the value of the target attribute for an area in an image-map
More Area object examples in our JavaScript reference.

Base Object

Return the base URL for all relative URLs on a page
Return the base target for all links on a page
More Base object examples in our JavaScript reference.

Button Object

Set a button to disabled when clicked
Return the name of a button
Return the type of a button
Return the text displayed on a button
Return the id of the form a button belongs to
More Button object examples in our JavaScript reference.

Form Object

Return the value of each element in a form
Return the value of the accept-charset attribute in a form
Return the value of the action attribute in a form
Return the value of the enctype attribute in a form
Return the number of elements in a form
Return the method for sending form data
Return the name of a form
Return the value of the target attribute in a form
Reset a form
Submit a form
More Form object examples in our JavaScript reference.

Frame/IFrame Objects

Align an iframe
Change the background color of the document contained in an iframe
Return the value of the frameborder attribute in an iframe
Remove frameborder of an iframe
Change the height and width of an iframe
Return the value of the longdesc attribute in an iframe
Return the value of the marginheight attribute in an iframe
Return the value of the marginwidth attribute in an iframe
Return the value of the name attribute in an iframe
Return and set the value of the scrolling attribute in an iframe
Change the src attribute of an iframe

More Frame/IFrame object examples in our JavaScript reference.

Image Object

Align an image
Return the alternate text of an image
Add border to an image
Change the height and width of an image
Set the hspace and vspace properties of an image
Return the value of the longdesc attribute of an image
Create a link to a low-resolution version of an image
Return the name of an image
Change the src of an image
Return the value of the usemap attribute of a client-side image-map

More Image object examples in our JavaScript reference.

Event Object

Which mouse button was clicked?
What is the keycode of the key pressed?
What are the coordinates of the cursor?
What are the coordinates of the cursor, relative to the screen?
Was the shift key pressed?
Which element was clicked?
Which event type occurred?

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
Remove options from a dropdown list

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

ASP Examples

 

Basic
Write text using ASP
Format text with HTML tags
Variables
Create a variable
Create an array
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 day
Get the name of a month
Get todays' day and month
Countdown to year 3000
Calculate the day which is n days from today
Format date and time
Is this a date?
Some Other Functions (VBScript)
Uppercase or lowercase a string
Trim a string
How to reverse a string?
How to round a number?
A random number
Return a specified number of characters from left/right of a string
Replace some characters in a string
Return a specified number of characters from a string
Procedures
Call a procedure using VBScript in ASP
Call a procedure using JavaScript in ASP
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
Write text using ASP
Format text with HTML tags
Redirect the user to another URL
Random links
Controlling the buffer
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
Send extra information within a link
A QueryString collection in its simplest use
How to use information from forms
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
Welcome cookie
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?
Open a textfile for reading
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 a specified drive
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 letter 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 path of a specified drive
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?
Return the attributes of a specified file
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
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

 


 


 

 


 

Subscribe to: Posts (Atom)