Scribd
Upload
16 views

Wad Lab Programs

Uploaded by

Bhuvana ThimmiReddy
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
16 views

Wad Lab Programs

Uploaded by

Bhuvana ThimmiReddy
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
You are on page 1/ 28

What is a browser?

A browser is an application program that provides a way to look at


and interact with all the information on the World Wide Web. This
includes Web pages, videos and images. The word "browser"
originated prior to the Web as a generic term for user interfaces that
let you browse (navigate through and read) text files online.
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", "this is a paragraph", "this is a link", etc.

Elements and Tags:


An HTML element is defined by a start tag, some content, and an end
tag.
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph. </p>

HTML Tags: -
HTML tags are used to mark-up HTML elements .HTML tags are
surrounded by the two characters < and >. The surrounding
characters are called angle brackets.
HTML tags normally come in pairs like and the first tag in a pair is the
start tag, the second tag is the end tag. The text between the start
and end tags is the element content. HTML tags are not case
sensitive, means the same as.
The most important tags in HTML are tags that define headings,
paragraphs and line breaks.
Tag Description
<html> This tag encloses the complete HTML document
and mainly comprises of document header which
is represented by and document body which is
represented by tags.
<head> This tag represents the document's header which
can keep other HTML tags.
<title> The <title> tag is used inside the<head> tag to
mention the document tile.
<body> This tag represents the document's body which keeps
other HTML tags.
<p> This tag represents a paragraph.
<h1> to <h6> Defines header 1 to header 6
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!...> Defines a comment

Basic HTML5 structure


This is a basic HTML5 page structure and may be used as a template
to which your documents can be modeled. Imagine that the grey
border around the outside represents the body element with the
various HTML5 elements as descendants of it.

Metadata
The <meta> tag defines metadata about an HTML document.
Metadata is data (information) about data.
<meta> tags always go inside the <head> element, and are typically
used to specify character set, page description, keywords, author of
the document, and viewport settings.
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used by browsers (how to display content or reload
page), search engines (keywords), and other web services.
Example: -
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Adding favicon
To add a favicon to your website, either save your favicon image to
the root directory of your webserver, or create a folder in the root
directory called images, and save your favicon image in this folder. A
common name for a favicon image is "favicon.ico".

Next, add a <link> element to your "index.html" file, after the <title>
element, like this:
Example
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Now, save the "index.html" file and reload it in your browser. Your browser tab
should now display your favicon image to the left of the page title.
Adding comments
Comments are some text or code written in your code to give an
explanation about the code, and not visible to the user. Comments
which are used for HTML file are known as HTML comments.
Anything written between these tags will be ignored by the browser,
so comments will not be visible on the webpage.

Comments of any code make code easy to understand and increase


readability of code.
Comments are also part of the code, which gives an explanation of
the code.
Syntax
<! -- Write commented text here -->
Example
<! -- <p>There is some text</p>
<p>There is second text</p> -->

Adding heading
A HTML heading or HTML h tag can be defined as a title or a subtitle
which you want to display on the webpage. When you place the text
within the heading tags <h1>.........</h1>, it is displayed on the
browser in the bold format and size of the text depends on the
number of heading.
There are six different HTML headings which are defined with the
<h1> to <h6> tags, from highest level h1 (main heading) to the least
level h6 (least important heading).
h1 is the largest heading tag and h6 is the smallest one. So h1 is used
for most important heading and h6 is used for least important.

Task- 1: Create a Basic HTML document


<!DOCTYPE html>
<html>
<head>
<title>Heading elements</title>
</head>
<body>
<h1>This is main heading of page. </h1>
<p>h1 is the most important heading, which is used to display the
keyword of page </p>
<h2>This is first sub-heading</h2>
<p>h2 describes the first sub heading of page. </p>
<h3>This is Second sub-heading</h3>
<p>h3 describes the second sub heading of page.</p>
<p>We can use h1 to h6 tag to use the different sub-heading with
their paragraphs if
required.
</p>
</body>
</html>

Output:
Task-2: Create your Profile Page
Demo1.html
<!DOCTYPE html>
<html>
<body>
<img src="https://i.imgur.com/bDLhJiP.jpg" alt="Trulli"
width="500" height="333">
<h2>John Robert</h2>
<div style="background-
color:black;color:white;padding:20px;">
<h2>My Hobbies</h2>
<p>Reading Books, Web Surfing, Exploration </p>
</div>
<h1>I am Web Developer specialized in React and Spring
MVC</h1>
<p>My mother has <span style="color:blue;font-
weight:bold">blue</span> eyes and my father has <span
style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes. </p>
<a href="https://vijayreddy.netlify.app">My Portfolio</a>
<h4>Experience in Technologies</h4>
<ul>
<li>React</li>
<li>Java</li>
<li>Node</li>
</ul>

</body>
</html>
Demo2.html
<!DOCTYPE html>
<html>
<body>
<div>
<iframe src="demo1.html" height="1000" width="1000"
title="Iframe Example">
</iframe>
</div>
</body>
</html>
Task-2: Create your Profile Page
Demo1.html
<!DOCTYPE html>
<html>
<body>
<img src="https://i.imgur.com/bDLhJiP.jpg" alt="Trulli"
width="500" height="333">
<h2>John Robert</h2>
<div style="background-
color:black;color:white;padding:20px;">
<h2>My Hobbies</h2>
<p>Reading Books, Web Surfing, Exploration </p>
</div>
<h1>I am Web Developer specialized in React and Spring
MVC</h1>
<p>My mother has <span style="color:blue;font-
weight:bold">blue</span> eyes and my father has <span
style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes. </p>
<a href="https://vijayreddy.netlify.app">My Portfolio</a>
<h4>Experience in Technologies</h4>
<ul>
<li>React</li>
<li>Java</li>
<li>Node</li>
</ul>
</body>
</html>
Demo2.html
<!DOCTYPE html>
<html>
<body>
<div>
<iframe src="demo1.html" height="1000" width="1000"
title="Iframe Example">
</iframe>
</div>
</body>
</html>
Task-3: Create a Class Timetable (to merge
rows/columns, use rowspan/colspan)
<!DOCTYPE html>
<html>

<body>
<h1>TIME TABLE</h1>
<table border="5" cellspacing="0" align="center">
<!--<caption>Timetable</caption>-->
<tr>
<td align="center" height="50"
width="100"><br>
<b>Day/Period</b></br>
</td>
<td align="center" height="50"
width="100">
<b>I<br>9:30-10:20</b>
</td>
<td align="center" height="50"
width="100">
<b>II<br>10:20-11:10</b>

</td>
<td align="center" height="50"
width="100">
<b>III<br>11:10-12:00</b>
</td>
<td align="center" height="50"
width="100">
<b>12:00-12:40</b>
</td>
<td align="center" height="50"
width="100">
<b>IV<br>12:40-1:30</b>
</td>
<td align="center" height="50"
width="100">
<b>V<br>1:30-2:20</b>
</td>
<td align="center" height="50"
width="100">
<b>VI<br>2:20-3:10</b>

</td>
<td align="center" height="50"
width="100">
<b>VII<br>3:10-4:00</b>
</td>
</tr>
<tr>
<td align="center" height="50">
<b>Monday</b></td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">Che</td>
<td rowspan="6" align="center" height="50">
<h2>L<br>U<br>N<br>C<br>H</h2>
</td>
<td colspan="3" align="center"
height="50">LAB</td>
<td align="center" height="50">Phy</td>
</tr>
<tr>
<td align="center" height="50">
<b>Tuesday</b>
</td>
<td colspan="3" align="center"
height="50">LAB
</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">SPORTS</td>
</tr>
<tr>
<td align="center" height="50">
<b>Wednesday</b>
</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">phy</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td colspan="3" align="center"
height="50">LIBRARY
</td>

</tr>
<tr>
<td align="center" height="50">
<b>Thursday</b>
</td>
<td align="center" height="50">Phy</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td colspan="3" align="center"
height="50">LAB
</td>
<td align="center" height="50">Mat</td>
</tr>
<tr>
<td align="center" height="50">
<b>Friday</b>
</td>
<td colspan="3" align="center"
height="50">LAB
</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Phy</td>
</tr>
<tr>
<td align="center" height="50">
<b>Saturday</b>
</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Mat</td>
<td colspan="3" align="center"
height="50">SEMINAR
</td>
<td align="center" height="50">SPORTS</td>
</tr>
</table>
</body>

</html>
Output:

Task-4: Create a Student Hostel Application Form


<Html>
<head>
<title>
Registration Page
</title>
</head>
<body bgcolor="Lightskyblue">
<br>
<br>
<form>

<label> Firstname </label>


<input type="text" name="firstname" size="15"/> <br> <br>
<label> Middlename: </label>
<input type="text" name="middlename" size="15"/> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" size="15"/> <br> <br>

<label>
Course :
</label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>

<br>
<br>
<label>
Gender :
</label><br>
<input type="radio" name="male"/> Male <br>
<input type="radio" name="female"/> Female <br>
<input type="radio" name="other"/> Other
<br>
<br>

<label>
Phone :
</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="text" name="phone" size="10"/> <br> <br>
Address
<br>
<textarea cols="80" rows="5" value="address">
</textarea>
<br> <br>
Email:
<input type="email" id="email" name="email"/> <br>
<br> <br>
Password:
<input type="Password" id="pass" name="pass"> <br>
<br> <br>
Re-type password:
<input type="Password" id="repass" name="repass"> <br> <br>
<input type="button" value="Submit"/>
</form>
</body>
</html>
Task-5: Make the Hostel Application Form designed in
Module -4 beautiful using CSS (add colors,
backgrounds, change font properties, borders, etc.)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<style>
body{
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
.container {
padding: 50px;
background-color: lightblue;
}

input[type=text], input[type=password], textarea {


width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: orange;
outline: none;
}
div {
padding: 10px 0;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.registerbtn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity: 1;
}
</style>
</head>
<body>
<form>
<div class="container">
<center> <h1> Student Registeration Form</h1> </center>
<hr>
<label> Firstname </label>
<input type="text" name="firstname" placeholder= "Firstname"
size="15" required />
<label> Middlename: </label>
<input type="text" name="middlename"
placeholder="Middlename" size="15" required />
<label> Lastname: </label>
<input type="text" name="lastname" placeholder="Lastname"
size="15"required />
<div>
<label>
Course :
</label>

<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
</div>
<div>
<label>
Gender :
</label><br>
<input type="radio" value="Male" name="gender" checked > Male
<input type="radio" value="Female" name="gender"> Female
<input type="radio" value="Other" name="gender"> Other

</div>
<label>
Phone :
</label>
<input type="text" name="country code" placeholder="Country
Code" value="+91" size="2"/>
<input type="text" name="phone" placeholder="phone no."
size="10"/ required>
Current Address :
<textarea cols="80" rows="5" placeholder="Current Address"
value="address" required>
</textarea>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email"
required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password"
name="psw" required>

<label for="psw-repeat"><b>Re-type Password</b></label>


<input type="password" placeholder="Retype Password"
name="psw-repeat" required>
<button type="submit" class="registerbtn">Register</button>
</form>
</body>
</html>

You might also like