Interaction between browser and server The client/server model is a computing model that acts as a distributed application which partitions tasks or workloads between the providers of a resource or service, called servers, and service requesters, called clients.[1] Often clients and servers communicate over a computer network on separate hardware, but both client and server may reside in the same system. A server machine is a host that is running one or more server programs which share their resources with clients. A client does not share any of its resources, but requests a server's content or service function. Clients therefore initiate communication sessions with servers which await incoming requests. HTML (Hyper Text Markup Language) 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 describes 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 <tagname>content</tagname> HTML Elements "HTML tags" and "HTML elements" are often used to describe the same thing. But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags: HTML Element: 1
HTML Page Structure Below is a visualization of an HTML page structure: <html> <body> <h1>this a Heading</h1> <p>this is another paragraph.</p> </body> </html> HTML Headings HTML headings are defined with the <h1> to <h6> tags. <h1>this is a heading</h1> <h2>this is a heading</h2> <h3>this is a heading</h3> HTML Paragraphs HTML paragraphs are defined with the <p> tag. <p>this is another paragraph.</p> HTML Links HTML links are defined with the <a> tag. <a href="http://www.w3schools.com">this is a link</a> Note: The link address is specified in the href attribute. HTML Images HTML images are defined with the <img> tag. <img src="w3schools.jpg" width="104" height="142"> Empty HTML Elements HTML elements with no content are called empty elements. <br> is an empty element without a closing tag (the <br> tag defines a line break). Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper way of closing empty elements in XHTML (and XML). HTML Attributes Attributes provide additional information about HTML elements. HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value" Attribute HTML links are defined with the <a> tag. The link address is specified in the href attribute: <a href="http://www.w3schools.com">this is a link</a> 2
HTML Formatting Tags This text is bold This text is italic This is computer output This is subscript and superscript HTML uses tags like <b> and <i> for formatting output, like bold or italic text. <p>an example of <b>bold Text</b></p> <p>an example of <em>emphasized Text</em></p> <p>an example of <strong>strong Text</strong></p> <p>an example of <i>italic Text</i></p> <p>an example of <sup>superscripted Text</sup></p> <p>an example of <sub>subscripted Text</sub></p> <p>an example of <del>struckthrough Lists Text</del></p> Unordered <p>an example list of <code>computer Code <ul> Text</code></p> <li>item</li> <li>item</li> </ul> Ordered list <ol> <li>first item</li> <li>second item</li> </ol> Definition list <dl> <dt>item 1</dt> <dd>describe item 1</dd> <dt>item 2</dt> <dd>describe item 2</dd> </dl> Iframe <iframe src="demo_iframe.htm"></iframe> An example of Bold Text An example of Emphasized Text An example of Strong Text An example of Italic Text superscripted Text An example of An example of subscripted Text An example of struckthrough Text An example of Computer Code Text Tables <table border="1"> <tr> <th>table header</th> <th>table header</th> </tr> <tr> <td>table data</td> <td>table data</td> </tr> </table> Include video into your web page <video width="320" height="240" controls autoplay> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <object data="movie.mp4" width="320" height="240"> <embed width="320" height="240" src="movie.swf"> </object> </video> Or/ <embed src="intro.swf" height="200" width="200"> 3
HTML Forms and Input HTML Forms are used to select different kinds of user input and to pass data to a server. An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. The tag is used to create an HTML form: input elements HTML Forms - The Input Element The most important form element is the <input> element. The <input> element is used to select user information. An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more. Text Fields <input type="text"> defines a one-line input field that a user can enter text into: First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> How the HTML code above looks in a browser: First name: Last name: Password Field Password: <input type="password" name="pwd"> Radio Buttons <input type="radio" name="sex" value="male">male<br> <input type="radio" name="sex" value="female">female Checkboxes <input type="checkbox" name="vehicle" value="bike">i have a bike<br> <input type="checkbox" name="vehicle" value="car">i have a car Submit Button <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="submit"> 4
GET versus POST Requests on HTML Forms When you are submitting a form or sending data to a web server or web page, you have two methods you can use to transfer that data: get post You can tell these two methods apart by looking at how the data is sent. GET requests are sent as a query string on the URL while POST requests are sent in the body of the HTTP request. What this means is that a GET request can be seen by the user because the form data is written to the URL. While POST requests are sent as part of the HTTP request and are not seen by the user directly. GET requests have the following features. They are defined in the URL field and because of that: They remain in the browser history and can be accessed using the History API. They can be cached, like any other URL. They can be bookmarked or sent to other people. They can be used anywhere there is a link. Because of these features, you should never use a GET request to store sensitive data like passwords, credit card numbers, and identification codes. Also, keep in mind that URLs in Internet Explorer do have length restrictions. And form data can get extensive. Form data that might be longer than 2,000 characters including the domain, file name, and data labels should be sent by POST rather than GET as may become a may be a problem. You should use POST requests for actions that are unsafe. An unsafe action is one that can have adverse consequences if it is repeated. For example: When a customer submits a web form to make a purchase, if they submit that form again, they could make the purchase a second time without realizing it. POST requests are sent in the HTTP headers and so are mostly invisible to end users. This makes POST requests ideal for sensitive data. The data is hidden and not cached. If a reader bookmarks the form results page, the data is not sent again. In fact, in most PHP forms, the form is simply displayed as though no data had been sent (because none has). Also, because HTTP headers don't have the same types of limits as URLs, you can use POST requests for longer data fields. 5