Scribd
Upload
5 views

Web Assignment

Uploaded by

kaizokuaadi1611
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Web Assignment

Uploaded by

kaizokuaadi1611
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

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

You might also like