CLASS – VII
HTML
What is HTML?
• HTML stands for HyperText Markup Language.
• It is used to create and design webpages on the internet.
• HTML tells the browser how to display the content on the webpage.
HTML Tags: HTML code is written inside tags. Tags are like instructions for the browser.
o Every tag has an opening tag <tag> and a closing tag </tag>.
o The opening tag tells where the code begins.
o The closing tag tells where the code ends.
Basic Structure of an HTML Document:
<html>
<head>
<title>Title of the Page</title>
</head>
<body>
</body>
</html>
o <html>: The root tag for an HTML document.
o <head>: Contains meta-information about the document like the title.
o <body>: Contains the content of the webpage that people see.
Common HTML Tags
1. <h1> to <h6> (Heading Tags):
o These tags are used for headings. <h1> is the largest, and <h6> is the smallest.
o Example: <h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
2. <p> (Paragraph Tag):
o Used to write paragraphs of text.
o Example: <p>This is a paragraph of text.</p>
3. <img> (Image Tag):
o Used to add images to a webpage.
o Example: <img src="image.jpg" alt="Description of image">
o src: Specifies the image file.
o alt: Provides a description of the image (used when the image is not found or for
accessibility).
<HTML>
<HEAD> <TITLE> VI E DEMO </TITLE>
</HEAD>
<BODY BGCOLOR="AQUA">
<H1> CYBER BULLYING </H1>
<H2> CYBER BULLYING </H2>
<H3> CYBER BULLYING </H3>
<H4> CYBER BULLYING </H4>
<H5> CYBER BULLYING </H5>
<H6> CYBER BULLYING </H6>
<hr>
<img src="file:///C:/Users/HP/Downloads/OIP%20(3).jpeg" width="400px" height="400px">
<P> Cyberbullying is a form of cybercrime where individuals use online platforms, such as social media and
gaming communities, to harm others. This can involve sharing negative posts, false information, or personal
details about a victim to humiliate or threaten them. It is a serious issue that can have devastating effects on
a victim's life, including severe emotional distress and, in some cases, suicide. Unlike traditional bullying,
cyberbullying leaves behind digital traces, which can help identify the perpetrators and provide evidence for
justice. </P>
</BODY>
</HTML>
4. <ul> and <ol> (List Tags):
o <ul> is used for unordered lists (bulleted lists). Type attribute value 1,a,A,I,i
o <ol> is used for ordered lists (numbered lists). Type attribute value disc, square, circle,
none
o The Default value for ul is 1 and for ol the default value is disc.
o Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
5. <dl> (description list):
A description list is used to create a list of terms and their descriptions. It is often used for
glossaries, definitions, or any content that has a key-value pair.
In HTML, a description list is created using the following three tags:
o <dl> – This tag is used to define the description list.
o <dt> – This tag is used to define a description term (the word or phrase you want to
define).
o <dd> – This tag is used to define the description or definition of the term
Syntax:
<dl>
<dt>Term 1</dt>
<dd>Description or definition for term 1.</dd>
<dt>Term 2</dt>
<dd>Description or definition for term 2.</dd>
<dt>Term 3</dt>
<dd>Description or definition for term 3.</dd>
</dl>
Code:
<html>
<head> <title> list in html </title>
</head>
<body>
<h1> programming language </h1>
<ol type="a">
<li> java </li>
<li> python </li>
<li> c++ </li>
<li> c# </li>
</ol>
<ul type="none">
<li> java </li>
<li> python </li>
<li> c++ </li>
<li> c# </li>
</ul>
<dl>
<dt> Malware </dt>
<dd> It is a malicious program </dd>
<dt> Computer network </DT>
<dd> It is a inter-connected network of computer </dd>
</dl>
</body>
</html>
6. <table> (Table Tag):
o Used to create tables.
Syntax:
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
o <tr> defines a row.
o <th> defines a table header.
o <td> defines a table cell.
Code:
<HTML>
<HEAD> <TITLE> CONCEPT OF TABLES </TITLE>
<STYLE>
TABLE,TD,TH
{
BORDER: 4PX SOLID RED;
BORDER-COLLAPSE:COLLAPSE;
}
</STYLE>
</HEAD>
<BODY BGCOLOR="AQUA">
<TABLE>
<TR>
<TH> ROLL NO. </TH>
<TH> NAME </TH>
<TH> ADDRESS </TH>
<TH> PHONE NO. </TH>
</TR>
<TR>
<TD> 1 </TD>
<TD> ARJUN </TD>
<TD> MAYUR VIHAR PHASE II </TD>
<TD>989997678 </TD>
</TR>
<TR>
<TD> 2 </TD>
<TD> ANAMIKA</TD>
<TD> NOIDA </TD>
<TD>9777997678 </TD>
</TR>
<TR>
<TD> 3 </TD>
<TD>KARAN</TD>
<TD> VAISHALI GZB</TD>
<TD>9777997222</TD>
</TR>
</TABLE>
</BODY>
</HTML>
HTML Attributes
Attributes provide additional information about HTML elements. They are written inside the opening tag.
• src: Used in <img> tags to specify the image source.
• alt: Used in <img> to describe the image.
• Width: used in <img> to describe the breadth of an image
• height: used in <img> to describe the height of an image
Example:
<img src="image.jpg" alt="An example image" width="300" height="200">
HTML Formatting Tags
1. Bold Text: <b> makes text bold.
Example: <b>This is bold text</b>
2. Italic Text: <i> makes text italic.
Example: <i>This is italic text</i>
3. Underlined Text: <u> makes text underlined.
Example: <u>This is underlined text</u>
Code:
<html>
<head>
<title>Bold, Italic, and Underline Demo</title>
</head>
<body>
<h1>Bold, Italic, and Underline Example</h1>
<p><b>This text is bold.</b></p>
<p><i>This text is italic.</i></p>
<p><u>This text is underlined.</u></p>
<p>Here is combined style:</p>
<p><b><i><u>This text is bold, italic, and underlined.</u></i></b></p>
</body>
</html>
4. Break Line: <br> adds a line break (moves text to the next line).
Example: This is the first line.<br>This is the second line.
Code:
<html>
<head>
<title>Using <br> Tag</title>
</head>
<body>
<h1>Line Break Example</h1>
<p>This is the first line.<br>This is the second line after a line break.</p>
<p>Here is another example:<br>Line 1<br>Line 2<br>Line 3</p>
</body>
</html>
