Interaction between browser and server. HTML (Hyper Text Markup Language)

(1)

1

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:

(2)

2 HTML Page Structure

Below is a visualization of an HTML page structure: <html>

<body>

<h1>This a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag. Example

<p>This is a paragraph.</p> <p>This is another paragraph.</p>

HTML Images

HTML images are defined with the <img> tag. Example

<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 Example

HTML links are defined with the <a> tag. The link address is specified in the href attribute: Example

HTML Links

HTML links are defined with the <a> tag. Example

Note: The link address is specified in the href attribute. HTML Headings

HTML headings are defined with the <h1> to <h6> tags. Example

<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>

(3)

3

HTML Formatting Tags

Lists

Unordered list

Ordered list

<ol> <li>First item</li> <li>Second item</li> </ol>

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>

Definition list

<dl> <dt>Item 1</dt> <dd>Describe item 1</dd> <dt>Item 2</dt> <dd>Describe item 2</dd> </dl>

Iframe

Include video into your web page

<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">

</object> </video>

Or/

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 Text</del></p>

<p>An example of <code>Computer Code Text</code></p>

An example of Bold Text

An example of

Emphasized Text

An example of Strong Text

An example of

Italic Text

An example of

superscripted Text

An example of

subscripted Text

An example of

struckthrough Text

An example of Computer Code Text

(4)

4

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 <form> tag is used to create an HTML form: <form>

input elements </form>

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: <form>

First name: <input type="text" name="firstname"><br> Last name: <input type="text"

name="lastname"> </form>

How the HTML code above looks in a browser: First name:

Last name: Password Field <form>

Password: <input type="password" name="pwd">

</form>

Checkboxes <form>

<input type="checkbox" name="vehicle" value="Car">I have a car

</form> Submit Button <form name="input"

action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>

Radio Buttons <form>

<input type="radio" name="sex" value="female">Female

(5)

5 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.