Scribd
Upload
54 views

Web Lab Manual

Uploaded by

ayesha
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
54 views

Web Lab Manual

Uploaded by

ayesha
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/ 22

WEB DESIGN AND DEVELOPMENT

LAB MANUAL

LAB 1
Overview

In this lab, we will cover the basics of HTML (HyperText Markup Language), which is used to
create webpages. HTML elements are represented by tags, and we will learn the different types
of tags, their structure, and how to use them to build a simple webpage.

1. HTML Basics

 HTML (HyperText Markup Language): The standard language for creating web pages.
 File Name: The main file is often named index.html.
 Tags: HTML consists of two types of tags:
o Opening Tag: Starts with <tagname>.
o Closing Tag: Starts with </tagname>.

HTML Tag Structure

 HTML tags consist of:


o Left Angle Bracket (<)
o Tag Name: For example, p for paragraph, b for bold.
o Right Angle Bracket (>)

 Example:

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

Common Tags:

 <p>: Defines a paragraph.


 <b>: Makes text bold.
 <h1> to <h6>: Defines headings from the largest (<h1>) to the smallest (<h6>).
 <img>: Embeds an image.

Example of HTML Tags:


<p>This is a paragraph tag.</p>
<b>This is bold text.</b>
<h1>This is a heading.</h1>
<img src="path/to/image.jpg" alt="Description of image">

HTML Structure

 The basic structure of an HTML document includes the following tags:

<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<p>This is a paragraph inside the body.</p>
</body>
</html>

 <!DOCTYPE html>: Declares the document type and version.

 <html>: The root element of an HTML page.

 <head>: Contains metadata, title, and links to stylesheets or scripts.

 <title>: Sets the title of the webpage (appears in the browser tab).

 <body>: Contains all the content of the webpage (text, images, links, etc.).

Basic Tags Explanation


HTML Declaration:

o <!DOCTYPE html> declares the document type.

HTML Tags:

o <html>: Wraps the entire content of the HTML document.


o <head>: Holds metadata and settings.
o <title>: Sets the webpage title in the browser tab.
o <body>: Holds visible content such as text, images, and links.
<!DOCTYPE html>

<html>

<head>

<title>My First Webpage</title>

</head>

<body>

<h1>Welcome to My Webpage</h1>

<p>This is a simple paragraph on my webpage.</p>

</body>

</html>

Explanation of Each Part:

 <!DOCTYPE html>: Tells the browser this is an HTML5 document.


 <html>: Encloses all HTML elements.
 <head>: Contains the title and other metadata.
 <title>: Appears on the browser tab.
 <body>: Displays visible content on the webpage.

Additional Tips

 Emmet Abbreviation: Shortcuts in Visual Studio Code to speed up HTML writing,


such as:
o Typing ! and hitting enter to generate the boilerplate HTML structure.
o Typing lorem generates placeholder text (lorem ipsum).

Emmet Shortcut Example:

1. Type ! and press Enter to get the HTML structure quickly in Visual Studio Code.
LAB 2

Objective:
To understand the basics of HTML tags for images and the process of how servers and DNS
work in web development.

Topics Covered
 HTML Image Tag (<img>)
 Servers and DNS (Domain Name System)
. HTML Image Tag (<img>)
Explanation:
The <img> tag in HTML is used to embed images on a webpage. It does not have a closing tag
and requires certain attributes to function correctly.

Attributes:
 src: This stands for "source" and is used to define the path or URL to the image. The
src attribute tells the browser where to find the image.
 Example: src="image_link.jpg"
 alt: This stands for "alternative text" and is used when an image cannot be displayed.
The alt attribute provides text that describes the image.
 Example: alt="An error loading image"
 The alt text is beneficial for:
 Accessibility: Screen readers read the alt text for visually impaired users.
 SEO: Helps search engines understand the content of the image.
 Error Handling: Displays a message if the image fails to load.
<img src="image_link.jpg" alt="Description of image">

2. Servers and DNS


Explanation:
 Servers: Servers are computers or systems that provide resources, data, services, or
programs to other computers, known as clients, over a network. In web development,
servers store website data, including files, images, databases, etc.
 Example: Google provides various services using servers.
 DNS (Domain Name System): DNS stands for Domain Name System. It
translates domain names (like www.example.com) into IP addresses that computers can
understand. The DNS acts like a phonebook for the internet, connecting domain names
with IP addresses.
 IP Address: Each device connected to the internet has a unique IP address. The DNS
system matches a domain name to its corresponding IP address to retrieve data from
the correct server.

OUTPUT
LAB 3
1. Input Tag (<input>)

The <input> tag is used to create interactive controls for forms in HTML. This tag is versatile
because it supports different types of input, like text fields, checkboxes, radio buttons, etc.

Attributes:
 type: Specifies the type of input. Common types include:
 text: Single-line text input.
 password: Hides the text input (usually for passwords).
 email: For email addresses.
 checkbox: A checkbox input.
 radio: A radio button (for single-choice options).
 submit: A submit button to send the form data.
 reset: A reset button to clear all inputs in the form.
 number: Allows only numbers.
 color: A color picker input.
 url: For entering a URL.
 date: For date selection.

 placeholder: Placeholder text shown when the field is empty.


 size: Sets the width of the text field in characters.
 min and max: Define minimum and maximum values (for number and date inputs).
 required: Ensures the field must be filled out before submitting.

Example:
<!-- Text Input Field -->
<input type="text" placeholder="Enter your name" size="30" required>

<!-- Email Input Field -->


<input type="email" placeholder="Enter your email" required>

<!-- Number Input Field -->


<input type="number" placeholder="Enter age" min="18" max="99" required>

<!-- Checkbox -->


<input type="checkbox" name="subscribe" value="newsletter"> Subscribe to newsletter

2. Form Tag (<form>)


The <form> tag is a container for form controls (like input fields, checkboxes, radio buttons,
etc.) that users interact with. When the form is submitted, the data is sent to a specified URL or
script for processing.

Attributes:
 action: The URL where form data is sent upon submission.
 method: Specifies the HTTP method used to send form data (post or get).
 required: Ensures fields marked as required must be filled out before submitting.

Example:
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<input type="submit" value="Submit">


</form>

3. Reset Button (<input type="reset">)


The reset button clears all input fields within a form, resetting them to their default values.

Example:
<form>
<input type="text" placeholder="Enter your name">
<input type="reset" value="Reset Form">
</form>

4. Radio Button (<input type="radio">)


Radio buttons are used when you want users to select only one option from a set. Multiple
radio buttons can be grouped using the name attribute.

Example:
<form>
<p>Select your preferred language:</p>
<input type="radio" name="language" value="HTML"> HTML<br>
<input type="radio" name="language" value="CSS"> CSS<br>
<input type="radio" name="language" value="JavaScript"> JavaScript<br>
</form>

5. Checkbox (<input type="checkbox">)

Checkboxes allow users to select one or more options independently.

Example:
<form>
<p>Select your hobbies:</p>
<input type="checkbox" name="hobby" value="Reading"> Reading<br>
<input type="checkbox" name="hobby" value="Traveling"> Traveling<br>
<input type="checkbox" name="hobby" value="Gaming"> Gaming<br>
</form>

6. Submit Button (<input type="submit">)


The submit button sends the form data to the server specified in the action attribute of the
<form> tag.

Example:
<form action="/submit-form" method="post">
<input type="text" name="username" placeholder="Enter your username">
<input type="submit" value="Submit">
</form>

7. Select Tag (<select>)


The <select> tag creates a dropdown list, allowing users to choose an option from a pre-
defined list.

Example:
<form>
<label for="country">Choose your country:</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="india">India</option>
</select>
</form>

8. Multiple Attribute in Select Tag (<select multiple>)


Adding the multiple attribute allows users to select more than one option from a dropdown
list.

Example:
<form>
<label for="languages">Select languages you know:</label>
<select id="languages" name="languages" multiple>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select>
</form>

9. Text Area (<textarea>)


The <textarea> tag creates a multi-line input field, useful for longer text inputs.
Attributes:

 rows: Defines the visible number of text rows.


 cols: Defines the visible number of text columns.

Example:
<form>
<label for="comments">Comments:</label><br>
<textarea id="comments" name="comments" rows="5" cols="30"></textarea>
</form>

10. Fieldset and Legend (<fieldset> and <legend>)


The <fieldset> tag is used to group related elements in a form, providing a visual grouping
with an optional caption via <legend>.
Example:
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname"><br><br>

<label for="lname">Last Name:</label>


<input type="text" id="lname" name="lname"><br><br>
</fieldset>
</form>

11. Readonly Attribute (readonly)


The readonly attribute makes an input field non-editable, meaning users can see the field
content but cannot modify it.

Example:
<input type="text" value="This is read-only" readonly>

12. Disabled Attribute (disabled)


The disabled attribute disables an input field, making it unusable and unclickable. This is often
used to show fields that are temporarily unavailable.

Example:
<input type="text" value="This is disabled" disabled>

OUTPUT:
LAB 4
OBJECTIVE:
In this lab, we will cover CSS (Cascading Style Sheets) basics, which allow us to style HTML
elements by adding colors, fonts, layouts, and much more. We’ll explore selectors, properties,
and shorthand techniques to help you quickly style your webpage.

1. CSS Selectors

 Selectors in CSS are used to select HTML elements to apply styles to.

Types of Selectors:

 Element Selector: Selects all instances of a specific HTML element.

p{
color: blue;
}
This applies the color blue to all <p> (paragraph) elements.
 Class Selector: Selects all elements with a specific class. Classes are defined with a
dot (.) before the class name.
.myClass {
color: green;
}

This applies the color green to any element with class="myClass".

 ID Selector: Selects a single, unique element by ID. IDs are defined with a hash (#) before the
ID name.

#myId {

color: red;

This applies the color red to the element with id="myId".

 Child Selector: Targets elements that are direct children of a specific element.
div > p {

color: purple;

This applies the color purple to <p> elements that are direct children of a <div>.

2. CSS Properties
Basic Properties:

 name : value; – The syntax to define a CSS property.


 Units: Use px (pixels) to specify units for properties like font size, padding, and
margin.
 Text Decoration: Specifies the text decoration (e.g., underline).

text-decoration: underline;

3. Button Styling

To style buttons, you can use various properties to control its appearance.

button {

background-color: blue;

color: white;

padding: 10px 20px;

border-radius: 5px;

4. Text Properties

 Background Color: Sets the background color of text

background-color: yellow;

 Font Size: Defines the size of the font.

font-size: 16px;

 Font Style: Changes the style of the font (e.g., italic).


font-style: italic;

 Font Weight: Adjusts the thickness of the text.

font-weight: bold;

 Font Family: Specifies the font type.

font-family: Arial, sans-serif;

 Shorthand Font: Combines all font properties into a single line.

font: italic bold 16px Arial, sans-serif;

Additional Text Properties:

 Text Align: Sets the alignment of the text (e.g., center or justify).

text-align: center;

 Text Transform: Transforms the text to uppercase, lowercase, or capitalize.

text-transform: uppercase;

 Text Decoration: Adds decoration like line-through, underline, or overline.

text-decoration: underline;

 Text Indent: Indents the first line of a paragraph.

text-indent: 20px;

 Text Shadow: Adds a shadow to the text.

text-shadow: 1px 2px 1px red;

 Shorthand Text: Combines multiple text properties in one line.

text: bold italic 16px Arial, sans-serif center underline;


5. Border Properties

 Border Style: Defines the style of the border (solid, dashed, dotted, etc.).

border-style: solid;

 Border Width: Sets the width of the border.

border-width: 2px;
 Border Color: Specifies the color of the border.

border-color: black;

 Shorthand Border: Combines width, style, and color into one line.

border: 2px solid black;

Padding and Margin

 Padding: Adds space inside the border around content.


o Equal padding on all sides:

padding: 20px;

o Vertical and horizontal padding:

padding: 10px 20px;

o Top, horizontal, and bottom padding:

padding: 10px 20px 30px;

o Individual side padding:

padding: 10px 20px 30px 40px;

 Margin: Adds space outside the border around elements, following the same syntax as
padding.

margin: 10px 20px 30px 40px;

Border Radius: Rounds the corners of borders.

border-radius: 10px;
7. Image Styling

 Width and Height: Sets the width and height of an image.


 Border Radius: When both width and height are the same and border-radius is 50%, the
image becomes circular.

img {
width: 100px;
height: 100px;
border-radius: 50%;
}
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="css4.css">
<title>Enrollment Form</title>
</head>
<body>
<form action="#" method="post" class="enrollment-
form">

<label for="name">Full Name:</label>


<input type="text" id="name" name="name"
placeholder="Enter your full name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email"
placeholder="Enter your email" required>

<label for="password">Password:</label>
<input type="password" id="password"
name="password" placeholder="Create a password"
required>

<label for="phone">Phone Number:</label>


<input type="tel" id="phone" name="phone"
placeholder="Enter your phone number" required>

<label for="dob">Date of Birth:</label>


<input type="date" id="dob" name="dob" required>
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="">Select gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>

<label for="address">Address:</label>
<textarea id="address" name="address" rows="4"
placeholder="Enter your address"></textarea>

<label for="course">Course:</label>
<select id="course" name="course" required>
<option value="">Select your course</option>
<option value="science">Science</option>
<option value="commerce">Commerce</option>
<option value="arts">Arts</option>
</select>

<p></p>
<label for="agreement">
<input type="checkbox" id="agreement"
name="agreement" required>
I agree to the terms and conditions
</label>

<button type="submit">Submit</button>
</form>
<br>
<img src="https://plus.unsplash.com/premium_photo-
1694819488591-a43907d1c5cc?
q=80&w=2028&auto=format&fit=crop&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVuf
DB8fHx8fA%3D%3D" alt="" class="small-rounded">
</body>
</html>

Style sheet:
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.enrollment-form {
background-color: #fff;
padding: 20px;
border-radius: 10px;
width: 300px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.enrollment-form label {
margin-top: 10px;
display: block;
font-weight: bold;
color: #555;
}

.enrollment-form input[type="text"],
.enrollment-form input[type="email"],
.enrollment-form input[type="password"],
.enrollment-form input[type="tel"],
.enrollment-form input[type="date"],
.enrollment-form select,
.enrollment-form textarea {
width: 100%;
padding: 10px;
margin-top: 1px;
border-radius: 5px;
border: 1px solid #ccc;
}

.enrollment-form textarea {
resize: vertical;
}

.enrollment-form button {
width: 100%;
padding: 10px;
margin-top: 15px;
background-color: #4CAF50;
border: none;
color: white;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}

.enrollment-form button:hover {
background-color: #45a049;
}

.enrollment-form input[type="checkbox"] {
margin-right: 5px;
}
.small-rounded {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}

You might also like