Introduction to HTML and CSS

On opening a site, we see text, pictures and colours on the screen.
Have you ever questioned yourself about how a website is constructed, though? Websites can be developed using special computer languages known as HTML and CSS.

We shall know in plain words the fundamentals.

What is HTML?

  • HTML is an abbreviation of HyperText Markup Language.
  • It is employed in the design of a webpage.

HTML tells the browser:

  • What text to show
  • Where to place headings

How to arrange paragraphs

Tags are special words that are used in HTML. Angle brackets are used, and the tags are written in them, such as <>.

Single Structure of an HTML Page →

<html>
<head>
<title>My Webpage</title>
</head>
<body>
Content goes here
</body>
</html>


Let us understand these tags →

<html>
This is the main tag. It informs the browser that the page is an HTML page.

<head>
In this section, there is information on the webpage.

<title>
This indicates the name of the webpage on the upper part of the browser.

<body>
It is the central section of the webpage. All that we watch on the screen is printed in the body tag.

Comment Tag

  • We are tempted to write notes in our code sometimes.
  • Some notes are not displayed on the webpage.

We use the comment tag:
<!-- This is a comment -->

This is through comments that make us comprehend the code.

Heading Tags

HTML supports heading tags of <h1> to <h6>.

  • <h1> is the biggest heading.
    <h6> is the smallest heading.

Example:

  • <h1>This is a big heading.</h1>
  • <h3>This is a smaller heading. </h3>

Headings are used to structure the information.

Basic Text Formatting Tags

<b>
Makes text bold.

<i>
Makes text italic.

<u>
Underlines the text.

<p>
Creates a paragraph.

Example:

  • <p>This is a paragraph. </p>
  • <b>Bold Text</b>
  • <i>Italic Text </i>
  • <u>Underlined Text </u>

These labels are used to make the webpage clean and attractive.

What is CSS?

  • CSS is the short form of cascading style sheets.
  • It is used to give a webpage style.

CSS helps to:

  • Change text colour
  • Add background colours
  • Change font size
  • Make the webpage attractive

In simple words, HTML is the structure of the house, and CSS is the design, pattern, colour, garden, and beauty.

QUIZ FOR HTML AND CSS

1. Once you open a webpage and find coloured text and images, who comes up with their structure?

A) CSS
B) JavaScript
C) HTML
D) Python

Answer: C) HTML

2. What is the meaning of HTML in web development?

A) HyperLink Markup Language
B) HyperText Markup Language
C) High-Tech Modern Language
D) HyperTest Manual Language

Answer: B) HyperText Markup Language.

3. What is the tag that is used to label the title of a webpage in HTML?

A) <body>
B) <html>
C) <head>
D) <title>

Answer: D) <title>

4. How do we add comments in HTML which will not be shown on the web page?

A) <p>
B) <!-- -->
C) <comment>
D) <notes>

Answer: B) <!-- -->

5. What tag would you use in order to have a heading as the biggest on your webpage?

A) <h3>
B) <h5>
C) <h1>
D) <h6>

Answer: C) <h1>

6. CSS: In web development, what does the term mean?

A) Cascading Style Sheets
B) Color Styling Sheets
C) Computer Styling Sheets
D) Creative Style Sheets

Answer: A) Cascading Style Sheets.

7. What is the CSS property of changing the background of a webpage?

A) background-color
B) colour
C) text-colour
D) page-color

Answer: A) background-color

8. What is the way to adjust your text font size with CSS?

A) font-size
B) font-style
C) text-size
D) text-font

Answer: A) font-size

9. Why should we apply CSS to a webpage?

A) To write paragraphs
B) To ensure that the webpage is appealing.
C) To store files
D) To display links

Answer: B) To ensure the webpage is appealing.

10. What do we need to do to add a background colour to a webpage using CSS?

A) background-color: red;
B) background: red;
C) color: red;
D) text-color: red;

Answer: A) background-color: red;