Web Applications

Chapter 2: Website Building Using HTML and CSS - Web Applications Class XI (CBSE 803)

Class 11 · Web Applications

Chapter 2: Website Building Using HTML and CSS

A website is a collection of webpages that are connected through hyperlinks and hosted on a web server. HTML (HyperText Markup Language) is used to create the structure and content of webpages, while CSS (Cascading Style Sheets) is used to control their presentation and appearance.

In this chapter, we will learn the fundamental HTML elements required to create webpages and the basics of CSS required to style and arrange webpage content.

2.1 Introduction to HTML

HTML stands for HyperText Markup Language. It is the standard markup language used to create and structure content on webpages.

HTML uses tags and elements to tell the web browser how different types of content should be structured.

What is HyperText?

HyperText is text that contains links to other documents, webpages, files, or locations. These links allow users to navigate from one resource to another.

What is a Markup Language?

A markup language uses predefined tags to describe the structure and meaning of content. HTML is a markup language and is not a programming language.

Basic HTML Document Structure

<!DOCTYPE html>
<html>
<head>
    <title>My Webpage</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first webpage.</p>
</body>
</html>

Important Parts

Element	Purpose
<!DOCTYPE html>	Declares that the document uses HTML5.
<html>	Root element of the HTML document.
<head>	Contains metadata and information about the document.
<title>	Defines the title displayed in the browser tab.
<body>	Contains the visible content of the webpage.

2.2 Basic Tags in HTML

HTML provides various tags for headings, paragraphs, formatting, breaks, and other types of content.

Heading Tags

HTML provides six levels of headings, from <h1> to <h6>.

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<h1> represents the highest-level heading, while <h6> represents the lowest-level heading.

Paragraph Tag

The <p> tag is used to define a paragraph.

<p>HTML is used to create webpages.</p>

Line Break

The <br> tag inserts a line break.

Horizontal Rule

The <hr> element represents a thematic break between sections of content and is commonly displayed as a horizontal line.

<hr>

Text Formatting Tags

Tag	Purpose	Example
<b>	Displays text in bold presentation.	<b>Important</b>
<strong>	Indicates strong importance.	<strong>Important</strong>
<i>	Displays text in italic presentation.	<i>HTML</i>
<em>	Emphasizes text.	<em>Important</em>
<u>	Underlines text.	<u>Underline</u>
<mark>	Highlights text.	<mark>Important</mark>
<sup>	Displays superscript text.	x<sup>2</sup>
<sub>	Displays subscript text.	H<sub>2</sub>O

HTML Comments

Comments are notes written inside HTML code that are not displayed as webpage content.

<!-- This is an HTML comment -->

2.3 Images

Images make webpages more attractive and help communicate information visually. The <img> element is used to embed an image in a webpage.

Basic Syntax

<img src="school.jpg" alt="School Building">

Important Attributes of the <img> Element

Attribute	Purpose
src	Specifies the location or URL of the image.
alt	Provides alternative text describing the image.
width	Specifies the displayed width.
height	Specifies the displayed height.
title	Can provide additional information displayed as a tooltip.

Example

<img src="school.jpg"
     alt="School Building"
     width="500"
     height="300">

Best Practice:

Always provide meaningful alternative text using the alt attribute. It improves accessibility and provides useful information when the image cannot be displayed.

2.4 Lists

HTML provides different types of lists for presenting related items. The major types are ordered lists, unordered lists, and description lists.

2.4.1 Ordered List

An ordered list displays items in a sequence. It is created using the <ol> element and individual items are defined using <li>.

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

Changing the Numbering Style

<ol type="A">
    <li>HTML</li>
    <li>CSS</li>
</ol>

Common values of the type attribute include 1, A, a, I, and i.

2.4.2 Unordered List

An unordered list displays items using bullets. It is created using the <ul> element.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

2.4.3 Description List

A description list is useful for displaying terms and their descriptions. It uses <dl>, <dt>, and <dd>.

<dl>
    <dt>HTML</dt>
    <dd>Language used to structure webpages.</dd>

    <dt>CSS</dt>
    <dd>Language used to style webpages.</dd>
</dl>

2.5 Tables

HTML tables are used to present data in rows and columns.

Basic Table Structure

<table>
    <tr>
        <th>Name</th>
        <th>Marks</th>
    </tr>

    <tr>
        <td;Amit</td>
        <td>85</td>
    </tr>
</table>

Important Table Tags

Tag	Purpose
<table>	Defines the table.
<tr>	Defines a table row.
<th>	Defines a table header cell.
<td>	Defines a table data cell.
<caption>	Defines a caption for the table.
<thead>	Groups header rows.
<tbody>	Groups the main body rows.
<tfoot>	Groups footer rows.

Colspan

The colspan attribute allows a cell to span multiple columns.

<table border="1">
    <tr>
        <th colspan="2">Student Details</th>
    </tr>
    <tr>
        <td>Name</td>
        <td>Class XI</td>
    </tr>
</table>

Rowspan

The rowspan attribute allows a cell to span multiple rows.

<table border="1">
    <tr>
        <th rowspan="2">Subject</th>
        <th>Theory</th>
    </tr>
    <tr>
        <td>Practical</td>
    </tr>
</table>

2.6 Div & Span Tags

2.6.1 The <div> Tag

The <div> element is a generic container used to group and organize block-level content. It is frequently used when designing webpage layouts and applying CSS.

<div>
    <h2>About Our School</h2>
    <p>Welcome to our school website.</p>
</div>

A div can contain headings, paragraphs, images, lists, tables, forms, and other HTML elements.

2.6.2 The <span> Tag

The <span> element is an inline container used to group or style a portion of text or other inline content.

<p>
    Welcome to
    <span class="highlight">Code Step Academy</span>.
</p>

Div vs Span

<div>	<span>
Generic block-level container.	Generic inline container.
Normally starts on a new line.	Normally remains within the current line.
Useful for grouping larger sections.	Useful for styling or grouping small portions of content.

2.7 Hyperlinks

A hyperlink allows users to navigate from one webpage or resource to another. Hyperlinks are created using the <a> (anchor) element.

Basic Syntax

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

Important Attributes

Attribute	Purpose
href	Specifies the destination of the hyperlink.
target	Specifies where the linked resource should open.
title	Provides additional information about the link.

Opening a Link in a New Tab

<a href="https://www.example.com"
   target="_blank">
    Visit Website
</a>

Link to Another Page in the Same Website

<a href="about.html">
    About Us
</a>

Email Link

<a href="mailto:info@example.com">
    Send Email
</a>

2.8 Forms

HTML forms are used to collect information from users. Forms are commonly used for registration, login, feedback, contact pages, surveys, and online applications.

Basic Form

<form>
    <label>Name:</label>
    <input type="text" name="name">

    <label>Email:</label>
    <input type="email" name="email">

    <input type="submit" value="Submit">
</form>

Important Form Elements

Element	Purpose
<form>	Defines an HTML form.
<label>	Defines a label for a form control.
<input>	Creates different types of input controls.
<textarea>	Provides a multi-line text input area.
<select>	Creates a drop-down list.
<option>	Defines an option inside a select list.
<button>	Creates a button.

Input Types

Type	Purpose
text	Single-line text input.
password	Input for passwords.
email	Input for an email address.
number	Input for numerical values.
radio	Allows selection of one option from a group.
checkbox	Allows selection of zero or more options.
date	Provides a date input control.
submit	Provides a button for submitting the form.
reset	Resets form controls to their initial values.

Radio Buttons

<input type="radio" name="gender" value="male">
Male

<input type="radio" name="gender" value="female">
Female

Radio buttons with the same name are generally used when the user should select one option from a group.

Checkboxes

<input type="checkbox" name="skill" value="html">
HTML

<input type="checkbox" name="skill" value="css">
CSS

Drop-down List

<select name="class">
    <option value="XI">Class XI</option>
    <option value="XII">Class XII</option>
</select>

Textarea

<textarea name="message" rows="5" cols="40">
</textarea>

Complete Form Example

<form>

    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

    <br><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <br><br>

    <label>Gender:</label>
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female

    <br><br>

    <label>Skills:</label>
    <input type="checkbox" name="skill" value="html"> HTML
    <input type="checkbox" name="skill" value="css"> CSS

    <br><br>

    <label for="class">Class:</label>
    <select id="class" name="class">
        <option>XI</option>
        <option>XII</option>
    </select>

    <br><br>

    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>

    <br><br>

    <input type="submit" value="Submit">
    <input type="reset" value="Reset">

</form>

2.9 Audio and Video Tags

2.9.1 Audio

The <audio> element is used to embed audio content in a webpage.

Basic Syntax

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

The controls attribute displays the browser's audio controls.

2.9.2 Video

The <video> element is used to embed video content in a webpage.

<video width="640" height="360" controls>
    <source src="school.mp4" type="video/mp4">
    Your browser does not support the video element.
</video>

Common Audio/Video Attributes

Attribute	Purpose
controls	Displays playback controls.
autoplay	Requests automatic playback.
loop	Repeats the media.
muted	Starts the media without audio.
width	Specifies displayed width for video.
height	Specifies displayed height for video.
poster	Specifies an image displayed before video playback.

2.10 Introduction to CSS

CSS stands for Cascading Style Sheets. It is used to control the presentation, layout, colours, fonts, spacing, borders, and other visual aspects of HTML documents.

HTML provides the structure of a webpage, whereas CSS controls how that structure is presented to the user.

Technology	Primary Purpose
HTML	Structure and content of a webpage.
CSS	Presentation, styling, and layout of a webpage.
JavaScript	Behaviour and interactivity of a webpage.

Example

<h1>Welcome</h1>

<style>
h1 {
    color: blue;
    text-align: center;
}
</style>

2.11 Advantages of CSS

CSS provides several advantages when developing and maintaining webpages.

Separation of Content and Presentation: HTML can describe the content while CSS controls its appearance.
Consistency: The same stylesheet can be applied to multiple webpages.
Reduced Duplication: Common styling rules do not have to be repeated throughout every HTML element.
Easy Maintenance: Changing a CSS rule can update the appearance of multiple elements or pages.
Better Design: CSS provides extensive control over fonts, colours, spacing, borders, layouts, and other visual properties.
Responsive Design: CSS can be used to create layouts that adapt to different screen sizes and devices.
Improved Performance: External stylesheets can be cached by browsers and reused across multiple pages.

2.12 Three Ways to Implement CSS

CSS can be implemented in three main ways:

Inline CSS
Internal CSS
External CSS

2.12.1 Inline CSS

In inline CSS, the style is written directly inside the HTML element using the style attribute.

<p style="color: blue;">
    This is a blue paragraph.
</p>

Advantages

Useful for applying a style to a specific element.
Simple for small demonstrations.

Limitation

It becomes difficult to maintain when the same style needs to be applied to many elements.

2.12.2 Internal CSS

In internal CSS, CSS rules are written inside a <style> element, normally within the <head> section.

<head>

    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>

</head>

Internal CSS is useful when styles are intended for a single HTML document.

2.12.3 External CSS

In external CSS, CSS rules are stored in a separate file, generally with the .css extension.

The stylesheet is connected to the HTML document using the <link> element.

<head>
    <link rel="stylesheet" href="style.css">
</head>

The external stylesheet may contain rules such as:

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

h1 {
    text-align: center;
}

Comparison of CSS Implementation Methods

Method	Where CSS is Written	Suitable For
Inline	Inside the HTML element	Specific individual elements
Internal	Inside <style> in the HTML document	Single webpage
External	Separate .css file	Multiple webpages and maintainable websites

2.13 CSS Box Model using Div

The CSS Box Model describes how the browser represents an HTML element as a rectangular box. It consists of four main areas:

Content
Padding
Border
Margin

Margin → Border → Padding → Content

2.13.1 Content

The content is the actual text, image, or other material contained inside an element.

2.13.2 Padding

Padding is the space between the content and the element's border.

2.13.3 Border

The border surrounds the content and padding.

2.13.4 Margin

Margin is the space outside the border. It separates the element from surrounding elements.

Box Model Example Using <div>

<div class="box">
    This is a box.
</div>

.box {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    margin: 30px;
}

Box Model Diagram

Margin

Border

Padding

Content

Common Box Model Properties

Property	Purpose
width	Sets the width of the content area.
height	Sets the height of the content area.
padding	Sets space inside the border around the content.
border	Sets the border around an element.
margin	Sets space outside the border.

2.14 CSS Syntax and Tags

CSS uses rules consisting of a selector and a declaration block.

Basic CSS Syntax

selector {
    property: value;
}

For example:

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

Parts of a CSS Rule

Part	Example	Purpose
Selector	p	Selects the HTML elements to which the rule applies.
Property	color	Specifies what aspect of the element will be changed.
Value	blue	Specifies the setting for the property.
Declaration	color: blue;	Combination of a property and its value.

Element Selector

An element selector selects HTML elements by their tag name.

h1 {
    color: green;
}

Class Selector

A class selector selects elements having a specified class attribute. It begins with a dot.

.highlight {
    color: red;
    background-color: yellow;
}

It can be used in HTML as:

<p class="highlight">
    Important information
</p>

ID Selector

An ID selector selects an element having a specified id. It begins with the # symbol.

#header {
    background-color: lightgray;
}

Example:

<div id="header">
    Website Header
</div>

Grouping Selector

Multiple selectors can be grouped together when they share the same declarations.

h1, h2, h3 {
    font-family: Arial;
}

Common CSS Properties

Property	Purpose	Example
color	Sets text colour.	color: blue;
background-color	Sets background colour.	background-color: yellow;
font-family	Specifies the font family.	font-family: Arial;
font-size	Sets text size.	font-size: 18px;
font-weight	Controls the thickness of text.	font-weight: bold;
text-align	Controls horizontal alignment of text.	text-align: center;
width	Sets element width.	width: 300px;
height	Sets element height.	height: 200px;
margin	Sets outer spacing.	margin: 20px;
padding	Sets inner spacing.	padding: 10px;
border	Sets an element border.	border: 1px solid black;

CSS Comments

CSS comments are written between /* and */.

/* This is a CSS comment */

p {
    color: blue;
}

Complete HTML and CSS Example

The following example demonstrates how HTML and CSS can be combined to create a simple webpage.

<!DOCTYPE html>
<html>

<head>
    <title>My School Website</title>

    <style>
        body {
            font-family: Arial;
            margin: 20px;
        }

        .header {
            background-color: lightblue;
            padding: 20px;
            text-align: center;
        }

        .content {
            margin-top: 20px;
            padding: 20px;
            border: 1px solid black;
        }

        .highlight {
            color: red;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <div class="header">
        <h1>My School Website</h1>
    </div>

    <div class="content">
        <h2>Welcome</h2>

        <p>
            Welcome to our
            <span class="highlight">school website</span>.
        </p>

        <img src="school.jpg"
             alt="School Building"
             width="400">

        <p>
            <a href="about.html">About Us</a>
        </p>
    </div>

</body>

</html>

HTML and CSS: Quick Revision

Topic	Key Point
HTML	Markup language used to structure webpage content.
Heading	Uses h1 to h6 elements.
Paragraph	Uses the p element.
Image	Uses the img element with src and alt attributes.
Ordered List	Uses ol and li elements.
Unordered List	Uses ul and li elements.
Table	Uses table, tr, th and td elements.
Div	Generic block-level container.
Span	Generic inline container.
Hyperlink	Uses the a element.
Form	Collects information from users.
Audio	Uses the audio element.
Video	Uses the video element.
CSS	Controls webpage presentation and styling.
Inline CSS	CSS written in the style attribute.
Internal CSS	CSS written inside a style element.
External CSS	CSS written in a separate stylesheet.
Box Model	Consists of content, padding, border, and margin.
CSS Selector	Identifies HTML elements to which CSS rules apply.

Important Questions for Revision

What is HTML?
What is the difference between HTML and a programming language?
What is HyperText?
Explain the basic structure of an HTML document.
What are heading tags in HTML?
What is the purpose of the paragraph tag?
How is an image inserted into an HTML webpage?
What is the purpose of the alt attribute?
Differentiate between ordered and unordered lists.
What is a description list?
What are the main tags used to create an HTML table?
What is the purpose of colspan and rowspan?
What is the purpose of the div tag?
What is the purpose of the span tag?
Differentiate between div and span.
What is a hyperlink?
Which tag is used to create a hyperlink?
What is an HTML form?
Name different input types used in HTML forms.
Differentiate between radio buttons and checkboxes.
What is the purpose of the select element?
How are audio and video embedded in HTML?
What is CSS?
List the advantages of CSS.
Explain the three ways of implementing CSS.
Differentiate between inline, internal, and external CSS.
What is the CSS Box Model?
Explain content, padding, border, and margin.
What is a CSS selector?
Differentiate between element, class, and ID selectors.
Write the basic syntax of a CSS rule.

Multiple Choice Questions

Q1. What does HTML stand for?

HyperText Markup Language
HighText Machine Language
HyperText Machine Language
Hyperlink and Text Markup Language

Answer: A

Q2. Which tag is used for the largest heading?

<h6>
<head>
<h1>
<heading>

Answer: C

Q3. Which HTML element is used to insert an image?

<image>
<img>
<pic>
<src>

Answer: B

Q4. Which attribute specifies the image location?

href
src
alt
link

Answer: B

Q5. Which element creates an unordered list?

<ol>
<ul>
<li>
<list>

Answer: B

Q6. Which tag defines a table row?

<td>
<th>
<tr>
<row>

Answer: C

Q7. Which element is used to create a hyperlink?

<link>
<a>
<href>
<url>

Answer: B

Q8. Which attribute specifies the destination of a hyperlink?

src
href
target
link

Answer: B

Q9. Which element is used to create a form?

<input>
<form>
<fieldset>
<data>

Answer: B

Q10. Which CSS method uses the style attribute?

External CSS
Internal CSS
Inline CSS
Embedded JavaScript

Answer: C

Q11. Which CSS method uses a separate .css file?

Inline CSS
Internal CSS
External CSS
Embedded CSS

Answer: C

Q12. Which of the following is part of the CSS Box Model?

Content
Padding
Border
All of the above

Answer: D

Q13. Which CSS property controls the space outside an element's border?

padding
margin
border
spacing

Answer: B

Q14. Which symbol is used for a CSS class selector?

Answer: B

Q15. Which symbol is used for a CSS ID selector?

Answer: B

Chapter Summary

HTML is the standard markup language used to structure webpages. HTML provides elements for headings, paragraphs, images, lists, tables, divisions, spans, hyperlinks, forms, audio, and video.

Forms allow webpages to collect information from users through controls such as text boxes, password fields, radio buttons, checkboxes, drop-down lists, textareas, and buttons.

CSS, or Cascading Style Sheets, is used to control the appearance and layout of webpages. CSS can be implemented using inline, internal, or external stylesheets.

The CSS Box Model consists of content, padding, border, and margin. CSS selectors identify HTML elements to which styling rules are applied. Common selectors include element, class, and ID selectors.

HTML → Structure & Content
CSS → Presentation & Layout