Web Designing

Web Designing PDF Book HTML by Syed Kumail Shah GIT

Web Designing HTML

Description:  Web Designing course is available at Kumail.pk a free platform initiated by Syed Kumail Hassan Shah. HTML CSS and database have been covered in the course. Short Course of Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development rather than software development. Web design used to be focused on designing websites for desktop browsers. 

Kumail.pk is a Free Educational Platform 

Syllabus Of Web Designing HTML

Online PDF Book of Web Designing

Study Material of Web Designing

1.1 Introduction

In 2009 the Internet celebrated its 40th anniversary, and the World Wide Web had been in existence for over 15 years. The concepts of computer networks and hypertext on which these technologies rely are only a little older. And yet the speed of development of these technologies, the speed of uptake by companies, and the speed of acceptance by consumers is unlike anything mankind has witnessed. Although both the Internet and the Web are firmly rooted in academic, altruistic endeavour, there is no doubt that the commercial interests are currently driving much of the technological development. This module aims to prepare you for contributing to this endeavour by helping you to understand the basic ideas and technologies behind the Internet, and giving you the opportunity to design and write Web pages using HTML5 and JavaScript.

 

The module starts here with, inevitably, the more theoretical aspects of the Internet and the Web. We begin by explaining hypertext before moving on to the most elaborate hypermedia system, the Web, and the ideas of clientserver computing that allow us to use it. 

1.2 Hypertext

Take a dictionary and observe how its content is linked together. How do you search for the meaning of a word? How can you find another word synonymous with that word? The dictionary is a paper example of a hypertext system. So are encyclopedias, product catalogues, user help books, technical documentation and many other kinds of books. Information is obtained by searching through some kind of index – the dictionary is arranged in alphabetical order, and each word is its own index. Readers are then pointed to the page of any other related information. They can read the information they are interested in without having to read the document sequentially from beginning to end.

 

Hypertext systems allow for non-sequential or non-linear reading. This is the underlying idea of a hypertext system. The result is a multidimensional document that can be read by following different paths through it. In this section we will look into the application of hypertext in computer systems, mainly the World Wide Web hypertext system.

 

The main use of hypertext is in information retrieval applications. The ease of linking different pieces (fragments) of information is the important aspect of hypertext information retrieval. The information can be of various media: it may be fragments of textual documents, structured data from databases, or list of terms and their definitions. Any of these, or a mixture thereof, can make up the contents of a hypertext document.

 

Therefore, in a hypertext system it is possible to:

  • link with a term that represents aspects of the content of a document;

 

  • connect two related documents;

 

  • relate a term to a fragment containing its definition and use; and

 

  • link two related terms.

 

Such a hypertext system can store a large collection of textual and multimedia documents. Such a hypertext system gives the end-user access to a large repository of knowledge for reading, browsing and retrieving. This is a “database” of sorts, and is the reason why such a hypertext system is called a digital library. The Web started as an extensively large digital library. As it has grown in popularity, it has offered the possibility of interactive applications and commerce on the Internet, making it much more than a digital library.  

To do

Read about networked hypertext and hypermedia in your textbooks.

 

We now explain some basic concepts on the use of hypertext.  

 

1.2.1      Anchors and Links

A hypertext document contains links referring to other parts of the document, or even to whole other documents. A hypertext document does not have to be read serially; the fragments of information can be accessed directly via the links contained in the document.

 

The links embedded in a document are known as hyperlinks. When selected, these hyperlinks allow for the portion of the document linked to by the hyperlink to be displayed. This allows the reader to jump to another part of the same page, another page in the same document, or another document. By following a series of hyperlinks, the reader can follow their own path through the document.

 

A computerised hypertext system implements this idea by including anchors and links in documents, which are usually represented by files. An anchor is a fragment of information which links to another document or portion thereof. It is the visual representation of a link. A link is the actual reference (or “pointer”) to the other document. For example, in Figure 1 the fragment of Document A containing ‘You can find this in Section 5 of B’ is an anchor from which there is a link to the relevant section in Document B.

 

 

                          Figure 1: Illustration of Anchor and Link

 

Take care not to confuse anchor or link. A link is a pointer to another piece of information within the same document or in another document; often you cannot see how that link is implemented (it may be a hidden URL or some other programmed mechanism). An anchor is a fragment of information which the user interacts with in order to access the link. For instance, in a Web Browser the phrase “Click here to return to the previous page” is the anchor which the user interacts with — it contains the link to the previous page.

 

A hyperlink must have unambiguous reference to the document: this is usually information on the document’s location (where in some file space or network it is) and the mechanism to access it (called the communication protocol). In Chapter 3 you will be introduced to HTML anchors and how the referenced documents are identified and located with URLs.

1.2.2       Jumps

A hypertext document allows links to portions of the document occurring before the link’s anchor. This allows the reader to loop to portions of the document that they have already seen.

 

The table of contents at the beginning of this chapter is a collection of anchors with explicit links to the internal parts of the chapter. A book’s bibliography is another collection of links but it refers to external information. To refer to the internal parts of this chapter is simple: the reader can merely turn to the appropriate page, identified by page number. However, referring to the external information given in a bibliography requires a more complicated effort of searching.

 

In computer-based hypertext documents, the mechanism to follow a link (the jump) is automatic. Jumping to an external link (another document) is as easy as jumping to an internal link within the same document. As long as the link is sufficiently specified with the name and the exact location of the linked document, the user can directly access the linked document with a simple click on the anchor.

1.2.3      Knowledge Additivity

Links can be created to associate related subjects. Therefore the information given can be extensive and wide. The combination of two related subject areas is known as knowledge additivity.

Let’s say you want to find out how to tailor a shirt using a sewing machine. You would probably look in a book on tailoring a shirt and another on using a sewing machine. The information read would then be linked together in your brain. However, with the hypertext concept, this knowledge additivity would be simpler with association links. You can just continue clicking to read on both subject areas within the perceived single document.

1.2.4      Chain of Links

A series of successive jumps constructs a chained path through a series of documents. There is no limit as to the number of jumps, therefore the size of the chain is not constrained. 

 

There may be more than one link in a page and the reader is free to choose any of these links to follow. The path a reader takes will then be different from the path of another reader. Each sequence of jumps forms a different path to fragments of the overall information in the hypertext document. Generally, there is no rigid order to read the information in.

 

There are two different but complementary purposes of chaining documents via links:

  • Focusing: each jump along the path, the user can narrow the scope of the search until the fragment containing the topic of their interest is reached.
  • Broadening: Multiple outgoing links from a document allow the user to broaden their search. This is useful when the user does not have a precise idea of what is being searched for, or wishes to conduct a broad search in a certain domain.

 

Travelling through hypertext documents usually poses no technical difficulty. However, the reader might experience practical difficulties in retrieving a particular piece of information from a document with numerous alternative links.

1.2.5      Loops and Mesh

Just as the reader is free to choose which links and jumps a path through a hypertext document is to follow, it is possible for a user to return to a point previously visited. In other words, loops may exist. A path may even return to the original (home) document. Hence, the structure does not necessarily follow a linear pattern; instead, the documents are connected together in a graph / mesh defined by the links.

 

This critical property shifts the burden of devising suitable exploration paths from the designer of a hypertext document to the user. This changes the way information is stored and retrieved. Instead of searching directly for information, hypertext allows browsing for information. However, the mesh of information creates difficulty in navigating through the hypertext document.

1.2.6      Hypermedia

One of the original purposes for hypertext was the storage and management of textual documents. As computer and telecommunications technology has improved, the capabilities of hypertext systems have been extended to include any digitised media, such as sound and images.

 

This means that music and videos can be accessed via hyperlinks. This addition of multimedia to hypertext is known as Hypermedia. A combination of text, graphics, video or sound can now easily be interlinked in hypermedia document to offer a rich, often interactive, environment.

1.2.7      Authoring Hypertext

The process of preparing hypertext documents or, quite often, of converting a flat (linear) collection of documents into hypertext, is referred to as authoring.

 

Often an initial collection of documents has to be reorganised by splitting up the original documents into multiple sub-documents. Then links between these new documents must be constructed. Authors of hypertext documents are not only responsible for the content of these documents, but must link documents together, create paths through them, and build references that point to external documents associated to them.

 

Conceptually, related information is ultimately presented as a single, unique collection of hypertext documents. The remarkable aspect of hypertext or hypermedia documents that distinguishes them from other document types is that hypertext is ‘shaped’ by the user as he or she navigates the hypertext’s network of link. Each sequence of links is a possible exploration path and each chosen sequence forms a single conceptual document for the user.

1.2.8      Getting lost in ‘hyperspace’

The   easy   linking   of   different   fragments   of information crucial for browsing can produce hypertext documents that are very difficult to use. The user may become disoriented when they do not know where they are in the document and where he can go to. This problem of navigating a hypertext network is also known as being ‘lost in hyperspace’. There are ways to minimise the risks of being lost in such a large information space.

 

Return path           

The user simply backtracks through all the previous documents, link by link, until they reach the one they want to revisit.  Alternatively, if the user remembers the reference of the required document, it may be selected from a list of the most recent documents explored.

 

Home Page

The starting fragment in a path is known as the home page. This home page is usually a well- defined document that contains the first links to a certain path. It helps to remind the user the path he has taken before and may even serve as a starting point to another path.

 

Overview Diagrams

This is the explicit display of the graph / mesh network of documents and links. Many websites have an overview site-map showing the paths the user may take to access certain information from the site.

 

Guided Tours

These are suggested paths arranged by the document’s authors. Its purpose is to assist the user in the exploration of information in hypertext document. Tour documents form a logical path sequence by using simple ‘next-document’ or ‘last- document’ anchors.

 

Direct jump

This allows the user to move directly to a portion of a hypertext document. The user has to know the name and location of the portion to directly jump to it. In a Web browser, the URL address of the website is typed in and the requested page is retrieved and displayed to the user.

 

Content-based retrieval

Some documents may offer a search facility. Browsing for information through the search facility can help narrow the information space to the domain of interest.  However, most current search facilities are restricted to textual information only.

1.3 The Ultimate Hypermedia System: The World Wide Web

 

1.3.1      Basic Ideas of the Web

The World Wide Web (Web) is a hypermedia system. It has largely achieved the goal of Tim Berners- Lee, its British inventor, of a universal information space. Tim Berners- Lee invented the World Wide Web in October 1994. Thanks to the global reach of the Internet, there is potentially universal access to an enormous volume of documents over the Internet. However, in many developing countries, access is poor, which raises issues of disenfranchisement and disempowerment.  Many organisations make publicly available collections of hypermedia documents as part of either their marketing programme, customer service or global operations. Computer suppliers, for example, now publish very detailed specifications of their products via the Web.

 

Web servers and clients may be located at any part of the world and connected to each other by telecommunication links. If the Web is in some sense a digital library, it is one with no single geographical location. When it comes to commerce, distance begins to lose importance. As long as a supplier can provide goods or services where they are required, the location of the vendor and the consumer will not matter. This gives rise to issues about jurisdiction for taxes, consumer laws, legality of product, etc. This absence of distance is supported by the ease with which Web documents may be located world-wide; the mechanism is straightforward thanks to the way the location of such ‘resources’ are identified by a Uniform Resource Location (URL). The URL format unambiguously specifies locations of ‘documents’ on the Web. This location mechanism allows the actual implementation of geography-independent feature of the Web.

 

Generally speaking, there is no central authority controlling the Web, although fully qualified domain names are subject to controlled allocation, and Internet Service Providers may be subject to the laws of the countries in which they operate. Furthermore, the World-Wide Web Consortium (W3C), headed by Tim Berners-Lee at the Massachusetts Institute of Technology, is influencing — and to a large degree controlling — how technologies are deployed on the Web. The W3C specifies HTML and XML, but others bodies, such as the European Computer Manufacturers Association (ECMA), have standardised other Web technologies, such as what we mostly call JavaScript. JavaScript is a programming language originally developed by Netscape.

 

Anyone with the appropriate knowledge, and with access to server space, can create a Web document. These Web documents can make reference to any other document. Moreover, a user does not require specific, proprietary software on their computer platform to access the Web, with many Web browsers being free software. While browsers can access and display the information on the Web, not all of them can supply the user with the interactive portions of the Web pages. For example, if Java applets are prohibited or a browser does not support JavaScript, interactivity with the Web document will be limited; some information may even be missing if that information required the presence of these interactive components.

 

The implications are easy to predict. With different browsers supporting different features, and with the navigation difficulties associated with hypertext’s mesh / graph connections, chaos might ensue. However, even the most inexperienced users currently cope and the Web, and it is becoming both a universal world of information, and a universal place for doing business.

 

Dynamic pages can respond interactively to user input. It is possible to have portions of a hypertext document be produced by a programme as the document is requested. In this way, Web pages are increasingly being used as a front end to databases.

 

This allows the user to fill out a query and send it off for processing by the hypertext document. The server queries the database using the user’s information and returns the output as HTML. To allow data to be sent in such a way to and from Web servers, a standard called the Common Gateway Interface (CGI) has been created. The difference between dynamic Web pages and non-dynamic (so called ‘static’) Web pages is transparent to the browser and user.

 

It is also possible to embed programmes inside HTML. When the browser loads such a page, the code is immediately executed. This mechanism supports remote transactions for the commercial aspect of the Web. 

1.3.2      Fields of Application

The Web began as a tool to share knowledge and has successfully evolved into a general communications mechanism. With the support of transactions and synchronous communications, the Web has application in many different fields.

 

A primary use is the dissemination of knowledge, which takes many forms. For example, chat rooms and bulletin boards are integral to interactive discussion of all kinds of subjects. Frequently Asked Questions (FAQs) published on Web sites, offer answers to users’ questions on how to do certain kinds of tasks. The variety of information that can be pulled out of the Web is wide-ranging.

 

Education includes a variation of the dissemination of knowledge. Open- or distance-learning programs spearhead this aspect of the Web. Basically, any kind of demonstration on how to carry out certain tasks can be considered education. For example, a user can learn how to create a Web page from the numerous websites publishing such instructions.

 

With the possibilities of online trading, business transactions are carried out on the Web. The user supplies their order and credit card details so as to buy products advertised on the Web. The Selling module would cover this subject area in depth.

1.3.3      The Web as a Digital Library

The Web as a vast digital library is becoming what is known as a ‘Global Information Structure’. It will have a profound effect on how we live, work and play. We shall now look into a few of the social implications of the Web as a digital library and a marketplace.

  1. Different Literacy

The hypermedia concept includes not only text and illustrations, but also music, animation, digital movies, video games and computer software. This diversity changes the form of literacy required when using the Web. The literacy needed when listening to music and watching a movie may be different from that used when reading a book. Less literacy may be required with innovative ways of using the digital library. For example, software that reads text aloud can assist people with visual handicaps.

  1. Indeterminate Quality and Value

Editors and publishers employing traditional methods of publishing have little to gain from this type of publishing. As digital works can be copied at low costs, stored in almost no space and transported instantly anywhere in the world, writers can be their own publishers. Therefore, the works published are of indeterminate quality and value. Web publishing may provide no evaluation of work published. iii. Specialist Audiences

An article may perhaps interest a group of specialists in a particular field. With the Web, an average reader may browse through the article according to their degree of interest in the field. He or she may not want to be burdened with an additional flood of technicalities, or perhaps would navigate further to extract more in-depth information to supplement a deeper interest in the field

  1. Copyright Issues and Ease of Purchasing

The ease of copying digital works causes difficulties in protecting copyrights. It may be tempting to make illegal copies rather than finding the rightful owners and paying them a fee. On the other hand, the non-issue of distance and the 24-hour, 365-day activity on the Web means that much can be easily bought through on-line shops. Consumers may come from distant areas or different time zones. With the Web, this market place is open at all times and can serve a very large global region. New technology even allows computational agents to staff the market place rather than people. Therefore, businesses are not constrained by distance or time.

  1. Sense of Place

Despite the irrelevance of distance, an electronic marketplace may be attractive as it goes to the consumers instead of them physically moving to the business environment. Its sense of place is created as an illusion for the benefit of the consumers.

 

About Us

Kumail.pk is a Free Platform of Education initiated by Syed Kumail Hassan Shah (Director GIT Education)

©Kumail.pk. All rights reserved

Kumail.pk is a free platform of Education

E-Certification