Vineet Garg CNI Lab File
Vineet Garg CNI Lab File
What is HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading".
HTML is the combination of Hypertext and Markup language. Hypertext defines the link
between web pages. A markup language is used to define the text document within the tag
which defines the structure of web pages. This language is used to annotate (make notes
for the computer) text so that a machine can understand it and manipulate text
accordingly. Most markup languages (e.g., HTML) are human-readable. The language
uses tags to define what manipulation has to be done on the text is a paragraph", "this is a
link", etc.
EVOLUTION OF HTML:
HTML is a markup language used by the browser to manipulate text, images, and
other content, in order to display it in the required format. HTML was created by
Tim Berners-Lee in 1991. The first-ever version of HTML was HTML 1.0, but the
first standard version was HTML 2.0, published in 1995.
Elements and Tags: HTML uses predefined tags and elements which tell the browser how
to properly display the content. Remember to include closing tags. If omitted, the browser
applies the effect of the opening tag until the end of the page.
HTML page structure: The basic structure of an HTML page is laid out below. It contains
the essential building-block elements (i.e., doctype declaration, HTML, head, title, and body
elements) upon which all web pages are created.
<!DOCTYPE html>: This is the document type declaration (not technically a tag). It
declares a document as being an HTML document. The doctype declaration is not case-
sensitive.
<html>: This is called the HTML root element. All other elements are contained within it.
<head>: The head tag contains the “behind the scenes” elements for a webpage.
Elements within the head aren’t visible on the front-end of a webpage. HTML
elements used inside the <head> element include:
<style>-This html tag allows us to insert styling into our webpages and make them
appealing to look at with the help of CSS.
<title>-The title is what is displayed on the top of your browser when you visit a
website and contains title of the webpage that you are viewing.
<base>-It specifies the base URL for all relative URLs in a document.
<no script>– Defines a section of HTML that is inserted when the
scripting has been turned off in the user’s browser.
<script>-This tag is used to add functionality in the website with the help of
JavaScript.
<meta>-This tag encloses the meta data of the website that must be loaded every
time the website is visited. For e.g.: - the metadata charset allows you to use the
standard UTF-8 encoding in your website. This in turn allows the users to view your
webpage in the language of their choice. It is a self-closing tag.
<link>– The ‘link’ tag is used to tie together HTML, CSS and JavaScript. It is self-
closing.
<body>: The body tag is used to enclose all the visible content of a webpage. In other words,
the body content is what the browser will show on the front-end.
An HTML document can be created using any text editor. Save the text file using .html
or .htm. Once saved as an HTML document, the file can be opened as a webpage in the
browser.
Features of HTML:
It is easy to learn and easy to use.
It is platform-independent.
Images, videos, and audio can be added to a web page.
Hypertext can be added to the text.
It is a markup language
Why learns HTML?
It is a simple markup language. Its implementation is easy.
It is used to create a website.
Helps in developing fundamentals about web programming.
Boost professional career.
Advantages:
HTML is used to build websites.
It is supported by all browsers.
It can be integrated with other languages like CSS, JavaScript, etc.
Disadvantages:
HTML can only create static web pages. For dynamic web pages, other languages
have to be used.
A large amount of code has to be written to create a simple web page.
The security feature is not good.
PRACTICAL- 2
NOTE: The Save as type box defaults to Web Page (*.htm; *.html).
In the File name box, type the file name that you want for your document,
and then click Save.
In the Document let’s write-
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Buddy! </title>
</head>
<body>
<p>
Hello Buddy!
</p>
<p>
Hello Buddy!
</p>
</body>
</html>
PRACTICAL- 3
Steps to create:
Open a simple text editor, such as Notepad, and create a new file. Do not use an
HTML editor for this exercise.
NOTE: The Save as type box defaults to Web Page (*.htm; *.html).
In the File name box, type the file name that you want for your document,
and then click Save.
In the Document let’s write-
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Buddy! </title>
</head>
<body>
<p>
Hello Buddy!
</p>
<p>
Hello Buddy!
</p>
</body>
</html>
PRACTICAL- 4
AIM: Write HTML code to develop a Web page having the background in red
and title “My First Page” in any other colour.
Steps to proceed:
First of all, open the Notepad in your computer or laptop.
Write the document as:
<html>
<body bgcolor="yellow">
<font color="blue">
MY FIRST PAGE
</font>
</body>
</html>
Save the file with the file extension .html
Now run the file in the file in the internet explorer
Now the result will happen as like:
PRACTICAL- 5
AIM: Create an HTML document giving details of your name, age, telephone number,
address, TLC code and enrolment number aligned in proper order
Steps to create:
Open Notepad, in the PC or System
A blank document will appear, start writing html codes there as;
<html>
<body>
<ol>
<li>Name : Vineet Garg</li>
<li>Age : 19</li>
<li>Telephone number : 8383012338</li>
<li>Address : Village Bhuapur, Tehsil Tigoan, Faridabad</li>
<li>TLC Code: 121101</li>
<li>Enrollment Number : 20011301054</li>
</ol>
</body>
</html>
Here, <ol> tag defines the ordered list. An ordered list can be numerical or alphabetical.
Then, save the document with using the file extension “.html”.
Then, file is saved in your system in the form of link which can be run in the
browser.
<html>
<title>Training</title>
<head>Method of Training</head>
<body>
<P>Training is teaching, or developing in oneself or others, any skills and knowledge
or fitness that relate to specific useful competencies.
Training has specific goals of improving one's capability, capacity, productivity and
performance. It forms the core of apprenticeships and provides the backbone of
content at institutes of technology (also known as technical colleges or
polytechnics. </p>
<H1>Types Of Training</H1>
<P>There are many types of training.................etc.</P>
<H2>Advantages Of Training</H2>
<P> It increases potential and efficency of the person </P>
<H3> Disadvantages of Training</H3>
<P> It increases cost and adds extra burden to company administration </P>
</body>
</html>
Then save the file in the PC with the file extension of “.html”.
AIM: Create a Web Page using href attribute of anchor tag and the attribute:
alink, vlink, etc…
Steps to Create:
Open Notepad, in your system or PC
Then, the blank document will open.
Start Writing the HTML codes in the document;
<html>
<head>
<title> HTML Text Link Example </title>
</head>
<body>
<p> You can learn free html at </p>
<a href= LINK > YouTube.com </a>
</body>
</html>
Clicking
Then, on
start
thiswriting
link willthe HTML
re-direct code
you aspage on the YouTube
to the
<html>
<head>
<title> HTML Text Link Example </title>
</head>
<body>
<a href= "#bottom">bottom section </a>
<div id="top">The HyperText Markup Language or HTML is the standard markup
language for documents designed to be displayed in a web browser. It can be assisted
by technologies such as Cascading Style Sheets (CSS) and scripting languages such
as JavaScript.</div>
<div id="bottom">The following table shows the Basic HTML tags that define the
basic web page: Specifies the document as a web page.
Specifies the descriptive information about the web documents. Specifies
the title of the web page. Specifies the body of a web document. </div>
<p> You can learn free html at </p>
</body>
</html>
AIM: Write HTML Code to create a Web page of pink colour and display a moving
message in red colour.
Steps To Create:
Open the Notepad, in your system or PC
Then the blank document will appear on the screen.
Start writing HTML Codes, in the blank document as:
<html>
<head>
<body bgcolor="pink">
<title> HTML Text Link Example </title>
</head>
<body>
< marquee >WE ARE BEST FRIENDS </ marquee >
</body>
</html>
AIM: Create a Web Page, showing an ordered list of the names of five of your friends.
Steps to Create:
Open Notepad, in your system or PC
A blank document will appear on the screen.
Start writing codes HTML code for the following as:
<html>
<head> MY FIVE FRIENDS</head>
<body>
<ol>
<li>Arhant</li>
<li>Sahil</li>
<li>Manish</li>
<li>Pooja</li>
<li>Aashina</li>
</body>
</html>
<html>
<head> Nested List Showing content of book </head>
<body>
<ul>
<li>UNIT-1
<ul>
<li>Introduction to
network</li>
<li>Advantages and disadvantages of network</li>
<li>Network Topologies</li>
</ul>
</li>
<li>UNIT-2
<ul>
<li>OSI Model</li>
<li>TCP/IP Model</li>
<li>Protocols and its classification</li>
</ul>
</li>
</body>
</html>
AIM: Create a Web Page showing an unordered list of five of your friends. Steps to
Create:
Open Notepad, in your system or PC
A blank document will appear on the screen.
Start writing codes HTML code for the following as:
<html>
<head> My Five Friends</head>
<body>
<ul>
<li>Arhant</li>
<li>Sahil</li>
<li>Manish</li>
<li>Pooja</li>
<li>Aashina</li>
</body>
</html>
AIM: Create a Web Page, which should contain a table having two rows and two
columns.
Steps to create:
Open Notepad, in your system or PC
A blank document will appear on the screen.
Start writing codes HTML code for the following as:
<html>
<head> Table having Two rows and Two columns </head>
<body>
<table>
<tr>
<th> Vineet Garg </th>
<th> 8383012338 </th>
</tr>
<tr>
<td> Sahil </td>
<td> 9826514245 </td>
</tr>
<tr>
<td> Arhant </td>
<td> 7856254951 </td>
</table>
</body>
</html>
Now, save the document with the file extension, “.html”.
Load the saved document in the browser. The result
for the same will appear like that:
PRACTICAL- 14
AIM: Create a Web Page, which should contain a table having two rows and two
columns with some dummy data.
Steps to create:
Open Notepad, in your system or PC
A blank document will appear on the screen.
Start writing codes HTML code for the following as:
<html>
<head> Table having Two rows and Two columns </head>
<body>
<table>
<tr>
<th> Ritesh </th>
<th> 8383012338 </th>
</tr>
<tr>
<td> Sachin </td>
<td> 7284564855 </td>
</tr>
<tr>
<td> Raju </td>
<td> 8542787564 </td>
</table>
</body>
</html>
Now, save the document with the file extension, “.html”.
Load the saved document in the browser.
PRACTICAL- 15
AIM: Create the following table in HTML with some Dummy Data
<html>
<body>
<table border=2>
<tr>
<td rowspan=2><h1>Name of the train</h1></td>
<td rowspan=2><h1>Place</h1></td>
<td rowspan=2><h1>Destination</h1></td>
<td rowspan=2><h1>Fare</h1></td>
<td colspan=2><h1><center>Time</center></h1></td>
</tr>
<tr>
<td>Arrival</td>
<td>Departure</td>
</tr>
<tr>
<td>Rajdhani Express</td>
<td>Jodhpur</td>
<td>Karnataka</td>
<td>800</td>
<td>5.00AM</td>
<td>10.00AM</td>
</tr>
<tr>
<td>Shatabdi Express</td>
<td>Delhi</td>
<td>Ranchi</td>
<td>1200</td>
<td>8.00AM</td>
<td>14.00PM</td>
</tr>
</table>
</body>
</html>
PRACTICAL- 16
AIM: Create the Following Table in HTML:
Colour (White)
Steps To Create:
Open Notepad, in your system or PC
A blank document will appear on the screen.
Start writing codes HTML code for the following as:
<html>
<head>
<body>
<table border="2">
<tr>
<th colspan="3">Color(White)</th>
</tr>
<tr>
<td>RED</td>
<td>GREEN</td>
<td>BLACK</td>
</tr>
</table>
</head>
</html>
AIM: Design an HTML Page having 3 images placed in the following format.
(Hint: Table can be used to align images)
Steps To Create:
Open Notepad, in your system or PC
A blank document will appear on the screen.
Start writing codes HTML code for the following as:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial- scale=1.0"
/>
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.container { width:
1000px;
margin-left: 350px;
margin-top: 150px;
}
.box-1,
.box-2,
.box-3 {
border: 3px solid black;
height: 150px;
width: 25%;
}
.box-1 {
text-align: center;
}
.box-2 {
text-align: center;
position: relative;
left: 254px;
}
.box-3 {
text-align: center;
position: relative;
left: 508px;
}
.image1,
.image2,
.image3 {
position: relative;
top: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box-1"><span class="image1"><img src=" TULIP.jpg" width="200px"
height="100px">></span></div>
<div class="box-2"><span class="image2"><img src="Jellyfish.jpg"
width="200px" height="100px"></span></div>