LAB MANUAL CS (22): Web Technology
|
|
- Elvin Dixon
- 7 years ago
- Views:
Transcription
1 RUNGTA COLLEGE OF ENGINEERING & TECHNOLOGY (Approved by AICTE, New Delhi & Affiliated to CSVTU, Bhilai) Kohka Kurud Road Bhilai [C.G.] LAB MANUAL CS (22): Web Technology Department of COMPUTER SCIENCE & ENGINEERING Document No. RCET/CSE/LABMANUAL/ Version Beta Title Web Technology Lab Date of Issue 11-July-2013 Date of Revision --- Compiled by Verified by Approved by Rahul Shrivastava Astt.Prof. HOD
2 INDEX Objectives Importance Pre-requisite System Specification Guidelines Report Book Format Lab-1 Develop and demonstrate a HTML document that illustrates the use external style sheet, ordered list, table, borders, padding, color, and the <span> tag Lab-2 Lab-3 Develop and demonstrate a XHTML document that illustrates the use external style sheet, ordered list, table, borders, padding, color, and the <span> tag. Develop and demonstrate a XHTML file that includes JavaScript script for the following problems: a) Input: A number n obtained using prompt, Output: The first n Fibonacci numbers b) Input: A number n obtained using prompt, Output: A table of numbers from 1 to n and their squares using alert Lab-4 Develop and demonstrate a XHTML file that includes Javascript script that uses functions for the following problems: a) Parameter: A string, Output: The position in the string of the left-most vowel b) Parameter: A number, Output: The number with its digits in the reverse order 26 Lab-5 a) Develop and demonstrate, using Javascript script, a XHTML document that collects the RollNo ( the valid format is: A digit from 1 to 4 followed by two upper-case characters followed by two digits followed by two upper-case characters followed by three digits; no embedded spaces allowed- e.g. 1AB23CD356, 1GC13CS345) of the user. Event handler must be included for the form element that collects this information to validate the input. Messages in the alert windows must be produced when errors are detected. 30 Lab-6 Modify the above program to get the current semester also (restricted to be a number from 1 to 8) 34 Lab Manual: CS-(Web Technology) Page 2
3 Lab-7 Lab-8 Develop and demonstrate, using JavaScript script, a XHTML document that contains three short paragraphs of text, stacked on top of each other, with only enough of each showing so that the mouse cursor can be placed over some part of them. When the cursor is placed over the exposed part of any paragraph, it should rise to the top to become completely visible. Modify the above document so that when a paragraph is moved from the To Modify the above document so that when a paragraph is moved from top stacking position, it returns to its original position rather than to the the top stacking position, it returns to its original position rather than bottom. to the bottom Design an XML document to store information about a student in an engineering college affiliated to CSVTU. The information must include RollNo, Name, Name of the College, Branch, Year of Joining, and id. Make up Lab-9 sample data for 5 students. Create a CSS style sheet and use it to display the document. Create an XSLT style sheet for one student element of the above document and use Lab-10 it to create a display of that element Lab Manual: CS-(Web Technology) Page 3
4 OBJECTIVES On completion of this Lab student shall be able to : S.No. Objectives 1 Create web pages and apply basic HTML and XHTML tag. 2 Develop XHTML web page which include java script. 3 Modify the XHTML web page according to the requirement of user with the help of java script functions. 4 Create XML program to store various information 5 Execute queries to create and modify employee database. 6 Write perl and php program to to perform various basic operation according to user s requirement. 7 Develop dynamic program using perl/php with mysql. Lab Manual: CS-(Web Technology) Page 4
5 IMPORTANCE 1. HTML is important as the base language that css, javascript and php plug in to. It provides the content that css styles, javascript enhances and php links to a database (to simplify their functions) % of the time or so, web applications are outputting HTML/CSS/JavaScript to the browser, so you need to understand them if you're going to output them, just like you need to understand English if you are going to output text in English. 3. If you want to possess a credible online presence that reflects your company and provides a platform to contend with competent rivals HTML is the best language for website creation. It's several benefits a number of them are: 1. A significant benefit of HTML it is free of charge and no need to install any software. 2. HTML is simple to use and understand. and high speed loading time. 3. All browsers support HTML. 4. Most development tools whatever they are paid or free all support HTML. 5. HTML and XML syntax is extremely similar. A Glimpse Into The Future Web technology has evolved through several stages, including ISAM, SQL/Relational, and XML: ISAM. Although ISAM has not been formally standardized as a data model, thanks to the dominance of Cobol and the effect of that dominance on database management, there is a common set of wellunderstood expectations for an ISAM DBMS. In the ISAM paradigm, entities are records. Attributes are understood to be data stored starting at a specific offset for a specific length. The application is responsible for maintaining relationships, usually performed in much the same way as the relational model, where entities are collected in OS files, and the application (and thus the developer) is responsible for knowing which set of records is in which file. The application can include multiple types of records in one file, but any differences in entity type within a file must be implemented, understood, and maintained by the application. SQL/Relational. From a theoretical standpoint, the SQL paradigm and relational model are not synonymous. In fact, SQL can be used to build result sets that do not meet relational requirements. However, the average computing professional is not interested in purely theoretical DBMSs, and when most people use a relational database, they are almost invariably using SQL to manipulate the data (whether directly or under the covers, as is often the case with ADO). XML. XML is not a database paradigm. It is a portable persistence mechanism. However, in a distributed computing environment, XML fragments may be viewed as small, disconnected databases because the integration task required at the receiving end is equivalent to integrating data from two different database paradigms. Each of these fragments (or minidatabases) is self-containing and conforms to a set of rules. Additional rules have been added by the introduction of XML schema, but Lab Manual: CS-(Web Technology) Page 5
6 these are not necessary to the existence of the XML fragment - it can be understood by an XML parser independently of the additional rules. The additional rules are used primarily to ease the impedance mismatch that occurs when a system of loosely structured data is incorporated into a system of more highly structured data. Post relational DBMS: There are many number of visions about the future of data storage. However, based on the history of database technology and practice. The desired evolution of DBMSs, therefore that decouples the storage mechanism from the access mechanism. One way to think of this is that there is an underlying DBMS that operates only in terms of very generic database concepts, analogous to an abstract class in object-oriented programming. Lab Manual: CS-(Web Technology) Page 6
7 PRE-REQUISITE Before you continue you should have a basic understanding of the following: Computer basic functionality. Basic understanding of internet / www/ web pages. Lab Manual: CS-(Web Technology) Page 7
8 SYSTEM SPECIFICATION Hardware Requirements: System : Pentium IV 2.4 GHz. Hard Disk : 40 GB. Ram : 512 MB. Software Requirements: Operating system : Windows XP. Etc. Lab Manual: CS-(Web Technology) Page 8
9 GUIDELINES Students must be in the lab before lab activity starts. No late coming is tolerated without prior consent from the respective lecturer. Failure to do so may eliminate your mark for that particular lab session. Always keep identity cards. Students need to maintain a proper decorum in the computer lab. Students must use the equipment with care. Any damage caused is punishable. Students are required to carry their observation / programs book with completed exercises while entering the lab. Students are supposed to occupy the machines allotted to them and are not supposed to talk or make noise in the lab. The allocation is put up on the lab notice board. Lab can be used in free time / lunch hours by the students who need to use the systems after taking prior permission from the lab in-charge. Lab records need to be submitted on or before date of submission. Follow good web application development practices. Assessment for each exercise on a scale of (10): Correct implementation of concept used.. Correct formation of web pages. REPORT BOOK FORMAT A lab record should be maintained separately by each student which should contain : Problem Statement Lab Exercise Observation for each practice exercise. Only write Challenge-1 in report book. Demonstrate other higher challenges to the faculty and gain marks. Lab Manual: CS-(Web Technology) Page 9
10 LAB -1 PROBLEM STATEMENT Develop and demonstrate a HTML document that illustrates the use external style sheet, ordered list, table, borders, padding, color, and the <span> tag. OBJECTIVES On completion of Lab 1 student shall be able to: Design basic html and CSS document. Develop HTML web page with link from external style sheet. THEORY What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of markup tags The tags describe document content HTML documents contain HTML tags and plain text HTML documents are also called web pages HTML Tags HTML markup tags are usually called HTML tags HTML tags are keywords (tag names) surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, with a forward slash before the tag name Start and end tags are also called opening tags and closing tags. Lab Manual: CS-(Web Technology) Page 10
11 What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations: The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value. Practice Exercise: S.No. Query statement 1 Develop and demonstrate basic HTML document that illustrate the use of HTML heading, paragraph. 2 Develop and demonstrate basic HTML document that illustrate the use of HTML ordered list. 3 Develop and demonstrate a HTML document that illustrates the use of HTML Tables. 4 Develop and demonstrate basic CSS document on the basis of following criteria: 1. Set body background color: white and link the external CSS document to html file. 2. Set table border to 2px solid and padding 0px. 3. Set table header border to 2px solid blue and padding 8px. 4. Set table data border to 1px solid blue and padding 8px. 5. Set ordered list font size to 80% and list style as lower-roman. 6. Set span properties as font size -100%, font style-italic, and background color olive. 5 Develop and demonstrate a HTML document that illustrates the use external style sheet, ordered list, table, borders, padding, color, and the <span> tag. Lab Manual: CS-(Web Technology) Page 11
12 ACCEPTANCE CRITERIA For the acceptance of your program keep in mind following set of points that you have to cover while developing a program and record book:- Acceptance Points Web page design Correct implementation Report Book Remarks Web page must be designed in proper way by keeping in mind all the correct syntax of mark up language HTML,CSS, XHTML code must implemented correctly It consists of following sections: Problem Statement Lab Exercise 5. Observation after each practice exercise POST LAB ASSIGNMENT Create a XHTML web page for your personal profile which consist of your personal detail and academic detail. REFERENCES Bibliography: HTML and XML complete reference. Websites: FAQ S What is HTML? What is a tag? How to link External style sheet in html document? What is a difference between HTML and XHTML? What is document type declaration? Write tag syntax used for heading, paragraph and tables? Lab Manual: CS-(Web Technology) Page 12
13 LAB -2 PROBLEM STATEMENT Develop and demonstrate a XHTML document that illustrates the use external style sheet, ordered list, table, borders, padding, color, and the <span> tag. OBJECTIVES On completion of Lab 2 student shall be able to: Design basic html and CSS document. Develop XHTML web page with link from external style sheet. THEORY What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of markup tags The tags describe document content HTML documents contain HTML tags and plain text HTML documents are also called web pages HTML Tags HTML markup tags are usually called HTML tags HTML tags are keywords (tag names) surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, with a forward slash before the tag name Start and end tags are also called opening tags and closing tags. Lab Manual: CS-(Web Technology) Page 13
14 Why XHTML? Many pages on the internet contain "bad" HTML. The following HTML code will work fine if you view it in a browser (even if it does NOT follow the HTML rules): <html> <head> <title>this is bad HTML</title> <body> <h1>bad HTML <p>this is a paragraph </body> XML is a markup language where documents must be marked up correctly and "well-formed". Today's market consists of different browser technologies. Some browsers run on computers, and some browsers run on mobile phones or other small devices. Smaller devices often lack the resources or power to interpret a "bad" markup language. Therefore - by combining the strengths of HTML and XML, XHTML was developed. XHTML is HTML redesigned as XML. The Most Important Differences from HTML: Document Structure XHTML DOCTYPE is mandatory The XML namespace attribute in <html> is mandatory <html>, <head>, <title>, and <body> is mandatory XHTML Elements XHTML elements must be properly nested XHTML elements must always be closed XHTML elements must be in lowercase XHTML documents must have one root element XHTML Attributes Attribute names must be in lower case Attribute values must be quoted Attribute minimization is forbidden Lab Manual: CS-(Web Technology) Page 14
15 <!DOCTYPE...> Is Mandatory An XHTML document must have an XHTML DOCTYPE declaration. The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html>, must specify the xml namespace for the document. The example below shows an XHTML document with a minimum of required tags: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>title of document</title> </head> <body>... </body> </html> XHTML Elements Must Be Properly Nested In HTML, some elements can be improperly nested within each other, like this: <b><i>this text is bold and italic</b></i> In XHTML, all elements must be properly nested within each other, like this: <b><i>this text is bold and italic</i></b> XHTML Elements Must Always Be Closed This is wrong: <p>this is a paragraph <p>this is another paragraph This is correct: <p>this is a paragraph</p> <p>this is another paragraph</p> Lab Manual: CS-(Web Technology) Page 15
16 Empty Elements Must Also Be Closed This is wrong: A break: <br> A horizontal rule: <hr> An image: <img src="happy.gif" alt="happy face"> This is correct: A break: <br /> A horizontal rule: <hr /> An image: <img src="happy.gif" alt="happy face" /> XHTML Elements Must Be In Lower Case This is wrong: <BODY> <P>This is a paragraph</p> </BODY> This is correct: <body> <p>this is a paragraph</p> </body> Attribute Names Must Be In Lower Case This is wrong: <table WIDTH="100%"> This is correct: <table width="100%"> Lab Manual: CS-(Web Technology) Page 16
17 Attribute Values Must Be Quoted This is wrong: <table width=100%> This is correct: <table width="100%"> How to Convert from HTML to XHTML 1. Add an XHTML <!DOCTYPE> to the first line of every page 2. Add an xmlns attribute to the html element of every page 3. Change all element names to lowercase 4. Close all empty elements 5. Change all attribute names to lowercase 6. Quote all attribute values Introduction to XML XML was designed to transport and store data. HTML was designed to display data. What You Should Already Know Before you continue you should have a basic understanding of the following: HTML JavaScript What is XML? XML stands for EXtensible Markup Language XML is a markup language much like HTML XML was designed to carry data, not to display data XML tags are not predefined. You must define your own tags XML is designed to be self-descriptive XML is a W3C Recommendation Lab Manual: CS-(Web Technology) Page 17
18 The Difference Between XML and HTML XML is not a replacement for HTML. XML and HTML were designed with different goals: XML was designed to transport and store data, with focus on what data is HTML was designed to display data, with focus on how data looks HTML is about displaying information, while XML is about carrying information. XML Does Not DO Anything Maybe it is a little hard to understand, but XML does not DO anything. XML was created to structure, store, and transport information. The following example is a note to Tove, from Jani, stored as XML: <note> <to>tove</to> <from>jani</from> <heading>reminder</heading> <body>don't forget me this weekend!</body> </note> The note above is quite self descriptive. It has sender and receiver information, it also has a heading and a message body. But still, this XML document does not DO anything. It is just information wrapped in tags. Someone must write a piece of software to send, receive or display it. With XML You Invent Your Own Tags The tags in the example above (like <to> and <from>) are not defined in any XML standard. These tags are "invented" by the author of the XML document. That is because the XML language has no predefined tags. The tags used in HTML are predefined. HTML documents can only use tags defined in the HTML standard (like <p>, <h1>, etc.). XML allows the author to define his/her own tags and his/her own document structure. Lab Manual: CS-(Web Technology) Page 18
19 XML is Not a Replacement for HTML XML is a complement to HTML. It is important to understand that XML is not a replacement for HTML. In most web applications, XML is used to transport data, while HTML is used to format and display the data. My best description of XML is this: XML is a software- and hardware-independent tool for carrying information. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations: The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value. Lab Manual: CS-(Web Technology) Page 19
20 Practice Exercise: S.No. Query statement 1 Develop and demonstrate basic HTML document that illustrate the use of HTML heading, paragraph. 2 Develop and demonstrate basic HTML document that illustrate the use of HTML ordered list. 3 Develop and demonstrate a HTML document that illustrates the use of HTML Tables. 4 Develop and demonstrate basic CSS document on the basis of following criteria: 1. Set body background color: white and link the external CSS document to html file. 2. Set table border to 2px solid and padding 0px. 3. Set table header border to 2px solid blue and padding 8px. 4. Set table data border to 1px solid blue and padding 8px. 5. Set ordered list font size to 80% and list style as lower-roman. 6. Set span properties as font size -100%, font style-italic, and background color olive. 5 Develop and demonstrate a XHTML document that illustrates the use external style sheet, ordered list, table, borders, padding, color, and the <span> tag. ACCEPTANCE CRITERIA For the acceptance of your program keep in mind following set of points that you have to cover while developing a program and record book:- Acceptance Points Web page design Correct implementation Report Book Remarks Web page must be designed in proper way by keeping in mind all the correct syntax of mark up language HTML,CSS, XHTML code must implemented correctly It consists of following sections: Problem Statement Lab Exercise 5. Observation after each practice exercise Lab Manual: CS-(Web Technology) Page 20
21 POST LAB ASSIGNMENT Create a XHTML web page for your personal profile which consist of your personal detail and academic detail. REFERENCES Bibliography: HTML and XML complete reference. Websites: FAQ S What is HTML? What is a tag? How to link External style sheet in html document? What is a difference between HTML and XHTML? What is document type declaration? Write tag syntax used for heading, paragraph and tables? Lab Manual: CS-(Web Technology) Page 21
22 LAB -3 PROBLEM STATEMENT Develop and demonstrate a XHTML file that includes JavaScript script for the following problems: a) Input: A number n obtained using prompt, Output: The first n Fibonacci numbers b) Input: A number n obtained using prompt, Output: A table of numbers from 1 to n and their squares using alert OBJECTIVES On completion of Lab 3 Student shall be able to: Develop XHTML file that include JavaScript. THEORY JavaScript is a Scripting Language A scripting language is a lightweight programming language. JavaScript is programming code that can be inserted into HTML pages. JavaScript inserted into HTML pages, can be executed by all modern web browsers. JavaScript is easy to learn. JavaScripts in HTML must be inserted between <script> and </script> tags. JavaScripts can be put in the <body> and in the <head> section of an HTML page. The <script> Tag To insert a JavaScript into an HTML page, use the <script> tag. The <script> and </script> tells where the JavaScript starts and ends. The lines between the <script> and </script> contain the JavaScript: <script> alert("my First JavaScript"); </script> Lab Manual: CS-(Web Technology) Page 22
23 JavaScript Functions and Events The JavaScript statements in the example above, are executed while the page loads. More often, we want to execute code when an event occurs, like when the user clicks a button. If we put JavaScript code inside a function, we can call that function when an event occurs. You will learn much more about JavaScript functions and events in later chapters. JavaScript in <head> or <body> You can place an unlimited number of scripts in an HTML document. Scripts can be in the <body> or in the <head> section of HTML, and/or in both. It is a common practice to put functions in the <head> section, or at the bottom of the page. This way they are all in one place and do not interfere with page content. A JavaScript Function in <head> In this example, a JavaScript function is placed in the <head> section of an HTML page. The function is called when a button is clicked: Example <!DOCTYPE html> <html> <head> <script> function myfunction() { document.getelementbyid("demo").innerhtml="my First JavaScript Function"; } </script> </head> <body> <h1>my Web Page</h1> <p id="demo">a Paragraph</p> <button type="button" onclick="myfunction()">try it</button> </body> </html> Lab Manual: CS-(Web Technology) Page 23
24 Practice Exercise: S.No Query statement 1 Write to the XHTML Document with Java Script. 2 Change XHTML document with Java Script. 3. Declare 3 a Declare the variable, assign a value to it, and display it. 4. Write a XHTML document with java script having conditional if.else. 5. Write a XHTML document with java script having pop up box. 1. Alert box 2. Confirm box 3. Prompt box 6 Write XHTML document with java script having for loop. 7 Write a XHTML document to Input: A number n obtained using prompt, Output: The first n Fibonacci numbers. 8 Write a XHTML to Input: A number n obtained using prompt, Output: A table of numbers from 1 to n and their squares using alert. ACCEPTANCE CRITERIA For the acceptance of your program keep in mind following set of points that you have to cover while developing a program and record book:- Acceptance Points Web page design Correct implementation Report Book Remarks Web page must be designed in proper way by keeping in mind all the correct syntax of mark up language HTML,CSS, XHTML code must implemented correctly It consists of following sections: Problem Statement Lab Exercise 5. Observation after each practice exercise Lab Manual: CS-(Web Technology) Page 24
25 POST LAB ASSIGNMENT Write an XHTML document with java script to perform menu driven arithmetic operation? REFERENCES Bibliography: HTML and XML complete reference. Websites: FAQ S What is Java Script and why we need this? Demonstrate java script document writing? Demonstrate java script looping? Demonstrate java script if..else? Demonstrate java script pop up box? Lab Manual: CS-(Web Technology) Page 25
26 LAB -4 PROBLEM STATEMENT To Develop and demonstrate a XHTML file that includes Java script that uses functions for the following problems: a) Parameter: A string, Output: The position in the string of the left-most vowel b) Parameter: A number, Output: The number with its digits in the reverse order OBJECTIVES On completion of Lab 4 student shall be able to: Design basic html and CSS document. Develop XHTML web page containing java script. THEORY JavaScript is a Scripting Language A scripting language is a lightweight programming language. JavaScript is programming code that can be inserted into HTML pages. JavaScript inserted into HTML pages, can be executed by all modern web browsers. JavaScript is easy to learn. JavaScripts in HTML must be inserted between <script> and </script> tags. JavaScripts can be put in the <body> and in the <head> section of an HTML page. The <script> Tag To insert a JavaScript into an HTML page, use the <script> tag. The <script> and </script> tells where the JavaScript starts and ends. The lines between the <script> and </script> contain the JavaScript: <script> alert("my First JavaScript"); </script> Lab Manual: CS-(Web Technology) Page 26
27 JavaScript Functions and Events The JavaScript statements in the example above, are executed while the page loads. More often, we want to execute code when an event occurs, like when the user clicks a button. If we put JavaScript code inside a function, we can call that function when an event occurs. You will learn much more about JavaScript functions and events in later chapters. JavaScript in <head> or <body> You can place an unlimited number of scripts in an HTML document. Scripts can be in the <body> or in the <head> section of HTML, and/or in both. It is a common practice to put functions in the <head> section, or at the bottom of the page. This way they are all in one place and do not interfere with page content. A JavaScript Function in <head> In this example, a JavaScript function is placed in the <head> section of an HTML page. The function is called when a button is clicked: Example <!DOCTYPE html> <html> <head> <script> function myfunction() { document.getelementbyid("demo").innerhtml="my First JavaScript Function"; } Lab Manual: CS-(Web Technology) Page 27
28 </script> </head> <body> <h1>my Web Page</h1> <p id="demo">a Paragraph</p> <button type="button" onclick="myfunction()">try it</button> </body> </html> Procedure :- Question 3a :- 1. Declare the script tag as text/javascript in the beginning of the <body> of html program 2. Get the string from the user using prompt() 3. Validate input string (should be only alphabets, a - z) using the regular expression /^*a-za-z++$/ and alert the user for invalid input using alert() 4. Convert the string to lowercase using tolowercase() 5.Use indexof(<vowel>) for each vowel to get the position of the vowel in the string. 6. Print the leftmost vowel i.e., print the lowest index got from indexof(). Question 3b :- 1. Declare the script tag as text/javascript in the beginning of the <body> of html program 2. Get the number to be reversed from the user using prompt() 3. Validate input number (should be a positive number between 0 to 9) using the regular expression /^[0-9++$/ and alert the user for invalid input using alert() 4. Reverse the number using modulus operation. 5. Use math.floor(number/10) to get the floor of number after division (used for reversing) 6. Display the reversed string using alert() Lab Manual: CS-(Web Technology) Page 28
29 Practice Exercise: S.No. Query statement 1 Parameter: A string, Output: The position in the string of the left-most vowel. 2 Parameter: A number, Output: The number with its digits in the reverse order ACCEPTANCE CRITERIA For the acceptance of your program keep in mind following set of points that you have to cover while developing a program and record book:- Acceptance Points Web page design Correct implementation Report Book Remarks Web page must be designed in proper way by keeping in mind all the correct syntax of mark up language HTML,CSS, XHTML code must implemented correctly It consists of following sections: Problem Statement Lab Exercise 5. Observation after each practice exercise POST LAB ASSIGNMENT Create a XHTML web page for your personal profile which consists of your personal detail and academic detail validate that web page using java script. REFERENCES Bibliography: HTML and XML complete reference. Websites: FAQ S What is Java Script and why we need this? Demonstrate java script document writing? Demonstrate java script looping? Demonstrate java script if..else? Demonstrate java script pop up box? Lab Manual: CS-(Web Technology) Page 29
30 LAB -5 PROBLEM STATEMENT Develop and demonstrate, using Javascript script, a XHTML document that collects the RollNo ( the valid format is: A digit from 1 to 4 followed by two upper-case characters followed by two digits followed by two upper-case characters followed by three digits; no embedded spaces allowed- e.g. 1AB23CD356, 1GC13CS345) of the user. Event handler must be included for the form element that collects this information to validate the input. Messages in the alert windows must be produced when errors are detected. OBJECTIVES On completion of Lab 5 student shall be able to: Design basic html and CSS document. Develop XHTML web page containing java script. THEORY JavaScript is a Scripting Language A scripting language is a lightweight programming language. JavaScript is programming code that can be inserted into HTML pages. JavaScript inserted into HTML pages, can be executed by all modern web browsers. JavaScript is easy to learn. JavaScripts in HTML must be inserted between <script> and </script> tags. JavaScripts can be put in the <body> and in the <head> section of an HTML page. The <script> Tag To insert a JavaScript into an HTML page, use the <script> tag. The <script> and </script> tells where the JavaScript starts and ends. The lines between the <script> and </script> contain the JavaScript: <script> alert("my First JavaScript"); </script> Lab Manual: CS-(Web Technology) Page 30
31 JavaScript Functions and Events The JavaScript statements in the example above, are executed while the page loads. More often, we want to execute code when an event occurs, like when the user clicks a button. If we put JavaScript code inside a function, we can call that function when an event occurs. You will learn much more about JavaScript functions and events in later chapters. JavaScript in <head> or <body> You can place an unlimited number of scripts in an HTML document. Scripts can be in the <body> or in the <head> section of HTML, and/or in both. It is a common practice to put functions in the <head> section, or at the bottom of the page. This way they are all in one place and do not interfere with page content. A JavaScript Function in <head> In this example, a JavaScript function is placed in the <head> section of an HTML page. The function is called when a button is clicked: Example <!DOCTYPE html> <html> <head> <script> function myfunction() { document.getelementbyid("demo").innerhtml="my First JavaScript Function"; } </script> </head> <body> <h1>my Web Page</h1> <p id="demo">a Paragraph</p> Lab Manual: CS-(Web Technology) Page 31
32 <button type="button" onclick="myfunction()">try it</button> </body> </html> Procedure :- Question 3a :- 1. Declare the script tag as text/javascript in the beginning of the <body> of html program 2. Get the USN from the user using prompt() 3. Validate USN input by the user using the regular expression : /[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/ 4. If the USN format is correct, alert the user with a message, else alert the user with the format DAADDAADDD (for eg: 1PE09CS001) Practice Exercise: S.No. Query statement 1 Develop and demonstrate, using Javascript script, a XHTML document that collects the USN ( the valid format is: A digit from 1 to 4 followed by two upper-case characters followed by two digits followed by two upper-case characters followed by three digits; no embedded spaces allowed) of the user. Event handler must be included for the form element that collects this information to validate the input. Messages in the alert windows must be produced when errors are detected. ACCEPTANCE CRITERIA For the acceptance of your program keep in mind following set of points that you have to cover while developing a program and record book:- Acceptance Points Web page design Correct implementation Report Book Remarks Web page must be designed in proper way by keeping in mind all the correct syntax of mark up language HTML,CSS, XHTML code must implemented correctly It consists of following sections: Problem Statement Lab Exercise 5. Observation after each practice exercise Lab Manual: CS-(Web Technology) Page 32
33 POST LAB ASSIGNMENT Create a XHTML web page for your personal profile which consists of your personal detail and academic detail validate that web page using java script. REFERENCES Bibliography: HTML and XML complete reference. Websites: FAQ S What is Java Script and why we need this? Demonstrate java script document writing? What are the various datatypes in javascript? Demonstrate java script if..else? Lab Manual: CS-(Web Technology) Page 33
34 LAB -6 PROBLEM STATEMENT Modify the above program to get the current semester also (restricted to be a number from 1 to 8) OBJECTIVES On completion of Lab 6 student shall be able to: Design basic html and CSS document. Develop XHTML web page containing java script. THEORY JavaScript is a Scripting Language A scripting language is a lightweight programming language. JavaScript is programming code that can be inserted into HTML pages. JavaScript inserted into HTML pages, can be executed by all modern web browsers. JavaScript is easy to learn. JavaScripts in HTML must be inserted between <script> and </script> tags. JavaScripts can be put in the <body> and in the <head> section of an HTML page. The <script> Tag To insert a JavaScript into an HTML page, use the <script> tag. The <script> and </script> tells where the JavaScript starts and ends. The lines between the <script> and </script> contain the JavaScript: <script> alert("my First JavaScript"); </script> JavaScript Functions and Events The JavaScript statements in the example above, are executed while the page loads. More often, we want to execute code when an event occurs, like when the user clicks a button. If we put JavaScript code inside a function, we can call that function when an event occurs. You will learn much more about JavaScript functions and events in later chapters. Lab Manual: CS-(Web Technology) Page 34
35 JavaScript in <head> or <body> You can place an unlimited number of scripts in an HTML document. Scripts can be in the <body> or in the <head> section of HTML, and/or in both. It is a common practice to put functions in the <head> section, or at the bottom of the page. This way they are all in one place and do not interfere with page content. A JavaScript Function in <head> In this example, a JavaScript function is placed in the <head> section of an HTML page. The function is called when a button is clicked: Example <!DOCTYPE html> <html> <head> <script> function myfunction() { document.getelementbyid("demo").innerhtml="my First JavaScript Function"; } </script> </head> <body> <h1>my Web Page</h1> <p id="demo">a Paragraph</p> <button type="button" onclick="myfunction()">try it</button> </body> </html> Lab Manual: CS-(Web Technology) Page 35
36 Procedure: Question :- 1. Declare the script tag as text/javascript in the beginning of the <body> of html program 2. Get the USN and Semester from the user using prompt() 3. Validate USN input by the user using the regular expression : /[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/ 4. If the USN format is correct, alert the user with a message, else alert the user with the format DAADDAADDD (for eg: 1PE09CS001) 5. Validate Semester by the user using the regular expression : /[1-8]$/ 6. If the Semester is correct, alert the user with a message, else alert the user with the valid semester number (1 8). Practice Exercise: S.No. Query statement 1 If the Semester is correct, alert the user with a message, else alert the user with the valid semester number (1 8). ACCEPTANCE CRITERIA For the acceptance of your program keep in mind following set of points that you have to cover while developing a program and record book:- Acceptance Points Web page design Correct implementation Report Book Remarks Web page must be designed in proper way by keeping in mind all the correct syntax of mark up language HTML,CSS, XHTML code must implemented correctly It consists of following sections: Problem Statement Lab Exercise 5. Observation after each practice exercise Lab Manual: CS-(Web Technology) Page 36
37 POST LAB ASSIGNMENT Create a XHTML web page for your personal profile which consists of your personal detail and academic detail validate that web page using java script. REFERENCES Bibliography: HTML and XML complete reference. Websites: FAQ S What is Java Script and why we need this? Demonstrate java script document writing? Demonstrate java script looping? Demonstrate java script if..else? Demonstrate java script pop up box? Lab Manual: CS-(Web Technology) Page 37
38 LAB -7 PROBLEM STATEMENT To Develop and demonstrate, using JavaScript script, a XHTML document that contains three short paragraphs of text, stacked on top of each other, with only enough of each showing so that the mouse cursor can be placed over some part of them. When the cursor is placed over the exposed part of any paragraph, it should rise to the top to become completely visible. OBJECTIVES On completion of Lab 7 student shall be able to: Design basic html and CSS document. Develop XHTML web page containing java script and event handling. THEORY JavaScript is a Scripting Language A scripting language is a lightweight programming language. JavaScript is programming code that can be inserted into HTML pages. JavaScript inserted into HTML pages, can be executed by all modern web browsers. JavaScript is easy to learn. JavaScripts in HTML must be inserted between <script> and </script> tags. JavaScripts can be put in the <body> and in the <head> section of an HTML page. The <script> Tag To insert a JavaScript into an HTML page, use the <script> tag. The <script> and </script> tells where the JavaScript starts and ends. The lines between the <script> and </script> contain the JavaScript: <script> alert("my First JavaScript"); </script> JavaScript Functions and Events The JavaScript statements in the example above, are executed while the page loads. More often, we want to execute code when an event occurs, like when the user clicks a button. If we put JavaScript code inside a function, we can call that function when an event occurs. You will learn much more about JavaScript functions and events in later chapters. Lab Manual: CS-(Web Technology) Page 38
39 JavaScript in <head> or <body> You can place an unlimited number of scripts in an HTML document. Scripts can be in the <body> or in the <head> section of HTML, and/or in both. It is a common practice to put functions in the <head> section, or at the bottom of the page. This way they are all in one place and do not interfere with page content. A JavaScript Function in <head> In this example, a JavaScript function is placed in the <head> section of an HTML page. The function is called when a button is clicked: Practice Exercise: S.No. Query statement 1 To Develop and demonstrate, using JavaScript script, a XHTML document that contains three short paragraphs of text, stacked on top of each other, with only enough of each showing so that the mouse cursor can be placed over some part of them. When the cursor is placed over the exposed part of any paragraph, it should rise to the top to become completely visible. ACCEPTANCE CRITERIA For the acceptance of your program keep in mind following set of points that you have to cover while developing a program and record book:- Acceptance Points Web page design Correct implementation Report Book Remarks Web page must be designed in proper way by keeping in mind all the correct syntax of mark up language HTML,CSS, XHTML code must implemented correctly It consists of following sections: Problem Statement Lab Exercise 5. Observation after each practice exercise Lab Manual: CS-(Web Technology) Page 39
40 POST LAB ASSIGNMENT Create a XHTML web page for your personal profile which consists of your personal detail and academic detail validate that web page using java script having regular expression and event handlers. REFERENCES Bibliography: HTML and XML complete reference. Websites: FAQ S What is Java Script and why we need this? Demonstrate java script document writing? Demonstrate java script looping? Demonstrate java script if..else? Lab Manual: CS-(Web Technology) Page 40
41 LAB -8 PROBLEM STATEMENT To Modify the above document so that when a paragraph is moved from the top stacking position, it returns to its original position rather than to the bottom OBJECTIVES On completion of Lab 8 student shall be able to: Design basic html and CSS document. Develop XHTML web page containing java script with event handler. THEORY Reacting to Events A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element. To execute code when a user clicks on an element, add JavaScript code to an HTML event attribute: onclick=javascript Examples of HTML events: When a user clicks the mouse When a web page has loaded When an image has been loaded When the mouse moves over an element When an input field is changed When an HTML form is submitted When a user strokes a key In this example, the content of the <h1> element is changed when a user clicks on it: <!DOCTYPE html> <html> <body> <h1 onclick="this.innerhtml='ooops!'">click on this text!</h1> </body> </html> Lab Manual: CS-(Web Technology) Page 41
42 In this example, a function is called from the event handler: Example <!DOCTYPE html> <html> <head> <script> function changetext(id) { id.innerhtml="ooops!"; } </script> </head> <body> <h1 onclick="changetext(this)">click on this text!</h1> </body> </html> JavaScript Form Validation JavaScript can be used to validate data in HTML forms before sending off the content to a server. Form data that typically are checked by a JavaScript could be: has the user left required fields empty? has the user entered a valid address? has the user entered a valid date? has the user entered text in a numeric field? Required Fields The function below checks if a field has been left empty. If the field is blank, an alert box alerts a message, the function returns false, and the form will not be submitted: function validateform() { var x=document.forms["myform"]["fname"].value; if (x==null x=="") { alert("first name must be filled out"); Lab Manual: CS-(Web Technology) Page 42
43 return false; } } The function above could be called when a form is submitted: Example <form name="myform" action="demo_form.asp" onsubmit="return validateform()" method="post"> First name: <input type="text" name="fname"> <input type="submit" value="submit"> </form> Validation The function below checks if the content has the general syntax of an . This means that the input data must contain sign and at least one dot (.). Also, must not be the first character of the address, and the last dot must be present after sign, and minimum 2 characters before the end: function validateform() { var x=document.forms["myform"][" "].value; var atpos=x.indexof("@"); var dotpos=x.lastindexof("."); if (atpos<1 dotpos<atpos+2 dotpos+2>=x.length) { alert("not a valid address"); return false; } } The function above could be called when a form is submitted: Example Lab Manual: CS-(Web Technology) Page 43
44 <form name="myform" action="demo_form.asp" onsubmit="return validateform();" method="post"> <input type="text" name=" "> <input type="submit" value="submit"> </form> Procedure: Question :- 1. Declare the script tag as text/javascript in the beginning of the <body> of html program 2. Declare function totop() 3. Prepare the CSS Document having style sheet for paragraph. 4. Declare different paragraph id. Practice Exercise: S.No. Query statement 1 Modify the above document so that when a paragraph is moved from the top stacking position, it returns to its original position rather than to the bottom ACCEPTANCE CRITERIA For the acceptance of your program keep in mind following set of points that you have to cover while developing a program and record book:- Acceptance Points Web page design Correct implementation Report Book Remarks Web page must be designed in proper way by keeping in mind all the correct syntax of mark up language HTML,CSS, XHTML code must implemented correctly It consists of following sections: Problem Statement Lab Exercise 5. Observation after each practice exercise POST LAB ASSIGNMENT Create a XHTML web page for your personal profile which consists of your personal detail and academic detail validate that web page using java script. Lab Manual: CS-(Web Technology) Page 44
45 REFERENCES Bibliography: HTML and XML complete reference. Websites: FAQ S What is Java Script and why we need this? Demonstrate java script document writing? Demonstrate java script looping? Demonstrate java script if..else? Demonstrate java script pop up box? Explain java script functions of validation Lab Manual: CS-(Web Technology) Page 45
46 LAB -9 PROBLEM STATEMENT To Design an XML document to store information about a student in an engineering college affiliated to CSVTU. The information must include RollNo, Name, Name of the College, Branch, Year of Joining, and id. Make up sample data for 5 students. Create a CSS style sheet and use it to display the document. OBJECTIVES On completion of Lab 9 student shall be able to: Design basic html and CSS document. Develop XHTML web page containing XML java script with event handler. THEORY Introduction to XML XML was designed to transport and store data. HTML was designed to display data. What You Should Already Know Before you continue you should have a basic understanding of the following: HTML JavaScript What is XML? XML stands for EXtensible Markup Language XML is a markup language much like HTML XML was designed to carry data, not to display data XML tags are not predefined. You must define your own tags XML is designed to be self-descriptive XML is a W3C Recommendation Lab Manual: CS-(Web Technology) Page 46
47 XML is not a replacement for HTML. XML and HTML were designed with different goals: The Difference Between XML and HTML XML was designed to transport and store data, with focus on what data is HTML was designed to display data, with focus on how data looks HTML is about displaying information, while XML is about carrying information. XML Does Not DO Anything Maybe it is a little hard to understand, but XML does not DO anything. XML was created to structure, store, and transport information. The following example is a note to Tove, from Jani, stored as XML: <note> <to>tove</to> <from>jani</from> <heading>reminder</heading> <body>don't forget me this weekend!</body> </note> The note above is quite self descriptive. It has sender and receiver information, it also has a heading and a message body. But still, this XML document does not DO anything. It is just information wrapped in tags. Someone must write a piece of software to send, receive or display it. With XML You Invent Your Own Tags The tags in the example above (like <to> and <from>) are not defined in any XML standard. These tags are "invented" by the author of the XML document. That is because the XML language has no predefined tags. The tags used in HTML are predefined. HTML documents can only use tags defined in the HTML standard (like <p>, <h1>, etc.). XML allows the author to define his/her own tags and his/her own document structure. Lab Manual: CS-(Web Technology) Page 47
Short notes on webpage programming languages
Short notes on webpage programming languages What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of
More informationHTML5 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 information10CS73: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 informationSUBJECT CODE : 4074 PERIODS/WEEK : 4 PERIODS/ SEMESTER : 72 CREDIT : 4 TIME SCHEDULE UNIT TOPIC PERIODS 1. INTERNET FUNDAMENTALS & HTML Test 1
SUBJECT TITLE : WEB TECHNOLOGY SUBJECT CODE : 4074 PERIODS/WEEK : 4 PERIODS/ SEMESTER : 72 CREDIT : 4 TIME SCHEDULE UNIT TOPIC PERIODS 1. INTERNET FUNDAMENTALS & HTML Test 1 16 02 2. CSS & JAVASCRIPT Test
More informationCS412 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 informationWeb 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 informationWeb 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 informationChapter 2 HTML Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D
Chapter 2 HTML Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 First Web Page an opening tag... page info goes here a closing tag Head & Body Sections Head Section
More informationJavaScript: Introduction to Scripting. 2008 Pearson Education, Inc. All rights reserved.
1 6 JavaScript: Introduction to Scripting 2 Comment is free, but facts are sacred. C. P. Scott The creditor hath a better memory than the debtor. James Howell When faced with a decision, I always ask,
More informationHTML Basics(w3schools.com, 2013)
HTML Basics(w3schools.com, 2013) What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language. HTML is a markup language A markup language is a set of markup tags.
More informationIntroduction to XHTML. 2010, Robert K. Moniot 1
Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document
More informationICT 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 informationTIME 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«W3Schools Home Next Chapter» JavaScript is THE scripting language of the Web.
JS Basic JS HOME JS Introduction JS How To JS Where To JS Statements JS Comments JS Variables JS Operators JS Comparisons JS If...Else JS Switch JS Popup Boxes JS Functions JS For Loop JS While Loop JS
More informationDreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,
More informationJavaScript and Dreamweaver Examples
JavaScript and Dreamweaver Examples CSC 103 October 15, 2007 Overview The World is Flat discussion JavaScript Examples Using Dreamweaver HTML in Dreamweaver JavaScript Homework 3 (due Friday) 1 JavaScript
More informationHTML, CSS, XML, and XSL
APPENDIX C HTML, CSS, XML, and XSL T his appendix is a very brief introduction to two markup languages and their style counterparts. The appendix is intended to give a high-level introduction to these
More informationUsing 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 informationBasic Website Maintenance Tutorial*
Basic Website Maintenance Tutorial* Introduction You finally have your business online! This tutorial will teach you the basics you need to know to keep your site updated and working properly. It is important
More informationSo we're set? Have your text-editor ready. Be sure you use NotePad, NOT Word or even WordPad. Great, let's get going.
Web Design 1A First Website Intro to Basic HTML So we're set? Have your text-editor ready. Be sure you use NotePad, NOT Word or even WordPad. Great, let's get going. Ok, let's just go through the steps
More informationCIS 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 informationWeb Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence
Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.
More informationIntroduction to Web Design Curriculum Sample
Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic
More informationc. 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 informationWeb Publishing Basics 2
Web Publishing Basics 2 HTML and CSS Coding Jeff Pankin pankin@mit.edu Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What
More informationUsing an external style sheet with Dreamweaver (CS6)
Using an external style sheet with Dreamweaver (CS6) nigelbuckner.com 2012 This handout explains how to create an external style sheet, the purpose of selector types and how to create styles. It does not
More informationExample. Represent this as XML
Example INF 221 program class INF 133 quiz Assignment Represent this as XML JSON There is not an absolutely correct answer to how to interpret this tree in the respective languages. There are multiple
More informationJavaScript 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 informationAJAX The Future of Web Development?
AJAX The Future of Web Development? Anders Moberg (dit02amg), David Mörtsell (dit01dml) and David Södermark (dv02sdd). Assignment 2 in New Media D, Department of Computing Science, Umeå University. 2006-04-28
More informationWeb 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 informationHow 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 informationJavaScript Basics & HTML DOM. Sang Shin Java Technology Architect Sun Microsystems, Inc. sang.shin@sun.com www.javapassion.com
JavaScript Basics & HTML DOM Sang Shin Java Technology Architect Sun Microsystems, Inc. sang.shin@sun.com www.javapassion.com 2 Disclaimer & Acknowledgments Even though Sang Shin is a full-time employee
More informationFurther web design: HTML forms
Further web design: HTML forms Practical workbook Aims and Learning Objectives The aim of this document is to introduce HTML forms. By the end of this course you will be able to: use existing forms on
More informationYandex.Widgets Quick start
17.09.2013 .. Version 2 Document build date: 17.09.2013. This volume is a part of Yandex technical documentation. Yandex helpdesk site: http://help.yandex.ru 2008 2013 Yandex LLC. All rights reserved.
More informationJavaScript Introduction
JavaScript Introduction JavaScript is the world's most popular programming language. It is the language for HTML, for the web, for servers, PCs, laptops, tablets, phones, and more. JavaScript is a Scripting
More informationWeb Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.
Web Building Blocks Core Concepts for HTML & CSS Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.edu @joegilbert Why Learn the Building Blocks? The idea
More informationTechnical University of Sofia Faculty of Computer Systems and Control. Web Programming. Lecture 4 JavaScript
Technical University of Sofia Faculty of Computer Systems and Control Web Programming Lecture 4 JavaScript JavaScript basics JavaScript is scripting language for Web. JavaScript is used in billions of
More informationNovell Identity Manager
AUTHORIZED DOCUMENTATION Manual Task Service Driver Implementation Guide Novell Identity Manager 4.0.1 April 15, 2011 www.novell.com Legal Notices Novell, Inc. makes no representations or warranties with
More informationWebsite 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 informationMadison Area Technical College. MATC Web Style Guide
Madison Area Technical College MATC Web Style Guide July 27, 2005 Table of Contents Topic Page Introduction/Purpose 3 Overview 4 Requests for Adding Content to the Web Server 3 The MATC Public Web Template
More informationScript 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 informationInternet Technologies
QAFQAZ UNIVERSITY Computer Engineering Department Internet Technologies HTML Forms Dr. Abzetdin ADAMOV Chair of Computer Engineering Department aadamov@qu.edu.az http://ce.qu.edu.az/~aadamov What are forms?
More informationJISIS and Web Technologies
27 November 2012 Status: Draft Author: Jean-Claude Dauphin JISIS and Web Technologies I. Introduction This document does aspire to explain how J-ISIS is related to Web technologies and how to use J-ISIS
More informationYour First Web Page. It all starts with an idea. Create an Azure Web App
Your First Web Page It all starts with an idea Every web page begins with an idea to communicate with an audience. For now, you will start with just a text file that will tell people a little about you,
More informationWEB DEVELOPMENT IA & IB (893 & 894)
DESCRIPTION Web Development is a course designed to guide students in a project-based environment in the development of up-to-date concepts and skills that are used in the development of today s websites.
More informationWebsite 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 informationWeb Design with Dreamweaver Lesson 4 Handout
Web Design with Dreamweaver Lesson 4 Handout What we learned Create hyperlinks to external websites Links can be made to open in a new browser window Email links can be inserted onto webpages. When the
More informationChapter 1 Programming Languages for Web Applications
Chapter 1 Programming Languages for Web Applications Introduction Web-related programming tasks include HTML page authoring, CGI programming, generating and parsing HTML/XHTML and XML (extensible Markup
More informationCreating a Resume Webpage with
Creating a Resume Webpage with 6 Cascading Style Sheet Code In this chapter, we will learn the following to World Class CAD standards: Using a Storyboard to Create a Resume Webpage Starting a HTML Resume
More informationCourse 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 informationWEB PROGRAMMING LAB (Common to CSE & IT)
138 WEB PROGRAMMING LAB (Common to CSE & IT) Course Code :13CT1121 L T P C 0 0 3 2 Course Educational Objectives: The main objective of the lab course is to expose the students to different programming
More informationWeb Programming Step by Step
Web Programming Step by Step Lecture 13 Introduction to JavaScript Reading: 7.1-7.4 Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller. Client-side
More informationBasic tutorial for Dreamweaver CS5
Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to
More informationBasics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design Contents HTML Quiz Design CSS basics CSS examples CV update What, why, who? Before you start to create a site, it s
More informationWEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012)
WEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012) BY MISS. SAVITHA R LECTURER INFORMATION SCIENCE DEPTATMENT GOVERNMENT POLYTECHNIC GULBARGA FOR ANY FEEDBACK CONTACT TO EMAIL:
More informationA send-a-friend application with ASP Smart Mailer
A send-a-friend application with ASP Smart Mailer Every site likes more visitors. One of the ways that big sites do this is using a simple form that allows people to send their friends a quick email about
More informationHTML Tables. IT 3203 Introduction to Web Development
IT 3203 Introduction to Web Development Tables and Forms September 3 HTML Tables Tables are your friend: Data in rows and columns Positioning of information (But you should use style sheets for this) Slicing
More informationXtreeme Search Engine Studio Help. 2007 Xtreeme
Xtreeme Search Engine Studio Help 2007 Xtreeme I Search Engine Studio Help Table of Contents Part I Introduction 2 Part II Requirements 4 Part III Features 7 Part IV Quick Start Tutorials 9 1 Steps to
More informationAdvanced Tornado TWENTYONE. 21.1 Advanced Tornado. 21.2 Accessing MySQL from Python LAB
21.1 Advanced Tornado Advanced Tornado One of the main reasons we might want to use a web framework like Tornado is that they hide a lot of the boilerplate stuff that we don t really care about, like escaping
More informationWIRIS quizzes web services Getting started with PHP and Java
WIRIS quizzes web services Getting started with PHP and Java Document Release: 1.3 2011 march, Maths for More www.wiris.com Summary This document provides client examples for PHP and Java. Contents WIRIS
More informationHow to Create Dynamic HTML and Javascript using your Data Jennifer Sinodis, Bank One, Phoenix, AZ
Paper 187-26 How to Create Dynamic HTML and Javascript using your Data Jennifer Sinodis, Bank One, Phoenix, AZ ABSTRACT With increasing information technology the Internet/Intranet offers an accessible
More informationITNP43: HTML Lecture 4
ITNP43: HTML Lecture 4 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and content of a document Style
More informationAdvanced Web Development SCOPE OF WEB DEVELOPMENT INDUSTRY
Advanced Web Development Duration: 6 Months SCOPE OF WEB DEVELOPMENT INDUSTRY Web development jobs have taken thе hot seat when it comes to career opportunities and positions as a Web developer, as every
More informationThis matches a date in the MM/DD/YYYY format in the years 2011 2019. The date must include leading zeros.
Validating the date format There are plans to adapt the jquery UI Datepicker widget for use in a jquery Mobile site. At the time of this writing, the widget was still highly experimental. When a stable
More informationFast track to HTML & CSS 101 (Web Design)
Fast track to HTML & CSS 101 (Web Design) Level: Introduction Duration: 5 Days Time: 9:30 AM - 4:30 PM Cost: 997.00 Overview Fast Track your HTML and CSS Skills HTML and CSS are the very fundamentals of
More informationCSCI110: Examination information.
CSCI110: Examination information. The exam for CSCI110 will consist of short answer questions. Most of them will require a couple of sentences of explanation of a concept covered in lectures or practical
More informationWeb Hosting Prep Lab Homework #2 This week: Setup free web hosting for your project Pick domain name and check whether it is available Lots of free
Web Hosting Prep, Lab Homework #2 Project Requirements Gathering, Design Prototyping Web Application Frameworks JavaScript Introduction / Overview Lab Homework #3 CS 183 10/13/2013 Web Hosting Prep Lab
More informationReal SQL Programming 1
Real 1 We have seen only how SQL is used at the generic query interface an environment where we sit at a terminal and ask queries of a database. Reality is almost always different: conventional programs
More informationFETAC Certificate in Multimedia Production. IBaT College Swords. FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3
IBaT College Swords FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3 Lecturer: Cara Martin M.Sc. Lecturer contact details: cmartin@ibat.ie IBaT 2009 Page 1 Cascading Style Sheets
More informationThe Web Web page Links 16-3
Chapter Goals Compare and contrast the Internet and the World Wide Web Describe general Web processing Write basic HTML documents Describe several specific HTML tags and their purposes 16-1 Chapter Goals
More informationAbusing HTML5. DEF CON 19 Ming Chow Lecturer, Department of Computer Science TuCs University Medford, MA 02155 mchow@cs.tucs.edu
Abusing HTML5 DEF CON 19 Ming Chow Lecturer, Department of Computer Science TuCs University Medford, MA 02155 mchow@cs.tucs.edu What is HTML5? The next major revision of HTML. To replace XHTML? Yes Close
More informationHow to Make a Working Contact Form for your Website in Dreamweaver CS3
How to Make a Working Contact Form for your Website in Dreamweaver CS3 Killer Contact Forms Dreamweaver Spot With this E-Book you will be armed with everything you need to get a Contact Form up and running
More informationInserting 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 informationXHTML Forms. Form syntax. Selection widgets. Submission method. Submission action. Radio buttons
XHTML Forms Web forms, much like the analogous paper forms, allow the user to provide input. This input is typically sent to a server for processing. Forms can be used to submit data (e.g., placing an
More informationPHP Tutorial From beginner to master
PHP Tutorial From beginner to master PHP is a powerful tool for making dynamic and interactive Web pages. PHP is the widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.
More informationCSC309 Winter 2016 Lecture 3. Larry Zhang
CSC309 Winter 2016 Lecture 3 Larry Zhang 1 Why Javascript Javascript is for dynamically manipulate the front-end of your web page. Add/remove/change the content/attributes of an HTML element Change the
More informationCOURSE SYLLABUS EDG 6931: Designing Integrated Media Environments 2 Educational Technology Program University of Florida
COURSE SYLLABUS EDG 6931: Designing Integrated Media Environments 2 Educational Technology Program University of Florida CREDIT HOURS 3 credits hours PREREQUISITE Completion of EME 6208 with a passing
More informationCREATING 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 informationExtensible Markup Language (XML): Essentials for Climatologists
Extensible Markup Language (XML): Essentials for Climatologists Alexander V. Besprozvannykh CCl OPAG 1 Implementation/Coordination Team The purpose of this material is to give basic knowledge about XML
More informationGovernment Girls Polytechnic, Bilaspur
Government Girls Polytechnic, Bilaspur Name of the Lab: Internet & Web Technology Lab Title of the Practical : Dynamic Web Page Design Lab Class: CSE 6 th Semester Teachers Assessment:20 End Semester Examination:50
More informationWorking 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 informationWeb 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 information4 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 informationLesson Review Answers
Lesson Review Answers-1 Lesson Review Answers Lesson 1 Review 1. User-friendly Web page interfaces, such as a pleasing layout and easy navigation, are considered what type of issues? Front-end issues.
More informationEUROPEAN 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 informationWe automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.
Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded
More informationebooks: Exporting EPUB files from Adobe InDesign
White Paper ebooks: Exporting EPUB files from Adobe InDesign Table of contents 1 Preparing a publication for export 4 Exporting an EPUB file The electronic publication (EPUB) format is an ebook file format
More informationJavaScript: Arrays. 2008 Pearson Education, Inc. All rights reserved.
1 10 JavaScript: Arrays 2 With sobs and tears he sorted out Those of the largest size... Lewis Carroll Attempt the end, and never stand to doubt; Nothing s so hard, but search will find it out. Robert
More informationHTML Forms and CONTROLS
HTML Forms and CONTROLS Web forms also called Fill-out Forms, let a user return information to a web server for some action. The processing of incoming data is handled by a script or program written in
More informationINTERNET PROGRAMMING AND DEVELOPMENT AEC LEA.BN Course Descriptions & Outcome Competency
INTERNET PROGRAMMING AND DEVELOPMENT AEC LEA.BN Course Descriptions & Outcome Competency 1. 420-PA3-AB Introduction to Computers, the Internet, and the Web This course is an introduction to the computer,
More informationDreamweaver. Introduction to Editing Web Pages
Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel
More informationCreative 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 informationAn Attribute is a special word used inside tag to specify additional information to tag such as color, alignment etc.
CHAPTER 10 HTML-I BASIC HTML ELEMENTS HTML (Hyper Text Markup Language) is a document-layout and hyperlink-specification language i.e., a language used to design the layout of a document and to specify
More information<script type="text/javascript"> var _gaq = _gaq []; _gaq.push(['_setaccount', 'UA 2418840 25']); _gaq.push(['_trackpageview']);
More information
IE Class Web Design Curriculum
Course Outline Web Technologies 130.279 IE Class Web Design Curriculum Unit 1: Foundations s The Foundation lessons will provide students with a general understanding of computers, how the internet works,
More informationBASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D
BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D 1 LEARNING OUTCOMES Describe the anatomy of a web page Format the body of a web page with block-level elements
More informationAbout XML in InDesign
1 Adobe InDesign 2.0 Extensible Markup Language (XML) is a text file format that lets you reuse content text, table data, and graphics in a variety of applications and media. One advantage of using XML
More informationWeb Design Revision. AQA AS-Level Computing COMP2. 39 minutes. 39 marks. Page 1 of 17
Web Design Revision AQA AS-Level Computing COMP2 204 39 minutes 39 marks Page of 7 Q. (a) (i) What does HTML stand for?... () (ii) What does CSS stand for?... () (b) Figure shows a web page that has been
More informationIT3503 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 informationStep by step guides. Deploying your first web app to your FREE Azure Subscription with Visual Studio 2015
Step by step guides Deploying your first web app to your FREE Azure Subscription with Visual Studio 2015 Websites are a mainstay of online activities whether you want a personal site for yourself or a
More information