HTML Commands for Standard VII and VIII
Parts of Any HTML Document
Every HTML document consists of two elements:
Head elements -- provides page title and general page formatting commands
Body elements -- put the main HTML text in this part.
HTML Tags
All HTML commands or tags have the following form:
HTML is not case sensitive -- tags can be upper or lower case letters (even mixtures of cases).
Start of Tag <name_of_tag>....Text within Tag..... End of Tag </name_of_tag>.
Tags control the structure, formatting and hypertext linking or HTML pages.
HTML Page Structure
<HTML>
<HEAD>
<TITLE>……</TITLE>
</HEAD>
<BODY>
THE BODY CONTENTS
</BODY>
</HTML>
Head elements
<head>....</head> tag delimits head part of document.
<title>....</title> Defines the title of the Web page.
The Body Element
<body>....</body> tag delimits body part of document.
All other commands that constitute web page nested inside body.
Body must follow head.
Parts of Any HTML Document
Every HTML document consists of two elements:
Head elements -- provides page title and general page formatting commands
Body elements -- put the main HTML text in this part.
HTML Tags
All HTML commands or tags have the following form:
HTML is not case sensitive -- tags can be upper or lower case letters (even mixtures of cases).
Start of Tag <name_of_tag>....Text within Tag..... End of Tag </name_of_tag>.
Tags control the structure, formatting and hypertext linking or HTML pages.
HTML Page Structure
<HTML>
<HEAD>
<TITLE>……</TITLE>
</HEAD>
<BODY>
THE BODY CONTENTS
</BODY>
</HTML>
Head elements
<head>....</head> tag delimits head part of document.
<title>....</title> Defines the title of the Web page.
The Body Element
<body>....</body> tag delimits body part of document.
All other commands that constitute web page nested inside body.
Body must follow head.
FIRST PROGRAM
<html>
<head>
<title>FIRST PROGRAM</title>
</head>
<body>
<p>I AM WRITING MY FIRST HTML PROGRAM</p>
</body>
</html>
PARAGRAPH ALIGNMENT
<html>
<head>
<title>PARAGRAPH ALIGNMENT</title>
</head>
<body>
<p align="center">HTML PARAGRAPH COMMANDS</p>
<p align="right">2 OCTOBER 2018</p>
<p>LEFT ALIGNED</p>
<p align="right">RIGHT ALIGNED</p>
<p align="center">CENTRE ALIGNED</p>
</body>
</html>
Font Types -BOLD ITALIC UNDERLINE
<html>
<head>
<title>BOLD ITALIC UNDERLINE</title>
</head>
<body>
<b>BOLD TEXT</b>
<i>ITALIC TEXT</i>
<u>UNDERLINE TEXT</u>
<b><u>BOLD UNDERLINE</u></b>
<i><b><u>BOLD ITALIC UNDERLINE</u></b></i>
</body>
</html>
DIFFERENT FONT COLOURS
<html>
<head>
<title>DIFFERENT FONT COLOURS</title>
</head>
<body>
<FONT COLOR=RED>Red Colour Text</FONT><BR>
<FONT COLOR=BLUE>Blue Colour Text</FONT><BR>
<FONT COLOR=YELLOW>Yellow Colour Text</FONT><BR>
<FONT COLOR=GREEN>Green Colour Text</FONT><BR>
</body>
</html>
BULLETED LIST
<html>
<head>
<title>BULLETED LIST</title>
</head>
<body>
<p> BULLETED LIST</p>
COMPUTER HAS
<ul>
<li>INPUT DEVICE </li><br>
<li>OUTPUT DEVICE </li><br>
<li>CENTRAL PROCESSING UNIT </li><br>
<li>SECONDARY STORAGE </li><br>
</ul>
</body>
</html>
DIFFERENT TYPES OF BULLETED LIST
<html>
<head>
<title>DIFFERENT BULLETED LIST</title>
</head>
<body>
<p> BULLETED LIST</p>
DISC BULLET
<ul type="disc">
<li>HYPER TEXT</li>
<li>MARKUP LANGUAGE</li>
</ul>
CIRCLE BULLET
<ul type="circle">
<li>HYPER TEXT</li>
<li>MARKUP LANGUAGE</li>
</ul>
SQUARE BULLET
<ul type="square">
<li>HYPER TEXT</li>
<li>MARKUP LANGUAGE</li>
</ul>
</body>
</html>
NUMBERED LIST
<html>
<head>
<title>NUMBERED LIST</title>
</head>
<body>
EXAMPLE OF INPUT DEVICE
<ol>
<li>KEYBOARD</li>
<li>MOUSE</li>
<li>BAR CODE READER</li>
</ol>
</body>
</html>
DIFFERENT TYPES OF NUMBERED LIST
<html>
<head>
<title>DIFFERENT NUMBERED LIST</title>
</head>
<body>
<p>NUMBERED LIST</p>
NUMBER 1,2,3
<ol type="1" start="1">
<li>NUMBER LIST</li>
<li>NUMBER LIST</li>
</ol>
ROMAN NUMBERS I,II,III
<ol type="I" start="1">
<li>ROMAN NUMBER LIST</li>
<li>ROMAN NUMBER LIST</li>
</ol>
ALPHABET A,B,C
<ol type="A" start="1">
<li>ALPHABET LIST</li>
<li>ALPHABET LIST</li>
</ol>
</body>
</html>
CONNECT TO OTHER PAGES OR SITES THROUGH HYPERLINK
<html>
<head>
<title>CONNECT TO OTHER PAGES OR SITES</title>
</head>
<body>
YAHOO" target="_blank">http://yahoo.com">YAHOO PAGE
MSN" target="_blank">http://MSN.com">MSN PAGE
</body>
</html>
INSERT IMAGES IN A PAGE FROM A HARDDISK
<html>
<head>
<title>INSERTING IMAGES IN A PAGE</title>
</head>
<body>
<p><img src="file:///C:/Users/Public/Pictures/Sample%20Pictures/Tulips.jpg" width="1024" height="768">
<img src="file:///C:/Users/Public/Pictures/Sample%20Pictures/Desert.jpg" width="1024" height="768"></p>
</body>
</html>
INSERT IMAGE FROM WEB PAGE
<html>
<head>
<title>INSERT IMAGE FROM WEB PAGE</title>
</head>
<body>
</body>
</html>
SLIDING THE TEXT USING MARQUEE
<html>
<head>
<title>MARQUEE</title>
</head>
<body>
<p><marquee>BHAWANI IS TEACHING HTML</marquee></p>
<p><marquee behavior="slide">HTML IS INTERESTING</marquee></p>
<p><marquee behavior="alternate">IT IS EASY TO CODE</marquee></p>
</body>
</html>
INTRODUCTION TO TABLE
<html>
<head>
<title>Introduction to Table </title>
</head>
<body>
<table border="1" width=100%>
<tr>
<td>Roll Number </td>
<td>Name of Student </td>
<td>Age of Student</td>
<td>Phone Number</td>
</tr>
<tr>
<td>1</td>
<td>Rohan Kumar</td>
<td>16</td>
<td>1234567890</td>
</tr>
<tr>
<td>2</td>
<td>Rahul Kumar</td>
<td>17</td>
<td>8090890009</td>
</tr>
</table>
</body>
</html>
| Roll Number | Name of Student | Age of Student | Phone Number |
| 1 | Rohan Kumar | 16 | 1234567890 |
| 2 | Rahul Kumar | 17 | 8090890009 |
EXAMPLE OF COLSPAN AND ROWSPAN
<html>
<head>
<title>EXAMPLE OF COLSPAN and ROWSPAN</title>
</head>
<body>
<table border="1" width=100%>
<tr>
<td rowspan=2>ROLL NUMBER</td>
<td rowspan=2>NAME OF STUDENT</td>
<td colspan="2">ADDRESS OF THE STUDENT</td>
<td rowspan=2>CLASS</td>
</tr>
<tr>
<td>LOCALITY</td>
<td>CITY</td>
</tr>
<tr>
<td>1</td>
<td>ROHAN KUMAR</td>
<td>SAKCHI</td>
<td>JAMSHEDPUR</td>
<td>VIII</td>
</tr>
<tr>
<td>2</td>
<td>RAHUL KUMAR</td>
<td>KADMA</td>
<td>JAMSHEDPUR</td>
<td>VIII</td>
</tr>
</table>
</body>
</html>
| ROLL NUMBER | NAME OF STUDENT | ADDRESS OF THE STUDENT | CLASS | |
| LOCALITY | CITY | |||
| 1 | ROHAN KUMAR | SAKCHI | JAMSHEDPUR | VIII |
| 2 | RAHUL KUMAR | KADMA | JAMSHEDPUR | VIII |
SETTING FORE COLOUR OF THE TEXT AND BACK COLOUR OF THE CELLS OF THE TABLE
<html>
<head>
<title>FORECOLOUR AND BACKCOLOUR OF THE TABLE </title>
</head>
<body>
<table border="1" width=100%>
<tr>
<td bgcolor="CYAN">ROLL</td>
<td bgcolor="CYAN">MARK 1</td>
<td bgcolor="CYAN">MARK 2</td>
</tr>
<tr>
<td>1</td>
<td><font color="GREEN">84</font></td>
<td bgcolor="RED">30</td>
</tr>
<tr>
<td>2</td>
<td><font color="GREEN">60</font></td>
<td><font color="GREEN">80</font></td>
</tr>
</table>
</body>
</html>
| ROLL | MARK 1 | MARK 2 |
| 1 | 84 | 30 |
| 2 | 60 | 80 |
Form Field [ Text, Checkbox, Radio, Select Button etc]
<html>
<head>
<title>Form Field </title>
</head>
<body>
<form method="POST">
<p><font size="5">Name <input type="text" size="20" name="T1"></font></p>
<p><font size="5">Address </font><textarea name="S1" rows="1" cols="20"></textarea></p>
<p><font size="5">Qualification <input type="checkbox" name="C1">10
<input type="checkbox" name="C2">10 + 2
<input type="checkbox" name="C3">Graduate</font></p>
<p><font size="5">Gender <input type="radio" checked name="R1" value="V1">Male
<input type="radio" name="R1" value="V2">Female</font></p>
<p><font size="5">Nationality </font>
<select name="D1" size="1">
<option>INDIAN
<option>NON RESIDENT INDIAN
</select></p>
<p><input type="submit" name="B1" value="Submit"></p>
</form>
</body>
</html>
Name
Address
Qualification 10 10 + 2 Graduate
Gender Male Female
Nationality
HTML commands serve as building blocks for creating websites. Learning them in Standard VII and VIII equips students with essential skills to structure content, insert images, and design web pages effectively.
ReplyDeletebest schools near Saroor Nagar Hyderabad