Web Technology - UNIT I - Introduction to Internet, WWW, and Web 2.0

Self Study January 10, 2024

 Introduction to Internet, WWW, and Web 2.0



✔Introduction to Internet, WWW, and Web 2.0

The Internet, World Wide Web (WWW), and Web 2.0 are foundational concepts. Web 2.0 refers to a more interactive, collaborative web experience.

✔Web Browsers

Web browsers like Chrome, Firefox, Safari, and Edge interpret HTML, CSS, and JavaScript to render web pages.

✔Web Protocols and Web Servers

  • HTTP Protocol: Hypertext Transfer Protocol governs how data is exchanged on the web.
  • Web Servers: Apache, IIS are examples that serve web content.

✔Web Design Principles and Website Structure

  • Design Principles: Consistency, usability, accessibility, and responsiveness.
  • Structure: Organizing content via HTML elements.

✔Client-Server Technologies

Client (browser) and server (where data is stored) communicate through requests and responses.

✔Client-Side Tools and Technologies

  • HTML (Hypertext Markup Language): Basic language for creating web pages.
  • CSS (Cascading Style Sheets): Styles web content.
  • JavaScript: Adds interactivity and dynamic features.

✔Server-Side Scripting

  • Server-Side Languages: PHP, Node.js, Python, etc., process data on the server.

✔URL and MIME

  • URL (Uniform Resource Locator): Web address.
  • MIME (Multipurpose Internet Mail Extensions): Identifies file types.

✔Search Engine

  • Tools like Google, Bing index and retrieve web content.

✔HTML Basics and Tags

HTML5 introduces newer elements for better structure and semantics.

✔Formatting Tags in HTML

  • <h1> to <h6> for headings.
  • <p> for paragraphs.
  • <strong> and <em> for emphasizing text.

✔HTML5 Page Layout and Navigation

  • Semantic Elements: <header>, <nav>, <main>, <section>, <article>, <footer> for structured layout.
  • Navigation: <nav> with lists (<ul> or <ol>).

✔ Lists, Tables, and Form Tags in HTML

  • Lists: <ul> (unordered), <ol> (ordered), <li> (list item).
  • Tables: <table>, <tr> (table row), <td> (table data).
  • Forms: <form>, <input>, <textarea>, <select> for user input.

✔Multimedia Basics: Images, Iframe, Map Tag, Embedding Audio and Video Clips

  • Images: <img> tag.
  • Iframe: Embeds another webpage within a webpage.
  • Map Tag: <map> for image maps.
  • Audio and Video: <audio> and <video> tags to embed audio/video content.

Example:


  <!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
</head>
<body>
  <header>
    <h1>Welcome to My Site</h1>
    <nav>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <section id="about">
      <h2>About Us</h2>
      <p>Welcome to our website...</p>
      <img src="image.jpg" alt="Description of Image">
    </section>
    
    <section id="services">
      <h2>Our Services</h2>
      <ul>
        <li>Service 1</li>
        <li>Service 2</li>
        <li>Service 3</li>
      </ul>
    </section>
    
    <section id="contact">
      <h2>Contact Us</h2>
      <form>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br><br>
        <label for="message">Message:</label><br>
        <textarea id="message" name="message" rows="4" cols="50">
        </textarea>
        <input type="submit" value="Submit">
      </form>    </section>  </main>    <footer>    <p>&copy; 2024 My Website</p>  </footer></body></html>
-------------------------------------------






Tags:

Post a Comment

0 Comments