Home arrow HTML arrow Page 2 - How to Create a Dynamic Web Page
HTML

How to Create a Dynamic Web Page


This quick tutorial demonstrates how fast and easy it is to produce web pages with dynamic content that are purely client based. This is aimed at beginners to web programming or those of you who like to keep things fairly simple. Wellman's creative names for cities and towns adds a bit of humor too.

Author Info:
By: Dan Wellman
Rating: 3 stars3 stars3 stars3 stars3 stars / 93
June 14, 2004
TABLE OF CONTENTS:
  1. · How to Create a Dynamic Web Page
  2. · Code for Drop-down Box and Text Area
  3. · Making the HTML Elements Interact
  4. · Completed File

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
How to Create a Dynamic Web Page - Code for Drop-down Box and Text Area
(Page 2 of 4 )

The code used is all my own, so feel free to tweak it, customize it and build on it in any way you like. I’ve used a simple name and address list as an example here, more to demonstrate usage than as a recommended employment, but its use is limited only by your imagination. It doesn’t have to be confined to the web either; you can have the page saved on your desktop at home, or on a shared volume on the office network.

To begin with open Notepad (or your HTML editor of choice), and add the following code to a text file: 

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Save it as htmlTemplate.txt, and from now on, you can just open the template file, add your code between the relevant tags and save it under a different name. If you produce a lot of HTML in Notepad, it will save you time.

Open your template file or add the above tags to a blank page. Give the page a title and let’s get the basic HTML for the page laid out. You will be using two objects mainly: a drop-down or selection box for visitors of the page to choose the content that gets displayed, and a text area to exhibit information based on the selection.

To set the drop-down box, add the following section of code in between the <body> tags:

<select >
<option>Please select</option>
<option>Mr Smith</option>
<option>Mrs Bloggs</option>
<option>Mr Doe</option>
<option>Mrs Jones</option>
<option>Mr Spencer</option>
<option>Mr Field</option>
<option>Ms Reed</option>
<option>Mr Waters</option>
<option>Mrs Frank</option>
<option>Mr Green</option>
</select>

To create the text area, add this code below to selection box code shown above:

<form>
<textarea rows="12" cols="60"> </textarea>
</form>

The rows and cols properties of the <textarea> element dictate the size of the text area, each row is a normal line height, and each column is normal character width. 


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 4 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials