Delhi Public School, Birgunj

Chainpur, Bara

PROJECT WORK OF COMPUTER-2023

TOPIC: HTML and CSS

Submitted by:
Submitted to:

Name: Sumedha Khandelwal

Mr. Deepak Sarraf

Class: 10 Section: Theta

Computer Teacher, DPS

Roll no.:23
Subject Teacher’s Signature
Principal’s Signature

Acknowledgment
I would like to express my sincere gratitude to everyone who
contributed to the completion of this project, “HTML and CSS."
First and foremost, I want to thank our teacher, Mr. Deepak Sarraf
for his guidance and valuable insights throughout the project. I
extend my appreciation to the online communities, forums, and
web development resources that provided a wealth of information
and inspiration. The collaborative spirit within these communities
has played a crucial role in fostering a rich learning environment
for me and countless others.

Special thanks to Grammarly for the assistance in proofreading

and editing the content. The attention to detail and commitment
to clarity have greatly contributed to the readability and
professionalism of the tutorial.

Thank you to everyone who played a part, directly or indirectly, in

making this project a reality.

Sincerely,

Sumedha Khandelwal

Class: 10 “Theta”
 Certificate

This is to certify that

Sumedha
Khandelwal
Of Class 10 ‘Theta’ has Successfully
completed her
Computer Applications project on
“HTML and CSS”.
 Mr. Deepak Sarraf

CONTENTS
1. Introduction to HTML with features
 What is HTML?
 Features of HTML
2. Pre-Requisites
 Text Editor and Web Browser
3. Tags
 Types of Tags
 Container Tags
 Empty Tags
4. Elements and Attributes
*Structure of an HTML document
5. Comments
6. Creating Lists
 Ordered List and Unordered List
 Definition List
 Nested List
7. Insertion of Image
 <img> tag and its Attributes
8. Cell Padding and Cell Spacing
 Table tag and its attributes
9. Linking
 Internal and External Linking
 <a> tag
10. Mailto
11. Embedding Multimedia Object
12. Selector, Property and Value
13. Link Style Sheets
 Internal, External and Inline Style Sheets
14. CSS Border
15. CSS Margins
16. CSS Outline
17. CSS Font

1. Introduction to HTML with Features

 What is HTML?’
HTML is a markup language which is used to mark the contents
that helps in designing web pages.

HTML -> Hyper Text Markup Language

o Hypertext is the way of creating documents that can be

displayed on the web and which help to establish links
between themselves and cross links to other pages on the
web.
o Markup means identifying or marking the text by applying
formatting structures in web documents and producing
different types of effects when the webpage is displayed.
o Language signifies the syntax and rules for writing or
making the text.
 History of HTML:
The term ‘Hypertext’ was coined by Ted Nelson around 1965. It
is a collection of documents containing cross-references or
‘links’. During 1980, IBM developed General Markup Language
(GML) after which the (ANSI) American National Standard
Institute publishes a working draft of Standard GML or SGML.

SGML was adopted by the US Internal Revenue Service and

Department of Defense, USA. HTML was developed in 1990 as a
subset of SGML, whose credit goes to Tim Berners Lee. Both
HTML and SGML are from the same family but only a few
browsers support both.

 Features of Html:

i. Markup Language:
HTML is neither a word processing tool, nor a programming
language. It is a Markup Language which is completely
different from the programming languages.

ii. Character-based:
HTML is the character-based method for describing and
expressing the contents. The contents may be a picture,
text, sound and video clips.
In HTML, picture, sound or video is defined by their
addresses in the computer files.

iii. Platform-independent:
HTML is a platform independent language i.e., HTML
document can run on any type of operating system or any
type of computer architecture.

iv. Hyperlinks:
HTML documents can contain links. These links are called
hyperlinks. The user can navigate from one page to
another as needed and can access and retrieve information
from other sites.

v. Case insensitive:
 HTML is not case sensitive. This means that the output
won’t be affected if the code is in Capital or Small letters.
The user can code the webpage in mixed form and still get
the desired output.

2. Pre-Requisites:

To work in HTML, the user needs:

 Text  Web
Editor Browser

 Text Editor:
Text Editor provides the layout in which the code is typed. The text can
be typed along with the proper HTML syntax to create web pages. Text
Editor can be character or graphical-based.

Some commonly used Text

editors are:
  Notepad
 WordPad
 WordPerfect
 KWrite, etc.

The typed code is saved with the extension .HTM or .HTML in the file
name.

 Web Browser:
Web Browser is an application software that enables to display text,
images, videos, music or other contents which are coded in a text
editor or embedded in a web page on the World Wide Web or on a
Local Area Network. Browsers allow gaining access to the information
easily and quickly.

Now, let’s move on to some basic terms related to HTML…..

3. Tags:

HTML tags are like keywords which define that how web browser will
format and display the content. With the help of tags, a web browser
can distinguish between an HTML content and a simple content.

Tags are surrounded by special delimiter characters. A tag is enclosed

with angular brackets ‘<’ and ‘>’.
Such as-> <html>, <body>, etc.
 There are two types of tags:

i. Container Tags:
The tags which are used in pairs are called ‘container tags’. It has an
opening and a closing tag. The closing tag is same as the opening tag
but it has a slash (/) before it.

Such tags define a section of the text and specify the formatting of all
contents inside it. These tags are also called Paired tags.

Some container tags are:

 <HTML>
 <HEAD>
 <B>
 <CENTER>

Syntax for container tags:

<opening tag>……………</closing tag>

Example:

<i>Hello World</i> This line uses italics tag.

The above example uses the <i> or italics tag. The text written
between the opening and closing tags will display in italics on the
browser.

Output:

ii. Empty Tags:

The standalone tags which are not used in pairs are called Empty tags.
These tags don’t have ending tag and indicate ‘one time’ instructions.
Empty tags represent formatting constructs such as line breaks,
inserting images, etc.

These tags only have an ON tag. ON tag means start tag and OFF tag
mean close/end tag. The empty tags do not act on block of text but
they perform their task at point of insertion only.
 These tags are also called Singular tags.

Some empty tags are:

 <HR>
It is used to add a horizontal rule or line across the webpage.
 <BR>
It is used add a line break in between sentences.

Example:

This is an example of empty tag.

<br>
It uses the line break.
<hr>

Output:

4. Elements and Attributes:

 Elements:
Elements are the different sections that include opening or
closing tag and the content within it. Elements are the
fundamental component of the structure of an HTML document
that includes distinctive components such as body, title,
paragraph or list.
 Elements are similar to tags but we can say that all tags in one
section together with the text or attributes inside are referred to
as elements.

Elements are like the building blocks of the HTML language.

An element has three parts:

I. A start tag
II. An end tag
III. The content between start and end tags

So, the syntax of an element is:

<Opening tag> content </closing tag>

For example:
<h1>Hello World</h1>

Here, <h1> is the start tag and </h1> is the end tag. “Hello
World” is the content between the two tags.
This is an example of the Heading element.
 Attributes:

An attribute is a property that provides some additional

information about a tag.
An attribute specifies how an element or a tag should function. It
is always specified in the opening tag.

Attributes consist of two parts->

i. A name
 ii. A value
The name specifies the property to be set, whereas the value
specifies what you
want for the property. Value is always enclosed within quotation
marks.

So, the basic structure for an attribute is:

<tag name=”value”>

For example:
<body bgcolor=”yellow”>
The “bgcolor” is the name for the attribute of the <body> tag
and “yellow” is its value.

In simple words, an HTML attribute is what modifies an HTML

element. It is usually in the form of unique words that one inserts
inside the opening tag. They control the behavior of the element
that follows.

Thus, an html code consists of tags, elements and attributes.

*Structure of an HTML document:

An HTML document consists of text that comprises the contents
of the document and the tags that define the structure and
appearance of the document. There are 4 tags necessary to
make an HTML webpage:
  <HTML> tag-> It marks the document as an HTML document. It
is a container tag.
Syntax-> <HTML>…………..</HTML>
 <HEAD> tag-> It specifies information about the document. It
contains <TITLE> tag inside it.
Syntax-> <HEAD>…………. </HTML>
 <TITLE> tag -> It displays the title of the webpage on the title
bar of the web browser.
Syntax-> <TITLE>...........</TITLE>
 <BODY> tag -> All the content to be displayed on the webpage
is written in it.
Syntax-> <BODY>…………. </BODY>

So, the fundamental structure of an HTML document is:

5. Comments:

Comments are used to add remarks to the programs created in any

language. The comments are not executed by the compilers or
 browsers of the programs but are displayed in the source programs as
they are. They provide additional information about the program.
Comment can also be written in an HTML document. It is viewed only
in source code of HTML.

The main reason to include the comments in HTML is that it helps the
new user or reader to understand the use of HTML codes in a
document.

The exclamatory sign (!) followed by (-) is used to denote comments

used in HTML document. The text matter written after ‘!-’ within
angular bracket <> is not executed by the web browser. It can only be
viewed in the source program with the added information.

It is not mandatory to specify comments in an HTML document. Syntax

to use comments in HTML is:

<! –REMARKS CAN BE ADDED HERE->

6. Creating Lists:
 Web pages contain text that has to be displayed serially in a list. The
list may be either ordered or unordered. An ordered list is a series of
items displayed in sequence with it whereas an unordered list displays
special bullets in the beginning of each items only. There are two types
of lists which can be displayed in an HTML document:
 Ordered or Numbered List
 Unordered or Bulleted List

1. Ordered List:
An ordered list is a list in which the items are numbered and the order
matters.

This is as opposed to an unordered list where the items are bulleted by

default (and the order doesn't matter).

Basic Syntax of the <ol> tag

The <ol> tag defines ordered lists in HTML. And the list items are
defined by the <li> tag.

The <ol> tag is not an empty element, so it has a closing tag in </ol>
<ol>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>

In browsers, ordered lists appear as numbered lists, like this:

<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Tailwind</li>
<li>React</li>
<li>Mongo DB</li>
<li>React</li>
</ol>

Output:
2. Unordered List:
HTML Unordered List or Bulleted List displays elements in
bulleted format. We can use unordered list where we do not
need to display items in any particular order. The HTML ul tag is
used for the unordered list. There can be 4 types of bulleted list:

 Disc
 Circle
 Square

Syntax to use <ul> tag:

<ul type=”value”>
<li>…</li>
<li>…</li>
<li>…</li>
</ul>

Example:
<ul type=”circle”>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Tailwind</li>
<li>React</li>
<li>Mongo DB</li>
<li>React</li>
</ul>
 Definition List:
There is another type of list, called Definition List. Definition lists
allow you to identify a list of words or phrases and their
corresponding definitions. A simple definition list formats as a
two-column list: the terms you define appear in the left column,
and the definitions for the terms appear in the right column.
Definition lists are slightly more complex than the previous lists
we've discussed, because of the additional tags required to
construct them.

The tags used to create a definition list are:

DL
Begins a definition list. The required end tag ends the list.
DT
Identifies the term being defined. The definition term is
formatted in the left column of the list. It does not require an end
tag.
DD
Identifies the term description. Each definition description is
formatted in the right column of the list, immediately opposite or
below its associated term. It does not require an end tag.
7. Inserting images:
Images help a webpage look more attractive. In HTML, the <img> tag
is used to insert images.

The <img> tag is an empty tag. The attribute src (Source) tag is used
with the tag to specify the location and name of the image file.

Syntax of <img> tag is:

<img src=”image file” align=”value” border=”value” width=”value”
height=”value” hspace=”value” alt=”text”>

Attributes of <img> tag:

 SRC:
This attribute specifies the location of the image file
(.GIF, .JPG, .BMP). Syntax to use the attribute:
<img src=”name of image file”>

 ALIGN:
This attribute is used to align the text and images according to
the specified position on the displayed page. Its values are->
Top, Right, Bottom, Middle, and Left.
Syntax: <img align=”value”>

 BORDER:
This attribute is used to specify the width of the border around
the image. By default, border is not set in the page. The value of
border can be defined in number or percentage.
Syntax: <img border=”value”>

 WIDTH:
This attribute specifies the width of image in pixels or
percentage, in comparison to its original size.
Syntax: <img width=”value”>

 HEIGHT:
This attribute specifies the width of image in pixels or
percentage, in comparison to its original size.
Syntax: <img width=”value”>
  HSPACE:
This attribute is used to set the space towards left or right
margin of the image. Syntax: <img hspace=”value”>

 VSPACE:
This attribute is used to set the space towards top or bottom
margin of the image. Syntax: <img vspace=”value”>

 ALT:
This attribute is used to assign an alternative text that will be
displayed when the cursor moves over the image.
Syntax: <img alt=”text”>

Example:
<img src="animal.jpg" height="180" width="300" alt="animal
image">

Output:

8. Cell Spacing and Cell Padding:

Cell Spacing and Cell Padding are attributes of <Table> tag so we
should know about the <table> tag first.

 <TABLE> tag:

This tag is used to create a Table in the web page. The <table>
tag is a container tag and is used in combination with the <tr>,
<td> and <th> tags.
<tr>: The <tr> tag is a container tag. It is used to create a row.
<td>: The <td> tag is also a container tag. It is used to create a
cell within the row.
<th>: It is like <td> but it denotes the heading cell and makes
the text within it bold.

So, Syntax to create a Table is:

<TABLE>
<TR>
<TD>……. </TD>
<TD>……. </TD>
</TR>
<TR>
<TD>…….. </TD>
<TD>…….. </TD>
</TR>
</TABLE>

Example:
<TABLE BORDER=”1”>
<TR>
<TH> ROLL NO. </TH>
<TH> FIRST NAME </TH>
<TH> LAST NAME </TH>
</TR>
<TR>
<TD> 1 </TD>
<TD> ASHA </TD>
<TD> NAYER </TD>
</TR>
< TR>
<TD> 2 </TD>
 <TD> SANTY</TD>
<TD> NAYER </TD>
</TR>
</TABLE>

Output:

Attributes of Table tag:

 BORDER:
This used to insert border in the cells of the table. The thickness
of the border is defined in pixels.
Syntax: <table border=”value”>

 HEIGHT:
This is used to specify the height of the table. It is specified in
pixels or percentage.
Syntax: <table height=”value”>

 WIDTH:
This is used to specify the width of the table. It is specified in
pixels or percentage.
Syntax: <table width=”value”>

 BGCOLOR:
 This is used to assign the background color of the entire table.
Syntax: <table bgcolor=”value”>

 CELLSPACING:
This attribute is used to specify the space between the cells. The
spacing can be increased or decreased by specifying the value in
number.
Syntax:
<table cellspacing=”value”>

For example:

<TABLE BORDER=”1” CELLSPACING=”10”>

<TR>
<TH> ROLL NO. </TH>
<TH> FIRST NAME </TH>
<TH> LAST NAME </TH>
</TR>
<TR>
<TD> 1 </TD>
<TD> ASHA </TD>
<TD> NAYER </TD>
</TR>
< TR>
<TD> 2 </TD>
<TD> SANTY</TD>
<TD> NAYER </TD>
</TR>
</TABLE>

Output:

 CELLPADDING:
 This attribute is used to specify the space between grid line and
content of the cell. The spacing can be increased or decreased
by specifying the value in number.
Syntax:
<table cellpadding=”value”>

Example:
<TABLE BORDER=”1” CELLPADDING=”10”>
<TR>
<TH> ROLL NO. </TH>
<TH> FIRST NAME </TH>
<TH> LAST NAME </TH>
</TR>
<TR>
<TD> 1 </TD>
<TD> ASHA </TD>
<TD> NAYER </TD>
</TR>
< TR>
<TD> 2 </TD>
<TD> SANTY</TD>
<TD> NAYER </TD>
</TR>
</TABLE>

Output:

9. Linking:
The most useful feature of HTML is to link the test or image or a part of
the same document to another document.

For linking, the <a> tag is used along with its attribute href.
Syntax:
<a href=” Link of the File “>Text</a>

Example:
<a href=”www.google.com”> Click for more info </a>
Here, the Click for more info will make a link for the Google Home
Page.

 The default color of an unvisited like is blue whereas the visited one
is violet.

HTML supports two kinds of linking:

 External Linking:
An external link is used to interconnect two html webpages.
When you want to navigate to some other page or any other URL
by clicking on a link on webpage, external links are created. An
external link can be created by using anchor tag in html web
page.

Syntax:
<a href= “Pagename.html or URL”> text to be written on link
</a>

Here Pagename.html or URL is the name of the webpage or

address where link will navigate on click.
-> Title Attribute:

The Title Attribute is sued to specify a title for the document to

be linked. Any textual matter which is enclosed within the double
quotes is set as the value of the Title Attribute.

Many browsers display the title when the user places the cursor
over the linked object. The title attribute is useful for including
some additional information about the source. Syntax to use the
<A> tag is as follows:

<A HREF=”Link page URL” TITLE=”Text”> TEXT </A>

For Example:

<A HREF=”HTML_page2.html” TITLE=”Fruit Basket”> <img

src=”Fruity.jpg”></A>

->Target Attribute:
The target attribute is used to specify where to display the linked
URL. Some of the values of ‘Target’ attribute:
 _blank: It opens the document in a new window or tab
 _self: It opens the document in the same window it was
clicked.
 _top: It opens the document in the full body of the
window.
 Example:
<A href=”url” Target=”_blank”> Text </a>

It will display the linked document in a new window or tab.

 Internal Linking:
The internal linking links the various sections of the same
document. By clicking on the linked button, the linked part of the
document is displayed on the screen.
<A> tag is also used to make an internal link.

To insert an internal link, create the link to the segment that is to

be displayed.
To define a segment or section, NAME or ID attribute can be used
in the document.

Syntax to create internal linking is as follows:

<A NAME=”SEGMENT1”> Segment1 </A>
<A HREF=”#SEGMENT1”> Text </A>

For example, to set a segment in the document:

<A name=”Segment1”> Segment 1 </A>

After, linking that segment:

<A href=”#Segment1”> Link to Segment1</A>
10. Mailto:

Mailo is used to create a link that opens the e-mail compose box to
write mails and send a new e-mail message. While using <a> tag as
an e-mail tag, a user can use mailto: e-mail address along with href
attribute.

Syntax to use Mailto:

<a href=”mailto:[email protected]”> Send E-mail </a>

The words “Send E-mail” appears as a link. When user clicks the link in
the web browser, a ‘Compose’ window of e-mail is displayed. User
must be logged in through any e-mail Id before using ‘Mailto’ link
otherwise it will display ‘Login’ page of e-mail.

Example:
11. Embedding Multimedia Objects:
You can add audio and video in your web page by using the <AUDIO>
and <VIDEO> tags. Let us learn about them:

 Inserting Sound using <AUDIO> Tag:

The <AUDIO> element enables to embed audio in web pages.
Syntax to use the <AUDIO> tag is:

<AUDIO CONTROLS>
<SOURCE SRC=”Name of the Audio File” TYPE=”AUDIO/WAV”>
</AUDIO>

Example:
 Inserting Video with <Video> Tag:
The <VIDEO> element enables to attach video in the web page.
Syntax to use the <VIDEO> tag is as follows:

<VIDEO WIDTH=”VALUE” HEIGHT=”VALUE” CONTROLS>

<SOURCE SRC=”Link of video” TYPE=”video/mp4”>
</VIDEO>

Example:
12. Selector, Property, Value:

Cascading Style Sheets or CSS is a simple design language which

enables to simplify the process of making web pages. It handles and
describes how an HTML web page will be presented on a web browser.

A CSS comprises of styles rules that are interpreted by web browser

and then applied to the corresponding elements in a document. Its
style rule is made up of 2 parts i.e, Selector and Declaration.

Declaration can further be divided into Property and Value.

Syntax:
Selector {Property: Value}

 Selector:
Selector signifies the HTML tag to which style will be applied.
Selector can be any tag like <H1>, <TABLE>, <P>, etc.

 Property:
It is the type of attribute of the HTML tag. For example: text
color, font style, paragraph spacing, etc.

 Value:
It is the value assigned to the property. Value is always followed
by Property and is separated by a Colon.

An example of a CSS style rule:

H1 {font-color: red ;}
Where,
H1 is the Selector, ‘font-color’ is the Property and ‘red’ is the
Value.
13. Link Style Sheet
There are three ways of inserting or linking a style sheet:
 External Style Sheet
 Internal Style Sheet
 Inline Style

External Style Sheet:

By using External Style Sheet, look of an entire website can be
changed by updating just one CSS file. To do so, a web page must
include a reference to the external sheet file within a <LINK> tag
inside the <HEAD> tag.
Syntax to use the <LINK> tag:
<HEAD>
<LINK REL=”stylesheet” TYPE=”text/css” HREF=”name of style
sheet”>
</HEAD>

Steps to create a web page using external style sheet:

Step 1: Type the code and save file with .css extension.

Step 2: Use the css file in your web page with the help of href attribute
of the <LINK> tag.
Step 3: When the web page is opened, the following output is obtained:

Internal Style Sheet:

CSS design can also be applied into an HTML document by using
<STYLE> tag. This tag should be places inside the
<HEAD>…..</HEAD> tags. An internal style sheet is commonly used
when one web page has a unique style.

CSS Code
Inline Style:

An inline style is used to apply a unique style for a single

element. The Style attribute is used along with the tag.

Syntax to use inline style is:

<element style=”…..style rules….”>

Example:
14. CSS Border:

The CSS border properties enable to specify the style, width and color
of a border.

Border Style
The ‘border-style’ property specifies the outline style of the border.
Some of the outline styles are:

Syntax to use Border-style:

<p style=”border-style: Name of the style”>
Text
</p>

Border Color

The ‘border-color’ property enables to set the color of the four sides of
the border. All the for sides of a border can also be individually
customized to have different colors in each side. If the color of the
border is not set, it inherits the color of the text which is surrounded by
the border.
Syntax to use the property:
<p style=”border-color: Name of the color; border-style: Name of the
style”> Text </p>
Border width

The ‘Border width’ property enables to set the width of the border. The
value of width could be either a length in pc, pt or cm, or it should be
set thin, medium or thick. All four sides of a border can also be
individually customized to have different widths in each side.

Syntax to use the property:

<P style=”border-width: Value of width; border-style: Name of the

style;”>
Text
</P>
15. CSS Margins:

CSS margin properties enable to create space around an HTML

element, outside any border. It is also possible to use negative values
to overlap the content. Properties to set margin around an element
are:

Margin: It specifies the top, right, left and bottom margin around an
element.
Margin-bottom: It specifies the bottom margin.
Margin-top: It specifies the top margin.
Margin-left: It specifies the left margin.
Margin-right: It specifies the right margin.

Syntax to use the property:

<P STYLE=”MARGIN-TOP: VALUE; MARGIN-BOTTOM: VALUE; MARGIN-

LEFT: VALUE; MARGIN-RIGHT: VALUE ;>
16. CSS Outline:

An outline is a line drawn around th elements, to make the element

“stand out”. Outline differs from borders as it is drawn outside the
element borders, and may overlap the contents.

CSS has the following outline properties:

 outline-style
 outline-color
 outline-width
 outline-offset
 outline

Syntax:

<p style=”outline-width: Value of width; outline-style: Value of style;

outline-color: Value of color; outline-offset: Value;”>

Text

</p>
17. CSS Font:

CSS font property is used to define the font, size and the style of the
text. Some of the commonly used properties are font-family, font-style,
font-size, etc.

Font Family:
The font family property is used to change the font of the text. The
font family property works on the principle of ‘fallback’ system i.e., if
the web browser is not compatible with the first font, it tries the next
one and so on.

Syntax:
<P style=”font family:font1, font2,……. , fontN;”>
Text
</p>

Font Style:

The font-style property is mostly used to make the text ‘italic’. Other
types of font styles are normal and oblique.

Font Size:

The font-size property is used to increase or decrease the size of a

font.

Syntax:

<P style=”font-style:italic; font size: Value of font size in px;”>

Text
</P>
THANK YOU