Web Operations - Client-Server Approach PDF

Web Operations The Web works on client- server approach. Following steps explains how the web works: 1. User enters the URL (say, http://www.tutorialspoint.com) of the web page in the address bar of web browser. 2. Then browser requests the Domain Name Server for the IP address corresponding to www....

Web Operations The Web works on client- server approach. Following steps explains how the web works: 1. User enters the URL (say, http://www.tutorialspoint.com) of the web page in the address bar of web browser. 2. Then browser requests the Domain Name Server for the IP address corresponding to www.tutorialspoint.com. 3. After receiving IP address, browser sends the request for web page to the web server using HTTP protocol which specifies the way the browser and web server communicates. 4. Then web server receives request using HTTP protocol and checks its search for the requested web page. If found it returns it back to the web browser and close the HTTP connection. 5. Now the web browser receives the web page, it interprets it and display the contents of web page in web browser's window. Site Structure: Every Web site was built in inherits structure and should have a consistent and simple organization called a site structure. A site is a collection of HTML files, documents and images contained in a single master folder (the root folder). Within this root folder you can save your documents and subfolders organized in a manner that makes sense to you, as well as to others in your department that may need to edit the information. Therefore, it is recommended that the structure of Web site include: 1. A root folder that contains the Web site. 2. A Web page entitled index.htm (or index.html) that resides within the root folder to represent the default homepage for the Web site. 3. May be images folder that contains the graphics, illustrations, images and photographs used in the Web pages. 11 4. Additional folders for organizing the content. Hyperlinks Hyperlinks are the primary method used to navigate between pages and Web sites. Links can point to other web pages, web sites, graphics, files, sounds, e-mail addresses, and other locations on the same web page. When text is used as a hyperlink, it is usually underlined and appears as a different color. There are four types of hyperlinks. Text hyperlink -- Uses a word or phrase to take visitors to another page, file or document. Image hyperlink -- Uses an image to take visitors to another page, file or document. Bookmark hyperlink -- Uses text or an image to take visitors to another part of a web page. E-mail hyperlink -- Allows visitors to send an e-mail message to the displayed e-mail address. How Browsers Display Web pages When a Web page is opened in a browser, the browser reads and interprets the HTML file and formats the Web page for display. If there are references to external files, such as images or multimedia, these files are downloaded from the server and displayed in the browser window. It is important to note that HTML files are text files that only contain references to the external files -- you do not "embed" these files into the Web page. 12 Types of Web Sites There are many types of Web sites, each catering to a particular type of content or use. Hence, few illustrative but not exhaustive cases are given below: 1) Blog (Web Log): site generally used to post online diaries which may include discussion forums. 2) Social Networking Site: where users could communicate with one another and share media, such as pictures, videos, music and blogs with other users. These may include games and Web applications. 3) Wiki Site: which users collaboratively edit (such as Wikipedia and Wikihow). 4) Web Portal: that provides a starting point or a gateway to other resources on the Internet. 5) Search Engine Site: a site that provides general information and is intended as a gateway or lookup for other sites like Google, Yahoo, Bing search engines. 6) Education Site: where teachers, students, or administrators can post information about current events at or involving their school. Website Design Issues There are many points one should keep in mind while designing a Web site. These points make a site usable and easily accessible to the users, which are discussed below: 1) Information Availability\-- All the information that helps a visitor make informed decisions should be in the Web site. The general benchmark of a good Web site is that it should be providing 80-90 % of what a user/visitor is looking for. 2) Page layout: How the content is displayed on the page \-- The page should be laid in such a way people should be able to find relevant content quickly. Else they lose interest and leave the site. Page should be simple to enhance the usability of the page. 3) Colors -Standard colors should be used as colors can affect the usability of the site. For example, the standard colors used for links (blue for links; violet for visited links; and red for active links) should be maintained as one runs the risk of confusing the visitors. 13 4) Web Accessibility- Web accessibility means accessibility to all including people with disabilities (like visual, audio, physical, speech) can interact or contribute to the Web. As more and more accessible Web sites and software are made available, people with disabilities should be able to use and contribute the Web more effectively. 5) User-friendly Site- web site should be creating based on what the audience requires. 6) Download Speed - The download speed cannot determine by a Web designer. Some considerations are optimizing the graphics (images not larger than 10 kb), making smaller pages, and avoiding nested tables. INTRODUCTION TO HTML HTML stands for Hypertext Markup Language, and it is the most widely used Language used to create Web Pages or Hypertext document. Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called Hypertext. A Markup Language is a set of instructions often called TAGS which can be added to text files. HTML is only a formatting language are not a programming language. Elements of a web document are labelled through the usage of HTML tags. It is the tags that describe the document. Anything that is not a tag will be displayed in the document itself. HTML does not describe any page layout i.e, for example, word for windows have different styles for headings, font size etc. Web Browsers are best examples of HTML formatters. Advantages of HTML: - A HTML document is small and hence easy to send over the net. It is small because it doesn't include format information. HTML documents are cross platform compatible and device independent. Its need a HTML readable browser to view them. Basic HTML tags: - (1) : This tag formally starts an HTML document and it also indicates the version of HTML used. Although it\'s not a page structure tag, the XHTML 1.0 recommendation includes one additional requirement for your web pages. The first line of each page must include a DOCTYPE identifier that defines the XHTML 1.0 version to which the page conforms, and the document type definition (DTD) that defines the specification. This is followed by the , , and tags. In the following example, the XHTML 1.0 Strict document type appears before the page structure tags: 14 \...your page content\... Three types of HTML 4.01 document types are specified in the XHTML 1.0 specification: Strict, Transitional, and Frameset. (2) : HTML is a markup language and makes use of various tags to format the content. These tags are enclosed within angle braces. Except few tags, most of the tags have their corresponding closing tags. For example, has its closing tag and tag has its closing tag tag etc. Every HTML document starts with a tag and it is always the first tag in a html page and indicates that the document is a HTML document. The end tag is. Example:......\... Tag Description This tag defines the document type and HTML version. This tag encloses the complete HTML document and mainly comprises of document header which is represented by \... and document body which is represented by \... tags. This tag represents the document\'s header which can keep other HTML tags like **\...your page\...** **(4)** **\...your page\...** **Heading Tags Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements** **,** **,** **,** **,** **, and** **. While displaying any heading, browser adds one line before and one line after that heading. For example: 16** **This is heading 1** **This is heading 2** **This is heading 3** **This is heading 4** **This is heading 5** **This is heading 6** **(5)** **: It contains the body of the HTML Document, which includes the content that will actually appear in the web browser. The entire content of the webpage will be placed in the pages** **tag. The end tag of the** **\...your page\...** **STRUCTURE OF THE HTML PROGRAM: - The HTML Program is generally divided into two sections i.e., head and body. We use and** **tags to indicate these two sections. section holds the header information of a webpage document indicated by a title that is provided by using** **This is my first page** **17 Paragraph Tag The** **tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening** **and a closing** **tag as shown below in the example: Example** **Here is a first paragraph of text.** **Here is a second paragraph of text.** **Here is a third paragraph of text.** **Line Break Tag Whenever you use the\ element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them. The\ tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use\ it is not valid in XHTML. Example** **HTML** **Hello\ You delivered your assignment on time.\ Thanks\ Mahnaz** **This will produce the following result: Hello You delivered your assignment on time. Thanks Mahnaz Attribute: An attribute is used to define the properties of an HTML element and is located within the element\'s opening tag. All attributes consist of two parts: a name and a value. 18 Set the desired property using its name. For example, the paragraph element** **in the sample has a property named align, which you can use to specify the alignment of the paragraph on the page. Use quotation marks to indicate the desired property value. The sample below displays three potential values or the align attribute: left, center, and right. Attribute names and values are case insensitive. However, the World Wide Web Consortium (W3C) encourages lowercase attributes/values in its HTML 4 recommendation. Example** **This is left aligned** **This is center aligned** **This is right aligned** **This will display the following result: Core Attributes The four core attributes that can be used on the majority of HTML elements (although not all) are: Id Title Class Style The Id Attribute The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. There are two primary reasons that you might want to use an id attribute on an element: If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content. If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish between elements that have the same name. Example ** **This para explains what is HTML** ** ** **This para explains what is Cascading Style Sheet** **The title Attribute The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id attribute: The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when cursor comes over the element or while the element is loading. Example 19** **Titled Heading Tag Example** **A HTML list serves as a mechanism for showcasing a collection of interconnected items on a webpage, allowing for their presentation either in a defined sequence or without a specific order. These lists find application in various contexts, such as crafting menus, delineating procedural steps, displaying data, or providing a succinct summary of information. Notably, HTML supports three primary types of lists: Unordered lists, which lack a predefined order and are marked with symbols like bullets or squares, Ordered lists, structured with a specific sequence indicated by numbers or other symbols, and Description Lists, tailored for defining terms and offering corresponding descriptions. This trio of list types contributes to the versatility and organization of content within HTML documents. Unordered lists: Unordered lists, characterized by their lack of a predetermined order or sequence, are visually marked with symbols such as bullets, circles, or squares. The creation of unordered lists in HTML involves the use of the \`** **\` tag to encapsulate the entire list, while each individual list item is denoted by the \`** - **\` tag. For example: HTML** - **Apple** - **Banana** - **Orange** This code will produce the following output: Apple Banana Orange