WebTech

• Web technology

  All the tools and systems used to create and operate websites and web-based applications
• Web technology includes

  • Software
  • Hardware
  • Programming languages
  • Standards
• Web technology

  • Covers web design, development, servers, browsers, e-commerce, and content management systems
  • Aims to enhance the functionality, speed, and user experience of web-based applications
• World Wide Web (WWW)

  Enables users to access information through web browsers
• Web servers

  Process requests and send responses to web browsers
• Web browsers

  Tools used to view web pages
• HTML

  Language for structuring and displaying content on web pages
• CSS

  Styles web pages by adding colors, fonts, and styles
• JavaScript

  Adds interactive features and animations to web pages
• Backend Technologies

  Tools for server-side development of web applications
• Database Systems

  Store and retrieve data used in web applications
• Development of ARPANET by the United States Department of Defense to share information

  1960s
• Tim Berners-Lee's idea of hypertext system led to the creation of the World Wide Web

  1989
• Berners-Lee developed the first web browser, leading to the establishment of the first web server

  1991
• Increased usage of web browsers like Netscape Navigator and Internet Explorer

  Mid-1990s
• Introduction of interactive web technologies like PHP, ASP.NET, and JavaScript

  Late 1990s
• Focus on accessibility and user-friendliness with HTML and CSS

  Early 2000s
• Emergence of social media, mobile devices, and cloud computing, transforming web usage

  Late 2000s and 2010s
• Ongoing evolution with advancements in artificial intelligence, virtual/augmented reality, and the Internet of Things

  Today
• Protocols

  Rules and procedures necessary for successful communication between devices
• Types of protocols

  • Different types of protocols are used for various forms of communication
• Standards

  Rules for data communication required for exchanging information among devices, established by organizations like IEEE, ISO, and ANSI
• Types of standards

  • De Facto Standard
  • De Jure Standard
• Search engine indexing

  Organizing and storing online content in a central database (index) to analyze and serve it to users on Search Engine Results Pages (SERPs)
• How a search engine indexes a site

  Crawlers investigate links and content before indexing
• Social media

  Websites and applications focusing on communication, community input, content-sharing, and collaboration
• Social media for businesses

  • Used to market products, connect with customers, and gather feedback
  • Businesses can respond to customer feedback promptly and maintain customer relationships
• HTML5 semantic elements

  Tags that have a specific meaning or purpose, such as <header>, <nav>, <section>, <article>, <footer>, and more
• HTML5 semantic elements

  • Replace the generic <div> and <span> tags used in HTML4
  • Tell browsers and search engines what kind of content is inside them and how it relates to the rest of the page
• Examples of HTML5 semantic elements

  • <header>
  • <nav>
  • <section>
  • <article>
  • <footer>
• HTML5 semantic elements

  Elements that convey meaning beyond just presentation, such as <header>, <nav>, <main>, <section>, <article>, <footer>, etc.
• Semantic markup

  • Using HTML elements that convey meaning beyond just presentation
  • Improves accessibility by providing clear structure and context to assistive technologies
• ARIA (Accessible Rich Internet Applications)

  Attributes that enhance the accessibility of web content for users of assistive technologies
• Example of using aria-label attribute

  • <button aria-label="Add to Cart">+</button>
• Accessibility testing tools

  • Help developers identify and address accessibility issues in web content
  • Examples: WAVE, Axe by Deque, Lighthouse, Accessibility Insights
• HTML layout

  The structure that helps the user navigate through web pages easily
• HTML layout elements

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <footer>
  • <details>
  • <summary>
• Divs vs Spans

  • Divs - Block-level elements used for grouping and organizing content
  • Spans - Inline elements used for applying styles or adding semantic meaning to a specific part of text
• Block vs Inline

  • Block-level elements start on a new line and take up the full width available
  • Inline elements do not start on a new line and only take up as much width as necessary
• CSS Box Model

  A fundamental concept in web design that describes the structure of HTML elements, including content, padding, border, and margin