Create static web pages MCQs Quiz | Class 10

Class: X, Subject: Computer Applications (Code 165), Unit: Unit 4: Lab Exercises, Topic: Create static web pages MCQs Quiz | Class 10. This quiz covers Basic HTML pages; structure; navigation. Attempt all questions and then submit to see your results. You can also download a PDF of your answers.

Understanding Static Web Pages and HTML Fundamentals

Static web pages are the foundational building blocks of the internet. They display fixed content to every user, meaning the content does not change unless a developer manually updates the source code. These pages are primarily created using HTML (HyperText Markup Language), which defines the structure and content of a web page. This section will reinforce your understanding of basic HTML pages, their structure, and how to navigate between them.

1. Basic HTML Pages:

An HTML document is a text file saved with a .html or .htm extension. Web browsers read these files and render them into visible web pages. Static pages are excellent for displaying information that doesn’t need frequent updates or user interaction, such as brochures, portfolios, or documentation.

2. HTML Document Structure:

Every HTML5 document follows a basic, essential structure.

  • <!DOCTYPE html>: This declaration defines that the document is an HTML5 document. It’s not an HTML tag, but an instruction to the browser about the document type.
  • <html>: The root element that encloses all other HTML elements except the <!DOCTYPE> declaration. It usually has a lang attribute to declare the language of the page (e.g., <html lang="en">).
  • <head>: This section contains meta-information about the HTML document. Content inside <head> is not displayed directly on the web page, but it contains important data for browsers and search engines.
    • <title>: Defines the title of the document, which appears in the browser tab or window title bar.
    • <meta>: Provides metadata about the HTML document, such as character set (charset="UTF-8"), viewport settings, description, and keywords.
    • <link>: Used to link external resources, most commonly CSS stylesheets (<link rel="stylesheet" href="style.css">).
    • <style>: Contains internal CSS for the document.
    • <script>: Used to embed client-side scripts (JavaScript) or link to external script files.
  • <body>: This section contains all the visible content of a web page. Everything you see on a web page, from text and images to videos and interactive elements, is placed within the <body> tags.

Example of Basic HTML Structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Page!</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

3. Key HTML Tags for Content:

Tag Description Example
<h1> to <h6> Heading elements (h1 is largest, h6 is smallest) <h1>Main Title</h1>
<p> Defines a paragraph <p>Some text here.</p>
<a> Defines a hyperlink <a href="page2.html">Link</a>
<img> Embeds an image <img src="pic.jpg" alt="Description">
<ul> Unordered list (bullet points) <ul><li>Item</li></ul>
<ol> Ordered list (numbered) <ol><li>Item</li></ol>
<li> List item (used inside <ul> or <ol>)
<br> Line break (empty tag) First line.<br>Second line.
<hr> Horizontal rule (thematic break, empty tag)

4. HTML Navigation (Hyperlinks):

Navigation is crucial for static websites, allowing users to move between different pages. Hyperlinks are created using the <a> (anchor) tag.

  • href attribute: Specifies the URL of the page the link goes to. It can be an absolute URL (e.g., https://www.example.com) or a relative URL (e.g., another-page.html).
  • target attribute: Specifies where to open the linked document.
    • _self (default): Opens the document in the same window/tab.
    • _blank: Opens the document in a new window/tab.
    • _parent: Opens the document in the parent frame.
    • _top: Opens the document in the full body of the window.

Example Navigation:

<nav>
    <a href="index.html">Home</a> |
    <a href="about.html" target="_blank">About Us (New Tab)</a> |
    <a href="contact.html">Contact</a>
</nav>

Quick Revision Points:

  • HTML defines the structure of web content.
  • <!DOCTYPE html> is the document type declaration for HTML5.
  • The <html> element is the root of an HTML page.
  • <head> contains metadata, while <body> contains visible content.
  • <title> sets the browser tab title.
  • <p>, <h1> to <h6>, <ul>, <ol>, <li>, <img> are common content tags.
  • <a> creates hyperlinks for navigation.
  • The href attribute specifies the link destination.
  • The target="_blank" attribute opens a link in a new tab.

Extra Practice Questions:

  1. Which HTML tag is used to make a text bold?

    1. <bold>
    2. <strong>
    3. <b>
    4. Both b and c

    Correct Answer: d) Both b and c

  2. What is the correct HTML element for inserting a line break?

    1. <lb>
    2. <break>
    3. <br>
    4. <newline>

    Correct Answer: c) <br>

  3. Which HTML attribute specifies an alternate text for an image, if the image cannot be displayed?

    1. src
    2. alt
    3. title
    4. href

    Correct Answer: b) alt

  4. Which HTML tag is used to define an unordered list?

    1. <list>
    2. <li>
    3. <ol>
    4. <ul>

    Correct Answer: d) <ul>

  5. What is the purpose of the <meta> tag in HTML?

    1. To define the main content of the page.
    2. To include JavaScript code.
    3. To provide metadata about the HTML document.
    4. To link external CSS files.

    Correct Answer: c) To provide metadata about the HTML document.

Author

  • CBSE Quiz Editorial Team

    Content created and reviewed by the CBSE Quiz Editorial Team based on the latest NCERT textbooks and CBSE syllabus. Our goal is to help students practice concepts clearly, confidently, and exam-ready through well-structured MCQs and revision content.