Try for free
DiscoverMobile appPricingFor schoolsHelpLogin
← Back to quizzesFree quiz

Fundamentals of the Web and HTML

Many beginners confuse the terms Internet and Web . While they are closely related, they refer to distinct layers of the global network.

10 questions~5 min
Fundamentals of the Web and HTML — Qwi
0 / 10
Score: 0%
1

Which of the following best describes the relationship between Internet and the Web?

2

In the HTTP request/response cycle, which component initiates the request?

3

Which HTML tag is used to define a block-level element that can contain other block or inline elements?

4

When linking an external CSS file, which attribute must be specified in the tag?

5

Which of the following statements about cookies is accurate?

6

What is the primary purpose of the tag inside the section?

7

During the indexing phase of a search engine, what type of data is primarily stored?

8

Which HTML element is required to define the title that appears on the browser tab?

9

In HTML, which attribute of the tag provides alternative text for accessibility?

10

Which of the following best explains why the and tags are used differently?

Understanding the Relationship Between the Internet and the Web

Many beginners confuse the terms Internet and Web. While they are closely related, they refer to distinct layers of the global network.

  • Internet: The physical infrastructure—cables, routers, and protocols—that connects computers worldwide.
  • Web (World Wide Web): An application layer that runs on top of the Internet, using the HTTP protocol to exchange hypertext documents.

In simple terms, the Web is a network of information, while the Internet is the underlying infrastructure that transports it. This distinction is crucial for developers because it influences how we design, host, and deliver content.

The HTTP Request/Response Cycle

Every interaction between a browser and a server follows the HTTP request/response model. Understanding who initiates the request helps you debug network issues and optimize performance.

Key Participants

  • Client: Usually a web browser or a script that sends an HTTP request.
  • Server: Receives the request, processes it, and returns an HTTP response.
  • DNS and Routers: Assist in locating the server but do not generate the HTTP request themselves.

The correct statement is: The client (e.g., a web browser) sends the HTTP request to the server. This initiates the cycle, after which the server replies with status codes, headers, and optionally a body.

Fundamental HTML Elements

Block‑Level vs. Inline Elements

HTML provides two primary categories of elements: block‑level and inline. Block‑level elements start on a new line and can contain other block or inline elements.

The tag that exemplifies this behavior is <div>. It is a versatile container used for layout, styling, and scripting.

Other common block‑level tags include <section>, <article>, and <header>. Inline tags such as <span> or <strong> do not break the flow of text.

Linking External Stylesheets

To apply CSS across multiple pages, you link an external stylesheet inside the <head> using the <link> element. The essential attribute is rel="stylesheet", which tells the browser that the linked file is a stylesheet.

Typical usage:

<link rel="stylesheet" href="styles.css">

While attributes like type="text/css" were once required, modern browsers infer the type automatically, making rel the critical piece.

Meta Tags and Character Encoding

The <meta charset="utf-8"> tag declares the document’s character encoding. UTF‑8 supports virtually all characters used worldwide, preventing garbled text and ensuring proper rendering of international content.

Placing this tag early in the <head> is an SEO best practice because search engines index the page based on the correct character set.

Defining the Page Title

The title that appears on the browser tab and in search engine results is defined with the <title> element, also located inside the <head>. A clear, concise title improves click‑through rates (CTR) and contributes to better rankings.

Example:

<title>Fundamentals of the Web and HTML</title>

Cookies: Small Text Files with Big Impact

Cookies are essential for maintaining stateful interactions on the stateless web. They are small text files stored on the user's device to remember session data. Common uses include:

  • Keeping users logged in across page loads.
  • Storing user preferences (e.g., language or theme).
  • Tracking analytics for personalized experiences.

Cookies are not encrypted by default, nor are they large binary files. Developers must handle them responsibly, respecting privacy regulations such as GDPR and CCPA.

Search Engine Indexing Basics

During the indexing phase, search engines transform raw crawled data into a searchable format. The primary data stored are significant words from crawled pages in a searchable database. This process involves:

  1. Crawling: Bots fetch pages via HTTP.
  2. Parsing: HTML is stripped of tags, leaving textual content.
  3. Tokenizing: Text is broken into individual words (tokens).
  4. Stemming & Stop‑word removal: Reducing words to root forms and discarding common words.
  5. Storing: Tokens are added to an inverted index for fast retrieval.

Understanding this pipeline helps developers optimize content for SEO by focusing on relevant keywords, proper heading hierarchy, and semantic markup.

Putting It All Together: A Sample HTML Document

Below is a minimal yet complete HTML5 document that incorporates the concepts discussed:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fundamentals of the Web and HTML</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h2>Welcome to Web Basics</h2>
    </header>
    <nav>
      <ul>
        <li><a href="#internet">Internet vs. Web</a></li>
        <li><a href="#http">HTTP Cycle</a></li>
        <li><a href="#html">HTML Essentials</a></li>
      </ul>
    </nav>
    <main>
      <section id="internet">
        <h3>Internet and Web</h3>
        <p>...content...</p>
      </section>
      <section id="http">
        <h3>HTTP Request/Response</h3>
        <p>...content...</p>
      </section>
      <section id="html">
        <h3>HTML Tags</h3>
        <div>This is a block‑level container.</div>
      </section>
    </main>
    <footer>
      <p>© 2026 Web Academy</p>
    </footer>
  </body>
</html>

This example demonstrates proper placement of meta tags, title, external CSS linking, and the use of block‑level <div> elements.

SEO Best Practices Highlighted in This Course

  • Use a descriptive <title> tag with primary keywords.
  • Declare charset="utf-8" early to avoid encoding issues.
  • Link CSS with rel="stylesheet" for faster rendering and better crawlability.
  • Structure content with semantic headings (<h2>, <h3>) to signal hierarchy to search engines.
  • Leverage cookies responsibly to enhance user experience without compromising privacy.

By integrating these fundamentals, developers create pages that are both user‑friendly and search‑engine friendly.