Introduction to the Internet, Web, and Web Technologies aaLearning Objectives + Explore the history of the Internet, the Web, & HTML: *Use basic terminology correctly: *Discuss ongoing trends in web development: “Articulate what HTML, CSS, and JavaScript a Photo by Markus Winker on UnsplashIntroduction + Overview of Lecture Content: We'll cover the history of the Internet, the evolution of the Web, and key web technologies including HTML, CSS, and JavaScript. + Importance of Understanding Web Technologies: Understanding web technologies is essential as it forms the foundation for more advanced topics in web development. *Brief Introduction to the Evolution of the Internet and the Web: A quick look at how the Internet and the Web have evolved from their Photo by Goran Ws on Unepash inception to the present day.The Origins of the Internet + 1960s: Development of ARPANET: ARPANET, developed by the U.S. Department of Defense, was the first network to use packet switching and laid the groundwork for the modern Internet + 1970s: TCP/IP Protocols Established: TCP/IP became the standard networking protocol, enabling different networks to communicate with each other and forming the foundation of the Internet. * 1980s: Expansion and Rise of Email: The 1980s Photo by Museums Victoria on Unsplash_ saw the expansion of networks, connecting more universities and institutions, and the rise of email as a primary means of communicationThe Birth of the World Wide Web +1989: Tim Berners-Lee Invents the Web: Tim Berners-Lee developed the World Wide Web at CERN, introducing the concept of hypertext, which allowed for easy navigation between linked documents. + Introduction of HTML: HTML was created as a way to structure and link documents on the Web, making it possible to create and share information easily. + Evolution of the First Web Browser: The first web browser, named WorldWideWeb, was developed by Berners-Lee and allowed users to access and navigate the web. Photo by Museums Vitoria on UneplashWeb Development Milestones + 1990s: Introduction of Web Browsers: The launch of web browsers like Mosaic and Netscape Navigator made the World Wide Web accessible to a wider audience, significantly increasing its popularity. * Growth of Websites and the Dot-Com Boom: The 1990s saw an explosion in the number of websites and the rapid commercialization of the web, leading to the dot-com boom. + Introduction of CSS and JavaScript: CSS and . JavaScript were introduced to enhance the Photo by Museums Victoria on Unsplash styling and interactivity of web pages, allowing for more sophisticated and user-friendly designs.Key Terminology +Internet: A global network of interconnected computers that allows for communication and data sharing across the world, *Web: A system of interlinked hypertext documents that can be accessed via the Internet. It's one of the services that runs on the Internet. * HTML: Hypertext Markup Language, used to structure web content. * CSS: Cascading Style Sheets, used to style the content of web pages, including layout, colors, and fonts. + JavaScript: A programming language used to create interactive effects within web browsers.Internet vs. Web + Internet: Hardware Infrastructure: The Internet is a global network of interconnected computers and servers that enables communication and data exchange. *Web: A Service on the Internet: The Web, or World Wide Web, is one of the services that runs on the Internet, providing access to interlinked hypertext documents and multimedia * Analogy: Road Network vs. Cars: Think of the Internet as the road network and the Web as the cars that travel on it. The Internet provides the infrastructure, while the Web is one of the services that uses it. Photo by Jordan Harrison on UnsplashThe Role of HTML + Structure of a Web Page: HTML (HyperText pcnperer yg my etsy a Markup Language) provides the structure of a web page, defining elements such as headings, Oe paragraphs, links, and images. eee ie oa + Importance of Semantic HTML: Semantic HTML elements, like » Example: Basic HTML Structure: A simple HTML document starts with a declaration, followed by, , and tags that organize the content. Photo by Datahjelpen AS on UnsplashIntroduction to CSS + Purpose: Styling Web Content: CSS (Cascading Style Sheets) is used to style the appearance of web pages, including layout, colors, and fonts, It Separates content from design, allowing for greater flexibility and control. * Basic Syntax: Selectors, Properties, and Values: CSS is written with rules that consist of selectors, Which target HTML elements, and declarations, which specify the properties and values to be applied, + Example: Changing Background Color: For instance, you can change the background color of a web page by using the CSS rule: body { background- color: lightblue; }. Photo by Campaign Creators on UnsplashBasics of JavaScript +Role: Adding Interactivity to Web Pages: JavaScript is a programming language that allows developers to add interactivity and dynamic content to web pages, such as form validation, animations, and user-triggered events. *Basic Concepts: Variables, Functions, and Events: JavaScript uses variables to store data, functions to execute code blocks, and events to trigger actions based on user interactions. + Example: Displaying an Alert Message: A Photo by apoory mital on Unsplash simple example of JavaScript is using the alert() function to display a message: alert('Hello, world!’),. This code pops up an alert box with the specified message.Ongoing Trends in Web Development + HTMLS: Enhanced Multimedia Support and APIs: HTMLS introduces new features like native support for audio and video celements, as well as APIs for building more complex web applications. + Responsive Design: Creating Mobile-Friendly, Adaptive Web yes: Responsive design ensures that websites adapt to various screen sizes and devices, providing an optimal user experience on desktops, tablets, and smartphones, + Single Page Applications (SPAs): Using Frameworks like React and Angular: SPAs load a single HTML. page and dynamically update content as the user interacts with the app, offering a smoother and faster user experience. + Web Accessibility: Ensuring the Web Is Usable for All: Web Photo by Myriam Jesier on Unsplash accessibility focuses on making websites usable for people with disabilities by following best practices like providing at text for, images and keyboard navigation.Discussion: The Future of Web Development + Impact of Ongoing Trends: Discuss how trends like HTMLS, responsive design, and SPAs are shaping the future of web development, and their potential long-term impact on the industry. * Open Floor for Student Opinions: Encourage students to share their thoughts on where they think web development is headed and what trends they believe will have the most significant impact. + Prompt: ‘What trend do you think will have the biggest impact in the next 5 years?': Use Photo by NordWood Themes on Unsplash this prompt to spark discussion and get students thinking about the future directions of, web technology.