Wad Lab Programs
Wad Lab Programs
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
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.
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.
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:
<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;
}
<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>