Introduction to web development and JavaScript

Size: px
Start display at page:

Download "Introduction to web development and JavaScript"

Transcription

1 Objectives Chapter 1 Introduction to web development and JavaScript Applied Load a web page from the Internet or an intranet into a web browser. View the source code for a web page in a web browser. Knowledge Describe the components of a client-server architecture. Describe HTTP requests and responses. Distinguish between the way a web server processes static web pages and dynamic web pages. Name the common web browsers, web servers, and server-side scripting languages. Describe the use of the core web technologies: XHTML, CSS, the Document Object Model, and JavaScript. Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 1 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 2 Objectives (continued) Describe the basis for selecting specific releases of the core technologies for use in your web development projects. In general terms, describe the use of AJAX. Describe the issues of cross-browser compatibility and user accessibility. Describe the components of an HTTP URL. The architecture of a web application ` Client The Internet Web Server Database Server ` Client Server Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 3 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 4 The architecture of the Internet server network local area network (LAN) wide area network (WAN) Internet Internet exchange points (IXP) Internet service provider (ISP) Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 5 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 6 1

2 How a web server processes a static web page A simple HTTP request GET / HTTP/1.1 Host: A simple HTTP response HTTP/ OK Content-Type: text/html Content-Length: 136 Server: Apache/2.2.3 <html> <title>example Web Page</title> <body> <p>this is a sample web page</p> Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 7 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 8 Two protocols that web applications depend upon Hypertext Transfer Protocol (HTTP) Transmission Control Protocol/Internet Protocol ( TCP/IP). How a web server processes a dynamic web page Hypertext Markup Language (HTML) static web page HTTP request HTTP response Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 9 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 10 dynamic web page application mappings application server database server round trip Web browsers Internet Explorer Firefox Safari Opera Chrome Web servers Apache IIS Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 11 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 12 2

3 Server-side scripting languages ASP.NET JSP PHP ColdFusion Ruby Perl Python How JavaScript fits into this architecture Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 13 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 14 Common uses of JavaScript Validate form data before it is sent to the server for processing. Respond to user actions such as mouse clicks and key presses. Create dynamic menus. Create slide shows. Animate elements in a web page. Create timers, clocks, and calendars. Change the style sheet that a web page uses. Sort the data that s in a table. Control the web browser window. Detect web browser plug-ins. Open new web browser windows. Change images when the user rolls the mouse over an image. JavaScript JavaScript engine Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 15 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 16 The code for a web page <html xmlns=" <title>mike's Bait and Tackle Shop</title> <body> <h1>mike's Bait and Tackle Shop</h1> <p>welcome to Mike's Bait and Tackle Shop. We have all the gear you'll need to make your next fishing trip a great success!</p> <h2>new Products</h2> <ul> <li>ultima 3000 Two-handed fly rod</li> <li>phil's Faux Shrimp Fly - Size 6</li> <li>titanium Open Back Fly Reel - Black</li> </ul> <p>contact us by phone at to place your order today.</p> The web page in a web browser Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 17 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 18 3

4 Extensible hypertext markup language (XHTML) XHTML elements opening tag closing tag attribute The code for a web page that s styled with CSS <html xmlns=" <title>mike's Bait and Tackle Shop</title> <style type='text/css'> body { background-color: #333366; color: #FFFFFF; h1 { color: #FFCC33; border-bottom: 3px solid #FF3333; ul { list-style-type: square; </style> <!-- The rest of this document is the same as before --> Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 19 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 20 The web page in a web browser Cascading style sheets (CSS) external style sheet embedded style sheet CSS rule set selector declaration block Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 21 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 22 The code for a web page <html xmlns=" <title>mike's Bait and Tackle Shop</title> <body> <h1>mike's Bait and Tackle Shop</h1> <p>welcome to Mike's Bait and Tackle Shop. We have all the gear you'll need to make your next fishing trip a great success!</p> <h2>new Products</h2> <ul> <li>ultima 3000 Two-handed fly rod</li> <li>phil's Faux Shrimp Fly - Size 6</li> <li>titanium Open Back Fly Reel - Black</li> </ul> <p>contact us by phone at to place your order today.</p> The DOM for the web page Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 23 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 24 4

5 document object model (DOM) node Embedded JavaScript in an XHTML document <!-- The code before this is the same as in figure > <p>contact us by phone at to place your order today.</p> <p> <script type="text/javascript"> var today = new Date(); document.writeln( today.getfullyear() ); </script> Mike's Bait and Tackle Shop</p> Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 25 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 26 The JavaScript application in a web browser Highlights in the history of the XHTML standards Version XHTML 1.0 XHTML 1.1 XHTML 2 HTML 5 Description Adopted in January 2000 and revised in August It reformulates HTML 4 using the syntax of XML Adopted in May The control of the presentation of content is now done through CSS. Released as a working draft in July It is intended to be a new version of XHTML, but it may be replaced by XHTML 5. Released as a working draft in January It is a new version of HTML 4 and XHTML 1 that defines a new version of the DOM called DOM5 HTML. Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 27 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 28 The CSS standards Version Description 1.0 Adopted in December Adopted in May First released as a candidate standard in February 2004, it was returned to working draft status in June A modularized version of CSS with the earliest drafts in June Only a few modules have been released as candidate standards. The DOM standards Version Description 1.0 Adopted in October It describes the objects and interfaces that represent an HTML or XHTML document. 2.0 Adopted in November It modularized the specification, updated the existing features of DOM, and added views, events, and a CSS interface. 3.0 Adopted in April It updated the core DOM module and added the ability to convert the DOM to and from an XML document. Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 29 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 30 5

6 JavaScript versions Version Date Browser Support 1.0 March 1996 Netscape Navigator August 1996 Netscape Navigator June 1997 Netscape Communicator June 1998 Netscape Communicator November 2000 Netscape 6 November 2004 Mozilla Firefox November 2005 Mozilla Firefox October 2006 Mozilla Firefox June 2008 Mozilla Firefox 3.0 Target releases for current projects XHTML 1.0 CSS 2.1 DOM 2 JavaScript 1.5 The basis for selecting the target releases The latest releases that are supported by the most popular web browsers Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 31 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 32 How the web technologies interact The DOM event cycle Web browser Web page (XHTML and CSS) DOM JavaScript Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 33 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 34 DOM scripting event-driven programming event event handler AJAX-enabled request and response cycle Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 35 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 36 6

7 rich Internet application (RIA) AJAX (asynchronous JavaScript and XML) XMLHttpRequest object Extensible markup language (XML) JavaScript object notation (JSON) The Sales Tax application in a web browser Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 37 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 38 The XHTML file for the Sales Tax application <html xmlns=" <title>sales Tax Calculator</title> <link rel="stylesheet" type="text/css" href="sales_tax.css" /> <script type="text/javascript" src="sales_tax.js"></script> <body> <div id="content"> <h1>sales Tax Calculator</h1> <p>enter the values below and click "Calculate".</p> <div id="taxcalc"> <label for="subtotal">subtotal:</label> <input type="text" id="subtotal" /><br /> <label for="taxrate">tax Rate:</label> <input type="text" id="taxrate" />%<br /> The XHTML file (continued) <label for="salestax">sales Tax:</label> <input type="text" id="salestax" disabled="disabled" /><br /> <label for="total">total:</label> <input type="text" id="total" disabled="disabled" /><br /> <label> </label> <input type="button" id="calculate" value="calculate" /><br /> </div> </div> Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 39 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 40 The CSS file for the Sales Tax application body { font-family: Arial, Helvetica, sans-serif; background: #333366; #content { width: 450px; margin: 10px auto; padding: 5px 20px; background: white; border: thin solid black; #salestax, #total { color: black; The CSS file (continued) #taxcalc label { display: block; width: 6em; text-align: right; padding-right: 1em; float: left; #taxcalc input { display: block; float: left; #taxcalc br { clear: left; Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 41 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 42 7

8 The JavaScript file for the Sales Tax application var $ = function (id) { return document.getelementbyid(id); The JavaScript file (continued) var calculate_click = function () { var subtotal = parsefloat( $("subtotal").value ); var taxrate = parsefloat( $("taxrate").value ); window.onload = function () { $("calculate").onclick = calculate_click; $("subtotal").focus; $("salestax").value = ""; $("total").value = ""; if ( isnan(subtotal) subtotal < 0 ) { alert("subtotal must be a number that is zero or more!"); else if ( isnan(taxrate) taxrate < 0 ) { alert("tax Rate must be a number that is zero or more!"); else { var salestax = subtotal * (taxrate / 100); salestax = parsefloat( salestax.tofixed(2) ); var total = subtotal + salestax; $("salestax").value = salestax; $("total").value = total.tofixed(2); Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 43 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 44 The text-only version of the J. K. Rowling web site Guidelines for cross-browser compatibility Don t use browser-specific features in your web pages. Test your web pages on as many browsers as possible. Guidelines for user accessibility Design your pages so the most important content will still be available if a visitor can t use images, CSS, or JavaScript. If you work for a government agency, you have to follow the guidelines in Section 508 that are required by federal law. For a commercial web site, you may need to follow the guidelines in the Americans with Disabilities Act (ADA). If you build a site that isn t accessible, you should also have a textonly version available. Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 45 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 46 A web page with links to other web pages The components of an HTTP URL What happens if you omit parts of a URL If you omit the protocol, the default of will be used. If you omit the filename, the default document name for the web server will be used. This is typically either index.html or Default.htm. If you omit the path, you must also omit the filename. Then, the home page for the site will be requested. Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 47 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 48 8

9 Two ways to access a web page on the Internet Type the URL of a web page into the browser s address bar. Click on a link in the current web page to load the next web page. Three ways to access a web page on an intranet or on your own computer Type the complete path and filename into the browser s address bar. Use the File Open command. If you re using Windows, find the file in the Windows Explorer and double-click on it. Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 49 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 50 The source code for the Sales Tax application in Mozilla Firefox How to view the source code in Mozilla Firefox Use the View Page Source command. How to view the source code in Internet Explorer Use the View Source command. Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 51 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 52 9

Introduction to web development

Introduction to web development Santiago Canyon College CIS-132: Introduction to JavaScript Lesson 1 Introduction to web development (Chapter 1 in Murach s JavaScript & DOM Scripting textbook) Slide 1 Objectives Applied Load a web page

More information

Chapter 1 Introduction to web development and PHP

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

Chapter 1. Introduction to web development

Chapter 1. Introduction to web development Chapter 1 Introduction to web development HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 1 Objectives Applied 1. Load a web page from the Internet or an intranet into a web browser.

More information

Instructor: Betty O Neil

Instructor: Betty O Neil Introduction to Web Application Development, for CS437/637 Instructor: Betty O Neil 1 Introduction: Internet vs. World Wide Web Internet is an interconnected network of thousands of networks and millions

More information

Modern Web Development From Angle Brackets to Web Sockets

Modern Web Development From Angle Brackets to Web Sockets Modern Web Development From Angle Brackets to Web Sockets Pete Snyder Outline (or, what am i going to be going on about ) 1.What is the Web? 2.Why the web matters 3.What s unique about

More information

CST 150 Web Design I CSS Review - In-Class Lab

CST 150 Web Design I CSS Review - In-Class Lab CST 150 Web Design I CSS Review - In-Class Lab The purpose of this lab assignment is to review utilizing Cascading Style Sheets (CSS) to enhance the layout and formatting of web pages. For Parts 1 and

More information

Contents. Downloading the Data Files... 2. Centering Page Elements... 6

Contents. 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 information

Web. Programming. Hans- Pe0er Halvorsen, M.Sc. h0p://home.hit.no/~hansha/?page=sojware_development

Web. Programming. Hans- Pe0er Halvorsen, M.Sc. h0p://home.hit.no/~hansha/?page=sojware_development h0p://home.hit.no/~hansha/?page=sojware_development Web O. Widder. (2013). geek&poke. Available: h0p://geek- and- poke.com Programming Hans- Pe0er Halvorsen, M.Sc. 1 Web is the Present and the Future 2

More information

Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com

Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created

More information

Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D

Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D Chapter 7 Page Layout Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 Learning Outcomes float fixed positioning relative positioning absolute positioning two-column page layouts vertical navigation

More information

Fast track to HTML & CSS 101 (Web Design)

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

4.2 Understand Microsoft ASP.NET Web Application Development

4.2 Understand Microsoft ASP.NET Web Application Development L E S S O N 4 4.1 Understand Web Page Development 4.2 Understand Microsoft ASP.NET Web Application Development 4.3 Understand Web Hosting 4.4 Understand Web Services MTA Software Fundamentals 4 Test L

More information

Rich User Interfaces for Web-Based Corporate Applications

Rich User Interfaces for Web-Based Corporate Applications Rich User Interfaces for Web-Based Corporate Applications Ivan Zapevalov, Software Engineer 1 Outline RIA technologies AJAX technology Widgets Demo application in JavaScript Demo application in GWT Web-catalog

More information

IT3504: Web Development Techniques (Optional)

IT3504: Web Development Techniques (Optional) INTRODUCTION : Web Development Techniques (Optional) This is one of the three optional courses designed for Semester 3 of the Bachelor of Information Technology Degree program. This course on web development

More information

Web Design Technology

Web Design Technology Web Design Technology Terms Found in web design front end Found in web development back end Browsers Uses HTTP to communicate with Web Server Browser requests a html document Web Server sends a html document

More information

Google Web Toolkit. Progetto di Applicazioni Software a.a. 2011/12. Massimo Mecella

Google Web Toolkit. Progetto di Applicazioni Software a.a. 2011/12. Massimo Mecella Google Web Toolkit Progetto di Applicazioni Software a.a. 2011/12 Massimo Mecella Introduction Ajax (Asynchronous JavaScript and XML) refers to a broad range of techniques Beyond the technical jargon,

More information

Web Programming. Robert M. Dondero, Ph.D. Princeton University

Web Programming. Robert M. Dondero, Ph.D. Princeton University Web Programming Robert M. Dondero, Ph.D. Princeton University 1 Objectives You will learn: The fundamentals of web programming... The hypertext markup language (HTML) Uniform resource locators (URLs) The

More information

Web Development. How the Web Works 3/3/2015. Clients / Server

Web Development. How the Web Works 3/3/2015. Clients / Server Web Development WWW part of the Internet (others: Email, FTP, Telnet) Loaded to a Server Viewed in a Browser (Client) Clients / Server Client: Request & Render Content Browsers, mobile devices, screen

More information

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

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

Dreamweaver CS5. Module 1: Website Development

Dreamweaver CS5. Module 1: Website Development Dreamweaver CS5 Module 1: Website Development Dreamweaver CS5 Module 1: Website Development Last revised: October 29, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland, CA

More information

Interactive Data Visualization for the Web Scott Murray

Interactive Data Visualization for the Web Scott Murray Interactive Data Visualization for the Web Scott Murray Technology Foundations Web technologies HTML CSS SVG Javascript HTML (Hypertext Markup Language) Used to mark up the content of a web page by adding

More information

ICAWEB502A Create dynamic web pages

ICAWEB502A Create dynamic web pages ICAWEB502A Create dynamic web pages Release: 1 ICAWEB502A Create dynamic web pages Modification History Release Release 1 Comments This Unit first released with ICA11 Information and Communications Technology

More information

IT3503 Web Development Techniques (Optional)

IT3503 Web Development Techniques (Optional) INTRODUCTION Web Development Techniques (Optional) This is one of the three optional courses designed for Semester 3 of the Bachelor of Information Technology Degree program. This course on web development

More information

Appendix H: Cascading Style Sheets (CSS)

Appendix H: Cascading Style Sheets (CSS) Appendix H: Cascading Style Sheets (CSS) Cascading Style Sheets offer Web designers two key advantages in managing complex Web sites: Separation of content and design. CSS gives developers the best of

More information

JJY s Joomla 1.5 Template Design Tutorial:

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

Introduction to Web Technologies

Introduction to Web Technologies Introduction to Web Technologies Tara Murphy 17th February, 2011 The Internet CGI Web services HTML and CSS 2 The Internet is a network of networks ˆ The Internet is the descendant of ARPANET (Advanced

More information

WEB DEVELOPMENT IA & IB (893 & 894)

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

WWW. World Wide Web Aka The Internet. dr. C. P. J. Koymans. Informatics Institute Universiteit van Amsterdam. November 30, 2007

WWW. World Wide Web Aka The Internet. dr. C. P. J. Koymans. Informatics Institute Universiteit van Amsterdam. November 30, 2007 WWW World Wide Web Aka The Internet dr. C. P. J. Koymans Informatics Institute Universiteit van Amsterdam November 30, 2007 dr. C. P. J. Koymans (UvA) WWW November 30, 2007 1 / 36 WWW history (1) 1968

More information

Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation

Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation Credit-By-Assessment (CBA) Competency List Written Assessment Competency List Introduction to the Internet

More information

Credits: Some of the slides are based on material adapted from www.telerik.com/documents/telerik_and_ajax.pdf

Credits: Some of the slides are based on material adapted from www.telerik.com/documents/telerik_and_ajax.pdf 1 The Web, revisited WEB 2.0 marco.ronchetti@unitn.it Credits: Some of the slides are based on material adapted from www.telerik.com/documents/telerik_and_ajax.pdf 2 The old web: 1994 HTML pages (hyperlinks)

More information

Web Development I & II*

Web Development I & II* Web Development I & II* Career Cluster Information Technology Course Code 10161 Prerequisite(s) Computer Applications Introduction to Information Technology (recommended) Computer Information Technology

More information

Web Design and Development ACS-1809

Web Design and Development ACS-1809 Web Design and Development ACS-1809 Chapter 1 9/9/2015 1 Pre-class Housekeeping Course Outline Text book : HTML A beginner s guide, Wendy Willard, 5 th edition Work on HTML files On Windows PCs Tons of

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

Differences between HTML and HTML 5

Differences between HTML and HTML 5 Differences between HTML and HTML 5 1 T.N.Sharma, 2 Priyanka Bhardwaj, 3 Manish Bhardwaj Abstract: Web technology is a standard that allow developing web applications with the help of predefined sets of

More information

SUBJECT CODE : 4074 PERIODS/WEEK : 4 PERIODS/ SEMESTER : 72 CREDIT : 4 TIME SCHEDULE UNIT TOPIC PERIODS 1. INTERNET FUNDAMENTALS & HTML Test 1

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

Lesson Overview. Getting Started. The Internet WWW

Lesson Overview. Getting Started. The Internet WWW Lesson Overview Getting Started Learning Web Design: Chapter 1 and Chapter 2 What is the Internet? History of the Internet Anatomy of a Web Page What is the Web Made Of? Careers in Web Development Web-Related

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 Brief Course Overview An introduction to Web development Server-side Scripting Web Servers PHP Client-side Scripting HTML & CSS JavaScript &

More information

Release: 1. ICAWEB414A Design simple web page layouts

Release: 1. ICAWEB414A Design simple web page layouts Release: 1 ICAWEB414A Design simple web page layouts ICAWEB414A Design simple web page layouts Modification History Release Release 1 Comments This Unit first released with ICA11 Information and Communications

More information

Web Authoring CSS. www.fetac.ie. Module Descriptor

Web Authoring CSS. www.fetac.ie. Module Descriptor The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,

More information

Responsive Web Design Creative License

Responsive Web Design Creative License Responsive Web Design Creative License Level: Introduction - Advanced Duration: 16 Days Time: 9:30 AM - 4:30 PM Cost: 2197 Overview Web design today is no longer just about cross-browser compatibility.

More information

HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk

HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk HTML and CSS Elliot Davies ed37@st-andrews.ac.uk April 10th, 2013 In this talk An introduction to HTML, the language of web development Using HTML to create simple web pages Styling web pages using CSS

More information

Performance Testing for Ajax Applications

Performance Testing for Ajax Applications Radview Software How to Performance Testing for Ajax Applications Rich internet applications are growing rapidly and AJAX technologies serve as the building blocks for such applications. These new technologies

More information

Kentico CMS, 2011 Kentico Software. Contents. Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1

Kentico CMS, 2011 Kentico Software. Contents. Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1 Contents Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1 Time for action - Viewing the mobile sample site 2 What just happened 4 Time for Action - Mobile device redirection

More information

Introduction to Web Development

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

An introduction to creating Web 2.0 applications in Rational Application Developer Version 8.0

An introduction to creating Web 2.0 applications in Rational Application Developer Version 8.0 An introduction to creating Web 2.0 applications in Rational Application Developer Version 8.0 September 2010 Copyright IBM Corporation 2010. 1 Overview Rational Application Developer, Version 8.0, contains

More information

CS134 Web Site Design & Development. Quiz1

CS134 Web Site Design & Development. Quiz1 CS134 Web Site Design & Development Quiz1 Name: Score: Email: I Multiple Choice Questions (2 points each, total 20 points) 1. Which of the following is an example of an IP address? [Answer: d] a. www.whitehouse.gov

More information

CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5

CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5 CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5 Step 1 - Creating list of links - (5 points) Traditionally, CSS navigation is based on unordered list - . Any navigational bar can be

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

ERIE COMMUNITY COLLEGE COURSE OUTLINE A. COURSE TITLE: CS 103 - WEB DEVELOPMENT AND PROGRAMMING FUNDAMENTALS

ERIE COMMUNITY COLLEGE COURSE OUTLINE A. COURSE TITLE: CS 103 - WEB DEVELOPMENT AND PROGRAMMING FUNDAMENTALS ERIE COMMUNITY COLLEGE COURSE OUTLINE A. COURSE TITLE: CS 103 - WEB DEVELOPMENT AND PROGRAMMING FUNDAMENTALS B. CURRICULUM: Mathematics / Computer Science Unit Offering C. CATALOG DESCRIPTION: (N,C,S)

More information

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

Further web design: Cascading Style Sheets Practical workbook

Further web design: Cascading Style Sheets Practical workbook Further web design: Cascading Style Sheets Practical workbook Aims and Learning Objectives This document gives an introduction to the use of Cascading Style Sheets in HTML. When you have completed these

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

CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28

CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28 CSS CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo ADI css 1/28 Cascaded Style Sheets Por ordem de prioridade: Inline

More information

Internet Technologies_1. Doc. Ing. František Huňka, CSc.

Internet Technologies_1. Doc. Ing. František Huňka, CSc. 1 Internet Technologies_1 Doc. Ing. František Huňka, CSc. Outline of the Course 2 Internet and www history. Markup languages. Software tools. HTTP protocol. Basic architecture of the web systems. XHTML

More information

Table of Contents. CSS Instant Results byrichard York Wrox Press 2006 (408 pages)

Table of Contents. CSS Instant Results byrichard York Wrox Press 2006 (408 pages) Table of Contents CSS Instant Results byrichard York Wrox Press 2006 (408 pages) ISBN:047175126X Helping you to quickly master and implement the diverse web applications CSS enables for web designers,

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

Microsoft Expression Web Quickstart Guide

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

Web Programming Languages Overview

Web Programming Languages Overview Web Programming Languages Overview Thomas Powell tpowell@pint.com Web Programming in Context Web Programming Toolbox ActiveX Controls Java Applets Client Side Helper Applications Netscape Plug-ins Scripting

More information

Contents. Introduction... 2. Downloading the Data Files... 2

Contents. 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 information

Rich-Internet Anwendungen auf Basis von ColdFusion und Ajax

Rich-Internet Anwendungen auf Basis von ColdFusion und Ajax Rich-Internet Anwendungen auf Basis von ColdFusion und Ajax Sven Ramuschkat SRamuschkat@herrlich-ramuschkat.de München & Zürich, März 2009 A bit of AJAX history XMLHttpRequest introduced in IE5 used in

More information

Introduction to Adobe Dreamweaver CC

Introduction to Adobe Dreamweaver CC Introduction to Adobe Dreamweaver CC What is Dreamweaver? Dreamweaver is the program that we will be programming our websites into all semester. We will be slicing our designs out of Fireworks and assembling

More information

CTIS 256 Web Technologies II. Week # 1 Serkan GENÇ

CTIS 256 Web Technologies II. Week # 1 Serkan GENÇ CTIS 256 Web Technologies II Week # 1 Serkan GENÇ Introduction Aim: to be able to develop web-based applications using PHP (programming language) and mysql(dbms). Internet is a huge network structure connecting

More information

10CS73:Web Programming

10CS73:Web Programming 10CS73:Web Programming Question Bank Fundamentals of Web: 1.What is WWW? 2. What are domain names? Explain domain name conversion with diagram 3.What are the difference between web browser and web server

More information

Whitepapers at Amikelive.com

Whitepapers at Amikelive.com Brief Overview view on Web Scripting Languages A. Web Scripting Languages This document will review popular web scripting languages[1,2,12] by evaluating its history and current trends. Scripting languages

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

Programming exercises (Assignments)

Programming exercises (Assignments) Course 2013 / 2014 Programming exercises (Assignments) TECHNOLOGIES FOR DEVELOPING WEB USER INTERFACES Websites (HTML5 and CSS3) Table of contents Technologies for developing web user interfaces... 1 Websites

More information

HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL

HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL HTML CSS Basic Structure HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a head and a body. The head

More information

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.

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

Dreamweaver CS5. Module 2: Website Modification

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

GUI and Web Programming

GUI and Web Programming GUI and Web Programming CSE 403 (based on a lecture by James Fogarty) Event-based programming Sequential Programs Interacting with the user 1. Program takes control 2. Program does something 3. Program

More information

Entrance exam for PBA in Web Development

Entrance exam for PBA in Web Development Entrance exam for PBA in Web Development Fill out your personal details below. Full name: CPR-number: E-mail address: 1 PART I: Overall knowledge In this test you will find 35 questions covering different

More information

4 Understanding. Web Applications IN THIS CHAPTER. 4.1 Understand Web page development. 4.2 Understand Microsoft ASP.NET Web application development

4 Understanding. Web Applications IN THIS CHAPTER. 4.1 Understand Web page development. 4.2 Understand Microsoft ASP.NET Web application development 4 Understanding Web Applications IN THIS CHAPTER 4.1 Understand Web page development 4.2 Understand Microsoft ASP.NET Web application development 4.3 Understand Web hosting 4.4 Understand Web services

More information

Macromedia Dreamweaver 8 Developer Certification Examination Specification

Macromedia Dreamweaver 8 Developer Certification Examination Specification Macromedia Dreamweaver 8 Developer Certification Examination Specification Introduction This is an exam specification for Macromedia Dreamweaver 8 Developer. The skills and knowledge certified by this

More information

CSS for Page Layout. Key Concepts

CSS for Page Layout. Key Concepts CSS for Page Layout Key Concepts CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control

More information

CIS 467/602-01: Data Visualization

CIS 467/602-01: Data Visualization CIS 467/602-01: Data Visualization HTML, CSS, SVG, (& JavaScript) Dr. David Koop Assignment 1 Posted on the course web site Due Friday, Feb. 13 Get started soon! Submission information will be posted Useful

More information

How to code, test, and validate a web page

How to code, test, and validate a web page Chapter 2 How to code, test, and validate a web page Slide 1 Objectives Applied 1. Use a text editor like Aptana Studio 3 to create and edit HTML and CSS files. 2. Test an HTML document that s stored on

More information

Oct 15, 2004 www.dcs.bbk.ac.uk/~gmagoulas/teaching.html 3. Internet : the vast collection of interconnected networks that all use the TCP/IP protocols

Oct 15, 2004 www.dcs.bbk.ac.uk/~gmagoulas/teaching.html 3. Internet : the vast collection of interconnected networks that all use the TCP/IP protocols E-Commerce Infrastructure II: the World Wide Web The Internet and the World Wide Web are two separate but related things Oct 15, 2004 www.dcs.bbk.ac.uk/~gmagoulas/teaching.html 1 Outline The Internet and

More information

Links Getting Started with Widgets, Gadgets and Mobile Apps

Links Getting Started with Widgets, Gadgets and Mobile Apps Widgets, Gadgets, and Mobile Apps for Libraries: Tips, Code Samples, Explanations, and Downloads Michael Sauers Technology Innovation Librarian Nebraska Library Commission msauers@nlc.state.ne.us Jason

More information

Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS

Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS Web Design Lesson 2 Development Perspective: DIV/CSS Why tables have been tabled Tables are a cell based layout tool used in HTML development. Traditionally they have been the primary tool used by web

More information

What is a Web Browser? Web Site Functionality. A client program that uses HTTP to communicate with web servers.

What is a Web Browser? Web Site Functionality. A client program that uses HTTP to communicate with web servers. What is a Web Browser? Web Site Functionality April 1, 2004 A client program that uses HTTP to communicate with web servers. HTML interpreter Reads HTML, determines how to display it A Simple HTML file

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

Software Requirements Specification For Real Estate Web Site

Software Requirements Specification For Real Estate Web Site Software Requirements Specification For Real Estate Web Site Brent Cross 7 February 2011 Page 1 Table of Contents 1. Introduction...3 1.1. Purpose...3 1.2. Scope...3 1.3. Definitions, Acronyms, and Abbreviations...3

More information

Application layer Web 2.0

Application layer Web 2.0 Information Network I Application layer Web 2.0 Youki Kadobayashi NAIST They re revolving around the web, after all Name any Internet-related buzz: Cloud computing Smartphone Social media... You ll end

More information

IAS Web Development using Dreamweaver CS4

IAS Web Development using Dreamweaver CS4 IAS Web Development using Dreamweaver CS4 Information Technology Group Institute for Advanced Study Einstein Drive Princeton, NJ 08540 609 734 8044 * helpdesk@ias.edu Information Technology Group [2] Institute

More information

Style & Layout in the web: CSS and Bootstrap

Style & Layout in the web: CSS and Bootstrap Style & Layout in the web: CSS and Bootstrap Ambient intelligence: technology and design Fulvio Corno Politecnico di Torino, 2014/2015 Goal Styling web content Advanced layout in web pages Responsive layouts

More information

OPENTABLE GROUP SEARCH MODULE GETTING STARTED ADD RESERVATIONS TO YOUR WEBSITE

OPENTABLE GROUP SEARCH MODULE GETTING STARTED ADD RESERVATIONS TO YOUR WEBSITE ADD RESERVATIONS TO YOUR WEBSITE OPENTABLE GROUP SEARCH MODULE The group search module allows users to select a specific restaurant location from a list and search tables at that location. The code below

More information

The Web as a Client-Server System; TCP/IP intro!

The Web as a Client-Server System; TCP/IP intro! The Web as a Client-Server System; TCP/IP intro! Engineering Software as a Service 2.1 2.2" Armando Fox! 2013 Armando Fox & David Patterson, all rights reserved 1! 2! Web at 100,000 feet! The web is a

More information

Connecting with Computer Science, 2e. Chapter 5 The Internet

Connecting with Computer Science, 2e. Chapter 5 The Internet Connecting with Computer Science, 2e Chapter 5 The Internet Objectives In this chapter you will: Learn what the Internet really is Become familiar with the architecture of the Internet Become familiar

More information

How to Code With MooTools

How to Code With MooTools Advanced Web Programming Jaume Aragonés Ferrero Department of Software and Computing Systems A compact JavaScript framework MOOTOOLS Index What is MooTools? Where to find? How to download? Hello World

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

ASP.NET: THE NEW PARADIGM FOR WEB APPLICATION DEVELOPMENT

ASP.NET: THE NEW PARADIGM FOR WEB APPLICATION DEVELOPMENT ASP.NET: THE NEW PARADIGM FOR WEB APPLICATION DEVELOPMENT Dr. Mike Morrison, University of Wisconsin-Eau Claire, morriscm@uwec.edu Dr. Joline Morrison, University of Wisconsin-Eau Claire, morrisjp@uwec.edu

More information

Core Ideas CHAPTER 1 PART. CHAPTER 2 Pre-Ajax JavaScript Communications Techniques CHAPTER 3 XMLHttpRequest Object CHAPTER 4 Data Formats

Core Ideas CHAPTER 1 PART. CHAPTER 2 Pre-Ajax JavaScript Communications Techniques CHAPTER 3 XMLHttpRequest Object CHAPTER 4 Data Formats Core Ideas CHAPTER 1 Introduction to Ajax I PART CHAPTER 2 Pre-Ajax JavaScript Communications Techniques CHAPTER 3 XMLHttpRequest Object CHAPTER 4 Data Formats ch01.indd 1 12/5/07 4:59:45 PM blind folio

More information

Beginning Dreamweaver Zac Van Note www.creativefuel.org

Beginning Dreamweaver Zac Van Note www.creativefuel.org Beginning Dreamweaver Zac Van Note www.creativefuel.org Description This class provides an overview of the features and capabilities of Dreamweaver. Lecture, discussion and hands-on exercises will reinforce

More information

How To Test Your Web Site On Wapt On A Pc Or Mac Or Mac (Or Mac) On A Mac Or Ipad Or Ipa (Or Ipa) On Pc Or Ipam (Or Pc Or Pc) On An Ip

How To Test Your Web Site On Wapt On A Pc Or Mac Or Mac (Or Mac) On A Mac Or Ipad Or Ipa (Or Ipa) On Pc Or Ipam (Or Pc Or Pc) On An Ip Load testing with WAPT: Quick Start Guide This document describes step by step how to create a simple typical test for a web application, execute it and interpret the results. A brief insight is provided

More information

Boston University. Overview and Description: Instructor, Contact Email, Office Hours and Blackboard Site: Topic Coverage.

Boston University. Overview and Description: Instructor, Contact Email, Office Hours and Blackboard Site: Topic Coverage. Boston University Metropolitan College MET CS601 - Web Application Development Overview and Description: This course focuses on building core competencies in web design and development. It begins with

More information

World Wide Web Aka The Internet. Karst Koymans. Friday, October 2, 2015

World Wide Web Aka The Internet. Karst Koymans. Friday, October 2, 2015 . WWW World Wide Web. Aka The Internet Karst Koymans Informatics Institute University of Amsterdam (version 15.6, 2015/10/08 11:21:17 UTC) Friday, October 2, 2015 Karst Koymans (UvA) WWW Friday, October

More information

Web Design Specialist

Web Design Specialist UKWDA Training: CIW Web Design Series Web Design Specialist Course Description CIW Web Design Specialist is for those who want to develop the skills to specialise in website design and builds upon existing

More information

TIME SCHEDULE OBJECTIVES

TIME SCHEDULE OBJECTIVES COURSE TITLE : WEB DESIGN COURSE CODE : 3073 COURSE CATEGORY : B PERIODS/WEEK : 4 PERIODS/ SEMESTER : 72 CREDITS : 4 TIME SCHEDULE MODULE TOPICS PERIODS 1 Internet fundamentals 18 2 Html, css and web design

More information

Citrix StoreFront. Customizing the Receiver for Web User Interface. 2012 Citrix. All rights reserved.

Citrix StoreFront. Customizing the Receiver for Web User Interface. 2012 Citrix. All rights reserved. Citrix StoreFront Customizing the Receiver for Web User Interface 2012 Citrix. All rights reserved. Customizing the Receiver for Web User Interface Introduction Receiver for Web provides a simple mechanism

More information

Study on Parallax Scrolling Web Page Conversion Module

Study on Parallax Scrolling Web Page Conversion Module Study on Parallax Scrolling Web Page Conversion Module Song-Nian Wang * and Fong-Ming Shyu Department of Multimedia Design, National Taichung University of Science and Technology phenombox@gmail.com, fms@nutc.edu.tw

More information