HTML Tables. IT 3203 Introduction to Web Development

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "HTML Tables. IT 3203 Introduction to Web Development"

Transcription

1 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 images for animation Boxes, sidebars, etc. (should use style sheets) Notice: This session is being recorded. Copyright 2007 by Bob Brown Defining Tables The <table> tag: <table summary="juice drinks">... table definitions... Tables are defined row-wise: <tr>... </tr> Table Cells Table cells are defined with the table-data <td> tag sets within each row <table summary="schedule"> <tr><td>jan 12</td> <td>html I</td> <td> </td> </tr> Table Defaults Cell contents are left-aligned Cell widths are determined automatically based on the cell in each column with the widest content Cell heights are determined automatically based on the cell in each row with the tallest content Borders and grid lines are invisible Table Headings Table heading tags define a row or column of heading; similar to <td> <tr><th>apples</th><th>oranges</th></tr> <tr><td>12</td><td>8</td></tr> By default, table headings are centered in their cells and bold. 1

2 Headings for Rows and Columns Headings for Rows and Columns <table> <tr><th></th><th>saw</th> <th>spanner</th><th>c-clamp</th></tr> <tr><th>price</th><td>13.00</td> </tr> <tr><th>weight</th><td>5.0</td> </tr> That Pesky Empty Cell <table> <tr><th> </th><th>saw</th> <th>spanner</th><th>c-clamp</th></tr> <tr><th>price</th><td>13.00</td>...</tr>... Two Levels of Headings colspan attribute; span multiple columns <tr><th colspan="3">fruit Juices</th></tr> <tr><th>orange</th><th>apple</th> <th>lemon</th></tr> Colspan and Rowspan Together <tr><td rowspan="2"></td> <th colspan="3">fruit Juice Drinks</th></tr> <tr><th>apple</th><th>orange</th> <th>tomato</th></tr> Alignment with Styles <tr style="text-align: left;"><td>... Applies to an entire row. <td style="text-align: right;">7.98</td> Applies to one cell. Choices: left, right, center, justify. Alternate Example <tr style="text-align: left;"> </tr> 2

3 Alignment with Styles <tr style="vertical-align: top;"><td>... Applies to an entire row. <td style="vertical-align: top;">7.98</td> Applies to one cell. Choices: top, middle, bottom, baseline. The default vertical alignment is middle. Baseline specifies that all cells in the same row have their first lines of text positioned on a common baseline. Styles can be Combined Two or more style property specifications can be combined. If two or more properties are used, separate them with semi-colons. <td style="text-align: right; vertical-align: top;">7.98</td> Sketch your table before coding. Align and Valign Attributes Align applies to <tr> (entire row), or to <th> and <td> (one cell) align="left" (center, right) Horizontal valign="default" (top, bottom) Vertical <td align="left" valign="bottom">7.98</td> Styles are a better alternative. Borders, Spacing and Padding <table style="border: 2px solid black;"> width in pixels, type, color <table style="padding: 3px;"> padding: between contents and cell wall border-spacing: between cells 1 2 Positioning Tables Tables are block elements. They can be floated left or right so that text flows around them. <table style="float: left"> <table style="float: right"> Centering a Table Centering a table using styles: <div style="text-align: center;"> <table style="margin: auto;"> <tr> </tr> </div> 3

4 A Complete Table <html> <head> <title>complete Table</title> <style type="text/css"> table, th, { border: 1px solid gray; } td { border: 1px solid gray; text-align: right; } </style> </head> <body> <table summary="fruit Juice Drink Schedule"> <tr><td rowspan="2"></td> <th colspan="3">fruit Juice Drinks</th></tr> <tr><th>apple</th><th>orange</th> <th>tomato</th></tr> <tr><th>breakfast</th><td>0</td><td>1</td><td>0</td></tr> <tr><th>lunch</th><td>1</td><td>0</td><td>0</td></tr> <tr><th>dinner</th><td>0</td><td>0</td><td>1</td></tr> </body> </html> A Complete Table A Complete Table <html> <head> <title>complete Table</title> <style type="text/css"> table, th, { border: 1px solid gray; } td { border: 1px solid gray; text-align: right; } </style> </head> <body> <table summary="fruit Juice Drink Schedule"> <tr><td rowspan="2"></td> <th colspan="3">fruit Juice Drinks</th></tr> <tr><th>apple</th><th>orange</th> <th>tomato</th></tr> <tr><th>breakfast</th><td>0</td><td>1</td><td>0</td></tr> <tr><th>lunch</th><td>1</td><td>0</td><td>0</td></tr> <tr><th>dinner</th><td>0</td><td>0</td><td>1</td></tr> </body> </html> Summary and Caption The caption is an element of table and provides a short description of the table s contents. The summary is an attribute of the table tag and is intended to provide more information than caption. Accessibility guidelines suggest/require that caption and summary not contain the same text. Styling Columns We did not discuss COL or COLGROUP in class. Styles may be applied to columns by using the COL element. Gray and Grey The W3C lists only gray as the name of the # color, but allows lightgrey as well as lightgray for a lighter shade! 4

5 Purpose of HTML Forms User interaction: With a server Locally, using JavaScript Data collection to enable data processing HTML Forms We send data to Web servers with HTML forms The server can process the data with a CGI program or a scripting language. HTML Forms CGI is common gateway interface It is the glue between the Web server and a data processing application. Form data can also be processed on the client using JavaScript. CGI Requests CGI Requests are made in URLs The Web server recognizes the CGI request and... runs the specified program Overview of CGI Processing The Internet Web Server Computer Web Server Program CGI Appl Prog Must have program support on the server Application program receives input on stdin or in an environment variable; Output (stdout) goes back to Web browser Integrated Languages Some languages (perl, PHP) are integrated into Web servers Integration can offer more efficient operation Processing form data follows the CGI model 5

6 About /cgi-bin/ Most production Web systems have a /cgi-bin/ directory It is outside the document root for security reasons All CGI program go in /cgi-bin/ We will not write CGI programs in this class, and your PHP programs will go in public_html HTML Forms A large part of HTML is devoted to sending data to servers. Form elements (controls, or widgets ) collect data Different elements available depending on data Submit button sends data to the server. Other actions can invoke local JavaScript The <form> Tag Define a form with the <form> element The action attribute specifies the URL of the program to process the data. <form action=" method="post"> <! form contents go here --> </form> The Method Attribute The method attribute tells how to send data method="get" Form data is attached to the URL and appears in an environment variable. method="post" Form data is sent as HTTP data and appears on stdin of CGI program In general, use method="post" because Get and Idempotence An idempotent function is one for which repeated application returns the same result; e.g. multiplication by one. The get method is defined to be idempotent Therefore, get must not have side effects, like placing an order or changing a database. Get method responses can be cached. Name / Value Pairs Form elements have name and value attributes. <input type="text" name="lastname" /> Brown The server receives this: lastname=brown 6

7 Text boxes Checkboxes Radio buttons Submit button Hidden data Others The <input> Tag The <input> control is used for: Brown Text Boxes <form > <input type="text" name="lastname" id="lastname" size="25" /> </form> Creates a typing box 25 characters wide. Text Boxes One line high Width of the box is set by size="25" Input is not limited to 25 characters; text will scroll if the box fills up. Use maxlength to set a maximum input length. Set a default value with value= The <label> Tag Provides labels for form elements Used by screen reader programs for accessibility Can assign shortcut keys for form elements Connects to the form element by: Enclosing the element Naming the element s id attribute on the for= attribute <label>your last name: <input type="text" name="lastname" id="lastname size="25" /> </label> Your last name: Text Box with Label Label with for= Attribute <form > <table > <tr><td style="text-align: right;"> <label for="firstname">your given name: </label></td> <td><input type="text" name="firstname" id="firstname" /></td></tr> <tr><td style="text-align: right;"> <label for="lastname">family name: </label></td> <td><input type="text" name="lastname" id="lastname" /></td></tr> </form> 7

8 Label with for= Attribute The example form uses a table to align labels and input text boxes. The <label> element cannot enclose the <input> element because they are in different table cells. Instead, the for= attribute on the <label> tag names the id of the input element to associate the label Your given name: with the firstname <input> element. Check Boxes Allow selection from a number of choices. Zero or more may be selected. Languages you speak: English Français Español Check Boxes Languages you speak: <label>english <input type="checkbox" name="en" id="en" value="true" /></label><br /> <label>français <input type="checkbox" name="fr" id="fr" value="true" /></label><br /> Check Boxes <div style="width: 20%; text-align: right"> Languages you speak<br /> <label>english <input type="checkbox" checked="checked" name="en" id="en" value="true" /> </label><br /> <label>français <input type="checkbox" name="fr" id="fr" value="true" /> </label><br /> <label>español <input type="checkbox" name="es" id="es" value="true" /> </label> </div> Check Boxes Languages you speak English Français Español Server receives: en=true&fr=true Radio Buttons Allow one selection from a number of choices. At most one choice can be selected Your preferred language: English Français Español 8

9 Radio Buttons <label>english <input type="radio" name="pref_lang" id="pref_lang_en" value="en" checked="checked" /> </label><br /> <label>français <input type="radio" name="pref_lang" id="pref_lang_fr" value="fr" /> </label><br /> Radio Buttons Your preferred language English Français Español Server receives: pref_lang=en Pulldown Menus State: Alabama Georgia Alabama Florida Georgia Mississippi Pulldown Menus <label>state: <select name="state" > <option>alabama</option> <option>florida</option> <option>georgia</option> <option>mississippi</option> </select> </label> Server receives: state=georgia Options with Values <label>state: <select name="state" > <option value="al">alabama</option> <option value="fl">florida</option> <option value="ga">georgia</option> <option value="ms">mississippi</option> </select> </label> Server receives: state=ga Multi-Item Select Lists <label>shopping List: <select name="list" multiple="multiple"> <option>bread</option> <option>milk</option> <option>cheese</option> </select> </label> Server receives: list=bread&list=cheese 9

10 Text Area Be brief, concise and specific <textarea name="comments" rows="3" cols="30"> Be brief, concise, and specific </textarea> Hidden Data <input type="hidden" name="account" value="a " /> Allows tagging of forms generated on the server Not secure (visible in view source ) Submit Button <input type="submit" value="submit" /> Submit Causes the form to be submitted to the server using the method given on the <form> element. Reset Button <input type="reset" value="clear Form" /> Clear Form Resets all form elements to empty or default values. Consider carefully whether you need a reset button. The Button Element <button id="compute">compute It!</button> Compute It! Defines a generic button. Mainly useful with JavaScript because it can generate an event JavaScript can listen for. Password: File: Image: Other Input Types Typed text echoes as asterisks Prevents shoulder surfing Not secure Allows uploads of files, browse dialog Image substitutes for Submit button 10

11 Questions 11

Further web design: HTML forms

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

Introduction to XHTML. 2010, Robert K. Moniot 1

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

CS412 Interactive Lab Creating a Simple Web Form

CS412 Interactive Lab Creating a Simple Web Form CS412 Interactive Lab Creating a Simple Web Form Introduction In this laboratory, we will create a simple web form using HTML. You have seen several examples of HTML pages and forms as you have worked

More information

HTML Form Widgets. Review: HTML Forms. Review: CGI Programs

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 information

HTML Forms and CONTROLS

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

CHAPTER 10. When you complete this chapter, you will be able to:

CHAPTER 10. When you complete this chapter, you will be able to: Data Tables CHAPTER 10 When you complete this chapter, you will be able to: Use table elements Use table headers and footers Group columns Style table borders Apply padding, margins, and fl oats to tables

More information

<option> eggs </option> <option> cheese </option> </select> </p> </form>

<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

07 Forms. 1 About Forms. 2 The FORM Tag. 1.1 Form Handlers

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

Web Development 1 A4 Project Description Web Architecture

Web Development 1 A4 Project Description Web Architecture Web Development 1 Introduction to A4, Architecture, Core Technologies A4 Project Description 2 Web Architecture 3 Web Service Web Service Web Service Browser Javascript Database Javascript Other Stuff:

More information

Internet Technologies

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

XHTML Forms. Form syntax. Selection widgets. Submission method. Submission action. Radio buttons

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

Introduction to Web Design Curriculum Sample

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

2- Forms and JavaScript Course: Developing web- based applica<ons

2- Forms and JavaScript Course: Developing web- based applica<ons 2- Forms and JavaScript Course: Cris*na Puente, Rafael Palacios 2010- 1 Crea*ng forms Forms An HTML form is a special section of a document which gathers the usual content plus codes, special elements

More information

Website Planning Checklist

Website Planning Checklist Website Planning Checklist The following checklist will help clarify your needs and goals when creating a website you ll be surprised at how many decisions must be made before any production begins! Even

More information

New Perspectives on Creating Web Pages with HTML. Considerations for Text and Graphical Tables. A Graphical Table. Using Fixed-Width Fonts

New Perspectives on Creating Web Pages with HTML. Considerations for Text and Graphical Tables. A Graphical Table. Using Fixed-Width Fonts A Text Table New Perspectives on Creating Web Pages with HTML This figure shows a text table. Tutorial 4: Designing a Web Page with Tables 1 2 A Graphical Table Considerations for Text and Graphical Tables

More information

By Glenn Fleishman. WebSpy. Form and function

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

Website Login Integration

Website Login Integration SSO Widget Website Login Integration October 2015 Table of Contents Introduction... 3 Getting Started... 5 Creating your Login Form... 5 Full code for the example (including CSS and JavaScript):... 7 2

More information

HTML Forms. Pat Morin COMP 2405

HTML Forms. Pat Morin COMP 2405 HTML Forms Pat Morin COMP 2405 HTML Forms An HTML form is a section of a document containing normal content plus some controls Checkboxes, radio buttons, menus, text fields, etc Every form in a document

More information

Caldes CM12: Content Management Software Introduction v1.9

Caldes CM12: Content Management Software Introduction v1.9 Caldes CM12: Content Management Software Introduction v1.9 Enterprise Version: If you are using Express, please contact us. Background Information This manual assumes that you have some basic knowledge

More information

Lesson Review Answers

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

Script Handbook for Interactive Scientific Website Building

Script Handbook for Interactive Scientific Website Building Script Handbook for Interactive Scientific Website Building Version: 173205 Released: March 25, 2014 Chung-Lin Shan Contents 1 Basic Structures 1 11 Preparation 2 12 form 4 13 switch for the further step

More information

FORMS. Introduction. Form Basics

FORMS. Introduction. Form Basics FORMS Introduction Forms are a way to gather information from people who visit your web site. Forms allow you to ask visitors for specific information or give them an opportunity to send feedback, questions,

More information

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence

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

Web Programming with PHP 5. The right tool for the right job.

Web Programming with PHP 5. The right tool for the right job. Web Programming with PHP 5 The right tool for the right job. PHP as an Acronym PHP PHP: Hypertext Preprocessor This is called a Recursive Acronym GNU? GNU s Not Unix! CYGNUS? CYGNUS is Your GNU Support

More information

Web Design and Development ACS Chapter 12. Using Tables 11/22/2016 1

Web Design and Development ACS Chapter 12. Using Tables 11/22/2016 1 Web Design and Development ACS-1809 Chapter 12 Using Tables 11/22/2016 1 Using Tables Understand the concept and uses of tables in web pages Create a basic table structure Format tables within web pages

More information

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages

More information

PHP Form Handling. Prof. Jim Whitehead CMPS 183 Spring 2006 May 3, 2006

PHP Form Handling. Prof. Jim Whitehead CMPS 183 Spring 2006 May 3, 2006 PHP Form Handling Prof. Jim Whitehead CMPS 183 Spring 2006 May 3, 2006 Importance A web application receives input from the user via form input Handling form input is the cornerstone of a successful web

More information

Designing and Implementing Forms 34

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

Tutorial 6 Creating a Web Form. HTML and CSS 6 TH EDITION

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

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

2. After you have obtained relevant input for your Web site, you can create: a. a validation program. b. HTML. c. images. d. a storyboard.

2. After you have obtained relevant input for your Web site, you can create: a. a validation program. b. HTML. c. images. d. a storyboard. Quiz Handouts-1 Lesson 1 Quiz 1. Site validation should be performed: a. once at the end of the development cycle. b. multiple times throughout the development cycle. c. once at the middle of the development

More information

Tutorial 5. Working with Web Tables

Tutorial 5. Working with Web Tables Tutorial 5 Working with Web Tables Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple rows and columns Create row and column groups Add

More information

Web Page Design Final Exam Review Page 1 of 7

Web Page Design Final Exam Review Page 1 of 7 Web Page Design Final Exam Review Page 1 of 7 Multiple Choice--Instructions: Circle the correct response. 1. Computers and networks allow people to. a. gather data and information b. analyze data and information

More information

Introduction... 3. Designing your Common Template... 4. Designing your Shop Top Page... 6. Product Page Design... 8. Featured Products...

Introduction... 3. Designing your Common Template... 4. Designing your Shop Top Page... 6. Product Page Design... 8. Featured Products... Introduction... 3 Designing your Common Template... 4 Common Template Dimensions... 5 Designing your Shop Top Page... 6 Shop Top Page Dimensions... 7 Product Page Design... 8 Editing the Product Page layout...

More information

Viewing Form Results

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

Basic HTML elements: Quick Reference

Basic HTML elements: Quick Reference Basic HTML elements: Quick Reference University of Bristol Information Services document web-r4 Document Information Format Conventions The following format conventions are used in this document: Computer

More information

CGI Programming. What is CGI?

CGI Programming. What is CGI? CGI Programming What is CGI? Common Gateway Interface A means of running an executable program via the Web. CGI is not a Perl-specific concept. Almost any language can produce CGI programs even C++ (gasp!!)

More information

Forms, CGI Objectives. HTML forms. Form example. Form example...

Forms, CGI Objectives. HTML forms. Form example. Form example... The basics of HTML forms How form content is submitted GET, POST Elements that you can have in forms Responding to forms Common Gateway Interface (CGI) Later: Servlets Generation of dynamic Web content

More information

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

WHITEPAPER. Skinning Guide. Let s chat. 800.9.Velaro www.velaro.com info@velaro.com. 2012 by Velaro

WHITEPAPER. Skinning Guide. Let s chat. 800.9.Velaro www.velaro.com info@velaro.com. 2012 by Velaro WHITEPAPER Skinning Guide Let s chat. 2012 by Velaro 800.9.Velaro www.velaro.com info@velaro.com INTRODUCTION Throughout the course of a chat conversation, there are a number of different web pages that

More information

HTML TEST. Multiple Choice Identify the choice that best completes the statement or answers the question.

HTML TEST. Multiple Choice Identify the choice that best completes the statement or answers the question. HTML TEST Multiple Choice Identify the choice that best completes the statement or answers the question. 1. What does HTML stand for? a. Hyper Link Markup Language b. Hyper Text Markup Logics c. Hyper

More information

Dreamweaver Tutorials Creating a Web Contact Form

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

Web Design I. Spring 2009 Kevin Cole Gallaudet University 2009.03.05

Web Design I. Spring 2009 Kevin Cole Gallaudet University 2009.03.05 Web Design I Spring 2009 Kevin Cole Gallaudet University 2009.03.05 Layout Page banner, sidebar, main content, footer Old method: Use , , New method: and "float" CSS property Think

More information

Create Your own Company s Design Theme

Create Your own Company s Design Theme Create Your own Company s Design Theme A simple yet effective approach to custom design theme INTRODUCTION Iron Speed Designer out of the box already gives you a good collection of design themes, up to

More information

understand how image maps can enhance a design and make a site more interactive know how to create an image map easily with Dreamweaver

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

Accessibility in e-learning. Accessible Content Authoring Practices

Accessibility in e-learning. Accessible Content Authoring Practices Accessibility in e-learning Accessible Content Authoring Practices JUNE 2014 Contents Introduction... 3 Visual Content... 3 Images and Alt... 3 Image Maps and Alt... 4 Meaningless Images and Alt... 4 Images

More information

FORM-ORIENTED DATA ENTRY

FORM-ORIENTED DATA ENTRY FORM-ORIENTED DATA ENTRY Using form to inquire and collect information from users has been a common practice in modern web page design. Many Web sites used form-oriented input to request customers opinions

More information

Embedding a Data View dynamic report into an existing web-page

Embedding a Data View dynamic report into an existing web-page Embedding a Data View dynamic report into an existing web-page Author: GeoWise User Support Released: 23/11/2011 Version: 6.4.4 Embedding a Data View dynamic report into an existing web-page Table of Contents

More information

Installation & Configuration Guide Version 2.2

Installation & Configuration Guide Version 2.2 ARPMiner Installation & Configuration Guide Version 2.2 Document Revision 1.8 http://www.kaplansoft.com/ ARPMiner is built by Yasin KAPLAN Read Readme.txt for last minute changes and updates which can

More information

JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK

JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK Programming for Digital Media EE1707 JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK 1 References and Sources 1. DOM Scripting, Web Design with JavaScript

More information

Drupal A Guide for Web Editors

Drupal A Guide for Web Editors University Information Technology Services Kennesaw State University Drupal A Guide for Web Editors Last updated on March 3, 2010 Copyright 2010 KSU Dept. of Information Technology Services This document

More information

In this chapter, you will learn how to...

In this chapter, you will learn how to... LEARNING OUTCOMES In this chapter, you will learn how to... Create a table on a web page Apply attributes to format tables, table rows, and table cells Increase the accessibility of a table Style an HTML

More information

Configuring iplanet 6.0 Web Server For SSL and non-ssl Redirect

Configuring iplanet 6.0 Web Server For SSL and non-ssl Redirect Introduction Configuring iplanet 6.0 Web Server For SSL and non-ssl Redirect This document describes the process for configuring an iplanet web server for the following situation: Require that clients

More information

Garfield Public Schools Fine & Practical Arts Curriculum Web Design

Garfield Public Schools Fine & Practical Arts Curriculum Web Design Garfield Public Schools Fine & Practical Arts Curriculum Web Design (Half-Year) 2.5 Credits Course Description This course provides students with basic knowledge of HTML and CSS to create websites and

More information

Using Style Sheets for Consistency

Using Style Sheets for Consistency Cascading Style Sheets enable you to easily maintain a consistent look across all the pages of a web site. In addition, they extend the power of HTML. For example, style sheets permit specifying point

More information

Microsoft FrontPage. 1. Introduction

Microsoft FrontPage. 1. Introduction 1. Introduction Microsoft FrontPage is a full featured HTML editor. A Web site is a group of HTML pages and graphics that are interconnected with hyperlinks. A FrontPage Web site is a site created in FrontPage.

More information

How to Properly Compose E-Mail HTML Code : 1

How to Properly Compose E-Mail HTML Code : 1 How to Properly Compose E-Mail HTML Code : 1 For any successful business, creating and sending great looking e-mail is essential to project a professional image. With the proliferation of numerous e-mail

More information

HTML Lesson 7. Your assignment:

HTML Lesson 7. Your assignment: HTML Lesson 7 Tables are one of the biggest tools Web developers use to present data wherever they want data to go on the page. Like spreadsheets, rows go across (left to right) and columns go up and down.

More information

Cover Page. Dynamic Server Pages Guide 10g Release 3 (10.1.3.3.0) March 2007

Cover Page. Dynamic Server Pages Guide 10g Release 3 (10.1.3.3.0) March 2007 Cover Page Dynamic Server Pages Guide 10g Release 3 (10.1.3.3.0) March 2007 Dynamic Server Pages Guide, 10g Release 3 (10.1.3.3.0) Copyright 2007, Oracle. All rights reserved. Contributing Authors: Sandra

More information

EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING

EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING The European Computer Driving Licence Foundation Ltd. Portview House Thorncastle Street Dublin 4 Ireland Tel: + 353

More information

In order for the form to process and send correctly the follow objects must be in the form tag.

In order for the form to process and send correctly the follow objects must be in the form tag. Creating Forms Creating an email form within the dotcms platform, all the HTML for the form must be in the Body field of a Content Structure. All names are case sensitive. In order for the form to process

More information

Quick Guide for Dreamweaver CC Basics April 2016 Training:

Quick Guide for Dreamweaver CC Basics April 2016 Training: Dreamweaver CC Basics When you look at a web page, you might wonder how it is made. To display a web page, your internet browser reads and interprets a special set of instructions. These instructions are

More information

Creative Guidelines for Emails

Creative Guidelines for Emails Version 2.1 Contents 1 Introduction... 3 1.1 Document Aim and Target Audience... 3 1.2 WYSIWYG editors... 3 1.3 Outlook Overview... 3 2 Quick Reference... 4 3 CSS and Styling... 5 3.1 Positioning... 5

More information

WYSIWYG Editor in Detail

WYSIWYG Editor in Detail WYSIWYG Editor in Detail 1. Print prints contents of the Content window 2. Find And Replace opens the Find and Replace dialogue box 3. Cut removes selected content to clipboard (requires a selection) 4.

More information

Virtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades.

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

Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?

Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? Question 1. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? (b) Briefly identify the primary purpose of the flowing inside the body section of an HTML document: (i) HTML

More information

Using Adobe Dreamweaver CS4 (10.0)

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

The Alignment Ribbon will help you do this. You have an Align Left button, a Center button and Align Right button.

The Alignment Ribbon will help you do this. You have an Align Left button, a Center button and Align Right button. Changing the Appearance of Your Worksheet Cell Alignment Excel will automatically align numbers on the right and text on the left. If you wish to change this, first select the cell or range of cells that

More information

Microsoft FrontPage 2003

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

Email Campaign Guidelines and Best Practices

Email Campaign Guidelines and Best Practices epromo Guidelines HTML Maximum width 700px (length = N/A) Maximum total file size, including all images = 200KB Only use inline CSS, no stylesheets Use tables, rather than layout Use more TEXT instead

More information

Working with forms in PHP

Working with forms in PHP 2002-6-29 Synopsis In this tutorial, you will learn how to use forms with PHP. Page 1 Forms and PHP One of the most popular ways to make a web site interactive is the use of forms. With forms you can have

More information

Micro soft Expression Web 4

Micro soft Expression Web 4 University of Texas at Arlington Micro soft Expression Web 4 Beginner s Guide 2011 1 2 Table of Contents UTA Web Pages... 5 Connecting to your Website... 5 Copying files from your Website... 8 To open

More information

Inserting the Form Field In Dreamweaver 4, open a new or existing page. From the Insert menu choose Form.

Inserting the Form Field In Dreamweaver 4, open a new or existing page. From the Insert menu choose Form. Creating Forms in Dreamweaver Modified from the TRIO program at the University of Washington [URL: http://depts.washington.edu/trio/train/howto/page/dreamweaver/forms/index.shtml] Forms allow users to

More information

Dreamweaver Cascading Style Sheets

Dreamweaver Cascading Style Sheets Dreamweaver Cascading Style Sheets Email: training@ ufl.edu Web Page: http://training.health.ufl.edu 2 This page intentionally left blank. Dreamweaver Cascading Style Sheets What are Cascading Style Sheets?...

More information

Adobe Dreamweaver CC 14 Tutorial

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

Lecture 9 HTML Lists & Tables (Web Development Lecture 3)

Lecture 9 HTML Lists & Tables (Web Development Lecture 3) Lecture 9 HTML Lists & Tables (Web Development Lecture 3) Today is our 3 rd Web Dev lecture During our 2 nd lecture on Web dev 1. We learnt to develop our own Web pages in HTML 2. We learnt about some

More information

ecommercesoftwareone Advance User s Guide -www.ecommercesoftwareone.com

ecommercesoftwareone Advance User s Guide -www.ecommercesoftwareone.com Advance User s Guide -www.ecommercesoftwareone.com Contents Background 3 Method 4 Step 1 - Select Advance site layout 4 Step 2 - Identify Home page code of top/left and bottom/right sections 6 Step 3 -

More information

ICT 6012: Web Programming

ICT 6012: Web Programming ICT 6012: Web Programming Covers HTML, PHP Programming and JavaScript Covers in 13 lectures a lecture plan is supplied. Please note that there are some extra classes and some cancelled classes Mid-Term

More information

RADFORD UNIVERSITY. Radford.edu. Content Administrator s Guide

RADFORD UNIVERSITY. Radford.edu. Content Administrator s Guide RADFORD UNIVERSITY Radford.edu Content Administrator s Guide Contents Getting Started... 2 Accessing Content Administration Tools... 2 Logging In... 2... 2 Getting Around... 2 Logging Out... 3 Adding and

More information

Using Form Tools (admin)

Using Form Tools (admin) EUROPEAN COMMISSION DIRECTORATE-GENERAL INFORMATICS Directorate A - Corporate IT Solutions & Services Corporate Infrastructure Solutions for Information Systems (LUX) Using Form Tools (admin) Commission

More information

Creating Web Pages with Microsoft FrontPage

Creating Web Pages with Microsoft FrontPage Creating Web Pages with Microsoft FrontPage 1. Page Properties 1.1 Basic page information Choose File Properties. Type the name of the Title of the page, for example Template. And then click OK. Short

More information

Intell-a-Keeper Reporting System Technical Programming Guide. Tracking your Bookings without going Nuts! http://www.acorn-is.

Intell-a-Keeper Reporting System Technical Programming Guide. Tracking your Bookings without going Nuts! http://www.acorn-is. Intell-a-Keeper Reporting System Technical Programming Guide Tracking your Bookings without going Nuts! http://www.acorn-is.com 877-ACORN-99 Step 1: Contact Marian Talbert at Acorn Internet Services at

More information

Creating Tables in a Web Site Using an External Style Sheet

Creating Tables in a Web Site Using an External Style Sheet HTML 4 Creating Tables in a Web Site Using an External Style Sheet Photo Courtesy of Sabath Mullet Photo Courtesy of Sabath Mullet Objectives You will have mastered the material in this chapter when you

More information

HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout

HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout Fall 2011, Version 1.0 Table of Contents Introduction...3 Downloading

More information

Guide to Integrate ADSelfService Plus with Outlook Web App

Guide to Integrate ADSelfService Plus with Outlook Web App Guide to Integrate ADSelfService Plus with Outlook Web App Contents Document Summary... 3 ADSelfService Plus Overview... 3 ADSelfService Plus Integration with Outlook Web App... 3 Steps Involved... 4 For

More information

Building Your First Drupal 8 Company Site

Building Your First Drupal 8 Company Site Building Websites with Drupal: Learn from the Experts Article Series Building Your First Drupal 8 Company Site by Todd Tomlinson July, 2014 Unicon is a Registered Trademark of Unicon, Inc. All other product

More information

Cisco Adaptive Security Appliance (ASA) Web VPN Portal Customization: Solution Brief

Cisco Adaptive Security Appliance (ASA) Web VPN Portal Customization: Solution Brief Guide Cisco Adaptive Security Appliance (ASA) Web VPN Portal Customization: Solution Brief Author: Ashur Kanoon August 2012 For further information, questions and comments please contact ccbu-pricing@cisco.com

More information

Creating Web Pages with HTML Simplified. 3rd Edition

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

Umbraco v4 Editors Manual

Umbraco v4 Editors Manual Umbraco v4 Editors Manual Produced by the Umbraco Community Umbraco // The Friendly CMS Contents 1 Introduction... 3 2 Getting Started with Umbraco... 4 2.1 Logging On... 4 2.2 The Edit Mode Interface...

More information

CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)

CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main

More information

Asset Management. By: Brian Johnson

Asset Management. By: Brian Johnson Asset Management By: Brian Johnson A Design Freeze Submitted to the Faculty of the Information Engineering Technology Program in Partial Fulfillment of the Requirements for the Degree of Bachelor of Science

More information

BlueHornet Whitepaper

BlueHornet Whitepaper BlueHornet Whitepaper Best Practices for HTML Email Rendering BlueHornet.com Page Page 1 1 2007 Inc. A wholly owned subsidiary of Digital River, Inc. (619) 295-1856 2150 W. Washington Street #110 San Diego,

More information

HTML Kit: A User Manual. by Paul Strickberger

HTML Kit: A User Manual. by Paul Strickberger HTML Kit: A User Manual by Paul Strickberger HTML Kit User Manual Contents Introduction... 1 The Main Screen... 1 Displaying or Hiding Elements of the Screen...1 Getting Around the Main Screen... 3 The

More information

Implementing Specialized Data Capture Applications with InVision Development Tools (Part 2)

Implementing Specialized Data Capture Applications with InVision Development Tools (Part 2) Implementing Specialized Data Capture Applications with InVision Development Tools (Part 2) [This is the second of a series of white papers on implementing applications with special requirements for data

More information

Fortigate SSL VPN 4 With PINsafe Installation Notes

Fortigate SSL VPN 4 With PINsafe Installation Notes Fortigate SSL VPN 4 With PINsafe Installation Notes Table of Contents Fortigate SSL VPN 4 With PINsafe Installation Notes... 1 1. Introduction... 2 2. Overview... 2 2.1. Prerequisites... 2 2.2. Baseline...

More information

Introduction to Ingeniux Forms Builder. 90 minute Course CMSFB-V6 P.0-20080901

Introduction to Ingeniux Forms Builder. 90 minute Course CMSFB-V6 P.0-20080901 Introduction to Ingeniux Forms Builder 90 minute Course CMSFB-V6 P.0-20080901 Table of Contents COURSE OBJECTIVES... 1 Introducing Ingeniux Forms Builder... 3 Acquiring Ingeniux Forms Builder... 3 Installing

More information

Tutorial: Building a Dojo Application using IBM Rational Application Developer Loan Payment Calculator

Tutorial: Building a Dojo Application using IBM Rational Application Developer Loan Payment Calculator Tutorial: Building a Dojo Application using IBM Rational Application Developer Loan Payment Calculator Written by: Chris Jaun (cmjaun@us.ibm.com) Sudha Piddaparti (sudhap@us.ibm.com) Objective In this

More information

Contents - This is Dept. of Surgery modified version of the manual. Missing pages were removed intentionally.

Contents - This is Dept. of Surgery modified version of the manual. Missing pages were removed intentionally. Contents - This is Dept. of Surgery modified version of the manual. Missing pages were removed intentionally. 1 Introduction... 3 2 Getting Started with Umbraco... 4 2.1 Logging On... 4 2.2 The Edit Mode

More information

SAHARA DIGITAL8 RESPONSIVE MAGENTO THEME

SAHARA DIGITAL8 RESPONSIVE MAGENTO THEME SAHARA DIGITAL8 RESPONSIVE MAGENTO THEME This document is organized as follows: Chater I. Install ma_sahara_digital8 template Chapter II. Features and elements of the template Chapter III. List of extensions

More information

c. Write a JavaScript statement to print out as an alert box the value of the third Radio button (whether or not selected) in the second form.

c. Write a JavaScript statement to print out as an alert box the value of the third Radio button (whether or not selected) in the second form. Practice Problems: These problems are intended to clarify some of the basic concepts related to access to some of the form controls. In the process you should enter the problems in the computer and run

More information