HTML & CSS
The current web development is based on HTML and CSS. Now, students are no longer interested in making web pages but have to know how to create structured, responsive and professional web pages.
The webpage structure is developed by using HTML, and the layout, appearance and visual display are developed and controlled through CSS.
HTML Structure
An ordinary HTML file consists of:
<!DOCTYPE html> - Declares HTML5
<html> - Root element
<head> - Includes metadata, title and links
<body> - has visible webpage content
The <head> section may include:
- <meta> tags for character encoding and responsiveness.
- <title> tags for webpage title
- <link> tags to connect external CSS
- <script> tag to add JavaScript.
Orderly structure provides compatibility and improved performance.
Semantic HTML
Semantic tags that enhance search engine optimisation (SEO) and readability.
Of significance are semantic tags such as the following:
- <header> - Top section of page
- <nav> - Navigation menu
- <section> - Body of content section.
- <article>- Unique content.
- <footer> - Bottom section
- <aside> - Side content
Semantic HTML makes websites well-structured and meaningful.
Advanced HTML Elements
Forms
User input is collected by way of using forms.
Important tags:
- <form>
- <input>
- <textarea>
- <select>
- <button>
Input is controlled by attributes such as type, required, placeholder and maxlength.
Tables (Advanced Use)
Tables include:
- <thead>
- <tbody>
- <tfoot>
- rowspan and colspan attributes.
They are used to organise complex data tables.
CSS – Advanced Styling
Class 10 will discuss more advanced CSS concepts that will enable us to produce more interactive and responsive web pages. Things that students will be introduced to are layouts, animations, and other dynamic things.
CSS Flexbox:
- Flexbox is a method of layout that is used in alignment and the distribution of space in a container. It simplifies the process of creating responsive websites.
Example:
.container {
display: flex;
justify-content: space-between;
}
CSS Grid:
CSS Grid enables the building of complicated web designs in the form of rows and columns.
Example:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
CSS Transitions:
- The changes can be animated using transitions to provide a smoother effect with elements changing state (as in hovering).
Example:
button {
transition: background-color 0.3 easy;
}
button:hover {
background-color: blue;
}
CSS Animations:
- CSS animations can be used to introduce motion to content, i.e. to move, resize or fade elements in a page.
Example:
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
div {
animation: slide 2s infinite;
}
Media Queries:
- Media queries are employed to make websites responsive, that is, they can conform to various screen sizes such as phones, tablets, and desktops.
Example:
@media (max-width: 600px) {
body {
background-color: lightgreen;
}
}
Pseudo-elements and Pseudo-classes:
- The special states of an element such as when it is hovered or clicked are defined by pseudo-classes.
- The parts of an element to be styled are done using pseudo-elements such as the first letter or line.
Example:
a:hover {
color: orange;
}
p::first-letter {
font-size: 2em;
}
Positioning:
- CSS also permits positioning of elements in a position: top, left, right and bottom.
Example:
div {
position: absolute;
top: 50px;
left: 100px;
}
QUIZ FOR HTML AND CSS
1. A developer comes up with the following HTML structure:
<head>
<title>My Page</title>
<h1>Welcome</h1>
</head>
The heading can still be written in the browser. But what is the primary issue with this code?
A) A title tag should be within the <body>.
B) <h1>should be within the <body>, not within the <head>.
C) <head> cannot contain text
D) <h1> should never be out of <section>
Answer: B) <h1>should be within the <body>, not within the <head>.
2. A webpage designer will substitute a number of <div> tags with semantic tags such as <nav> , <header> and <article>.
What is the chief benefit of so doing?
A) It is automated to make the webpage quicker.
B) It enhances meaning on the page and assists the search engines in knowing the structure.
C) It reduces the need for CSS
D) It enables JavaScript to execute quicker.
Answer: B) It enhances meaning on the page and assists the search engines in knowing the structure.
3. Consider the CSS rule:
.container {
display: flex;
justify-content: space-between;
}
What will be the profit of the elements contained in the .container?
A) they will be piled up automatically.
B) Space will be spread equally in between them.
C) They will superimpose one another.
D) They shall be automatically reformatted into grid cells.
Answer: B) Space will be spread equally in between them.
4. A student prepares a table with financial information and writes using <thead> , <tbody> , and <tfoot>. What is the advantage of having this structure in complex tables?
A) It enables the various parts of the table to be styled or handled independently.
B) It reduces HTML file size
C) It eliminates usage of `tr` tags.
D) It also turns tables responsive automatically.
Answer: A) It enables the various parts of the table to be styled or handled independently.
5. Look at this CSS code:
button {
transition: background-color 3s ease;
}
button:hover {
background-color: blue;
}
How will the user feel when the mouse is scanned over the button?
A) The colour will immediately turn blue.
B) The colour will be gradually changing to blue.
C) The button will be transferred to the right.
D) The button will disappear
Answer: B) The colour will be gradually changing to blue.
6. What is the most suitable HTML element that can position a list of links to assist the users to navigate between pages of a webpage?
A) <section>
B) <nav>
C) <article>
D) <aside>
Answer: B) <nav>
7. A webpage layout would require a developer to make the arrangement of items in a row and a column with control over the positioning very much.
What is the most appropriate CSS method?
A) Flexbox
B) CSS Grid
C) Float
D) Inline styling
Answer: B) CSS Grid
8. Examine the rule:
p::first-letter {
font-size: 2em;
}
How will the webpage be visibly affected?
A) The introductory paragraph will grow bigger.
B) The letter of each paragraph will be larger at the beginning.
C) The text of the paragraphs will be increased two times.
D) Headings will be altered only in size.
Answer: B) The letter of each paragraph will be larger at the beginning.
9. On a desktop, the webpage is easily readable, whereas on a phone, it is hard to read.
What is the CSS feature that is created to address this issue?
A) Animations
B) Media Queries
C) Pseudo-elements
D) Absolute positioning
Answer: B) Media Queries
10. A programmer will code the following CSS:
div {
position: absolute;
top: 50px;
left: 100px;
}
What is the major controlling aspect of this rule?
A) The element animation.
B) The position of the element with respect to its positioned ancestor.
C) The responsiveness of the layout.
D) The width of the element
Answer: B) The position of the element with respect to its positioned ancestor.
