1.
CREATE A WEBPAGE WITH HEADINGS AND
PARAGRAPH
The <!DOCTYPE html> tag defines the
document type that the browser is going to
render in the output.
The <p> element defines a "paragraph", a
block of text.
A text header, denoted using the <h1>, <h2>.
CODE_____________________________________
<!DOCTYPE html>.
<html>
<head>
</head>
<body>
<h1>My First Page</h1>
<p>This is my first page.</p>
<h2>A secondary header.</h2>
<p>Some more text.</p>
</body>
</html>
2. CREATE A WEBPAGE WITH HEADINGS AND
PARAGRAPH AND ADD A TABLE IN IT.
TO
CODE__________________________________________________
<!DOCTYPE html>
<html>
<head>
<style>
TO ADD BORDER TO
Table,
THE TABLE
Th,
Td {
Border: 2px solid black;
</style>
</head>
<body>
<h1>My First Page</h1>
2
<p>This is my first page.</p>
<h2>A secondary header.</h2>
<p>Some more text.</p>
<table style=”width:100%”> TABLE TAG EXPLAINED
<tr>
<table>: This tag starts the table.
<th>EXAMPLE</th> Everything between the opening
<table> and closing </table> tags
<th>HTML</th>
makes up the table.
<th>TABLE</th> <tr>: Stands for “table row”. Each
<tr> tag defines a row in the table
</tr>
<th>: Stands for “table header”
<tr> <td>: Stands for “table data”. This
tag is used for actual data cells
<td>1</td> under each column
<td>2</td>
The first <tr> has three <th>
elements, setting up the column
<td>3</td> titles
</tr>
Data is fed to the table column by
<tr> columns or we can say horizontally
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
3
3.CREATE A WEBPAGE WITH HEADINGS AND PARAGRAPH AND
ADD A TABLE IN IT.WRITE A CODE FOR TEXT FORMATTING
ALSO.
STYLE TAG EXPLAINED
THE TAG USED FOR TEXT FORMATING IS
THE STYLE TAG
Baix syntax is
<style=” command;command;”>
Ther are a number of tags we can use with this
style tag.
Like font-size:2px; color:red; font-style
All these must be used within the inverted
commas(“”) and each command must end by (;).
CODE_____________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,td
border: 2px solid black;
4
</style> </head>
<body>
Here we used the color font size
<h1>My First Page</h1> and style tag with the style tag
<p style="color:red; font-size:30px;
Inside the paragraph tag,so the
font-family:'Courier New',monospace;"> text formating is performed on
This is my first page.</p> the paragraph only
<h2>A secondary header.</h2>
<p>Some more text.</p>
<table style="width:100%; color:yellow;">. Here the style is used to change colors to all the text of the table.
<tr>
<th>EXAMPLE</th>
<th>HTML</th>
<th>TABLE</th>
</tr>
<tr style="color:red; font-style: italic;"> Here the style tag was used in
<td>1</td>
the tr tag .tr represents the one
row of the table.sot he changes
<td>2</td>
will made to that specific row as
<td>3</td> we can see in the output code.
</tr>
<tr>
<td>4</td>
<td>5</td>
5
<td>6</td>
</tr> Using the style tag inside
different tag will have different
<tr>
results . Basically wherever we
<td>7</td> use the this isnide a tag it will
<td>8</td> process the style tag from start
till the ending tag of the
<td>9</td>
enclosing tag..
</tr>
.
</table> </body></html>
4. CREATE A WEBPAGE WITH A TABLE AND ADD AN IMAGE
AS A DATA ENTRY SET.
_________________________________________________________
TO ADD AN IMAGE I THE
WEBPAGE OR IN A TABLE OR
ANYWHERE WE USE THE
<IMG SRC=”FILE PATH”>
WE ALSO USE WIDTH AND
HEIGHT TAG IN IMG TAG.
UNDER THE FILE PATH WE
HAVE TO SPECIFY THE
EXACT FILE PATH ON YOUR
LOCAL HARD DRIVE.
FOR USIMG WEB IMAGES
UNDER FILE PATH SPECIFY
THE WEB ADDRESS OF THE
IMAGE.
6
CODE__________________________________________________________
<!DOCTYPE html>
<html>
<head>
<style>
table th,td
,{
. border: 2px solid black; }
</style> </head>
<body> <h1>My First Page</h1>
<p style="color:red; font-size:30px;
font-family:'Courier New',monospace;">
This is my first page.</p>
<h2>A secondary header.</h2>
<p>Some more text.</p>
<table style="width:100%; color:yellow;"> HERE WE USE IMG SRC TAG
<tr> <th>EXAMPLE</th>
WITHIN THE <TR> AND </TR>
TAGS TO ENTER IMAGE AS
<th>HTML</th>
DATA IN THE COLUMN OF
<th>TABLE</th> THE TABLE.
</tr> <tr style="color:red; font-style: italic;">
<td>1</td>
IT IS UP TO US WHERE TO
<td>2</td>
USE THIS TAG TO INSERT
<td>3</td> IMAGE WHEREVER
</tr> <tr>
REQUIRED.
<td>4</td>
<td>5</td>
<td>6</td>
</tr> <tr>
<td>7</td>
7
<td>
. <img src="C:\Users\Naincy\Desktop\web ele\1.jpeg" width="60px" height="60px">
</td>
<td>
<img src=""C:\Users\Naincy\Desktop\web ele\2.jpeg" width="60px" height="60px">
</td>
</tr>
</table></body>
</html>
5. CREATE A WEBPAGE WITH A TABLE AND ADD AN IMAGE
AS A DATA ENTRY SET..ALSO SET BACKGROUND IMAGE
<body background=”file path”>
Is the tag used within the body
to set background IMG to a
webpage.
____________________________
CODE____________________________________________________
<!DOCTYPE html>
<html>
<head>
8
<style>
table, th,td { border: 2px solid black; }
</style>
</head>
<body background=”C:\Users\Naincy\Desktop\web ele\backg.jpeg”>
<h1>My First Page</h1>
<p style="color:red; font-size:30px;fontfamily:'CourierNew',monospace;">
This is my first page.</p>
<h2>A secondary header.</h2>
<p>Some more text.</p>
<table style="width:100%; color:yellow;">
<tr>
<th>EXAMPLE</th>
<th>HTML</th>
<th>TABLE</th>
</tr>
<tr style="color:red; font-style: italic;">
<td>1</td> <td>2</td> <td>3</td>
</tr>
<tr> <td>4</td> <td>5</td> <td>6</td>
</tr> <tr> <td>7</td>
9
<td>.<img src=”C:\Users\Naincy\Desktop\web ele\1.jpeg” width=”60px”
height=”60px”> </td>
<td><img src=””C:\Users\Naincy\Desktop\web ele\2jpeg” width=”60px”
height=”60px”> </td>
</tr> </table></body></html>
6.
IN THIS WEBPAGE THE TAG
THAT ARE GOING TO BE
USED FOR SPAN COLUMNS
AND ROWS ARE
<td colspan=”value”>
<td rowspan=”value”>
As the name suggests they are used
to span cells along rows and
columns.
Can only be used with th and td
attributes.
10
CODE__________________________________________________
<!DOCTYPE html><html> <head>
<style>
table, th,td
{ border: 2px solid black; -----------------------------USED TO ADD BORDERS
border-collapse: collapse; } -------------------------TO COLLPASE CELL BORDERS
th,td {padding: 10px;} ------------------------------------------USED TO CREATESPACE B/W CELL AMD DATA
th,td { text-align: right;} ----------------------------------------TO ALIGN DATA
</style>
</head> <body>
<table>
<tr>
HERE COLSPAN IS UDES TO
<th>Country</th>
WITH VALUE 2 TO SPAN
<th colspan="2">POPULATION (IN CRORES)</th> ---------------- THIS PARTICULAR CELL TO
2 COLUMNS
</tr>
<tr>
HERE ROWSPAN IS UDES TO
<th rowspan="3"> INDIA</th>------------------------------ WITH VALUE 2 TO SPAN
<td>1998</td> THIS PARTICULAR CELL TO
3 ROWS.
<td>85</td>
</tr>
<tr>
<td>1999</td>
<td>90</td>
</tr>
<tr>
11
<td>2000</td>
<td>100</td>
</tr>
<tr>
<th rowspan="3">USA</th>
<td>1998</td>
<td> 30</td>
</tr>
<tr>
<td>1999</td>
<td>35</td>
</tr>
<tr>
<td>1999</td>
<td>90</td>
</tr>
<tr>
<th rowspan="3">UK</th>
<td>1998</td>
<td> 25</td>
</tr>
<tr>
<td>1999</td>
<td>30</td>
</tr>
<tr>
<td>1999</td>
<td>35</td>
12
</tr>
</body>
</html>
The rowspan attribute in HTML specifies the number of rows a cell should span. That is if a row spans
two rows, it means it will take up the space of two rows in that table. It allows the single table cell to span
the height of more than one cell or row. It provides the same functionality as “merge cell” in a spreadsheet
program like Excel.
7.HTML FORM
<form> tag us udes to create
form in html document.
IN FORM TAGS THERE
ARE BASICALLY
THE LABEL TAGS
AMD THE
INPUT TAGS
TAGS EXPLAINED_______________________________
13
INPUT TAGS___________________________________________
CODE_____________________________________
<!DOCTYPE html>
<head>
<title>Html Forms</title>
</head>
<body>
<h1><b>Registration form</b></h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label>
<input type="text" id="password" name="password"><br>
<label for="password"> Con. Password:</label>
<input type="text" id="password" name="password"><br>
<label for="First Name"> First Name:</label>
<input type="text" id="First Name" name="First Name"><br>
14
<label for="Last Name"> LAST NAME :</label>
<input type="text" id="Last Name" name="Last Name"><br>
<label for="Email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="Ph. No">Ph. No:</label>
<input type="number" id="number" name="number"><br>
<input type="submit" value="BACK">
<input type="submit" value="SUBMIT">
</form>
</body>
</html>
8.DIV TAG
15
CODE_________________________________________
<!DOCTYPE html>
<head>
<title>Color Layout</title>
</head>
<body>
<div style=”width: 200px; height: 150px; font-family: Arial, sans-serif text-align: center;”>
The HTML <div> tag defines sections in HTML documents, serving as
containers styled with CSS or controlled with JavaScript. It’s easily
customized using class or id attributes and can contain various content.
The div tag is the block-level tag.
The <div> HTML element is the generic container for flow content. It has
no effect on the content or layout until styled in some way using CSS.
<div style=”background-color: orange; color: white; width: 50%; height: 50%;”>
ORANGE
</div><br>
<div style=”background-color: red; color: white; width: 50%; height: 50%;”>
RED
</div>
16
<div style=”background-color: blue; color: white; width: 50%; height: 50%;”>
BLUE
</div><br>
<div style=”background-color: green; color: white; width: 50%; height: 50%;”>
GREEN
</div>
</div>
</body>
</html>
17
