Lecture-1.pdf

Introduction to Web Concepts ◦ Introduction to Web Concepts ◦ Web Design Terminologies ◦ History of the Internet ◦ History of the World Wide Web (WWW) ◦ W3C and MDN Standards ◦ Accessing the Web ◦ Web Browser User Interface ◦ Web Browser Elements ◦ Kinds of Web Browsers Definition of the Web ◦ The...

Introduction to Web Concepts ◦ Introduction to Web Concepts ◦ Web Design Terminologies ◦ History of the Internet ◦ History of the World Wide Web (WWW) ◦ W3C and MDN Standards ◦ Accessing the Web ◦ Web Browser User Interface ◦ Web Browser Elements ◦ Kinds of Web Browsers Definition of the Web ◦ The World Wide Web, often referred to as the "Web," is a global system of interconnected documents and resources linked by hyperlinks and accessible via the internet. ◦ It's not to be confused with the internet itself, which is the broader network infrastructure connecting various devices and networks worldwide. Importance of Understanding Web Concepts ◦ In today's digital landscape, the Web is a cornerstone of communication, information sharing, commerce, and entertainment. ◦ Understanding the foundational concepts of the Web is crucial for several reasons. ◦ Facilitates Effective Communication ◦ Digital Literacy ◦ Professional Opportunities ◦ Empowerment Through Creation ◦ Accessibility and Inclusivity ◦ Navigating the Digital Era HTML (Hypertext Markup Language) ◦ HTML (Hypertext Markup Language) is the language used to create and structure the content of web pages. It uses special codes called "tags" to define different elements like headings, paragraphs, images, and links, giving structure and meaning to the information displayed on a website. Structure and Elements ◦ HTML provides a structured way to define the layout of a webpage. ◦ Elements like headings, paragraphs, lists, and images help organize and present content. Tags and Attributes ◦ HTML uses tags to define elements. ◦ Tags can have attributes that provide additional information or modify the behavior of an element.  CSS (Cascading Style Sheets) ◦ CSS enhances the presentation of web content. ◦ It's used to apply styles and layouts to HTML elements. Styling and Presentation ◦ CSS allows designers to control the colors, fonts, spacing, and overall visual aesthetics of a webpage. ◦ Styles can be applied to specific elements or classes. Selectors and ◦ Selectors target specific HTML elements for styling. Properties ◦ Properties define how an element should look, such as color, size, and positioning. JavaScript ◦ JavaScript adds interactivity and dynamic behavior to web pages. ◦ It's a versatile programming language for both front-end and back-end development. Interactivity and Behavior ◦ JavaScript allows users to interact with elements on a webpage. ◦ Examples include form validation, buttons, sliders, and animations. Functions and Events ◦ JavaScript uses functions to define reusable blocks of code. ◦ Events trigger specific actions when users interact with the webpage, such as clicking a button. Integration of HTML, ◦ HTML, CSS, and JavaScript work together to create rich web experiences. CSS, and JavaScript ◦ HTML structures content, CSS styles it, and JavaScript adds behavior. Development of Computer Networking: ◦ The history of the internet begins with the development of computer networking, which laid the foundation for the interconnected global network we know today. ◦ Early Concepts: In the 1960s, researchers explored the idea of connecting computers to share information and resources. ARPANET and the Birth of the Internet ◦ The Advanced Research Projects Agency Network (ARPANET) played a pivotal role in the birth of the internet. It was the first network to implement key concepts that later became the foundation of the internet. 1. ARPANET: In 1969, ARPANET, funded by the U.S. Department of Defense's Advanced Research Projects Agency (ARPA), connected four major research universities. This marked the creation of the first operational packet- switched network. 2. Packet Switching: ARPANET introduced packet switching, a method where data is broken into packets and sent across the network independently. This approach proved more robust and efficient than circuit-switched networks. 3. Email and Communication: In the early 1970s, ARPANET engineers developed email and protocols for sending and receiving messages across the network. Evolution of Internet Protocols ◦ The evolution of internet protocols, particularly the development of TCP/IP, standardized the communication protocols that enabled disparate networks to interconnect and form the modern internet. 1. TCP/IP: Transmission Control Protocol/Internet Protocol (TCP/IP) was developed in the 1970s and became the fundamental protocol suite for networking. It allowed different networks to communicate with each other seamlessly. 2. TCP/IP Adoption: By the early 1980s, TCP/IP had replaced various other networking protocols, leading to the creation of a unified and interconnected network of networks. 3. Expansion and Commercialization: In the 1980s, the internet expanded beyond academia and research institutions. The National Science Foundation (NSF) established the NSFNET, a high-speed network that played a crucial role in the internet's growth. Evolution of Internet Protocols 4. World Wide Web: In the late 1980s and early 1990s, the World Wide Web (WWW) was developed by Tim Berners-Lee. It introduced hypertext and a user-friendly interface, making the internet accessible to a broader audience. 5. Global Expansion: Throughout the 1990s, the internet rapidly expanded globally. Internet Service Providers (ISPs) emerged, providing access to individuals and businesses. 6. Dot-com Boom: The late 1990s saw a surge in internet-related businesses and investments, leading to the dot-com boom and subsequent bust. Invention of the World Wide Web ◦ Tim Berners-Lee is a British computer scientist known for inventing the World Wide Web, a revolutionary system that transformed the way we access and share information on the internet. ◦ Tim Berners-Lee was born on June 8, 1955, in London, England. ◦ He showed an early interest in electronics and computers, building his own computer using spare parts. ◦ While working as a software engineer at CERN (European Organization for Nuclear Research) in Switzerland, Berners-Lee proposed a system to manage and share information among researchers globally. ◦ In 1989, he wrote a proposal for what he called the "Mesh" (later renamed the World Wide Web) to address the challenge of sharing and accessing information across different computer systems. ◦ Berners-Lee's proposal introduced key concepts, including hypertext, URLs, and HTML, that formed the foundation of the modern web. ◦ He developed the first web browser, "WorldWideWeb," and the first web server software. He also created the first website, which explained the concepts of the web and how to use it. Web 1.0: The Static Web ◦ Web 1.0, also known as the "Read-Only Web," was the early stage of the web. ◦ Websites were static, offering limited interaction, and were primarily used for sharing information. ◦ One-way communication: Websites presented information to users without much interaction. ◦ Limited user participation: Users could consume content but had little ability to contribute.  Web 2.0: The Interactive Web ◦ Web 2.0 marked a shift to more dynamic and interactive online experiences. ◦ It introduced user-generated content and social networking. ◦ User-generated content: Platforms like blogs, social media, and wikis allowed users to create and share content. ◦ Collaboration: Web 2.0 fostered online communities and encouraged collaboration among users. Impact on Communication ◦ Web 1.0: Communication was mostly one- way, from the content creator to the audience. ◦ Web 2.0: Communication became more interactive and participatory, enabling conversations and discussions.  Impact on Information Sharing ◦ Web 1.0: Information sharing was limited to established sources such as websites and news outlets. ◦ Web 2.0: Information sharing became democratized, with individuals able to share their perspectives and expertise. Beyond Web 2.0: The Evolving Web ◦ The web continues to evolve with advancements like Web 3.0 and the Semantic Web. ◦ These developments focus on enhancing machine understanding of web content. W3C (World Wide Web Consortium) ◦ The World Wide Web Consortium (W3C) is an organization that helps make the internet work better by creating and promoting guidelines and standards for how websites and web technologies should be built. Imagine it as a group of experts who work together to make sure the web is organized, efficient, and accessible for everyone. Definition and Purpose of W3C ◦ The W3C is an international community where member organizations work together to develop web standards. ◦ Its purpose is to ensure the long-term growth of the Web.  The W3C establishes guidelines for HTML, CSS, and other web technologies. Role in Setting Web Standards It aims to make sure that web technologies work well together, promoting a cohesive online experience. MDN (Mozilla Developer Network) ◦ The Mozilla Developer Network (MDN) is a helpful resource for people who want to learn about web development. It's like a big library full of guides, tutorials, and information that can teach you how to build websites and web applications. Online Resource for Web Developers ◦ MDN offers a comprehensive platform for web developers to access information on HTML, CSS, JavaScript, and more. ◦ It includes guides, references, and examples to aid developers at all skill levels. Documentation and Tutorials ◦ MDN provides detailed documentation on web technologies and their features. ◦ Tutorials and code samples help developers learn and implement best practices. Web Browsers ◦ Web browsers are our gateway to the web. ◦ They allow us to view and interact with websites and web applications. ◦ A web browser is a software application that retrieves, renders, and displays web content.  ◦ Web browsers interpret HTML, CSS, and JavaScript to Role in Rendering render web pages. Web Content ◦ They ensure that text, images, videos, and interactive elements are displayed correctly. URLs (Uniform Resource Locators) ◦ URLs are the addresses used to locate resources on the web. ◦ They provide a way to navigate between different web pages and websites. 1. 1. Structure and Components ◦ A URL consists of several parts: protocol, domain name, path, and possibly query parameters. ◦ Example: https://www.example.com/blog/article?id=123 2. 2. Navigating the Web Using URLs ◦ URLs allow us to access specific web pages or resources by entering them into a browser's address bar. ◦ Clicking on links also triggers the browser to load new URLs. HTTP (Hypertext Transfer Protocol) ◦ HTTP is the foundation of data communication on the web. ◦ It governs how data is exchanged between clients (browsers) and servers. Communication Between Clients and Servers ◦ HTTP facilitates communication by sending requests from clients to servers and receiving responses in return. ◦ This communication allows browsers to retrieve web content. Request and Response Cycle ◦ When a browser requests a web page, it sends an HTTP request to the server. ◦ The server processes the request and sends back an HTTP response containing the requested content.  Address Bar Navigation Button Web Browser User Interface Tabs and Windows Bookmarks and Favorites  Address Bar ◦ The address bar is a crucial tool in web browsers. ◦ It enables users to enter URLs and perform web searches. ◦ The address bar displays the URL of the current web page. ◦ It also serves as a search bar, allowing users to perform quick searches without visiting a search engine's homepage.  Navigation Buttons ◦ Navigation buttons help users move between web pages. ◦ Back, Forward, Reload, Home ◦ The back button takes users to the previously visited page. ◦ The forward button moves users forward in their browsing history. ◦ The reload button refreshes the current page. ◦ The home button typically takes users to their designated homepage.  History and Page Navigation ◦ Users can access their browsing history to revisit previously viewed pages. ◦ Navigation buttons enhance the user experience by providing quick access to important functions.  Tabs and Windows ◦ Tabs and windows enable efficient multitasking while browsing. 1. Managing Multiple Web Pages ◦ Tabs allow users to open multiple web pages within the same browser window. ◦ This feature streamlines navigation and reduces clutter. 2. Benefits of Tabbed Browsing ◦ Tabbed browsing improves organization and productivity. ◦ Users can switch between open tabs seamlessly and compare information easily.  Bookmarks and Favorites ◦ Bookmarks and favorites help users save and access important web pages. ◦ Saving and Organizing Web Pages  Toolbar Web Browser Menus Elements Status Bar Toolbar ◦ The toolbar is a dynamic space for quick access to browser functions. ◦ The toolbar can be customized to include frequently used functions such as back, forward, and bookmarks. ◦ This customization streamlines browsing by placing essential tools at your fingertips. ◦ Users can add or remove items from the toolbar based on their preferences. Menus ◦ Menus offer a range of functions and options beyond the immediate view. ◦ Menus provide access to functions like history, settings, extensions, and more. ◦ Dropdown menus organize options in a hierarchical manner for easy navigation.  Status Bar ◦ The status bar conveys important information about web pages ◦ The status bar displays the destination URL when hovering over a link. ◦ It also indicates the progress of page loading, helping users gauge load times. ◦ The status bar shows security indicators, such as a padlock icon, for secure connections. Kinds of Web Browsers Google Chrome Mozilla Firefox Apple Safari Microsoft Edge Google Chrome ◦ Google Chrome is a widely used web browser known for its speed and simplicity. ◦ It's favored for its integration with Google services and expansive extension library. Mozilla Firefox ◦ Mozilla Firefox emphasizes privacy and customization. ◦ It offers a range of extensions and a strong commitment to open-source principles. Apple Safari ◦ Apple Safari is the default browser for Apple devices. ◦ It's known for its performance optimization on macOS and iOS. Microsoft Edge ◦ Microsoft Edge is designed for speed and productivity. ◦ It's integrated with Microsoft features and offers unique tools like Cortana. Characteristics and Features 1. Performance and Speed ◦ Different browsers prioritize speed through various optimizations. ◦ Factors like efficient memory usage and rendering engines contribute to a fast browsing experience. 2. User Interface and Customization ◦ Browsers offer different user interfaces and customization options. ◦ Users can tailor their browsers to match their preferences in terms of appearance and functionality. 3. Security and Privacy Options ◦ Security features vary, with some browsers focusing on enhanced privacy settings. ◦ Options like built-in tracking protection and incognito mode contribute to a more private browsing experience. Characteristics and Features 4. Cross-Platform Availability ◦ Browsers that are available on multiple platforms provide seamless transitions between devices. ◦ Users can sync bookmarks, history, and even open tabs across devices.. 5. Developer Tools and Extensions ◦ Developer tools and extension libraries cater to developers and users alike. ◦ Extensions enhance functionality and allow customization based on individual needs.