About html and css

Section C

• Identify the major technologies and protocols involved in the client-side of a web application. Specifically, identify:

a) the protocol used to request a web page from a web server;
We will simply the working of the web to answer this question (a).
Client computer needs an application layer software packet called web browser (client software) and the web server also needs an application layer software packet called a web server(server software). uniform resource locator URL is used for the page the end user wants, either by typing or clicking the URL for the page needed.
uniform resource locator URL structure.
The URL specifies the internet address of the web server and the directory and name of the specific page wanted. If no directory or page is specified, the web server will provide whatever page has been defined as the site's home page. A URL contains the protocol used, the host name of the Web server, the network name and the path & filename of the requested file. The Web Server will provide the site's home page if no directory or page are specified. For the requests from the web browser to be understood by the web server, they must use the same standard protocol or language. If there were no standard and each web browser used a different protocol to request pages, then it would be impossible for the web browser to communicate with a web server.
The hyper text transfer protocol HTTP is an application level protocol in the TCP/IP protocol suite, using TCP as the underlying Transport Layer protocol for transmitting messages. HTTP is a standard protocol used by browsers and Web servers for communication. Ports are used to address particular software or services running on a computer. Common port assignments are port 80 for HTTP (Web browser requests). To get a page from a web server, the web browser issues a special packet called an http request that contains the URL and other information about the web page requested (fig 2.9). Once the server receives the http request, it processes it and sends back the http response, which will be the requested page or an error message.
The HTTP protocol uses the request/response paradigm, meaning that an HTTP
client program sends an HTTP request message to an HTTP server, which returns
an HTTP response message. An HTTP transaction consists of a single request from a client to a server, followed by a single response from the server back to the client.
Eight methods is defined in HTTP, referred to as "verbs", to indicate the desired action to be performed on the identified resource.

• HEAD, GET, OPTIONS and TRACE - intended only for information retrieval
• POST, PUT and DELETE - intended for actions
• CONNECT -Converts the request connection to a transparent TCP/IP tunnel

Example

To retrieve the staff.html page on the located on Lancaster university website http protocol using the GET method shows the following results
PATH: http://www.lancs.ac.uk/staffinfo/staff.htm
HTTP request --- I want staff.html GET staffinfo/staff.htm
HTTP response --- Okay, here it is, HTTP/1.1 200 OK

HTTP Request Header

Connect to 148.88.1.1 on port 80 ... ok
GET /staffinfo/staff.htm HTTP/1.1[CRLF]
Host: www.lancs.ac.uk[CRLF]
Connection: close[CRLF]
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)[CRLF]
Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7[CRLF]
Cache-Control: no[CRLF]
Accept-Language: de,en;q=0.7,en-us;q=0.3[CRLF]
Referer: http://web-sniffer.net/[CRLF]
[CRLF]

HTTP Response Header

Name	Value	Delim
HTTP Status Code: HTTP/1.1 200 OK
Date:	Sun, 17 Jan 2010 11:22:44 GMT
Server:	Apache
Accept-Ranges:	bytes
Connection:	close
Transfer-Encoding:	chunked
Content-Type:	text/html; charset=ISO-8859-1

Even if the server is safe HTTP messages containing sensitive information are still vulnerable and insecure as Transmissions are sent unencrypted. There is an another common protocol that can be used to retrieve a page from the web server is HTTPS (HTTP SECURE). HTTPS (HTTP secure) is a version of the HTTP protocol that includes data encryption for security. So the the transmission of data between the Web server and the browser occurs using a special transmission protocol called Secure Sockets Layer (SSL). The purpose of https protocol is to prevent others on the Internet from eavesdropping on data in transit or change that data. By default, SSL uses TCP port 443. Of course, a user typically just uses http:// (or nothing at all) when accessing a Web page. Rather than making users remember to type in the port number at the end of the URL, SSL is invoked with a URL starting with https://.

More book information

Title	Business Data Communications and Networking
Authors	Jerry FitzGerald, Alan Dennis
Edition	10
Publisher	John Wiley and Sons, 2008 965
Title	A+ Guide to Managing And Maintaining Your PC
Author	Jean Andrews
Edition	6, illustrated
Publisher	Cengage Learning, 2006 page 49

b) the principal mark-up language for web pages;

The HTML language is used to build and interpret Web pages. HTML is not a programming language, it is a markup language. A markup language is a set of markup tags which are used to create structured documents. HTML uses markup tags to describe web pages. There are various Attributes (Optional, Standard and Events) supported by their respective Markup Tags.
HTML documents basically contain the following three elements:

• Text that you're working with
• Tags that determine document elements, such as headings, lists, and paragraphs
• Tags that insert effects, such as bold or italics, or that insert other objects, such as images, style sheets, sounds, little programs called applets, and movies.

HTML can also load scripts in languages like JavaScript affecting the behavior of Web-Browsers and Cascading Style Sheets (CSS) for defining the layout and appearance of text elements in the HTML document.
The first tag (the opening tag) indicates the beginning of a tag that you're applying to some of the text in your document.
The second tag (the closing tag) indicates the end of a tag that you're applying to some text in your document.

INTERNET FOR DUMMIES

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
<html>
<head>
<title>Test Page</title>
<META NAME=”KEYWORDS” CONTENT=”water balloon surprise splash splat cat oops sorry ouch cold wet”>
<META NAME=”DESCRIPTION” CONTENT=”This document provides basic instructions for developing and using water balloons.”>
</head>
<body>
<h1>My test page</h1>
<p>This is my first page.</p>
<img src=“uni-logo.gif” />
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
……………..
<h1>This is heading 1</h1>
The <h1> to <h6> tags are used to define HTML headings.
<h1> defines the largest heading and <h6> defines the smallest heading
The <p> tag defines a paragraph.
The p element automatically creates some space before and after itself. The space is automatically applied by the browser, or you can specify it in a style sheet.
The <img> tag embeds an image in an HTML page.
Notice that images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.
The <img> tag has two required attributes: src and alt.
The <ul> tag defines an unordered list (a bulleted list). 
The <ol> tag is used to create an ordered list.
The list can be numerical or alphabetical.
The <li> tag defines a list item.
The <li> tag is used in both ordered (<ol>) and unordered (<ul>) lists.
c) the principal language used to control the presentation styles of a web page;
Cascading Style Sheets (CSS) is a style sheet language used to define, how to display the HTML elements. Styles sheets were added to HTML 4.0.
CSS is used to separate style from document content written in HTML or a similar markup language. These contents can be elements like the layout, colors, and fonts.
The content accessibility is improved by this separation by providing more control and flexibility in defining the presentation characteristics. Multiple pages or the whole website can use the same style sheet to share formatting thus reducing the complexlity and reptition in the structured content. It enables to maintain and change appearance more easier. CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by handheld devices.

CSS Syntax

A CSS rule has two main parts: a selector, and one or more declarations:

• External style sheet
• Internal style sheet
• Inline style

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the tag. The tag goes inside the head section:

<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>

Internal Style Sheet
An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:

hr {color:sienna} p {margin-left:20px} body {background-image:url("images/back40.gif")}

Inline Styles

An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly!
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Multiple Styles Will Cascade into One

Even multiple external style sheets can be referenced inside a single HTML document. Styles can be specified:

• inside an HTML element
• inside the head section of an HTML page
• in an external CSS file

d) the model used by web browsers as an abstract representation of a web page, and how this can be manipulated in a web browser.
A Web page is a document. This document can be viewed either in the browser window or by viewing the HTML source. The Document Object Model (DOM) defines a standard for structuring the HTML PAGE and standard for accessing the same document to be presented in the web browser. DOM also includes defining the objects and properties of all document elements, and the methods (interface) to access them. The DOM is a W3C (World Wide Web Consortium) standard. W3C defines DOM as a platform and language-neutral interface allowing programs and scripts to dynamically access and update the content, structure, and style of a document (w3c)
The HTML DOM defines a standard way for accessing and manipulating HTML documents by the browser. Everything in an HTML document is a node in the DOM.:

• The entire document is a "document node"
• Every HTML element is an "element node"
• The text in the HTML elements are "text nodes"
• Every HTML attribute is an "attribute node"
• Comments are "comment nodes"

The DOM presents an HTML document as a tree-structure and all the nodes in the tree have relationships to each other. Browsers build a DOM tree from the HTML code including additional attributes, such as styles. Trees provide convenient navigation facilities
It is apparent relationship in the node tree is hierarchical in nature. Parent, child, and sibling terms are used to describe the relationships. Parent nodes have children. Children on the same level are called siblings (brothers or sisters).
DOM is available in a large number of programming languages like javascript and other languages, which are not supported by web browsers, are Java, C/C++, Python, Perl, Ruby etc.

Document Manipulation

HTML, CSS and the Document Object Model (DOM), with program scripts, can control the appearance of a web page. A web browser uses DOM in order to render an HTML document and is required by JavaScript that wishes to inspect or modify a web page dynamically. With DOM, JavaScript sees it's containing HTML page and browser state.
Certain events are defined in the HTML elements on a web page, which can trigger JavaScript functions. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. For examples events like :

• A mouse click
• A web page or an image loading
• Mousing over a hot spot on the web page
• Selecting an input box in an HTML form
• Submitting an HTML form
• A keystroke

So DOM can be manipulated by a client-side script like JavaScript which interacts with users through DOM events, resulting in updating the WebPages dynamically, providing an interactive experience to the user on the browser.
3. A UK based theatre company is looking to create a web site to provide information about their shows and have a ticket booking system.

• Why is it important that they consider the needs of users with disabilities?
• Discuss two strategies, which could be employed by the theatre company, to ensure their web site is accessible.

[6 marks]
Accessibility is designing a web page to be easily understood, navigated, and interacted with by all users
With web sites, the term traditionally refers to the development of sites that are accessible to "all" users who may want to access them.
In other words, "Universal Web Sites."
Accessibility is becoming increasingly critical to the Internet experience. Is your site accessible to people with disabilities? Is it compatible with browsers other than Internet Explorer?
Why important for theatre

Providers benefits from accessibility<

• Increase Market Share and Audience Reach
• Improve usability for non-disabled and disabled visitors;
• Support for Low Literacy Levels;
• Improve Search Engine listings and Resource Discovery;
• Re-purpose content for multiple formats or devices;
• Assisting access for low-bandwidth users.
• Improve Efficiency
• Reduce site maintenance;
• Site Search Engine Improvements;
• Re-purposing Content;
• Address server-load;
• Address server-bandwidth.
• Demonstrate Social Responsibility
• Reduce Legal Liability

In general, accessibility relates to how the design of the website takes into account users with disabilities

Legislation:

* According to The Disability Discrimination Act 1995, Part III Access to Goods and Services "Unlawful for a service provide to discriminate against a disabled person by refusing or deliberately not providing any service which it provides to members of the public."
the Office of Public Sector Information (OPSI)
http://www.opsi.gov.uk/acts/acts1995/ukpga_19950050_en_4#pt3-pb1-l1g19
+A service provider has to take reasonable steps to make it
reasonably easy for disabled people to make use of its services.

Understanding Risks for Non-Compliance

Some organizations have faced legal action for not making their website accessible to all including disabled people. Not complying with accessibility requirements can result in significant legal costs and have negative impact on the organization's reputation.
Sometimes the legal requirements for an organization might not be clear. Some organizations determine that it is in their best interest (financially and otherwise) to make their sites accessible, rather than risk legal action.
resource: Business Source Premier (EBSCO) Title: Economic and financial factors for the adoption and visibility effects of Web accessibility: The case of European banks. Author: Andres, Javier De Citation: Journal of the American Society for Information Science & TechnologySep2009, Vol. 60 Issue 9, p1769-1780 Year: 2009
Resource: Academic Search Complete (EBSCO) Title: W3C Adopts Web-Accessibility Specifications. Author: Paulson, Linda Dailey Add.Author / Editor: Paulson, Linda Dailey Citation: ComputerFeb2009, Vol. 42 Issue 2, p25-26 Year: 2009
Accessibility Strategies
As the company website will be providing information about their shows and having a ticket booking system. Website should be build in accordance Web Content Accessibility Guidelines (WCAG) 2.0 which are a part of Web accessibilityguidelines published by theW3C'sWeb Accessibility Initiative and should have success criteria Level A.
Use Style sheets
The theatre company website can use multiple style sheets for the same website. Different style sheik can be used to present to website to different mediums like Screen, Printer or Handheld devices by voice (when read out by a speech-based browser or screen reader) and on Braille-based (system of writing for the blind where configurations of raised dots represent letters and numerals), tactile devices (pertaining to the sense of touch; capable of being perceived by touch). Also the website should provide an option to allow user to pick/choose a style which suits them and also provide a style-sheet option to disable them

Use CSS for

• background images instead of img elements
• margin and padding rules instead of spacer images for layout design
• controlling the visual presentation of text
• page layout rather than tables for page
• to change the presentation of the webpage for the user interface component when it receives focus

2- Keyboard Accessibility :

According to WCAG 2.0 for Keyboard Accessible (section Guideline 2.1) to make all functionality available from a keyboard.

• important links and form controls keyboard shortcuts should be Provided
• skip links should be used to enhance page navigation (future link)
• "accessKey" attribute should be used where keyboard shortcut is Specified to access an element on in the webpage e.g. by Pressing the defined key gives the element focus; if the element is a link, the link will be followed; if the element is a form field, it will be selected.
• accessibility supported technologies should be used which allow structured navigation by user agents and assistive technologies
• Using unique-letter combinations should be used begin each item of a list
• avoid using common user-agent keyboard commands for other purposes