Old Business https://jshare.johnshopkins.edu/kchurch4/public_html/teaching/103/Spring2011/ https://jshare.johnshopkins.edu/kchurch4/public_html/teaching/103/Spring2011/

Slides:



Advertisements
Similar presentations
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Advertisements

23-Aug-14 HTML/XHTML Forms. 2 What are forms? is just another kind of XHTML/HTML tag Forms are used to create (rather primitive) GUIs on Web pages Usually.
24-Aug-14 HTML Forms. 2 What are forms? is just another kind of HTML tag HTML forms are used to create (rather primitive) GUIs on Web pages Usually the.
MWD1001 Website Production Using JavaScript with Forms.
CIS101 Introduction to Computing Week 08. Agenda Your questions JavaScript text Resume project HTML Project Six This week online Next class.
JavaScript Forms Form Validation Cookies CGI Programs.
Tutorial 6 Working with Web Forms
Forms Review. 2 Using Forms tag  Contains the form elements on a web page  Container tag tag  Configures a variety of form elements including text.
Computing Concepts Advanced HTML: Tables and Forms.
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
Website Development with PHP and MySQL Introduction.
Tutorial 6 Working with Web Forms. XP Objectives Explore how Web forms interact with Web servers Create form elements Create field sets and legends Create.
Browser and Basics Tutorial 1. Learn about Web browser software and Web pages The Web is a collection of files that reside on computers, called.
Agenda – Week 5, Day 2 Complete RoboHelp Tutorial Transition to HTML Tutorial –Warm-up – Explore HTML –Page Design – Create a page –Publishing – Make your.
CGI Programming: Part 1. What is CGI? CGI = Common Gateway Interface Provides a standardized way for web browsers to: –Call programs on a server. –Pass.
File Upload Instructions and Information The File Upload utility is used for transferring files too large to send through the system. How it Works:
This PowerPoint document will help you learn about hyperlinks and action buttons. 1.
1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
1 DIG 3134 – Lecture 3 Forms Michael Moshell University of Central Florida Media Software Design.
JAVASCRIPT HOW TO PROGRAM -2 DR. JOHN P. ABRAHAM UTPA.
4-Sep-15 HTML Forms Mrs. Goins Web Design Class. Parts of a Web Form A Form is an area that can contain Form Control/Elements. Each piece of information.
Brief Overview of Web Forms L. G. Piper Bunker Hill Community College 23 March 2011.
XP Tutorial 6New Perspectives on HTML and XHTML, Comprehensive 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6.
Department of Information Technology e-Michigan Web Development 0 HTML Form Creation in the Vignette Content Management Application.
Web111a_chapt06.ppt HTML: Section 6 Forms HTML tags: define data input and/or output Define the Input and/or Output on the web page Do not process the.
1 HTML and CGI Scripting CSC8304 – Computing Environments for Bioinformatics - Lecture 10.
Dynamic Web Pages (Flash, JavaScript)
Chapter 6: Forms JavaScript - Introductory. Previewing the Product Registration Form.
Project Four Forms Discuss form processing Describe the difference between client-side and server-side form processing Add a horizontal rule to a Web page.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
December 19,  Vocabulary Words  Review different form tags!  Video Game program (See Project Worksheet) -or-  Lunch program (See Project Worksheet)
December 9,  Review different form tags!  Example program  Lunch program  Extras: ◦ Speaker will be here on Monday, December 13th – DeVRY! ◦
XP New Perspectives on Browser and Basics Tutorial 1 1 Browser and Basics Tutorial 1.
10 Adding Interactivity to a Web Site Section 10.1 Define scripting Summarize interactivity design guidelines Identify scripting languages Compare common.
Dreamweaver – Dreamweaver Extras Web Design Section 8-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson.
University of Sunderland CDM105 Session 5 Web Authoring Tools The past and present A history of web authoring tools and an overview of Macromedia Dreamweaver.
A little PHP. Enter the simple HTML code seen below.
CSC 2720 Building Web Applications HTML Forms. Introduction  HTML forms are used to collect user input.  The collected input is typically sent to a.
Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and check boxes using HTML Add a pull-down.
Java CGI Lecture notes by Theodoros Anagnostopoulos.
Introduction to JavaScript 41 Introduction to Programming the WWW I CMSC Winter 2004 Lecture 17.
TC 310 The Computer in Technical Communication Dr. Jennifer Turns Week 4, Day 2 (4/23)
Website Development with PHP and MySQL Saving Data.
Forms and Server Side Includes. What are Forms? Forms are used to get user input We’ve all used them before. For example, ever had to sign up for courses.
LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side.
1 © Netskills Quality Internet Training, University of Newcastle HTML Forms © Netskills, Quality Internet Training, University of Newcastle Netskills is.
ITCS373: Internet Technology Lecture 5: More HTML.
Tutorial 6 Working with Web Forms. XP Objectives Explore how Web forms interact with Web servers Create form elements Create field sets and legends Create.
Tutorial 6 Working with Web Forms. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore how Web forms interact with.
1 Hyperlinks and Action Buttons This PowerPoint document will help you learn about ______ and __________ buttons.
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.
HTLM Forms CS3505. Form Handling in Browser html User Files out form WEbBROWSErWEbBROWSEr User read response submit Get URL?input html Get file html script.
1 Hyperlinks and Action Buttons This PowerPoint document will help you learn about hyperlinks and action buttons.
Implementing and Using the SIRWEB Interface Setup of the CGI script and web procfile Connecting to your database using HTML Retrieving data using the CGI.
WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Variables, Functions and Events (NON-Audio version) © Dr. David C. Gibbs WDMD.
©SoftMooreSlide 1 Introduction to HTML: Forms ©SoftMooreSlide 2 Forms Forms provide a simple mechanism for collecting user data and submitting it to.
Tutorial 6 Working with Web Forms. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore how Web forms interact with.
Netprog CGI and Forms1 CGI and Forms A detailed look at HTML forms.
Week 10: HTML Forms HNDIT11062 – Web Development.
HTML Forms. A form is simply an area that can contain form fields. Form fields are objects that allow the visitor to enter information - for example text.
PHP Form Processing * referenced from
1 Web Engineering Forms Lecture 05. FORMS Its how HTML does interactivity. There are quite new feature in HTML5. But the fundamental idea does not change.
COSC 2328 – Web Programming.  PHP is a server scripting language  It’s widely-used and free  It’s an alternative to Microsoft’s ASP and Ruby  PHP.
Lesson 5 Introduction to HTML Forms. Lesson 5 Forms A form is an area that can contain form elements. Form elements are elements that allow the user to.
FORMS Explained By: Jasdeep Kaur. Lecturer, Department of Computer Application, PGG.C.G., Sector: 42, Chandigarh.
SlideSet #20: Input Validation and Cross-site Scripting Attacks (XSS) SY306 Web and Databases for Cyber Operations.
 Open the course to add an online class  Click on Add a Page (left side)  Type in a name  Click on Create  Click on the Content Tab  Click on Add.
ArcGIS for Server Security: Advanced
Section 17.1 Section 17.2 Add an audio file using HTML
Presentation transcript:

Old Business Note: We rarely write HTML by hand – Many programs offer an HTML option to “save as” Microsoft: Word, Powerpoint, Outlook Apple: TextEdit

Embedding (Viral Marketing)

New Business: Web Programming Homework Add a survey to your home page – Provide a submit button that s survey results to you Hint: But please results to you (and not to me) – Suggestions: Use forms with several types of inputs – Menus, buttons, check boxes, textareas Provide “like” and “don’t like” features, tags, etc. Update your home page and us with link by dawn before next class Please check out one another’s home pages – And fill out their surveys…

We will focus on simple JavaScript examples, but JavaScript needn’t be simple Extra Credit: – Add a solitaire game to your home page – Hint:

URLs with Arguments URL (aka link) – Domain: – Arguments: hl, q, subject, body Examples: – – – JavaScript Security Model makes it difficult to pass information back from client to server – We’ll use mailto links to get around that – Better alternatives: cgi bin (Unix),.Net (Microsoft) Nice tutorial: But too advanced for now… We can return to this later (if you want to)

javascript_example.html

javascript_example_with_sounds.html

factorial_example.html Example of a form – One Input: x – Two Outputs (both produce the same result) Recursive definition of factorial Iterative definition of factorial – Three Buttons: Update button: calls fact(x) and updates as necessary Next: calls fact(x+1) and updates as necessary Back: calls fact(x−1) and updates as necessary Take-away points – Illustrate forms: inputs, outputs, menus… – Illustrate JavaScript functions (with multiple arguments) Code Re-use: Note that all 3 buttons call the same update function – Illustrate recursion (and compare with iteration) – Illustrate function calling, local variables and alpha/beta reduction

Lots of Different Input Types (with state)

form_example.html Different types of input boxes, menus, buttons, etc. – values back (to workaround security) –

Limitations Due to Security JavaScript security model – JavaScript has its own security model, but this is not designed to protect the Web site owner or the data passed between the browser and the server. – Security model: designed to protect user from malicious Web sites, and as a result, it enforces strict limits on what the page author is allowed to do. Challenge: Can we protect the user (innocent good guy) – If a bad guy (page author) is running code on good guy’s machine? – Prohibitions: bad guy can’t read or write secrets (e.g., user’s files) But bad guy can trick user into clicking on links and handing over secrets Menus can switch “yes” and “no” (and “cancel”) Phishing JavaScript can call URLs with arguments and those URLs need not play by the rules –

(Too) Advanced Topics Despite the security model, you can still do some pretty amazing (advanced) things… – Please don’t be intimidated… – The rest of this lecture is extra credit

Sketch of (

Image Maps

More (Too) Advanced Examples