Web Design I. Web Enhancement XHTML/CSS Tutorial Nine
|
|
- Bruce Nigel Miller
- 7 years ago
- Views:
Transcription
1 Web Design I Web Enhancement XHTML/CSS Tutorial Nine Form Elements Introduction You have walked through what may seem to be a labyrinth of danger, but if you have succeeded your work has produced a professional quality Web site. You have only one task left to complete this exercise form elements. The sample form that you will write for this project will only offer an appearance of a form without the functionality necessary to make it useful. Making it function as a means of gathering information requires a server-side data store with a Common Gateway Interface (CGI) to make the Web page communicate with the data store. That technology is beyond the scope of this course. This lesson also will put some finishing touches on your work to bring it to completion. Tutorial topics This exercise will cover the following concepts: Form elements Response page Finishing touches Begin by opening the template_01.html file in your text editor. Save it as contact.html in the html folder. Correctly address the external CSS file so the page will have its design. Remove the <div class="footer"> at the bottom of the page. Change the headline color to # (dark green) and change the text to "Contact Us." Add the following code immediately below the <h2> element: <p class="body">we would like to hear from you. Please fill in the following form and send us your comments.<br/> If you prefer, please <a href="mailto:bridges.west@ .net?subject=inquiry&body=this IS NOT A REAL ADDRESS. DO NOT SEND MESSAGE." onclick="alert('this address is for learning purposes only. It is not a real one.')"> Us</a>.</p> <td style="padding-left:132px;"> You may need an explanation of the <a href=""> code. This is a "mailto" link. It calls the browser's default client application. If one is not specified on Prepared by Paul Roberts Copyright 2010 by Digital Communication Department. All Rights Reserved
2 Form elements the client's (user's) computer, this link will not work. Mailto links are unreliable for this reason. Let's analyze the link: mailto: Calls the client Represents any target address? Initializes a set of name-value pairs subject=inquiry First name-value pair; "subject" refers to the Subject field in the client; "Inquiry" is the default content of the field & Separates name-value pairs body=this IS NOT MESSAGE. Second name-value pair; "body" refers to the body (message) field; the rest is the default message. This method allows the user to send an message to the address you specify in the code. The onclick property is a JavaScript event handler. The context of this code means that when the user performs a mouse click on the link, an alert box will pop up with the message that is contained in the parentheses. The alert() is called a method and the content within the parentheses is called the argument. After you type the code, save the file and try it in your browser. It should work like the contact page at this address: Of course, your page will not have the form element yet. However, the above page is what you are trying to accomplish. Now take a look at form elements. Understand that a <form> element serves as the container for a number of child elements. Those child elements must exist within the form element in order for the form to work. You will provide an action that will take the user to a response page. You must have the <form> element for that to work. An HTML form is a feature of a document containing normal content, as you have done thus far. The form contains special elements called controls (checkboxes, radio buttons, menus, text boxes, text areas, for instance), and labels on those controls. Users generally "complete" a form by modifying its controls (entering text, selecting menu items, checking boxes), before submitting the form to an agent for processing such as a client-side script, an server or a server-side data store. Here is a partial list of form controls, also known as input types with some explanation: Web Enhancement HTML/CSS Tutorial Nine Form Elements Page 2
3 Check Boxes checkbox Used by a browser to display checkboxes. <input type="checkbox" name="fieldname" value="default data" Checked />Checkbox Label Value The default information that should be placed into the field. Checked (optional) Specifies that the checkbox is checked by default. Checkbox Label The label that the user sees in the browser. Pop-up Menu/Scrolling List select Used by a browser to display a scrolling list. <select size=rows name="fieldname"> <option value="default data" Selected>Visible Value</option> </select> Rows Number of rows to display in the scrolling list. Value The default information that should be placed into the field. Selected (optional) Specifies that the list item is selected by default. Visible Value The value that the user sees in the browser. Radio Buttons radio Used by a browser to display a radio buttons. <input type="radio" name="fieldname" value="default data" Checked />Radio Button Label Value The default information that should be placed into the field. Checked (optional) Specifies that the checkbox is checked by default. Radio Button Label The label that the user sees in the browser. Reset Button reset Used to reset all other HTML input types on the form to their default values. <input type="reset" value="button Text"> Value Button label text. Web Enhancement HTML/CSS Tutorial Nine Form Elements Page 3
4 Submit Button submit Used by a browser to create a button that will perform an action. <input type="submit" name="action Tag" value="button Text"> Name Action to perform when the button is pressed. May not always be needed, depending on CGI technology. Value Button label text. Text text Used by a browser to display or collect a single line of text. <input type="text" name="fieldname" value="default data" size="60"> Value The default information that should be placed into the field. Size Specifies the width of the box in terms of characters. Text Area textarea Used by a browser to display multiple lines of text. <textarea name="fieldname" rows=rows cols=columns>default Data </textarea> Rows Number of rows of text to accommodate in the browser. Columns Number of characters to display per row. Default Data The default information that should be placed into the field. If you would like more information on form elements, refer to the W3C Web site, using the following address: Before working on the form, add the style for the form to the external CSS file. Here is the style definition: p.form { padding-left: 12pt; padding-top: 6pt; font-weight: bold; text-align: right; color: darkgreen; } Web Enhancement HTML/CSS Tutorial Nine Form Elements Page 4
5 Now let's put the form on the Contact Us page. Nest a table inside the form element. This will add order to the form. Add the code to your present file as indicated: <h2>headline</h2> <p>we would like to hear from you. Please fill in the following form and send us your comments.<br/> If you prefer, please <a IS NOT A REAL ADDRESS. DO NOT SEND MESSAGE." onclick="alert('this address is for learning purposes only. It is not a real one.')"> Us</a>.</p> <form action="response.html"> <table style="width: 70%;" border="0" align="left"> <p class="form">first/last Name: </p> <input type="text" name="firstname" size="20" value=""/> <input type="text" name="lastname" size="20" value=""/> <p class="form">mailing Address: </p> <input type="text" name="address" size="45" value=""/> <p class="form">city/state/zip: </p> <input type="text" name="city" size="22" value=""/>, <input type="text" name="state" size="2" value=""/> <input type="text" name="zip" size="10" value=""/> <p class="form"> Address: </p> <input type="text" name=" " size="45" value=""/> Web Enhancement HTML/CSS Tutorial Nine Form Elements Page 5
6 <p class="form">your Comments: </p> <textarea cols="45" rows="6"> </textarea> <input type="submit" value="send" /> <input type="reset" value="clear Form"/> </table> </form> </div> </body> </html> Response page Note that the action property in the <form> tag points to a file named response.html. The action tells the browser what to do once the submit button is activated. You need to write that page. Use the template as the basis. Here is the code for the page: <?xml version="1.0" encoding="iso " standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>bridges of the American West</title> <meta http-equiv="refresh" content="5; url=../index.html"/> <link rel="stylesheet" type="text/css" href="../css/bridges.css"/> <style type="text/css"> h2 { margin-top: 48pt; color: #060; } </style> </head> <body> <div class="base"> <table class="menu" border="0"> Web Enhancement HTML/CSS Tutorial Nine Form Elements Page 6
7 <a href="#" class="menu">about Bridges</a> <a href="#" class="menu">western Bridges</a> <a href="#" class="menu">resources</a> <a href="html/site_map.html" class="menu">site Map</a> <a href="#" class="menu">contact Us</a> </table> <h2>thank you!</h2> <p style="padding-bottom: 390px;">We appreciate your comments and suggestions. We will use them to help us improve our site.</p> </div> </body> </html> Note that the <meta> element redirects this page back to the home page after three seconds. The only thing the form page accomplishes in this example is thanking the user for the information that goes no place. As explained earlier, you need a CGI and a server-side data store or a client-side script to create a cookie for the input information to be useful. As it is, the data is lost upon clicking Submit button. Now change the navigation bar to exclude the Contact Us page and include the Bridges Home page, as shown in the example. Finishing touches All you need to do to now is put a few finishing touches on the project. Most of this involves the use of named anchors. These function in a fashion similar to other links using the <a> element, except these point to a specific spot on the target page whether the target page is the current page or a different one. Here is how it works. You place an anchor (<a>) at the target location. Instead of using the href property, use the name property. The value can be anything you want. The code would look like this: <a name="anything"></a> From the link that is used to point to that place, the value of the href property begins with the pound sign (#) followed by the name of the target, without spaces if it is on the same page. This calls the named anchor. Here's an example: Web Enhancement HTML/CSS Tutorial Nine Form Elements Page 7
8 <a href="#anything">link text</a> If the target is on a different page, point to the page first, then call the named anchor on that page. Here's an example: <a href="other_page.html#anything">link text</a> Your task is to go to each of the individual bridge files and tweak the code to include a target to a named anchor. You will need to include the named anchor on the target pages. Follow these steps, using your skills: 1. Open the About Bridges file and insert the following code as indicated: <p>here are a few bridges that represent the development of these engineering marvels across time.</p> <a name="table"></a> <table class="explore" border="0"> 2. Open the Western Bridges file and insert the following code as indicated: <p class="body">here are a few examples of the many bridges one might discover in the American West. Enjoy this brief tour and check out the Resources page for more information.</p> <a name="table"></a> <table class="explore" border="0"> 3. Go to each of the individual bridge files and call the named anchor in the appropriate link. If the bridge is listed on the About Bridges page, point to that page. If it is listed on the Western Bridges page, point to that one. In the case of the Alvord Lake Bridge, don t point to a named anchor only to the page. Here is an example of the Golden Gate Bridge, which is listed on the Western Bridges page. <table class="menu" border="0"> <a href="../index.html" class="menu">bridges Home</a> <a href="about.html" class="menu">about Bridges</a> <a href="western.html#table" class="menu">western Bridges</a> Web Enhancement HTML/CSS Tutorial Nine Form Elements Page 8
9 <a href="resources.html" class="menu">resources</a> <a href="site_map.html" class="menu">site Map</a> </table> Look at the example site to ensure that your project works correctly. Part of this tweaking is making a link to the Alvord Lake Bridge from the body text of the About Bridges page. Assignment Congratulations Complete the tutorial exercise on your local computer. Upload the files in their appropriate folders to your FTP site then the URL to the exercise's home page (index.html) to your instructor with the message that you have completed the work. Assuming that you have completed all lessons of this tutorial correctly, congratulations on your effort. You have begun a discipline in careful hand coding that many amateur and even some professional Web authors lack. Keep up the practice of these skills, and your abilities will combine with skills you will acquire in the future to turn you into a Web professional. Web Enhancement HTML/CSS Tutorial Nine Form Elements Page 9
HTML Form Widgets. Review: HTML Forms. Review: CGI Programs
HTML Form Widgets Review: HTML Forms HTML forms are used to create web pages that accept user input Forms allow the user to communicate information back to the web server Forms allow web servers to generate
More informationCREATING WEB FORMS WEB and FORMS FRAMES AND
CREATING CREATING WEB FORMS WEB and FORMS FRAMES AND FRAMES USING Using HTML HTML Creating Web Forms and Frames 1. What is a Web Form 2. What is a CGI Script File 3. Initiating the HTML File 4. Composing
More informationInternet Technologies
QAFQAZ UNIVERSITY Computer Engineering Department Internet Technologies HTML Forms Dr. Abzetdin ADAMOV Chair of Computer Engineering Department aadamov@qu.edu.az http://ce.qu.edu.az/~aadamov What are forms?
More informationWeb Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence
Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.
More informationDreamweaver Tutorials Creating a Web Contact Form
Dreamweaver Tutorials This tutorial will explain how to create an online contact form. There are two pages involved: the form and the confirmation page. When a user presses the submit button on the form,
More informationFurther web design: HTML forms
Further web design: HTML forms Practical workbook Aims and Learning Objectives The aim of this document is to introduce HTML forms. By the end of this course you will be able to: use existing forms on
More informationIntroduction to XHTML. 2010, Robert K. Moniot 1
Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document
More informationWe automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.
Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded
More informationBy Glenn Fleishman. WebSpy. Form and function
Form and function The simplest and really the only method to get information from a visitor to a Web site is via an HTML form. Form tags appeared early in the HTML spec, and closely mirror or exactly duplicate
More informationTutorial 6 Creating a Web Form. HTML and CSS 6 TH EDITION
Tutorial 6 Creating a Web Form HTML and CSS 6 TH EDITION Objectives Explore how Web forms interact with Web servers Create form elements Create field sets and legends Create input boxes and form labels
More informationunderstand how image maps can enhance a design and make a site more interactive know how to create an image map easily with Dreamweaver
LESSON 3: ADDING IMAGE MAPS, ANIMATION, AND FORMS CREATING AN IMAGE MAP OBJECTIVES By the end of this part of the lesson you will: understand how image maps can enhance a design and make a site more interactive
More informationHTML Forms and CONTROLS
HTML Forms and CONTROLS Web forms also called Fill-out Forms, let a user return information to a web server for some action. The processing of incoming data is handled by a script or program written in
More informationChapter 14: Links. Types of Links. 1 Chapter 14: Links
1 Unlike a word processor, the pages that you create for a website do not really have any order. You can create as many pages as you like, in any order that you like. The way your website is arranged and
More informationUsing Adobe Dreamweaver CS4 (10.0)
Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called
More informationDesigning and Implementing Forms 34
C H A P T E R 34 Designing and Implementing Forms 34 You can add forms to your site to collect information from site visitors; for example, to survey potential customers, conduct credit-card transactions,
More informationShoreTel Enterprise Contact Center 8 Installing and Implementing Chat
ShoreTel Enterprise Contact Center 8 Installing and Implementing Chat November 2012 Legal Notices Document and Software Copyrights Copyright 1998-2012 by ShoreTel Inc., Sunnyvale, California, USA. All
More information07 Forms. 1 About Forms. 2 The FORM Tag. 1.1 Form Handlers
1 About Forms For a website to be successful, it is important to be able to get feedback from visitors to your site. This could be a request for information, general comments on your site or even a product
More informationChapter 1 Introduction to web development and PHP
Chapter 1 Introduction to web development and PHP Murach's PHP and MySQL, C1 2010, Mike Murach & Associates, Inc. Slide 1 Objectives Applied 1. Use the XAMPP control panel to start or stop Apache or MySQL
More informationHow To Use Dreamweaver With Your Computer Or Your Computer (Or Your Computer) Or Your Phone Or Tablet (Or A Computer)
ITS Training Introduction to Web Development with Dreamweaver In this Workshop In this workshop you will be introduced to HTML basics and using Dreamweaver to create and edit web files. You will learn
More informationCreating Web Pages with HTML Simplified. 3rd Edition
Brochure More information from http://www.researchandmarkets.com/reports/2248215/ Creating Web Pages with HTML Simplified. 3rd Edition Description: Are you new to computers? Does new technology make you
More informationUser Guide for Smart Former Gold (v. 1.0) by IToris Inc. team
User Guide for Smart Former Gold (v. 1.0) by IToris Inc. team Contents Offshore Web Development Company CONTENTS... 2 INTRODUCTION... 3 SMART FORMER GOLD IS PROVIDED FOR JOOMLA 1.5.X NATIVE LINE... 3 SUPPORTED
More informationGetting Started with KompoZer
Getting Started with KompoZer Contents Web Publishing with KompoZer... 1 Objectives... 1 UNIX computer account... 1 Resources for learning more about WWW and HTML... 1 Introduction... 2 Publishing files
More informationDreamweaver CS3 THE MISSING MANUAL. David Sawyer McFarland. POGUE PRESS" O'REILLY 8 Beijing Cambridge Farnham Koln Paris Sebastopol Taipei Tokyo
Dreamweaver CS3 THE MISSING MANUAL David Sawyer McFarland POGUE PRESS" O'REILLY 8 Beijing Cambridge Farnham Koln Paris Sebastopol Taipei Tokyo Table of Contents The Missing Credits Introduction 1 Part
More informationJJY s Joomla 1.5 Template Design Tutorial:
JJY s Joomla 1.5 Template Design Tutorial: Joomla 1.5 templates are relatively simple to construct, once you know a few details on how Joomla manages them. This tutorial assumes that you have a good understanding
More informationDreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,
More informationLesson Review Answers
Lesson Review Answers-1 Lesson Review Answers Lesson 1 Review 1. User-friendly Web page interfaces, such as a pleasing layout and easy navigation, are considered what type of issues? Front-end issues.
More informationITP 101 Project 3 - Dreamweaver
ITP 101 Project 3 - Dreamweaver Project Objectives You will also learn how to make a website outlining your company s products, location, and contact info. Project Details USC provides its students with
More informationWeb Design and Development ACS-1809. Chapter 13. Using Forms 11/30/2015 1
Web Design and Development ACS-1809 Chapter 13 Using Forms 11/30/2015 1 Chapter 13: Employing Forms Understand the concept and uses of forms in web pages Create a basic form Validate the form content 11/30/2015
More informationHTML Tables. IT 3203 Introduction to Web Development
IT 3203 Introduction to Web Development Tables and Forms September 3 HTML Tables Tables are your friend: Data in rows and columns Positioning of information (But you should use style sheets for this) Slicing
More informationHow To Create A Web Page On A Windows 7.1.1 (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook (
CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of
More informationVirtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades.
28 VIRTUAL EXHIBIT Virtual Exhibit (VE) is the instant Web exhibit creation tool for PastPerfect Museum Software. Virtual Exhibit converts selected collection records and images from PastPerfect to HTML
More informationBasic tutorial for Dreamweaver CS5
Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to
More informationUOFL SHAREPOINT ADMINISTRATORS GUIDE
UOFL SHAREPOINT ADMINISTRATORS GUIDE WOW What Power! Learn how to administer a SharePoint site. [Type text] SharePoint Administrator Training Table of Contents Basics... 3 Definitions... 3 The Ribbon...
More information.NET Best Practices Part 1 Master Pages Setup. Version 2.0
.NET Best Practices Part 1 Master Pages Setup Version 2.0 2014 CrownPeak Technology, Inc. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any means, electronic
More informationGoogle Sites: Site Creation and Home Page Design
Google Sites: Site Creation and Home Page Design This is the second tutorial in the Google Sites series. You should already have your site set up. You should know its URL and your Google Sites Login and
More informationHow To Create A Website Template On Sitefinity 4.0.2.2
DESIGNER S GUIDE This guide is intended for front-end developers and web designers. The guide describes the procedure for creating website templates using Sitefinity and importing already created templates
More informationJoomla 1.0 Extension Development Training. Learning to program for Joomla
Joomla 1.0 Extension Development Training Learning to program for Joomla Objectives & Requirements Learn to develop basic Joomla Mambots, Modules and Components. Familiar with PHP and MySQL programming.
More informationD2L: An introduction to CONTENT University of Wisconsin-Parkside
D2L: An introduction to CONTENT University of Wisconsin-Parkside FOR FACULTY: What is CONTENT? The Content and Course Builder tools both allow you to organize materials in D2L. Content lets you and your
More informationMicrosoft Expression Web
Microsoft Expression Web Microsoft Expression Web is the new program from Microsoft to replace Frontpage as a website editing program. While the layout has changed, it still functions much the same as
More informationUH CMS Basics. Cascade CMS Basics Class. UH CMS Basics Updated: June,2011! Page 1
UH CMS Basics Cascade CMS Basics Class UH CMS Basics Updated: June,2011! Page 1 Introduction I. What is a CMS?! A CMS or Content Management System is a web based piece of software used to create web content,
More informationMicrosoft FrontPage 2003
Information Technology Services Kennesaw State University Microsoft FrontPage 2003 Information Technology Services Microsoft FrontPage Table of Contents Information Technology Services...1 Kennesaw State
More informationCONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide
CONTENTM WEBSITE MANAGEMENT SYSTEM Getting Started Guide Table of Contents CONTENTM WEBSITE MANAGEMENT SYSTEM... 1 GETTING TO KNOW YOUR SITE...5 PAGE STRUCTURE...5 Templates...5 Menus...5 Content Areas...5
More information**When entering properties and field name use all lowercase!
Creating Forms with MS FrontPage 2003 Objective 1: Create a Form. To Create a Form on a Webpage 1. Either create a new webpage or open an existing page in FrontPage. 2. Put your cursor in the location
More informationWeb layout guidelines for daughter sites of Scotland s Environment
Web layout guidelines for daughter sites of Scotland s Environment Current homepage layout of Scotland s Aquaculture and Scotland s Soils (September 2014) Design styles A daughter site of Scotland s Environment
More informationIntroduction to Web Design Curriculum Sample
Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic
More informationjquery Tutorial for Beginners: Nothing But the Goods
jquery Tutorial for Beginners: Nothing But the Goods Not too long ago I wrote an article for Six Revisions called Getting Started with jquery that covered some important things (concept-wise) that beginning
More informationPDG Software. Site Design Guide
PDG Software Site Design Guide PDG Software, Inc. 1751 Montreal Circle, Suite B Tucker, Georgia 30084-6802 Copyright 1998-2007 PDG Software, Inc.; All rights reserved. PDG Software, Inc. ("PDG Software")
More informationShasta College SharePoint Tutorial. Create an HTML Form
Create an HTML Form SharePoint HTML forms are based on Lists. Lists are like mini-databases inside of SharePoint that define the form s fields and stores the data submitted from the form. Before you can
More informationKentico CMS 5.5 User s Guide
Kentico CMS 5.5 User s Guide 2 Kentico CMS User s Guide 5.5 Table of Contents Part I Introduction 4 1 Kentico CMS overview... 4 2 Signing in... 5 3 User interface overview... 7 Part II Managing my profile
More informationAdvanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication
Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication Using JQuery to Make a Photo Slideshow This exercise was modified from the slideshow
More informationCLASSROOM WEB DESIGNING COURSE
About Web Trainings Academy CLASSROOM WEB DESIGNING COURSE Web Trainings Academy is the Top institutes in Hyderabad for Web Technologies established in 2007 and managed by ITinfo Group (Our Registered
More informationIntroduction to Web Development
Introduction to Web Development Week 2 - HTML, CSS and PHP Dr. Paul Talaga 487 Rhodes paul.talaga@uc.edu ACM Lecture Series University of Cincinnati, OH October 16, 2012 1 / 1 HTML Syntax For Example:
More informationCreating Web Pages with Netscape/Mozilla Composer and Uploading Files with CuteFTP
Creating Web Pages with Netscape/Mozilla Composer and Uploading Files with CuteFTP Introduction This document describes how to create a basic web page with Netscape/Mozilla Composer and how to publish
More informationXHTML Forms. Form syntax. Selection widgets. Submission method. Submission action. Radio buttons
XHTML Forms Web forms, much like the analogous paper forms, allow the user to provide input. This input is typically sent to a server for processing. Forms can be used to submit data (e.g., placing an
More informationCSC9B2 Spring 2015 Web Design Practical 1: Introduction to HTML 5
CSC9B2 Spring 2015 Web Design Practical 1: Introduction to HTML 5 AIM To learn the basics of creating web pages with HTML5. Remember to register your practical attendance. This sheet contains one checkpoint.
More informationWP Popup Magic User Guide
WP Popup Magic User Guide Plugin version 2.6+ Prepared by Scott Bernadot WP Popup Magic User Guide Page 1 Introduction Thank you so much for your purchase! We're excited to present you with the most magical
More informationemarketing Manual- Creating a New Email
emarketing Manual- Creating a New Email Create a new email: You can create a new email by clicking the button labeled Create New Email located at the top of the main page. Once you click this button, a
More informationAppShore Premium Edition Campaigns How to Guide. Release 2.1
AppShore Premium Edition Campaigns How to Guide Release 2.1 Table of Contents Campaigns Overview...3 How to create a Campaign Message...3 How to create a List...5 How to relate a Message to a List...6
More informationJOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA
JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA All information presented in the document has been acquired from http://docs.joomla.org to assist you with your website 1 JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA BACK
More informationWEB DEVELOPMENT IA & IB (893 & 894)
DESCRIPTION Web Development is a course designed to guide students in a project-based environment in the development of up-to-date concepts and skills that are used in the development of today s websites.
More informationGravity Forms: Creating a Form
Gravity Forms: Creating a Form 1. To create a Gravity Form, you must be logged in as an Administrator. This is accomplished by going to http://your_url/wp- login.php. 2. On the login screen, enter your
More informationLAB 4 HTML TABLES AND FORMS
LAB 4 HTML TABLES AND FORMS What You Will Learn How to create HTML tables How to style tables How to create HTML forms Approximate Time The exercises in this lab should take approximately 40 minutes to
More informationIngeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu)
Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu) Updated on 10/17/2014 Table of Contents About... 4 Who Can Use It... 4 Log into Ingeniux... 4 Using Ingeniux
More informationContents. Downloading the Data Files... 2. Centering Page Elements... 6
Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...
More informationAPPLICATION NOTE SERIES Information Technology Group
Information Technology Group Computer Software & Systems U.S Coast Guard Auxiliary WOW II Platform: Creating Email Response Forms Email Response Forms Version 1.2 Note: This material is targeted at WOW
More information<option> eggs </option> <option> cheese </option> </select> </p> </form>
FORMS IN HTML A form is the usual way information is gotten from a browser to a server HTML has tags to create a collection of objects that implement this information gathering The objects are called widgets
More information-SoftChalk LessonBuilder-
-SoftChalk LessonBuilder- SoftChalk is a powerful web lesson editor that lets you easily create engaging, interactive web lessons for your e-learning classroom. It allows you to create and edit content
More informationWhen you have selected where you would like the form on your web page, insert these lines of code to start:
Mail Form Tutorial This tutorial will show you how to make use of SIUE s mail form script to allow web users to contact you via e mail regarding anything you wish. This script if most useful for receiving
More informationWEB DESIGN COURSE CONTENT
WEB DESIGN COURSE CONTENT INTRODUCTION OF WEB TECHNOLOGIES Careers in Web Technologies How Websites are working Domain Types and Server About Static and Dynamic Websites Web 2.0 Standards PLANNING A BASIC
More informationJoomla! 2.5.x Training Manual
Joomla! 2.5.x Training Manual Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several tutorials
More informationFast track to HTML & CSS 101 (Web Design)
Fast track to HTML & CSS 101 (Web Design) Level: Introduction Duration: 5 Days Time: 9:30 AM - 4:30 PM Cost: 997.00 Overview Fast Track your HTML and CSS Skills HTML and CSS are the very fundamentals of
More informationAdding Links to Resources
Adding Links to Resources Use the following instructions to add resource links to your Moodle course. If you have any questions, please contact the helpdesk at. Adding URL links 1. Log into your Moodle
More informationCREATING AND PROCESSING HTML FORMS
CREATING AND PROCESSING HTML FORMS Topics in This Chapter Data submission from forms Text controls Push buttons Check boxes and radio buttons Combo boxes and list boxes File upload controls Server-side
More informationWEBSITE CONTENT MANAGEMENT SYSTEM USER MANUAL CMS Version 2.0 CMS Manual Version 1.0 2-25-13
WEBSITE CONTENT MANAGEMENT SYSTEM USER MANUAL CMS Version 2.0 CMS Manual Version 1.0 2-25-13 CONTENTS Things to Remember... 2 Browser Requirements... 2 Why Some Areas of Your Website May Not Be CMS Enabled...
More informationViewing Form Results
Form Tags XHTML About Forms Forms allow you to collect information from visitors to your Web site. The example below is a typical tech suupport form for a visitor to ask a question. More complex forms
More informationBuilding A Very Simple Website
Sitecore CMS 6.5 Building A Very Simple Web Site Rev 110715 Sitecore CMS 6.5 Building A Very Simple Website A Self-Study Guide for Developers Table of Contents Chapter 1 Introduction... 3 Chapter 2 Creating
More informationIntroduction to web development using XHTML and CSS. Lars Larsson. Today. Course introduction and information XHTML. CSS crash course.
using CSS using CSS 1 using CSS 2 3 4 Lecture #1 5 6 using CSS Material using CSS literature During this, we will cover server side web with JavaServer Pages. JSP is an exciting technology that lets developers
More informationDashcode User Guide. (Retired Document)
Dashcode User Guide (Retired Document) Contents Introduction to Dashcode User Guide 7 Who Should Read This Document? 7 Organization of This Document 7 Getting and Running Dashcode 8 Reporting Bugs 8 See
More informationDynamic Web-Enabled Data Collection
Dynamic Web-Enabled Data Collection S. David Riba, Introduction Web-based Data Collection Forms Error Trapping Server Side Validation Client Side Validation Dynamic generation of web pages with Scripting
More informationAdvanced Web Development SCOPE OF WEB DEVELOPMENT INDUSTRY
Advanced Web Development Duration: 6 Months SCOPE OF WEB DEVELOPMENT INDUSTRY Web development jobs have taken thе hot seat when it comes to career opportunities and positions as a Web developer, as every
More informationContents. Introduction... 2. Downloading the Data Files... 2
Creating a Web Page Using HTML Part 3: Multi-page Management and Uploading INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.1 Summer 2009 Contents Introduction... 2 Downloading
More informationWebsite Builder Documentation
Website Builder Documentation Main Dashboard page In the main dashboard page you can see and manager all of your projects. Filter Bar In the filter bar at the top you can filter and search your projects
More informationSUBJECT CODE : 4074 PERIODS/WEEK : 4 PERIODS/ SEMESTER : 72 CREDIT : 4 TIME SCHEDULE UNIT TOPIC PERIODS 1. INTERNET FUNDAMENTALS & HTML Test 1
SUBJECT TITLE : WEB TECHNOLOGY SUBJECT CODE : 4074 PERIODS/WEEK : 4 PERIODS/ SEMESTER : 72 CREDIT : 4 TIME SCHEDULE UNIT TOPIC PERIODS 1. INTERNET FUNDAMENTALS & HTML Test 1 16 02 2. CSS & JAVASCRIPT Test
More informationAdobe Dreamweaver CC 14 Tutorial
Adobe Dreamweaver CC 14 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site
More informationHow to Make a Working Contact Form for your Website in Dreamweaver CS3
How to Make a Working Contact Form for your Website in Dreamweaver CS3 Killer Contact Forms Dreamweaver Spot With this E-Book you will be armed with everything you need to get a Contact Form up and running
More informationWeb Hosting Training Guide. Web Hosting Training Guide. Author: Glow Team Page 1 of 28 Ref: GC278_v1.1
Web Hosting Training Guide Internet Explorer version Doc Ref: GC278_v1.1 Author: Glow Team Page 1 of 28 Ref: GC278_v1.1 Contents Introduction... 3 What is the Glow Web Hosting service?... 3 Why use the
More informationUSER GUIDE. Unit 2: Synergy. Chapter 2: Using Schoolwires Synergy
USER GUIDE Unit 2: Synergy Chapter 2: Using Schoolwires Synergy Schoolwires Synergy & Assist Version 2.0 TABLE OF CONTENTS Introductions... 1 Audience... 1 Objectives... 1 Before You Begin... 1 Getting
More informationKentico CMS 7.0 User s Guide. User s Guide. Kentico CMS 7.0. 1 www.kentico.com
User s Guide Kentico CMS 7.0 1 www.kentico.com Table of Contents Introduction... 4 Kentico CMS overview... 4 Signing in... 4 User interface overview... 6 Managing my profile... 8 Changing my e-mail and
More informationPersonal Portfolios on Blackboard
Personal Portfolios on Blackboard This handout has four parts: 1. Creating Personal Portfolios p. 2-11 2. Creating Personal Artifacts p. 12-17 3. Sharing Personal Portfolios p. 18-22 4. Downloading Personal
More informationRecreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade. Exercise: Creating two types of Story Layouts
Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade Exercise: Creating two types of Story Layouts 1. Creating a basic story layout (with title and content)
More informationCUSTOMER+ PURL Manager
CUSTOMER+ PURL Manager October, 2009 CUSTOMER+ v. 5.3.1 Section I: Creating the PURL 1. Go to Administration > PURL Management > PURLs 2. Click Add Personalized URL 3. In the Edit PURL screen, Name your
More informationWeb Hosting Training Guide. Web Hosting Training Guide. Author: Glow Team Page 1 of 22 Ref: GC349_v1.1
Web Hosting Training Guide Safari version Doc Ref: GC349_v1.1 Author: Glow Team Page 1 of 22 Ref: GC349_v1.1 Contents Introduction... 3 What is the Glow Web Hosting service?... 3 Why use the Glow Web Hosting
More informationcollab.virginia.edu UVACOLLAB ECLPS: BUILDING COURSE PORTALS UVaCollab User Guide Series collab-support@virginia.edu
UVACOLLAB ECLPS: BUILDING COURSE PORTALS UVaCollab User Guide Series collab-support@virginia.edu Revised 4/28/2014 CONTENTS The eclps Overview... 3 Objectives... 3 Adding the Syllabus or Lessons Tool to
More informationRoss University s Content Management System (CMS) Training Manual
Ross University s Content Management System (CMS) Training Manual Version 1.0 This is the Ross University Content Management System (CMS) training manual. This manual is intended for Ross University content
More informationDreamweaver CS5. Module 2: Website Modification
Dreamweaver CS5 Module 2: Website Modification Dreamweaver CS5 Module 2: Website Modification Last revised: October 31, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland,
More informationChapter 15: Forms. User Guide. 1 P a g e
User Guide Chapter 15 Forms Engine 1 P a g e Table of Contents Introduction... 3 Form Building Basics... 4 1) About Form Templates... 4 2) About Form Instances... 4 Key Information... 4 Accessing the Form
More informationBuilding a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan
Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan In earlier versions of dreamweaver web developers attach drop down menus to graphics or hyperlinks by using the behavior box. Dreamweaver
More informationMicrosoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
More informationTutorial: Creating a form that emails the results to you.
Tutorial: Creating a form that emails the results to you. 1. Create a new page in your web site Using the Wizard Interface. a) Choose I want to add a form that emails the results to me in the wizard. b)
More informationState of Indiana Content Management System. Training Manual Version 2.0. Developed by
State of Indiana Content Management System Training Manual Version 2.0 Developed by Table of Contents Getting Started... 4 Logging In... 5 RedDot Menu... 6 Selecting a Project... 7 Start Page... 8 Creating
More information