Scribd
Upload
104 views11 pages

HTML Basics for Beginners

The document describes creating a multi-page HTML website using frames. It provides code for header, navigation, body and footer pages. The header page contains a logo link to load a description in the body frame. The navigation page contains an unordered list, where each item loads a description in the body frame when clicked. The overall code creates a framed website layout with dynamic content loading in the body frame from other pages.

Uploaded by

Movie Factory
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
104 views11 pages

HTML Basics for Beginners

The document describes creating a multi-page HTML website using frames. It provides code for header, navigation, body and footer pages. The header page contains a logo link to load a description in the body frame. The navigation page contains an unordered list, where each item loads a description in the body frame when clicked. The overall code creates a framed website layout with dynamic content loading in the body frame from other pages.

Uploaded by

Movie Factory
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Practical No: 1 160050107065

______________________________________________________________________________

PRACTICAL NO: 1
AIM: Study all HTML Tags and Prepare a HTML reference sheet in
following format.

Tag Name Description and Example


<html> Declaration tag
<html>………..</html>
<body> <body>
This is a sample HTML file.
</body>
<p> Use for next line
<p>hello </p>
<u> Underline the syntax
<u>hello world</u>
<i> Use for Italic syntax
<i>hello</i>
<b> Use for bold the syntax
<b>hello world</b>
<sub> Print Word below the line
hello<sub>world</sub>
<sup> Print word above the line
hello<sup>world</sup>
<del> delete the line
<del>hello</del.
<mark> Highlight the syntax
<mark>hellow</mark>
<a> Link to other file
<a herf=”[Link]”>link to google</a>
<img> Display the imge
<img scr=”[Link]”></img>
<hr> Horizontal line
<hr></hr>
<h1> For Font size h1 to h6
<h1>hello world </h1>
<title> Add title
<title>hello</title>

______________________________________________________________________________
Page: 1
Practical No: 1 160050107065
______________________________________________________________________________

<ol> Use for order list


<ol>
<li>iteam1</li>
<li>iteam2</li>
</ol>
<ul> Use for unordered list
<ul>
<li>iteam1</li>
<li>iteam2</li>
</ul>
<dl> Use for description list
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
</dl>
<table> Use for making table
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>

______________________________________________________________________________
Page: 2
Practical No: 2 160050107065
______________________________________________________________________________

PRACTICAL NO: 2
AIM: Create following tables in HTML.

Code:
<html>
<body>
<h3>1</h3>
<table border ="1" width="50%">
<tr>
<th colspan="3">1</th>
<th rowspan="2">2</th>
</tr>

<tr>
<th rowspan="3">3</th>
<th >4</th>
<th >5</th>
</tr>

<tr>
<th colspan="2">6</th>
<th >7</th>
</tr>

<tr>
<th rowspan="2">8</th>
<th >9</th>
<th rowspan="2">10</th>
</tr>

<tr>
<th>11</th>
<th >12</th>

</tr>

</table>

<hr> </hr>

<h3>2</h3>
<table border ="1" width="50%">
<tr>
<th colspan="8">Exam Schedule</th>
</tr>
______________________________________________________________________________
Page: 3
Practical No: 2 160050107065
______________________________________________________________________________
<tr>
<th colspan="4">Theory Exam</th>
<th colspan="4">Practical Exam </th>
</tr>

<tr>
<th>Sr. no </th>
<th>Subject name</th>
<th>Subject code </th>
<th>Date </th>
<th>Sr. no </th>
<th>Subject name</th>
<th>Subject code </th>
<th>Date </th>
</tr>

<tr>
<th>1</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>

<tr>
<th>2</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>

<tr>
<th>3</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
______________________________________________________________________________
Page: 4
Practical No: 2 160050107065
______________________________________________________________________________
<th></th>
</tr>
</table>

<hr> </hr>

<h3>3</h3>
<table border="1" width="50%">
<tr>
<th rowspan="2" colspan="2" >
<table border="1" width="50%">
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<th>c</th>
<th>D</th>
</tr>
</table>
</th>
</tr>
<tr>
<th rowspan="2" colspan="2" > </th>
</tr>
<tr>
<th rowspan="2" colspan="2" > </th>
</tr>
<tr>
<th rowspan="2" colspan="2" >
<table border="1" width="50%">
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<th>c</th>
<th>D</th>
</tr>
</table>
</th>
</tr>
</table>
</body>
</html>

______________________________________________________________________________
Page: 5
Practical No: 2 160050107065
______________________________________________________________________________

Screen Sort:

______________________________________________________________________________
Page: 6
Practical No: 3 160050107065
______________________________________________________________________________

PRACTICAL NO: 3
AIM: Create a web page using HTML frame as shown in following figure. Create different
HTML
Pages and load pages in appropriate sections.
1. [Link]
2. [Link]
3. [Link]
4. [Link]

Code:

1. [Link]
<html>
<head>
<title> HEADER </title>
</head>

<body>
[Header Section]
</body>
</html>

2. [Link]
<html>
<body>
[Navigation Section]
</body>

3. [Link]

<html>
<body>
[Body Section]
</body>
</html>

4. [Link]

<html>
<body>
[Footer Section]
</body>
</html>

______________________________________________________________________________
Page: 7
Practical No: 3 160050107065
______________________________________________________________________________
5. [Link].

<html>
<head>
<title> Frames </title>
</head>

<frameset rows = "*,*,*" >


<frame src = "[Link]" name = "Header"></frame>
<frameset cols = "30%,*">
<frame src = "[Link]" name = "nav"></frame>
<frame src = "[Link]" name = "Body"></frame>

</frameset>
<frame src = "[Link]" name = "Footer"></frame>
</frameset>
</html>

Screen Sort:

______________________________________________________________________________
Page: 8
Practical No: 4 160050107065
______________________________________________________________________________

PRACTICAL NO: 4
AIM: In Practical no 3, make following changes.
a. From the header section, when user will click on logo, the description should
show in the body section.
b. In the navigation section, create one list. When a user will click on list, the
description should show on body section.

Code:
1. [Link]
<html>
<body>
<a href="[Link]" target="Body"><img src="[Link]"></img></a>
</body>
</html>

2. [Link]
<html>
<head>
<h3><u> LIST DETAILS </u></h1>
</head>
<body>
<ol>
<li> <a href="[Link]" target="Body">LIST 1</a></li>
<li> <a href="[Link]" target="Body">LIST 2</a></li>
</ol>
</body>
</html>

______________________________________________________________________________
Page: 9
Practical No: 4 160050107065
______________________________________________________________________________

Screen short:

After click on image.

______________________________________________________________________________
Page: 10
Practical No: 4 160050107065
______________________________________________________________________________

After click on list.

______________________________________________________________________________
Page: 11

You might also like