Internet and Computer Networks PDF

Internet: The Internet is a global system of interconnected computer networks that use the standard Internet protocol suite (often called TCP/IP, although not all applications use TCP) to serve billions of users worldwide. It is a network of networks that consists of millions of private, public, aca...

Internet: The Internet is a global system of interconnected computer networks that use the standard Internet protocol suite (often called TCP/IP, although not all applications use TCP) to serve billions of users worldwide. It is a network of networks that consists of millions of private, public, academic, business, and government networks, of local to global scope, that are linked by a broad array of electronic, wireless and optical networking technologies. The Internet carries an extensive range of information resources and services, such as the inter linked hypertext documents of the World Wide Web (WWW) and the infrastructure to support email. Computer Networks A computer network is the infrastructure that allows two or more computers (called hosts) to communicate with each other. Definition A network can be defined as a group of computers and other devices connected in some ways so as to be able to exchange data. -Each of the devices on the network can be thought of as a node; each node has a unique address. A computer network, often simply referred to as a network, is a collection of hardware components and computers interconnected by communication channels that allow sharing of resources and information. The network achieves this by providing a set of rules for communication, called protocols, which should be observed by all participating hosts. A communications protocol is a set of rules for exchanging information over a network The need for a protocol should be obvious: it allows different computers from different vendors and with different operating characteristics to 'speak the same language'. Properties of Computer Networks: 1 a) Facilitate communications. Using a network, people can communicate efficiently and easily via email, instant messaging, chat rooms, telephone, video telephone calls, and video conferencing. b) Permit sharing of files, data, and other types of information. In a network environment, authorized users may access data and information stored on other computers on the network. The capability of providing access to data and information on shared storage devices is an important feature of many networks. c) Share network and computing resources. In a networked environment, each computer on a network may access and use resources provided by devices on the network, such as printing a document on a shared network printer. Distributed computing uses computing resources across a network to accomplish tasks. d) May be insecure. A computer network may be used by computer hackers to deploy computer viruses or computer worms on devices connected to the network, or to prevent these devices from normally accessing the network (denial of service). e) May be difficult to set up. A complex computer network may be difficult to set up. It may also be very costly to set up an effective computer network in a large organization or company. Why Networks a) Load Sharing: Both the program and data are transmitted to a remote computer to equalize the load between the two facilities. b) Message Service: A network can be used to handle interpersonal message transmissions. This type of service can also be used for educational services and conference activities. However, it is not an important motivation for a network of scientific computers. c) Data Sharing: The program is sent to a remote computer where a large data base exists. This type of operation will be particularly useful where data files are too large to be duplicated economically d) Program Sharing. e) Remote Service. Network Terminologies 1) Intranet: An intranet is a set of networks, using the Internet Protocol and IP-based tools such as web browsers and file transfer applications, that is under the control of a single administrative entity. That administrative entity closes the intranet to all but specific, authorized users. Most commonly, an intranet is the internal network of an organization. A large intranet will typically have at least one web server to provide users with organizational information. 2) Extranet: An Extranet is a computer network used outside the intranet. An extranet is a computer network that allows controlled access from the outside, for specific business or educational purposes. In a business-to business context, an extranet can be viewed as an extension of an organization\'s intranet that is extended to users outside the organization, usually partners, vendors and suppliers, in isolation from all other Internet users. 3) Local area network: A local area Network (LAN) is a network that connects computers and devices in a limited geographical area such as home, school, computer laboratory, office building, or closely positioned group of buildings. Each computer or device on the network is a node. 2 4) Wide area network: A wide area Network (WAN) is a computer network that covers a large geographic area such as a city, country, or spans even intercontinental distances, using a communications channel that combines many types of media such as telephone lines, cables, and air waves. A WAN often uses transmission facilities provided by common carriers, such as telephone companies. 5) Enterprise private network: An enterprise private network is a network built by an enterprise to interconnect various company sites, e.g., production sites, head offices, remote offices, shops, in order to share computer resources. 6) Virtual private network: A virtual private network (VPN) is a computer network in which some of the links between nodes are carried by open connections or virtual circuits in some larger network (e.g., the Internet) instead of by physical wires. The data link layer protocols of the virtual network are said to be tunneled through the larger network when this is the case. One common application is secure communications through the public Internet, but a VPN need not have explicit security features, such as authentication or content encryption. VPNs, for example, can be used to separate the traffic of different user communities over an underlying network with strong security features. Network topology: A network topology is the layout of the interconnections of the nodes of a computer network. Network topology signifies the way in which devices in the network see their logical relations to one another. The use of the term \"logical\" here is significant. That is, network topology is independent of the \"physical\" layout of the network. Even if networked computers are physically placed in a linear arrangement, if they are connected via a hub, the network has a Star topology, rather than a bus topology. In this regard the visual and operational characteristics of a network are distinct; the logical network topology is not necessarily the same as the physical layout. Networks may be classified based on the method of data used to convey the data, these include digital and analog networks. Common layouts are: 1) Bus Network: all nodes are connected to a common medium along this medium. 2) A star network: all nodes are connected to a special central node. 3) A ring network: each node is connected to its left and right neighbor node, such that all nodes are connected and that each node can reach each other node by traversing nodes left- or rightwards. 4) A mesh network: each node is connected to an arbitrary number of neighbors in such a way that there is at least one traversal from any node to any other. 5) A fully connected network: each node is connected to every other node in the network. 3 History of Internet In the late 1950\'s the Advanced Research Projects Agency (ARPA) was founded in the United States with the primary focus of developing information technologies that could survive a nuclear attack. (Internet History) In 1967 ARPA university and private sector contractors met with representatives of the Department of Defense to discuss possible protocols for sharing information via computers. In 1969, the U.S. Defence Department funded a project to develop a network, which can withstand the bombing. Basically, the idea was to develop a very secure network which can work even after a nuclear attack. This project was known as ARPANET. The proposed network was not supposed to have a central control---which would be an obvious target. It connected four sites at the University of California at Los Angeles, the University of California at Santa Barbara, Stanford Research Institute, and the University of Utah. Throughout the 1970\'s researchers concentrated on developing protocols for controlling networks, moving messages across a system of networks, and allowing for remote access to the networks. There were computers connected at about two dozen sites when the first email was sent in 1972, but the number of sites and messages soon mushroomed. By 1975 there were 63 sites. Ten years of research brought Local Area Ethernet Networks (LANs) and workstations were developed to get connected to LAN. These workstations and LANs were then connected to the ARPANET. For next decade the ARPANET grew and its decentralized features helped its rapid expansion. Computers connected to ARPANET used a standard or rule to communicate with each other. This standard used by ARPANET is known as NCP (National Control Protocol). Protocol is a network term used to indicate the standard used by a network for communication. But the passing time and rapid change in information technology suppressed NCP and brought TCP/IP (Transmission Control Protocol/Internet Protocol) in to the world of networking. TCP \"converts messages into streams of packets at the source, and they are reassembled back into messages at the destination. IP handles the dispatch of these packets. It handles the addressing, and makes sure that a packet reaches its destination through multiple nodes and even across multiple networks with multiple standards. This flexibility of TCP/IP to handle multiple networks with multiple protocols encourage other networks to get connected to ARPANET. Slowly the ARPANET became a massive network of networks and now it is known as 'Internet'. 4 The Internet has revolutionized the computer and communications world like nothing before. The invention of the telegraph, telephone, radio, and computer set the stage for this unprecedented integration of capabilities. The Internet is at once a world-wide broadcasting capability, a mechanism for information dissemination, and a medium for collaboration and interaction between individuals and their computers without regard for geographic location. The Internet represents one of the most successful examples of the benefits of sustained investment and commitment to research and development of information infrastructure. Commercial Development In 1963 during the early days of computers and six years before ARPANET, students at MIT developed the first computer game called Space War. It would be twenty years before the TCP/IP protocol stimulated the growth of various networks and nearly thirty years (1991) before the United States government opened the Internet to private enterprise (BBN Timeline), but this game foreshadowed the commercialization of the Internet. In the 1970\'s and 80\'s people who were online put out information about furniture and cars they wanted to sell. Debates raged about whether this was an appropriate use of the new research tool, the Internet, but when the Commercial Internet Exchange (CIX) was formed in 1991 the genie would not go back in the bottle. Commercial contractors have been involved in the development of ARPANET from its inception. As Tang and Teflon began as curiosities of the space program and later became common consumer products, so too have email, web research, and home shopping on the Web. It has only been ten years since the first relay between a commercial entity (MCI Mail) and the Internet was made. Since that time technologies have emerged that have fueled the growth of private enterprise on the Web. In 1992 Paul Linder and Mark McCahill at the University of Minnesota released Gopher, a tool that allowed researchers to retrieve specific data from myriad 8 locations. The next year Mosaic, a web browser, was developed at the University of Illinois by Netscape founder Marc Andreesen, the World Wide Web became a public the identification in-terms of User Login name and password of the FTP client. If one does not have an account in the remote FTP server, still he can connect to the server using anonymous login. Using anonymous login anyone can login in to a FTP server and can access public file archives, anywhere in the world, without having an account. One can easily Login to the FTP site with the username anonymous and e-mail address as password. The basic objectives of FTP are to give flexibility and promote sharing of computer programs, files and data to transfer data reliably and more efficiently over network to encourage implicit or indirect use of remote computers using Internet to shield a user from variations in file storage systems among hosts. The basic steps in an FTP session are: Start up your FTP client; by typing ftp on your system's command line/'C\>' prompt (or, if you are in a Windows, double-click on the FTP icon). Give the FTP client an address to connect to. This is the FTP server address to which the FTP client will get connected 5 Identify yourself to the FTP remote site by giving the Login Name Give the remote site a password Remote site will verify the Login Name/Password to allow the FTP client to access its files Look directory for files in FTP server Change Directories if required Set the transfer mode (optional); Get the file(s) you want; and Quit. Telnet (Remote Computing) Telnet or remote computing is telecommunication utility software, which uses available telecommunication facility and allows you to become a user on a remote computer. Once you gain access to the remote computer, you can use it for the intended purpose. The TELNET works in a very step by step procedure. The commands typed on the client computer are sent to the local Internet Service Provider (ISP), and then from the ISP to the remote computer that you have gained access. Most of the ISP provides facility to TELNET into your own account from another city and check your e-mail while you are travelling or away on business. The followings steps are required for a TELNET session Start up the TELNET program; Give the TELNET program an address to connect to (some really nifty TELNET packages allow you to combine steps 1 and 2 into one simple step!); Make a note of what the \"escape character\" is; Log in to the remote computer; Set the \"terminal emulation;\" Play around on the remote computer; and Quit. WORLD WIDE WEB (WWW) WWW is the acronym for the World Wide Web. It is also commonly known as 'The Web'. The WWW is a system that we use to access the Internet. The WWW is hypertext-based information retrieval tool, it uses the hypertext to access the various forms of information available on the world's different networks. One can easily surf the Web by jumping from one document to another using the links in those documents. These documents can be in many formats, such as text, graphics, animation, sound and latest is video. They may also be a combination of all these. All the information on Internet is presented to the user as a document or more popularly known as Web Page. All these Web Pages are link to each other or even to section within a Web Page. The Web Concepts 6 The Web was developed to be a pool of human knowledge, and human culture, which would allow collaborators in remote sites to share their ideas and all aspects of a common project. The Web consists of a vast assortment of files and documents that are stored on these computers and written in some form of Hyper Text Markup Language (HTML) that tells browsers how to display the information. The computers that store the files are called servers because they can serve requests from many users at the same time. Users access these HTML files and documents via applications called browsers. The main Web concepts are: Web Page The Web page is a space of information on the Internet that presents information about a particular person, business, or organization or cause. The Web consists of files, called Web pages (documents). It is containing links to resources (text, images, audios, videos, and other data), throughout the Internet Web Site Web site can be defined as a collection of web pages which are grouped together and usually connected together in various ways. Often called a \"web site\" or simply a \"site.\" The web site usually presents information about a particular person, business, organization or cause. Generally, there are two types of website styles, Static and Dynamic website: A static Website is one that has web pages stored on the server in the same form as the user will view them. A dynamic Website is one that does not have web pages stored on the server in the same form as the user will view them. Instead, the web page content changes automatically and/or frequently based on certain criteria. There are two meaning for dynamic website. The first is that the web page code is constructed dynamically, piece by piece. The second one is that the web page content displayed varies based on certain criteria. The criteria may be pre-defined rules or may be based on variable user input. The Web Terms Uniform Resource Locator (URL) It is the complete address of World Wide Web page and consists of three components that identifies where the web page is stored on the Internet. These parts are: the protocol, the site name, and the absolute path to the document or resource as shown in the following example 7 protocol name (e.g., HTTP) http:// The first thing the URL does is define the protocol that will be used for that particular transaction. The letters HTTP let the server know to use Hypertext Transfer Protocol, or get into "web mode." domain name/ hostname (servers address that a user wants to connect with), for example, www.google.com. www.example.com The next portion of the URL identifies the website by its domain name. In this example, the domain name is example.com. The "www." part at the beginning is the particular host name at that domain. For example, there might also be development.example.com, clients.example.com, and so on. File name is optional, implies the access to a file/directory into the principal webpage. /2012/samples/first.html This is the absolute path through directories on the server to the requested HTML document, first.html. The words separated by slashes are the directory names, starting with the root directory of the host. Example: http://www.icci.org/studies/ips.html. 1. Protocol: http. 2. Host computer name: www. 3. Second-level domain name: icci. 4. Top-level domain name: org. 5. Directory name: studies. 6. File name: ips.html. Several Top-level domain are common: com: commercial enterprise. edu: educational institution. gov: government entity. mil: military entity. net: network access provider. org: usually nonprofit organizations biz: Businesses pro: Professionals, such as doctors and attorneys Web hosting After we create a website, it is necessary to store it in a place where it is always available for users. We use Web hosting services/companies for this purpose. They own web servers that have the ability to store content. Search engine Search engines allow us to search in the Internet for information, images and other types of files stored in various locations available throughout the network. Search engines work according to certain algorithms that show the user relevant, requested search results. At first, information from the various websites is collected and stored and then analyzed to organize and save them in the database for future use. When a user enters an inquiry into the search engine, the database is organized by an index and the user is presented with results that 8 match best the entered search terms. Therefore, it is important to understand that by using the search engine one does not search the entire Internet but the search engine's database. Therefore, we might get different results each time we use different web engines. 4. Internet protocols TCP/IP protocol: TCP / IP: This protocol is the main protocol for Internet communication. It defines the rules that computers need to follow to communicate with other computers via a network. HTTP (Hypertext Transfer protocol): is a network protocol that ensures the exchange of almost all types of resources on the web. With resources, we mean files, pages, images, search results, etc. It is basically, the web browsers language to send requests to the server. There is also the HTTPS version, which is a secure and encrypted version for HTTP communications. FTP (File Transfer Protocol): is used to load (upload) or retrieve (download) files between the client and server communication, or between two computers on the Internet. In other words, this protocol is responsible for file transfer on the Internet. Internet Service Provider (ISP):Is an organization that provides individuals and other companies' access to the Internet and other related services such as e-mail. Web Design: Client-Server Architecture 1. Client-Server Architecture Computers on the Internet use client/server architecture. This means that the remote server machine provides files and services to the user local client machine. Web Server: A Web Server is a computer purposed to runs special serving software. That software \"serves\" HTML pages and the files associated with those pages when requested by a client, usually a Web browser. The computer is secured so that only authorized people can access it to make changes to the data, so, If a person is on the same network as the Web Server, he or she may be able to save the data directly onto the Web Server computer (if authorized). Server-side: JSP (Java Server Pages) ASP (Active Server Pages) 9 ASP.NET (next generation of ASP) PHP Phython Client: The Client (front end) or user side of the Web, it typically refers to the Web browser in the user\'s machine. It may also refer to plug-ins and helper applications that enhance the browser to support special services from the site. The term may imply the entire user machine or refer to a handheld device that provides Web access. Client-side: HTML / XHTML (Extensible Hyper Text Markup Language) CSS (Cascading Style Sheets) JavaScript / VBScript (client-side scripting). Web Browsers: Generally, a web browser is a software application or program for retrieving, displaying, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier (URI) and may be a web page, image, video, or other piece. 10 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 20 Ordered lists: Ordered lists, in contrast to unordered lists, maintain a distinct order or sequence and are visually represented with numbers, letters, roman numerals, or alternative symbols. The construction of ordered lists in HTML involves employing the \`** **\` tag to define the list, while each individual item within the list is designated by the \`** - **\` tag. For example:** 1. **First step** 2. **Second step** 3. **Third step** **This code will produce the following output: 1. First step 2. Second step 3. Third step Description lists: Description lists in HTML are structured using the \`\` (description list) tag. Each term in the list is defined using the \`** **\` (definition term) tag, and its corresponding description is provided using the \`** **\` (description) tag. This HTML structure is particularly useful for creating lists that define or explain terms, concepts, or processes. The \`\`, \`** **\`, and \`** **\` tags contribute to clear and organized content presentation on web pages. For example:** **HTML** **A markup language that is used to create web pages** **CSS** **A style sheet language that is used to style web pages** **JavaScript** **A scripting language that is used to add interactivity and functionality to web pages** **21 22 This code will produce the following output: HTML : A markup language that is used to create web pages CSS : A style sheet language that is used to style web pages JavaScript : A scripting language that is used to add interactivity and functionality to web pages. HTML NESTED LIST WHAT IS A NESTED LIST: A nested list is a list that contains another list as one of its items. A nested list can be useful for creating outlines, hierarchies, menus, or other structures that require. There are two types of lists in HTML: ordered and unordered. Ordered lists use numbers or letters to indicate the order of the items, while unordered lists use bullets or other symbols. To create a nested list, it needs to use the two types of HTML elements:** **and** 1. **. The** **element stands for unordered list, which means the items are not numbered or ordered. The** - **element stands for list item, which represents a single item in a list.** - **Animals** - **Mammals** - **Dog** - **Cat** - **Elephant** - **Birds** - **Eagle** - **Parrot** - **Penguin** - **Fish** - **Shark** - **Salmon** - **Goldfish** **23** - **Plants** - **Flowers** - **Rose** - **Lily** - **Sunflower** - **Fruits** - **Apple** - **Banana** - **Orange** **What are the rules for creating a nested list: When building a nested list, there are a few guidelines that must be adhere to.: A nested list must be inside a** - **element of the parent list. A nested list must have the same type as the parent list. For example, we cannot nest an ordered list (** **) inside an unordered list (** **). A nested list can have any number of levels, but it is recommended to keep it simple and clear for readability and accessibility. A nested list can have any content inside its** elements, such as text, images, links, or other HTML elements. Benefits of using a nested list: A nested list can have several benefits, such as: It can help organize and structure the information in a logical and hierarchical way. It can make the content easier to read and understand for the users and the browsers. It can improve the SEO (search engine optimization) of the web page by providing keywords and headings for the search engines to index. It can enhance the accessibility and usability of the web page by providing navigation and landmarks for the screen readers and keyboard users. WHAT IS HYPERLINK: A hyperlink, often known as a link, is a way of connecting two web sites or resources on the internet. A hyperlink allows the user to navigate to a new place by clicking on a word, phrase, image, or other element. A hyperlink can also launch an application or open a new browser window or tab. Hyperlink are created using the HTML element, also known as the anchor element. The element has an attribute called href, which stands for hypertext reference and the href attribute specifies the URL (uniform resource locator) of the destination page or resource. The content inside the element is the link text, which is the part that will be visible and clickable to the user for example [Visit Google](https://www.google.com) and by default, hyperlinks have the following appearance in most browsers: An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red Sometimes, the user may want to open the linked page or resource in a different browser window or tab, instead of the current one. This can be useful for external links, pop-up windows, or web applications. To change the target of a hyperlink, the user need to use the word target attribute of the element. The target attribute can have one of the following values: self -- Default: Opens the linked page in the same window or tab as the current one. blank - Opens the linked page in a new window or tab. parent - Opens the linked page in the parent frame of the current one. top - Opens the linked page in the top-level frame of the current one. For example, the following HTML code creates a hyperlink that opens the MDN Web Docs website in a new window or tab: [Visit MDN Web Docs](https://developer.mozilla.org). Aside from linking to online sites or resources, several forms of hyperlinks may be created such as: 24 Image links - To utilize a picture as a link, the user just inserts the**Error! Filename not specified.** element inside the element. For example: [alt=\"MDN Web Docs Logo\"\>](https://developer.mozilla.org). [Send imuhammedkolawole\@gmail.com](mailto:[email protected]). email to Telephone links - To create a link that opens the user's phone app and lets the user dial a number, its uses the tel: protocol in the href attribute, followed by the phone number. For example: [Call 08038458590](tel:08038458590) Download links - To create a link that prompts the user to download a file, it use the download attribute of the element, and optionally specify a new file name. For example: [Download resume](resume.pdf). rel - Specifies the relationship between the current page and the destination page or resource. It can be one or more of the following values: alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, noopener, prev, search, or tag. What is an Absolute and Relative Hyperlinks: An absolute hyperlink is a hyperlink that contains the full address of the destination file or of the web site. E.g Visit Kwasu this hyperlink contains the full address of the destination web site, including the protocol (https://) and the domain name (www.kwasu.com.ng). It will open the Kwasu home page in the same window or tab as the current document. The link text is "Visit Kwasu", which is the part that will be visible and clickable to the user. Absolute hyperlinks are useful when linking to a web page or file that is outside your domain. Relative hyperlinks, on the other hand, a relative hyperlink is a hyperlink that contains an address that is relative to the address of the destination file. The address of the destination file is also known 25 as the hyperlink base. For example, a document has the following hyperlink base: C:\\\\Documents and Settings\\\\ Username \\\\My Documents. A document that is named "Sales.doc" is located at the following file path: C:\\\\Documents and Settings\\\\ Username \\\\My Documents\\\\April\\\\Sales.doc. The relative hyperlink to this document contains only the relative address to Sales.doc. Therefore, the relative hyperlink contains the following address: April\\\\Sales.doc. What is the difference between absolute and relative hyperlinks: The main differences between absolute and relative hyperlinks are: Absolute hyperlinks contain the full address of the destination file or web site, such as https://www.bing.com. While Relative hyperlinks contain an address that is relative to the current file or web site, such as images/logo.png. Absolute hyperlinks are useful for linking to external resources or web pages that are outside your own domain or web site. While Relative hyperlinks are useful for linking to internal resources or web pages that are within your own domain or web site. Absolute hyperlinks make your web site or file independent and easy to update, but they can be hard to maintain and debug while Relative hyperlinks make your web site or file portable and easy to move or copy, but they can cause duplicate content or broken links. What is an Image HTML: The HTML image **Error! Filename not specified.**tag serves the purpose of embedding an image into a web page rather than being physically inserted, images are linked to web pages and the **Error! Filename not specified.**tag creates a space to hold the referenced image. The **Error! Filename not specified.**tag is void of content and solely contains attributes; it does not require a closing tag. Two essential attributes of the **Error! Filename not specified.**tag are src, which specifies the image\'s file path, and alt, which provides alternative text for the image. Image attributes refer to the properties that alter the appearance and behavior of an image element in HTML. These attributes are specified within the **Error! Filename not specified.**tag, which is utilized for embedding images in web pages. Common image attributes include: 26 src - A source image in HTML refers to an image that is referenced by the src attribute of the **Error! Filename not specified.**tag. This particular tag is utilized to embed an image within a web page. The source image can be indicated through a URL, a relative path, or a data URL. Additionally, the **Error! Filename not specified.**tag necessitates the inclusion of an alt attribute, which serves to provide alternative text for the image in the event that it cannot be displayed. For example: html Alt: In HTML, the representation of an alternative image is accomplished by utilizing the \"alt\" attribute situated within the \"img\" (image) element. The \"alt\" attribute functions to supply alternative text that is exhibited in the event that the image is unable to be loaded or in the circumstances where the user utilizes a screen reader. Additionally, it serves as a descriptive element for the image, thereby enhancing accessibility and furnishing users who may lack visual capability with substantial content. For example,. width and height - The dimensions of an image in HTML are determined by the width and height attributes, which indicate the size of the image in pixels. The width attribute governs the horizontal dimension, while the height attribute governs the vertical dimension. For instance, the HTML code renders an image with a width of 500 pixels and a height of 600 pixels. It is advisable to always designate both the width and height attributes for images. This aids the browser in reserving the appropriate space for the image and prevents any alteration of the page layout during the loading process. Nevertheless, should the width and height attributes remain unspecified, the browser will utilize the natural size of the image, which corresponds to the actual size of the image file. style - The image style in HTML pertains to a methodology employed to modify the visual and interactive characteristics of an image element by leveraging CSS. This can be accomplished through the utilization of the style attribute or by employing a style sheet to apply diverse CSS properties, 27 such as width, height, border, filter, among others. To illustrate, a rounded image can be generated by utilizing the border-radius property. For instance,. Title - An HTML image title is a technique used to incorporate a tooltip containing text into an image element. This tooltip is a small pop-up box that appears when the mouse pointer hovers over the image. Its purpose is to provide additional information or context about the image. There are two common methods of including an HTML image title in HTML: utilizing the title attribute within the **Error! Filename not specified.**tag. The value assigned to this attribute can be any string. For example:. Utilizing a element for the purpose of structuring a photograph within a document, and employing a element to define a descriptive caption for said photograph. The caption shall be positioned beneath the image, while simultaneously being displayed as a tooltip when the cursor hovers over the image. As an illustration: This is a picture of a cat. id and class - Specify the identifier and the class name of the image, which can be used for styling or scripting purposes. For example, assigns the id "smiley1" and the class "smiley" to the image, which can be referenced by CSS selectors or JavaScript functions. loading - The loading attribute plays a crucial role in determining the loading behavior of an image within a web page. It offers two distinct options: \"eager\" and \"lazy\". By default, the \"eager\" value is assigned, which signifies that the image should be loaded promptly. Conversely, the \"lazy\" value instructs the browser to defer the image loading until it is near the user\'s viewport. To illustrate, 28 consider the following code snippet:. This particular example demonstrates the utilization of the \"lazy\" value, delaying the image loading until the user has scrolled down the page to view it. This approach can significantly optimize the performance and overall user experience of the web page. srcset and sizes - The element contains a srcset attribute that specifies the URL of the image file, and a media attribute that specifies the media condition. The browser will select the first element that matches the current media condition, and utilize the corresponding image file for the **Error! Filename not specified.**element. In the event that none of the elements match, the browser will employ the default image file specified by the src attribute of the **Error! Filename not specified.**element. For instance, provides three image files with different formats: WebP, JPEG, and PNG. The browser will employ the WebP image if it is compatible, otherwise it will utilize the JPEG image. If neither of them is supported by the browser, the PNG image will be used. This can enhance the compatibility and efficiency of the webpage across various browsers and devices. picture and source - In HTML, the element serves the purpose of presenting various iterations of an image based on factors such as the browser, screen size, or device pixel ratio. Within the element, the element is employed to indicate one or multiple image sources along with their corresponding descriptors. Conversely, the **Error! Filename not specified.**element functions as a fallback image in case none of the sources prove to be suitable. An illustrative instance of utilizing the and elements to showcase a high-density and standard-resolution image is presented below. 29 What is an illustrative image in Html: An illustrative image serves the purpose of enhancing the visual appeal or conveying meaning within a web page. This is achieved by embedding it into the HTML document through the **Error! Filename not specified.**element, which necessitates the inclusion of two attributes: src and alt. The src attribute denotes the URL of the image, while the alt attribute offers alternative text to describe the image in situations where it cannot be viewed or accessed by certain users. To illustrate, consider the following example:. Illustrative images can take various forms and may include photographs, diagrams, charts, infographics, icons, and other visual elements. They play a crucial role in making web content more engaging and understandable for users. Examples of illustrative images in HTML might include: Photographs: Adding real-world images to illustrate concepts or provide visual examples. , Diagrams and Charts: Using graphical representations to explain data or processes, etc. What is a background Image in Html: In HTML, a background image refers to an image that is set as the background of an HTML element or the entire web page. This image is used to enhance the visual appeal of the webpage by providing a backdrop or atmosphere. Background images are commonly applied to elements such as the body of the HTML document, a section, a div, or any other container element. To set a background image in HTML, the CSS (Cascading Style Sheets) background-image property is used. Here is a basic example: