HTML and CSS – Class 10 Computer Science SEBA | Chapter 2 Notes

Class 10 Computer Science
Chapter 2 – HTML and CSS3

HTML and CSS – Class 10 Computer Science SEBA


Complete Notes, Detailed Explanation & Exercise Solutions


📘 Introduction

Web programming is used to create websites and web applications that we use daily. HTML provides structure to web pages while CSS controls appearance and layout. In this chapter students learn how to create webpages using HTML and design them using CSS.


PART – I : Introduction to HTML

2.1 What is HTML?

HTML stands for HyperText Markup Language. It is the most widely used language to create web pages. HTML uses tags to organize content such as text, images, tables, links and forms so that browsers can display them properly.

2.2 Why HTML?

HTML helps students and professionals build websites, become web designers, understand website structures and learn other web technologies more easily. It is platform independent and works on all operating systems.

2.3 History of HTML

HTML was developed by Tim Berners-Lee in 1991. The latest version widely used today is HTML5.

2.4 Features of HTML

  • Easy to learn and use
  • Platform independent
  • Supports multimedia content
  • Allows linking between web pages

2.5 HTML Editors

HTML pages can be created using text editors like Notepad or WYSIWYG editors such as Dreamweaver and Google Web Designer.

2.6 Building Blocks of HTML

HTML documents consist of Tags, Attributes and Elements that together structure webpage content.

2.7 HTML Tags

Tags define how content appears on browsers. Tags usually come in pairs such as <tag> and </tag>.

2.8 HTML Attributes

Attributes provide extra information about HTML elements and appear in the start tag.

2.9 HTML Elements

An element includes start tag, content and closing tag together.

2.10 Basic Structure of HTML Document

<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>

<body>
Welcome to the World of HTML!
</body>

</html>

The head section stores information like page title and styles, while the body section displays content on the web page.

2.11 Rules for Writing HTML Code

  • Tags must be properly closed.
  • Tags must be nested correctly.
  • Tags are not case sensitive.

PART – II : Lists, Tables and Images

2.21 Lists in HTML

Lists help organize information clearly. HTML provides ordered lists, unordered lists and description lists.

2.22 Tables in HTML

Tables organize data into rows and columns using table related tags. CSS can improve table appearance.

2.23 Images in HTML

Images are inserted using the <img> tag with src and alt attributes.


PART – III : Links, Frames and Forms

2.30 Types of Linking

Links connect web pages internally or externally using anchor tag.

2.35 Frames and iFrames

Frames allow multiple documents inside a webpage using iframe element.

2.37 Forms in HTML

Forms collect user data such as names, passwords and feedback using input controls.


CSS Styling in HTML

Inline CSS

Inline CSS applies styles directly inside HTML tags using style attribute. It is useful for styling individual elements.

Internal CSS

Internal CSS is written inside <style> tag within head section and applies style to a single webpage.

External CSS

External CSS is stored in a separate .css file and linked to webpages. It allows styling of multiple pages together.



📝 Exercises – PART I

I. FILL IN THE BLANKS

  1. ______________ documents are made up of text content and special codes.
    Answer: HTML
  2. ______________ are used to write notes about an HTML document.
    Answer: Comments
  3. HTML document is saved with an extension ____________
    Answer: .html
  4. ___________ are used to view the HTML documents.
    Answer: Browsers
  5. The __________ element include both on and off tags.
    Answer: HTML
  6. The ___________ element splits the line and displays the text on a new line.
    Answer: BR

II. MULTIPLE CHOICE QUESTIONS

  1. Which is the correct way to comment out something in HTML?
    i. Using ## and #
    ii. Using <!-- and -->
    iii. Using </-- and -/->
    iv. Using <!-- and -!>
    Answer: ii
  2. The ___________ tag draws a horizontal line across the web page.
    i. <br> ii. <hr> iii. <line>
    Answer: ii
  3. ______________ provides a set of style rules for defining layout of HTML documents.
    i. CSS ii. WSS iii. TSS
    Answer: CSS
  4. A property and its value are collectively known as ____________
    i. Selector ii. Attribute iii. Declaration
    Answer: Declaration
  5. Which tag indicates the beginning and end of HTML documents?
    i. <HEAD> ii. <BODY> iii. <HTML>
    Answer: iii
  6. Which of the following is used to define the style for a single HTML page?
    i. Inline CSS ii. Internal CSS iii. External CSS
    Answer: Internal CSS

📝 Exercises – PART II

II. MULTIPLE CHOICE QUESTIONS

  1. Which tag is used for List items?
    a. <OL> b. <LI> c. <UL> d. <DL>
    Answer: <LI>
  2. Which element contains definition?
    a. <DL> b. <DD> c. <DT> d. <UL>
    Answer: <DD>
  3. Which of the following can’t be the value of list-style-type?
    a. Square b. Circle c. Ellipse d. Disc
    Answer: Ellipse
  4. Which attribute is only used with <ol>?
    a. Value b. type c. compact d. start
    Answer: start
  5. With the help of which tag is a row defined in HTML?
    a. <row> b. <tr> c. <row-table> d. <tablerow>
    Answer: <tr>
  6. By using which option can table borders collapse?
    Answer: border-collapse: collapse
  7. Web browsers display images in format
    a. XBM b. GIF c. JPEG d. All of these
    Answer: All of these
  8. The correct HTML code for inserting image is
    Answer: <img src="image.gif">
  9. src attribute used with <img> stands for
    Answer: source
  10. alt attribute allows
    Answer: addition of alternative text about an image

📝 Exercises – PART III

I. FILL IN THE BLANKS

  1. The web pages of a website are linked to each other using _________.
    Answer: Hyperlink
  2. The attribute _________ is used to create a hyperlink.
    Answer: href
  3. When pointer moves over a link, it changes into a _________.
    Answer: hand
  4. The _________ attribute of <audio> tag replays audio file.
    Answer: loop
  5. Small rectangular areas in browser window are called ________.
    Answer: frames
  6. The _________ attribute of frame tag loads HTML page into frame.
    Answer: src
  7. ________ attribute attaches default URL.
    Answer: src
  8. ____________ allow multiple HTML documents in one window.
    Answer: Frames
  9. The _________ tag collects user information.
    Answer: form

📌 Chapter Summary

Students learned HTML document structure, lists, tables, images, links, forms and webpage styling using CSS.


🎯 Practice Tips

  • Create webpages daily for practice.
  • Practice lists and tables.
  • Experiment with CSS styles.
  • Practice forms and linking.

🔗 Continue Learning

➡ Next Chapter: MySQL Database
⬅ Previous Chapter: Computer Networks


Prepared for Class X Computer Science learners.