ISC440: Web Programming 2 Web Programming Revision Dr. Abdullah Almutairi Spring 2016 © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
How does the WWW work? Web information is stored in documents called Web pages. Web pages are files stored on computers called Web servers. Computers reading the Web pages are called Web clients.
How does the browser fetch the pages? A browser fetches a Web page from a server by a request. A request is a standard HTTP request containing a page address. A page address looks like this: http://www.someone.com/home.htm.
How does the browser display the pages? All Web pages contain instructions for display The browser displays the page by reading these instructions. The most common display instructions are called HTML tags. HTML tags look like this <p>This is a Paragraph</p>.
Who is making the Web standards? The Web standards are not made up by Firefox or Chrome or Microsoft. The rule-making body of the Web is the W3C. W3C stands for the World Wide Web Consortium. W3C puts together specifications for Web standards. The most essential Web standards are HTML, CSS and XML. The latest HTML standard is HTML 5.
What is an HTML File? HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor A HTML file is also called HTML document.
What is HTML Tag? HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets 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 text between the start and end tags is the element content HTML tags are not case sensitive, <b> means the same as <B>
A Simple Example <!DOCTYPE html> <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>
Example Explained The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document. <!DOCTYPE html> tells your browser that the document is an html5 document. The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window. The text between the <title> tags is the title of your document. The title is displayed in your browser's caption. The text between the <body> tags is the text that will be displayed in your browser. The text between the <b> and </b> tags will be displayed in a bold font.
HTML Attributes <body bgcolor="red"> This is my first homepage. </body> <body bgcolor=‘red’> This is my first homepage. </body> Name of the attribute : bgcolor; Value of the attribute : red. Both double style quotes and single style quotes are allowed.
HTML Forms
HTML Forms HTML provides the ability for collecting information or data from users using web forms. Forms have many different uses like: Sending e-mail creating user accounts providing feedback issuing search queries forms are used to pass and/or retrieve data to/from a server.
How does a web form work? User visits a web page that contains a form. <html > <body> <h1>Feedback Form</h1> <p>Please fill out this form to help us improve our site.</p> <form method = "post" action = "/cgi-bin/formmail"> <p> <input type = "hidden" name = "recipient" value = "deitel@deitel.com" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> </p> <p><label>Name: <input name = "name" type = "text" size = "25" /> </label></p> How does a web form work? User visits a web page that contains a form. Web page containing form
How does a web form work? User fills and submits the form. <html > <body> <h1>Feedback Form</h1> <p>Please fill out this form to help us improve our site.</p> <form method = "post" action = "/cgi-bin/formmail"> <p> <input type = "hidden" name = "recipient" value = "deitel@deitel.com" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> </p> <p><label>Name: <input name = "name" type = "text" size = "25" /> </label></p> How does a web form work? User fills and submits the form. The form contains the address of the web server. When the user clicks the submit button the form will automatically be transmitted to the server. Filled form submitted to web server
<html > <body> <h1>Feedback Form</h1> <p>Please fill out this form to help us improve our site.</p> <form method = "post" action = "/cgi-bin/formmail"> <p> <input type = "hidden" name = "recipient" value = "deitel@deitel.com" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> </p> <p><label>Name: <input name = "name" type = "text" size = "25" /> </label></p> How does a web form work? Web server processes the data on the form using a form processor script, and returns the response back to the user. Response page Script file
HTML Forms A form begins with the <form> element <body> <h1>Feedback Form</h1> <p>Please fill out this form to help us improve our site.</p> <form method = "post" action = "/cgi-bin/formmail"> <p> <input type = "hidden" name = "recipient" value = "deitel@deitel.com" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> </p> <p><label>Name: <input name = "name" type = "text" size = "25" /> </label></p> HTML Forms A form begins with the <form> element Attribute method specifies how the form’s data is sent to the web server. (either “post” or “get”). The action attribute of the form element specifies the URL of a script on the Web server to which the form data will be sent. <form method = "post" action = “script_file"> input elements </form>
HTML Forms – input element <body> <h1>Feedback Form</h1> <p>Please fill out this form to help us improve our site.</p> <form method = "post" action = "/cgi-bin/formmail"> <p> <input type = "hidden" name = "recipient" value = "deitel@deitel.com" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> </p> <p><label>Name: <input name = "name" type = "text" size = "25" /> </label></p> HTML Forms – input element The <input> element is the most important element on a form. The <input> element is used to create the different input fields on the form (buttons, textareas, checkboxes...) An input element can vary depending on the type=“” attribute. Users specify their data values using these input fields. The values in these input elements are provided to the script that processes the form.
Cascade Style Sheets (CSS) Revision
What Is CSS? CSS stands for Cascading Style Sheets Used to specify the presentation of elements separately from the structure of the document Styles define how to display HTML elements External Style Sheets can save a lot of work External Style Sheets are stored in CSS files
Content vs. Presentation Description Presentation Description HTML Cascading Style Sheet Browser Improved and Consistent End User Experience
How to Insert a Style Sheet There are three ways of inserting a style sheet: Inline Styles Embedded Style Sheet External Style Sheet
Inline Styles Inline style declare a style for an individual element by using the style attribute in the element’s start tag Each CSS property is followed by a colon and the value of the attribute Multiple property declarations are separated by a semicolon <p style="font-size: 20pt; color: red"> This is a paragraph </p>
CSS Syntax - 1 A CSS style rule is made up of three parts: a selector, a property and a value. selector {property: value} Here is an example: p {font-family: arial} If the value is multiple words, put quotes around the value: p {font-family: "sans serif"} Note: the selector represents the name of the HTML element to which the style is applied.
CSS Syntax - 2 If you wish to specify more than one property, you should separate each property with a semi-colon. p { text-align: center; color: black; font-family: arial }
{ color: green; text-align: center; } Two parts of CSS rule A CSS rule has two main parts: a selector, and one or more declarations: Selector Declaration h1 { color: green; text-align: center; } Property Value
Text Styles <style type="text/css"> h1 {color: green} // rgb(0,255,0), #00ff00 h2{letter-spacing: 0.5cm} // 2px h3 {text-align: right} // center, left, justify h4 {text-decoration: overline} // line-through, underline, blink, none h5 {text-indent: 5cm} // 30px h6 {text-transform: uppercase} // lowercase, capitalize </style> text-indent property indents the first line of text in the element by the specified amount text-decoration property applies decorations to text in an element
Javascript
6.4 Obtaining User Input with prompt Dialogs <!DOCTYPE html> <html> <head> <script type="text/javascript"> <!-- var name; name = window.prompt("Please enter your name"); document.writeln("<h1>Hello, " + name + ", welcome to JavaScript programming!</h1>"); // --> </script></head> <body><p>Click Refresh (or Reload) to run this script again.</p> </body></html>
Calling JavaScript functions on an event <!DOCTYPE html> <html> <head> <script type="text/javascript"> <!-- function f1() { document.writeln("<p>You have pressed Button 1.</p>"); } function f2() document.writeln("<p>You have pressed Button 2.<p>"); // --> </script> </head> <body> <button onclick="f1()">Button 1</button><br/><br/> <button onclick="f2()">Button 2</button> </body> </html>
document.getElementById() method The getElementById() method returns the element that has the ID attribute with the specified value. This method is one of the most common methods in the HTML DOM, and is used almost every time you want to manipulate, or get info from, an element on your document. Returns null if no elements with the specified ID exists. An ID should be unique within a page. However, if more than one element with the specified ID exists, the getElementById() method returns the first element. In JavaScript: var par1 = document.getElementById(“p1”); In the HTML body: <p id=“p1”>
document.getElementById() method After getting the element by using document.getElementById() you can change the element’s content or attributes. You can also add an event listener to the element. // to change the content inside the HTML element par1.innerHTML = “New text of paragraph with id p1”; //to change the attributes values of the element par1.setAttribute(“style”,”color:red”); par1.style.color = “red”; //another way img1.src = “Kuwait.jpg”; //changing the image source for an img element with id = img1 var imagesrc = img1.src; //getting the value of the attribute as a string //add an event listener to an element par1.addEventListener(“click”, myfunction, false);
document.getElementById() method <!DOCTYPE html> <html> <head> <script type="text/javascript"> <!-- function f1() { var par1 = document.getElementById("p1"); par1.innerHTML = "You have pressed Button 1."; par1.setAttribute("style","color:blue"); } function f2() par1.innerHTML = "You have pressed Button 2."; par1.style.color = "red"; // --> </script> </head> <body> <p id="p1">Click any button and I will tell you which button you clicked</p> <button onclick="f1()">Button 1</button><br/><br/> <button onclick="f2()">Button 2</button> </body> </html>
document.getElementById() method