Scribd
Upload
53 views

Web Practical - 67

Uploaded by

Meenu Narwal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
53 views

Web Practical - 67

Uploaded by

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

GURU JAMBHESHWAR UNIVERSITY OF SCIENCE AND

TECHNOLOGY, HISAR

Practical File
of
Web Development Technology

Submitted to: Submitted by:


Mr. Ayush Meenu
(Asst. Prof. CSE Dept.) 200010130067
B.Tech (CSE-1)
4th year (8th semester)
Index
Sr. Remarks
Topic
No.
W.A.P. to explain HTML Document Structure with basic
1
tags.

2 W.A.P. to display three types of lists using various attributes.

Implement a table of 4*4 with rowspan and colspan


3
attributes.

W.A.P. to upload two Images in opposite sides of screen using


4 various attributes.

5 W.AP. to explain four types of Selectors.

6 W.A.P. to explain various types of Core Attributes of HTML.

Prepare Two HTML Web Pages and link them through


7
Anchor Tag.

8 W.A.P. to explain the concept of Frame and Frameset Tags.

9 W.A.P. to implement inline and internal style sheet.

Prepare an external style sheet (CSS) and link it to the HTML


10
Web Page.

11 W.A.P. to explain various types of properties of CSS.

12 W.A.P. to design a form using various attributes of HTML.

13 Prepare a Resume of yourself.


Program 1
W.A.P. to explain HTML Document Structure with basic tags.

An HTML document is composed of various elements, each represented by a pair of tags (apart
from a few exceptions, as we'll see). The structure generally consists of two main parts: the Head
and the Body.
1. Head: This part contains metadata about the document, such as its title, linked stylesheets,
character encoding, and more. The title is especially important, as it represents the name
of the tab or window in which the document is opened. Note that the content within the
head tag is not displayed directly on the page.
2. Body: This part contains the actual content that is displayed on the web page. This
includes headings, paragraphs, images, links, lists, and more.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my first webpage</title>
</head>
<body>
<p>Hello World!!</p>
</body>
</html>

Output:
Program 2
W.A.P. to display three types of lists using various attributes.

<!DOCTYPE html>
<html>
<head>
<title>Lists in HTML</title>
</head>
<body>
<h2>Ordered List (Numbered List) </h2>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
<li>Date</li>
<li>Elderberry</li>
</ol>

<h2>Unordered List (Bulleted List) </h2>


<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
<li>Date</li>
<li>Elderberry</li>
</ul>

<h2>Definition List</h2>
<dl>
<dt>Apple</dt>
<dd>A juicy red fruit</dd>
<dt>Banana</dt>
<dd>A yellow curved fruit</dd>
<dt>Cherry</dt>
<dd>A small red fruit</dd>
</dl>
</body>
</html>
Output:
Program 3

Implement a table of 4*4 with rowspan and colspan attributes.

<!DOCTYPE html>
<html>
<head>
<title>Rowspan and Colspan Table</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2" colspan="2">1</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td rowspan="2" colspan="2">9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
</tr>
</table>
</body> </html>
Output:
Program 4

W.A.P. to upload two Images on opposite sides of screen using various attributes.
<!DOCTYPE html>
<html>
<head>
<title>Side-by-Side Images</title>
</head>
<body>
<div style="width: 40%; float: left; margin-right: 1em;">
<img src= "images/feather.jpg" alt="Image 1" style="width: 100%;">
</div>
<div style="width: 40%; float: right;">
<img src="images/feather.jpg" alt="Image 2" style="width: 100%;">
</div>
</body>
</html> Output:
Program 5
W.A.P to explain
four types of selectors

<!DOCTYPE html>
<html>
<head>
<title>Selectors Example</title>
<style>
/* 1. Element Selector */ h1
{ color: blue;
}
/* 2. Class Selector */ .
highlight {
backgroundcolor: yellow;
}
/* 3. ID Selector */
#header { textalign:
center;
}
/* 4. Attribute Selector */
[hreflang="en"] {
fontweight: bold;
}
</style>
</head>
<body>
<h1 id="header"> ID Selectors Example</h1>
<p class="highlight">This paragraph has a class of "highlight". </p>
<a href="https://www.example.com" hreflang="en">Visit Example.com (English) is an
example of attribute selector</a>
<p>This is a normal paragraph. </p>
<h1>This heading is blue because of the type of selector. </h1>
</body>
</html>
Output:

Four types of selectors commonly used in HTML:

1. Element Selector: Element selectors target HTML elements based on their tag names.
They apply styles to all instances of the specified element type.
Example:
css code -
h1 {

color: blue;

}
This CSS rule will make all `<p>` elements blue.

2. Class Selector: Class selectors target HTML elements based on the value of their `class`
attribute. They are denoted by a period (`. `) followed by the class name.
Example:
html code -
<p class="highlight">This paragraph has a special highlight. </p> css code
-
.highlight {

background-color: yellow;

}
This CSS rule will style all elements with `class="highlight"` with a yellow background.

3. ID Selector: ID selectors target HTML elements based on the value of their `id` attribute.
They are denoted by a hash (`#`) followed by the ID name. IDs must be unique within the
HTML document.
Example:
html code -

<div id="main-content">Main Content Here</div>

css code -

#main-content { font-size:

18px;

}
This CSS rule will style the element with `id="main-content"` with a font size of 18 pixels.

4. Attribute Selector: Attribute selectors target HTML elements based on the presence or
value of their attributes. They are denoted by square brackets (`[]`) and can be used to
target specific attributes or attribute values.
Example:
html code -
<input type="submit" value="Submit Form"> css

code- input[type="submit"] {

background-color: #007bff; color: white;

}
This CSS rule will style all `<input>` elements with `type="submit"` with a blue background and
white text.
These selectors provide different levels of specificity and flexibility in targeting elements within
an HTML document, enabling developers to style their web pages effectively.
Program 6
W.A.P. to explain various types of Core Attributes of HTML.
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<style> container {
width:80%; margin:
0 auto; padding:
20px; border: 1px
solid #ddd;
background-color: #f9f9f9;
}
.header { font-size:
24px; font-weight: bold;
color: #333;
margin-bottom: 10px;
}
.content { font-
size: 16px; line-height:
1.5; color: #666;
margin-bottom: 20px;
} .footer {
font-size:12px;
color: #999;
text-align: center;
}
</style>
</head>
<body>
<div id="myPage" class="container">
<h1 class="header" title="Welcome to my web page">Welcome to my web page</h1>
<div class="content">
<p>This is an example HTML code that demonstrates the use of the <code>id</code>,
<code>class</code>, <code>title</code>, and <code>style</code> attributes.</p>
<p>The <code>id</code> attribute is used to give a unique identifier to an HTML
element, such as the <code>div</code> element with the <code>id</code> value of
<code>"myPage"</code>.</p>
<p>The <code>class</code> attribute is used to apply a CSS style to a group of HTML
elements, such as the <code>h1</code>, <code>div</code>, and <code>p</code> elements with
the <code>class</code> value of <code>".container"</code>.</p>
<p>The <code>title</code> attribute is used to provide additional information about an
HTML element, such as the <code>h1</code> element with the <code>title</code> value of
<code>"Welcome to my web page"</code>.</p>
<p>The <code>style</code> attribute is used to apply inline CSS styles to an HTML
element, such as the <code>h1</code> element with the <code>style</code> value of
<code>"font-size: 24px; font-weight: bold;"</code>.</p>
</div>
<div class="footer">
&copy; 2023 My Web Page
</div>
</div>
</body>
</html>
Output:
Program 7
Prepare Two HTML Web Pages and link them through Anchor Tag.
Program I
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>paragraph</title>
</head>
<body>
<h1>Heading 1</h1>
<p>this is my first paragraph</p>
<p>this is my second paragraph</p>
<p>some text some text some text some text some text some text some text some text<br>
some text some text some text some text some text some text</p>
</body>
</html>
Program II
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>links</title>
</head>
<body>
<h1>Paragraph</h1>
<p>this <a href="http://www.wikipedia.org" title="wikipedia">link</a> will take you to
the wikipedia homepage.</p>
<h1>Paragraph 2</h1>
<p> this <a href="paragraph.html" title="paragraphs">link</a> will take you to the
paragraph webpage of this course.</p>
<h1>Paragraph 3</h1>
<p>some text some text some text some text some text some text some text some text
some text some text some text some text some text some text</p>
<h1>Paragraph 4</h1>
<p>some text some text some text some text some text some text some text some text
some text some text some text some text some text some text</p> <h1>Paragraph 5</h1>
<p>some text some text some text some text some text some text some text some text
some text some text some text some text some text some text</p>
</body>
</html>
Output:
Program 8
W.A.P. to explain the concept of Frame and Frameset Tags.
<frameset> Tag:
The <frameset> tag is used to define a set of frames within a web page. It serves as a container for
organizing multiple frames. It's a block-level element. Attributes like rows or cols are used to define
the size and arrangement of frames within the frameset.
<frame> Tag:
The <frame> tag is used to define each individual frame within a frameset. It's an empty element
and does not have a closing tag. It's used inside the <frameset> element to specify the content of
each frame.

<!DOCTYPE html>
<html>
<head>
<title>My Frames Page</title>
</head>
<frameset cols="25%,75%">
<frame src="orderlist.html" name="frame1">
<frame src="Unorderlist.html" name="frame2">
</frameset>
</html>

Output:
Program 9
W.A.P. to implement inline and internal style sheet.
Inline program
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>inline css</title>
</head>
<body>
<p style="color:green ; font-size:200%">deciding what not to do is as important as deciding
what to do</p>
</body>
</html> Output:

Internal program:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>internal css</title>
<style> p{
color:paleviole
tred;
font-size:200%
}
</style>
</head>
<body>
<p>deciding what not to do is as important as deciding what to do</p>
</body>
</html>
Output:
Program 10
Prepare an external style sheet (CSS) and link it to the HTML Web Page.
HTML program:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>external css</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<p>deciding what not to do is as important as deciding what to do</p>
</body>
</html> CSS
program:
p{
color:deeppink; font-size:
150%; font-family:
sans-serif;

}
Output:
Program 11
W.A.P. to explain various types of properties of CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Properties Examples</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 0; padding: 20px;
} h1 {
color: #333;
text-align: center;
}
.example { margin:
20px 0; padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
}
/* Typography */
.typography {
font-size: 20px; line-
height: 1.5; color:
#555; font-weight:
bold; font-style: italic;
text-decoration: underline;
text-transform: uppercase;
}
/* Color */ .color
{ color: #ff5722;
background-color: #e3f2fd;
border: 2px solid #1976d2;
}
/* Layout */ .layout
{ display: flex;
justify-content: space-around;
align-items: center;
height: 100px;
background-color: #c8e6c9;
}
.layout div {

width: 30%; height:

50px; background-

color: #388e3c;

color: white;

text-align: center; line-height:


50px;
}
/* Background */
.background { background-image:
url('https://via.placeholder.com/150'); background-size:
cover; background-repeat: no-repeat; color:
white; text-shadow: 2px 2px 4px #000;
}
/* Box Model */
.box-model { width:
200px; height:
100px; margin: 20px
auto; padding: 20px;

border: 5px solid #ff5722; background-


color: #ffccbc;
}
</style>
</head>
<body>
<h1>CSS Properties Examples</h1>
<div class="example typography">
<h2>Typography</h2>
<p>This text demonstrates various typography properties like font size, line height, font
weight, font style, text decoration, and text transform.</p>
</div>
<div class="example color">
<h2>Color</h2>
<p>This box demonstrates color properties including text color, background color, and
border color.</p>
</div>
<div class="example layout">
<h2>Layout</h2>
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>
<div class="example background">
<h2>Background</h2>
<p>This box demonstrates background properties including background image, background
size, and background repeat.</p>
</div>
<div class="example box-model">
<h2>Box Model</h2>
<p>This box demonstrates the box model properties including width, height, margin,
padding, and border.</p>
</div>
</body>
</html>
Output :
Program 12
W.A.P. to design a form using various attributes of HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>forms</title>
</head>
<body>
<form method="get">
<label for="address">Address:</label>
<input type="text" name="address" placeholder="address"size="30px" maxlength="100"
id="address">
<br/>
<label for="postcode">Postcode</label>
<input type="postcode" name="postcode" placeholder="Postcode"size="30px"
maxlength="30" id="password">
<br/>
<label for="city">City</label>
<input type="city" name="city" placeholder="City"size="30px" maxlength="30"
id="city">
<br/>
<p>Choose your shipping method</p>
<select name="shipping" id="shipping">
<option value="Free super saver shipping"> free super saver shipping
</option>
<option value="two-day shipping"> Two-day shipping
</option>
<option value="one-day shipping"> One-day shipping
</option>
</select>
<p>Choose your payment method:</p>
<label> Paytm
<input type="radio" name="payment" value="paytm">
</label>
<label> Googlepay
<input type="radio" name="payment" value="googlepay">
</label>
<label> Debit card
<input type="radio" name="payment" value="debit card">
</label>
<br/>
<label for="comments">Comments</label>
<textarea rows="4" cols="40" name="comments" id="comments"></textarea>
<br/>
<label>Sign me up for email updates<input type="checkbox" name="email updates"
checked="checked"></label>
<br/>
<label>Securely save my payment details<input type="checkbox" name=" save payment"
checked="checked"></label>
<br/><input type="submit" value="submit">
</form>
</body>
</html>
Output :
Program 13
Prepare a Resume for yourself.

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Fresher Resume</title>

<style>

body { font-family: Arial,

sans-serif; line-height:

1.6; margin: 0;

padding: 0; background-color:

#f4f4f9;

.container { max-width:

800px; margin: 0 auto;

padding: 20px; background-

color: #ffffff; box-shadow: 0 0

10px rgba(0,0,0,0.1);

} header,

section {

margin-bottom: 20px;
}

header { background-color:

#283593;
color: #ffffff; padding:

10px 20px; text-align:

center;

} h1,

h2, h3 {

margin: 0;

h1 { margin-bottom:

10px;

.profile, .education, .skills, .projects, .contact {

padding: 10px 20px; background-color:

#e3f2fd; border-radius: 5px;

.profile p, .education p, .skills ul, .projects p, .contact p { margin:

10px 0;

} .skills ul {

list-style: none; padding:

0;

.skills li { background-color:

#ffca28; color: #000000;

display: inline-block;

margin: 5px; padding:

5px 10px; border-

radius: 5px;

}
</style>

</head>

<body>

<div class="container">

<header>

<h1>John Doe</h1>

<p>Fresh Graduate | Computer Science</p>

</header>

<section class="profile">

<h2>Profile</h2>
<p>Enthusiastic and highly motivated computer science graduate seeking an entry-level
position to utilize my skills and knowledge in software development and contribute to the growth
of the company.</p>

</section>

<section class="education">

<h2>Education</h2>

<p><strong>Bachelor of Science in Computer Science</strong><br>

XYZ University, 2024<br>

GPA: 3.8/4.0</p>

</section>

<section class="skills">

<h2>Skills</h2>

<ul>
<li>Java</li>

<li>Python</li>

<li>HTML/CSS</li>

<li>JavaScript</li>

<li>SQL</li>
<li>React</li>

<li>Git</li>

</ul>

</section>

<section class="projects">

<h2>Projects</h2>

<p><strong>Personal Portfolio Website</strong><br>


Developed a personal portfolio website using HTML, CSS, and JavaScript to showcase
my projects and skills.</p>

<p><strong>Library Management System</strong><br>


Created a library management system using Java and MySQL to manage book inventory
and track borrowing history.</p>

</section>

<section class="contact">

<h2>Contact</h2>

<p>Email: [email protected]</p>

<p>Phone: (123) 456-7890</p>

<p>LinkedIn: linkedin.com/in/johndoe</p>

<p>GitHub: github.com/johndoe</p>

</section>

</div>

</body>

</html>
Output :

You might also like