HTML & CSS

The structure of a webpage is known as HTML (Hypertext Markup Language).
The style and format are made by CSS (cascading style sheets).
As the skeleton is constructed using HTML, the dressing is done using CSS, and it determines how the elements will appear.

Class 9 students will be shown how to make simple web elements with HTML and style them with CSS. You are also going to learn about the process of creating interactive webpages through working with links, tables, and other sophisticated features.

What is a Link in HTML?

A link connecting two webpages to each other within the same page or to an external webpage. The links are used with the help of the <a> tag, which means 'anchor'. This allows users to move through the pages, either externally or to other parts of the same page.

The links are made with the tag <a>. The connection between web pages is made through these links or external sites.

Simple HTML syntax of a link:

  • <a href="https://www.example.com">Click here to visit Example</a>
  • <a href="https://www.olympiadsuccess.com">Olympiad Success</a>

Important Attributes:

  • href - defines destination link.
  • target="_blank" – opens the link in a new tab.

Links make websites interactive and linking.

Anchors (Internal Linking)

Anchors are used to link to a particular section of the same webpage.

Step 1: Create an ID
<h2 id="section1">Section 1 </h2>

Step 2: Create a Link
<a href="#section1">Go to Section 1 </a>

Long web pages, such as projects or reports, can be put on anchors.

Table Tags in HTML

Data are presented in the form of tables in rows and columns.

Basic Table Structure:

<table border="1">
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>Rahul</td>
<td>85</td>
</tr>
</table>

Important Table Tags:

  • <table> - Creates a table
  • <tr> - Table row
  • <th> - Table heading
  • <td> - Table data

Table Attributes

Some useful attributes:

  • border - Adds border to table
  • Cell padding - add space within cells.
  • cellspacing - Adds space between cells.
  • width - Sets table width

CSS is commonly used for table design.

Some More Advanced Tags

<div>

Used to group elements.

<span>

Applied to beautify little parts of text.

<iframe>

Used to show another webpage on a page.

<meta>

Give webpage information.

<link>

Connects external CSS files.

CSS (Cascading Style Sheets)

CSS is a technology that is used to format and style web page layouts. It determines what the things on a webpage will appear like in terms of colour, fonts, space and general structure. Although HTML will give the page structure of a webpage, CSS is the one that will make it appear as an attractive page.
What is CSS?

CSS refers to a language that is applied in the process of styling and formatting the content in HTML. It assists in beautifying a webpage by the inclusion of colours, fonts, spacing and alignment.

CSS Syntax:

  • Selector: The element that you would like to be styled (e.g., p, h1).
  • Declaration: The styling you give to the element (e.g., colour, font size).

Example:

p {
color: blue;
font-size: 18px;
}

Selectors:

  • Element Selector: Selects all elements of a certain type (e.g. all <h1> elements).
  • Class Selector: Selects elements that have a particular class (e.g. button).
  • ID Selector: It is applied to a distinct element that has a unique ID (e.g. span, a title or a header).

Text Styling:

CSS allows you to modify the text font, font size and color.

Example:

h1 {
font-family: Arial, sans-serif;
color: red;
}

Box Model:

Each HTML element is regarded as a box with some content, padding, border and margin.

Example:

div {
padding: 20px;
border: 2px solid black;
margin: 15px;
}

Backgrounds:

A webpage has a setting for the background colour or image.

Example:

body {
background-color: lightblue;
}

Links Styling:

You have the option of altering the looks of links, such as the color and text-decoration.

Example:

a {
color: green;
text-decoration: none;
}
a:hover {
color: red;
}

QUIZ FOR HTML AND CSS

1. How does HTML play a major role in a webpage?

A) To style webpage colours
B) To create webpage content.
C) To secure webpages
D) To manage databases

Answer: B) To create webpage content.

2. What is the language that primarily controls how a webpage appears and looks?

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

Answer: B) CSS

3. What HTML tag would be used to place a hyperlink?

A) <link>
B) <a>
C) <href>
D) <nav>

Answer: B) <a>

4. The following HTML code may be taken into consideration:

<a href="https://www.example.com">Example</a>

What characteristic defines the target of the connection?

A) link
B) src
C) href
D) target

Answer: C) href

5. There are numerous sections in a long article contained in a webpage. The developer is interested in users clicking on Section 5 on the same page. Which feature should be used?

A) External link
B) Anchor link
C) Table tag
D) Meta tag

Answer: B) Anchor link

6. What is the HTML tag for specifying table data within a table row?

A) <tr>
B) <th>
C) <td>
D) <table>

Answer: C) <td>

7. A student would like to use styling on the very little section of text in a paragraph. What is the most appropriate HTML tag?

A) <div>
B) <span>
C) <section>
D) <header>

Answer: B) <span>

8. Which CSS expression is applied to all elements of the same tag in the HTML, e.g., all <p> elements?

A) ID selector
B) Class selector
C) Element selector
D) Attribute selector

Answer: C) Element selector

9. How do we change the background colour of a webpage in CSS?

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

Answer: C) background-color

10. What is the HTML tag to join an external CSS with an HTML webpage?

A) <css>
B) <style>
C) <link>
D) <connect>

Answer: C) <link>