Kidz Olympiad🎉

ICT Class 8 - Html And-Css Notes

Comprehensive study notes for Class 8 - Html And-Css olympiad preparation

HTML and CSS

Welcome to the chapter on HTML and CSS for Class 8. In this chapter, you will learn how websites are made using HTML and CSS. By the end of this chapter, you will be able to create simple web pages and style them using CSS!

Introduction

HTML and CSS are the building blocks of web pages. HTML is used to create the structure of a page, and CSS is used to make it look nice.

What is HTML?

HTML stands for HyperText Markup Language. It is used to create the content and structure of web pages.

  • HTML uses tags like <h1>, <p>, <img>.
  • Tags are written inside angle brackets (< >).
  • Every web page starts with <html> and ends with </html>.

Basic HTML Structure


<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

What is CSS?

CSS stands for Cascading Style Sheets. It is used to change the appearance of HTML elements, like colors, fonts, and layout.

  • CSS can be written inside <style> tags or in a separate file.
  • CSS uses selectors to choose which HTML elements to style.

Basic CSS Example


<style>
  body { background-color: #f0f0f0; }
  h1 { color: blue; }
  p { font-size: 18px; }
</style>

How HTML and CSS Work Together

HTML creates the content, and CSS styles it. You can add CSS inside the <head> of your HTML file or link to a separate CSS file.

Fun Activity: Make Your Own Web Page!

Write a simple HTML page with a heading, a paragraph, and an image. Use CSS to change the background color and text color.

Summary

  • HTML is used for structure and content.
  • CSS is used for styling and layout.
  • Both are needed to make beautiful web pages.

Practice Questions

  1. What does HTML stand for?
  2. Write the HTML tag for a paragraph.
  3. What does CSS stand for?
  4. How do you change the color of text using CSS?
  5. Write a simple HTML code for a heading and a paragraph.

Challenge Yourself

  • Create a web page about your favorite hobby using HTML and CSS.
  • Add a picture and style it with CSS.

Did You Know?

  • HTML was invented in 1991 by Tim Berners-Lee.
  • CSS can make web pages look very different without changing the HTML.

Glossary

  • HTML: The language for creating web page structure.
  • CSS: The language for styling web pages.
  • Tag: A code used in HTML to mark elements.
  • Selector: A code in CSS to choose elements to style.

Answers to Practice Questions

  1. HyperText Markup Language
  2. <p> </p>
  3. Cascading Style Sheets
  4. Use color: red; in CSS
  5. 
<h1>My Heading</h1>
<p>This is a paragraph.</p>

Practice HTML and CSS to make your own amazing web pages!

Quick Navigation