Try for free
DiscoverMobile appPricingFor schoolsHelpLogin
← Back to quizzesFree quiz

Fundamentals of the Web and HTML

Many beginners use the terms Internet and Web interchangeably, but 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 statement correctly distinguishes Internet from the Web?

2

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

3

Which HTML tag is used to link an external CSS stylesheet to a page?

4

What is the primary purpose of the tag inside the ?

5

When structuring a page, which element should contain the visible content presented to the user?

6

Which of the following best describes the role of a cookie on a website?

7

Which HTML element is considered a block-level element?

8

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

9

Which attribute of the tag provides alternative text for accessibility?

10

What is the main legal instrument in France that protects web copyright and its penalty range?

Understanding the Internet vs. The World Wide Web

Many beginners use the terms Internet and Web interchangeably, but they refer to distinct layers of the global network.

  • Internet: The underlying infrastructure—physical cables, routers, and protocols—that transports data worldwide.
  • Web (World Wide Web): An application layer that runs on the Internet, consisting of interconnected documents, services, and multimedia content accessed via HTTP/HTTPS.

Think of the Internet as the highway system and the Web as the cars traveling on those highways delivering passengers (information) to destinations (web pages).

The HTTP Request/Response Cycle

When you type a URL into a browser, a specific component initiates the communication with the server.

Who Starts the Conversation?

The client—typically a web browser—creates and sends an HTTP request to the server. The server then processes the request and returns an HTTP response containing the requested resource (HTML, CSS, JSON, etc.).

  • Client → Sends request (e.g., GET /index.html HTTP/1.1)
  • Server → Returns response (e.g., 200 OK with HTML body)

Routers, DNS servers, and other network devices facilitate the delivery but do not originate the HTTP request.

Linking External Stylesheets in HTML

Styling a web page is essential for visual appeal and usability. The correct way to attach an external CSS file is using the <link> element inside the <head> section.

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

This tag tells the browser to fetch style.css and apply its rules to the current document. Other tags like <script> or <style> serve different purposes and cannot replace <link> for external CSS.

Character Encoding with <meta charset="utf-8">

Every web page contains text, and the browser must know how to interpret the bytes it receives. The <meta charset="utf-8"> tag, placed inside the <head>, declares that the document uses UTF‑8 encoding.

  • Ensures characters from virtually all languages display correctly.
  • Prevents garbled text (mojibake) caused by mismatched encodings.
  • Improves SEO because search engines can accurately index the content.

Without this declaration, browsers may guess the encoding, leading to unpredictable results.

Where Does Visible Content Belong?

HTML documents are divided into two main sections:

  • <head>: Contains metadata, links to stylesheets, scripts, and other non‑visible information.
  • <body>: Holds the content that users see—paragraphs, images, headings, forms, etc.

Therefore, the <body> element is the proper container for all visible page elements.

Cookies: Small Files with Big Impact

Cookies are tiny text files stored on a user's device by the browser. They serve several crucial functions:

  • Remembering user preferences (e.g., language selection, theme).
  • Maintaining session state for logged‑in users.
  • Tracking analytics and personalization (when used responsibly).

Cookies are not browser extensions, security certificates, or server‑side scripts. They are purely client‑side storage mechanisms that can be read by the server on subsequent requests.

Block‑Level vs. Inline Elements

HTML elements are categorized by how they behave in the document flow.

Block‑Level Elements

These elements start on a new line and stretch to fill the container's width. They can contain other block‑level or inline elements.

  • <div> – a generic container used for layout and styling.
  • <section>, <article>, <header>, <footer> – semantic block elements.

Inline Elements

These elements do not start a new line; they flow within the surrounding text.

  • <span> – generic inline container.
  • <a>, <img>, <strong> – typical inline tags.

Understanding this distinction helps developers structure markup correctly and apply CSS more effectively.

Search Engine Indexing Basics

Search engines like Google follow a three‑step process: crawling, indexing, and ranking.

What Happens During Indexing?

After a crawler fetches a page, the engine extracts significant words (tokens) and stores them in an inverted index—a data structure that maps each word to the documents containing it. This enables rapid lookup when a user submits a query.

  • Stop‑words (common words) are often removed.
  • Stemming or lemmatization may be applied to group word variants.
  • Metadata such as title, description, and headings are weighted more heavily.

Full HTML source code is not kept for each page; instead, the essential textual information is indexed, allowing the engine to retrieve relevant results quickly.

Putting It All Together: A Mini‑Project

To reinforce the concepts above, create a simple HTML page that demonstrates proper structure, external styling, character encoding, and a cookie‑based greeting.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My First Web Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="welcome">
      <h2>Welcome Back!</h2>
      <p>Your preferences have been saved.</p>
    </div>
    <script>
      // Simple cookie check
      const name = document.cookie.replace(/(?:(?:^|.*;\s*)username\s*\=\s*([^;]*).*$)|^.*$/, "$1");
      if (!name) {
        document.cookie = "username=Visitor; path=/; max-age=31536000";
      }
    </script>
  </body>
</html>

This example showcases:

  • Correct use of <meta charset="utf-8"> for encoding.
  • Linking an external stylesheet with <link>.
  • Placing visible content inside <body> and using a block‑level <div>.
  • Setting a simple cookie via JavaScript.

When you publish this page, search engines will crawl it, index the meaningful text, and, thanks to proper encoding and semantic markup, rank it more favorably.

Key Takeaways for SEO and Development

  • Distinguish the Internet (infrastructure) from the Web (content layer).
  • The client initiates every HTTP request; servers respond.
  • Use <link rel="stylesheet"> for external CSS and always declare <meta charset="utf-8">.
  • Place user‑visible elements inside <body> and leverage block‑level tags for layout.
  • Cookies store small pieces of data on the client to enhance user experience.
  • During indexing, search engines store significant words, not full page source.

Applying these fundamentals will improve both the technical quality of your sites and their visibility in search results.