Triton SS & College
Seti Opi Marga Koteshwor -32, Kathmandu
Lab Report of Computer Science on Web Developement
Submitted By: Submitted to:
Name: Ayaan Ahmad Ansari. Computer Science Department
Roll: 10 Triton SS and College
Class: 11
Sec: P505
Lab Report: WEB DEVELOPEMENT
Introduction
Web development is the process of creating and maintaining websites or web
applications. It involves both front-end development (the visual and interactive part
that users see) and back-end development (the server-side logic and database
management).
Front-end development uses HTML, CSS, and JavaScript to design the user
interface, while back-end development involves technologies like Python, PHP, and
Node.js to handle data processing and storage.
Full-stack developers are skilled in both areas, enabling them to build complete web
solutions. Web development plays a key role in creating functional, secure, and
responsive websites that serve businesses, individuals, and services globally.
It includes stages like planning, design, development, testing, launch, and
maintenance. As the digital world grows, web development is essential in creating
engaging, accessible, and efficient online experiences.
Theory
1. HTML Basics & Structure
HTML (HyperText Markup Language) is the foundational language used to create content for
the web. It provides the structure of web pages by using a series of tags to define different
types of content and how they are displayed in the browser. The basic structure of an HTML
document includes essential components like the <!DOCTYPE html> declaration, the <html>
element which encapsulates the entire document, the <head> section that contains metadata
such as the title, and the <body> section where the actual content (text, images, links, etc.) is
placed.
2. Text Formatting & Tags
HTML allows for the formatting of text through a variety of tags, which are used to define
how the text should be displayed. Tags like heading tags (<h1> to <h6>) are used to
represent headings of different levels, while paragraph tags (<p>) define blocks of text. Other
tags, such as <b>, <i>, and <u>, modify the appearance of the text to make it bold, italicized,
or underlined, respectively. Additionally, tags like <strong> and <em> convey meaning about
the importance or emphasis of the text, often resulting in bold or italic formatting.
3. Lists in HTML
HTML provides two primary types of lists: ordered and unordered. An ordered list (<ol>)
displays items in a sequential order, while an unordered list (<ul>) shows items without any
specific sequence. Both lists contain list items (<li>), which represent the individual elements
in the list. These lists are useful for organizing information in a way that is both structured
and easy to read.
4. Links & Anchors
Links in HTML are created using the <a> tag, which is used to define hyperlinks. These links
can point to other pages, websites, or resources, and the destination is specified using the
href attribute. Links can also be used to navigate within the same page, by specifying an
anchor (<a href="#section1">), or to open external content in a new tab using the target
attribute. Links are an essential part of navigation and interactivity on the web.
5. Tables in HTML
Tables in HTML allow for the presentation of data in a grid format, which is useful for
displaying structured information such as schedules, statistics, or comparisons. The <table>
tag is used to create a table, while <tr> tags define table rows. Inside the rows, <th> tags
define header cells, and <td> tags are used for data cells. Tables can be customized and
styled to improve readability and organization.
6. Forms in HTML
Forms are used in HTML to collect user input. They consist of various elements like text
fields, buttons, checkboxes, radio buttons, and dropdown lists, which are contained within
the <form> tag. The data entered into the form can be submitted to a server for processing
using the action and method attributes. Forms are crucial for interactive websites where users
need to input data, such as in login screens, surveys, and contact forms.
7. HTML5 & Multimedia
HTML5 introduced enhanced support for multimedia content, allowing developers to embed
audio and video directly into web pages without relying on third-party plugins. The <audio>
and <video> elements provide a simple way to include multimedia files on a page, and they
can be customized with various controls such as play, pause, and volume adjustment.
HTML5 also supports the embedding of interactive graphics and animations, making it easier
to integrate rich media content on websites.
8. CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation
(look and feel) of a document written in HTML or XML. It controls how HTML elements are
displayed, such as colors, fonts, layout, spacing, positioning, and much more. By separating
the structure of a webpage (HTML) from its design (CSS), developers can create visually
attractive and maintainable websites.
Key Concepts of CSS:
1. Selectors: Select the HTML elements that you want to style.
2. Properties: Define the specific style or attribute to be applied (such as color, font-
size, etc.).
3. Values: Define the value for the properties (such as red, 16px, etc.).
Types of CSS
CSS can be applied in three different ways, depending on the needs of the project:
1. Inline CSS
2. Internal CSS
3. External CSS
1. Inline CSS
Inline CSS involves applying styles directly to individual HTML elements using the style
attribute. This method is typically used for quick styling of a single element and is not
suitable for larger projects because it cannot be reused.
Syntax:
<element style="property: value;">
• Example:
<p style="color: red; font-size: 16px;">This is a red-colored paragraph.</p>
Characteristics:
• Directly applied to an individual element.
• Highest specificity (it overrides other styles).
• Not reusable across the site.
2. Internal CSS
Internal CSS is defined within the <style> tag in the <head> section of an HTML document.
This method allows you to apply styles to the entire page, but it is confined to a single HTML
document.
Syntax:
<head>
<style>
selector {
property: value;
}
</style>
</head>
• Example:
<head>
<style>
body {
background-color: lightblue;
}
p{
color: green;
}
</style>
</head>
Characteristics:
• Styles apply to the entire page.
• Easier to manage than inline CSS, especially for a single page.
• Not reusable for other pages unless manually copied into each HTML document.
3. External CSS
External CSS is stored in a separate .css file, which is linked to one or more HTML
documents. This is the most efficient and scalable way to style a website, as it allows for
consistent styling across multiple pages.
Syntax:
• HTML (linking the external CSS file):
<head>
<link rel="stylesheet" href="styles.css">
</head>
• CSS file (styles.css):
body {
background-color: lightgreen;
}
p{
color: blue;
}
Characteristics:
• Reusability: The same CSS file can be linked to multiple HTML pages.
• Easier maintenance: Update styles in one place, and changes reflect on all pages.
• Styles are cached by the browser, which improves load times.
CSS Syntax
CSS follows a simple syntax that involves selectors, properties, and values.
• Syntax structure:
selector {
property: value;
}
• Example:
• h1 {
color: blue;
font-size: 24px;
}
o h1 is the selector (targeting all <h1> elements).
o color and font-size are properties.
CODE:
1. Create a basic HTML document structure with <!DOCTYPE>, <html>, <head>,
and <body>.
2. Set the title of an HTML document as "My First Web Page".
3. Change the background color of a webpage to light blue using the <body> tag.
4. Add a background image to a webpage using the <body> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body style="background-color: lightblue; background-image: url('img.jpg');">
</body>
</html>
OUTPUT:
5. Display headings from <h1> to <h6> with different alignments (left, center, right).
6. Use the <font> tag to display text in red color with size 5.
7. Create a paragraph with bold (<b>), italic (<i>), and underlined (<u>) text.
8. Use <sup> and <sub> tags to write "H2O" and "E=mc2".
9. Add a horizontal line (<hr>) between two paragraphs.
10. Insert a comment in HTML that says "This is a student project".
11.Display poem/song lyrics as it is making the use of <pre> tag.
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<h1 style="text-align: left;">Heading 1 - Left Aligned</h1>
<h2 style="text-align: center;">Heading 2 - Center Aligned</h2>
<h3 style="text-align: right;">Heading 3 - Right Aligned</h3>
<h4 style="text-align: left;">Heading 4 - Left Aligned</h4>
<h5 style="text-align: center;">Heading 5 - Center Aligned</h5>
<h6 style="text-align: right;">Heading 6 - Right Aligned</h6>
<font color="red" size="5">This is some red text with size 5.</font>
<p><b>This text is bold.</b> <i>This text is italic.</i> <u>This text is underlined.</u> </p>
<p>The chemical formula for water is <sup>H</sup><sub>2</sub>O </p>
<p> Einstein's famous equation is E = mc<sup>2</sup>.</p>
<p>This is the first paragraph.</p>
<hr>
<p>This is the second paragraph.</p>
<pre>
Twinkle, twinkle, little star,
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky.
Twinkle, twinkle, little star,
How I wonder what you are!
</pre>
</body>
</html>
OUTPUT:
11.Create an ordered list (<ol>) with numbers (1, 2, 3) and Roman numerals (I, II, III).
12.Make an unordered list (<ul>) with square bullets.
13.Design a definition list (<dl>) with three terms (<dt>) and their descriptions (<dd>).
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<h2>Ordered List with Numbers and Roman Numerals</h2>
<ol type="1">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<ol type="I">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h2>Unordered List with Square Bullets</h2>
<ul style="list-style-type: square;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>HTML stands for HyperText Markup Language and is used to create the structure
of web pages.</dd>
<dt>CSS</dt>
<dd>CSS stands for Cascading Style Sheets and is used to style the appearance of web
pages.</dd>
<dt>JavaScript</dt>
<dd>JavaScript is a programming language that allows you to add interactivity to web
pages.</dd>
</dl>
</body>
</html>
OUTPUT:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<ol>
<li>MAIN COURCE
<ul>
<li>Starter</li>
<li>Entree</li>
</ul>
</li>
<li>Dessert
<ol>
<li> cake</li>
<li>ice cream</li>
</ol>
</li>
</ol>
</body>
</html>
OUTPUT:
14.Create a hyperlink to "https://www.google.com" with the text "Visit Google".
15. Link to another section within the same webpage using an anchor (<a>).
16. Add an email link, telephone link that opens the user's default email client or call.
<!DOCTYPE html>
<html lang="en">
<head> </head>
<body>
<h2>Task 14: Hyperlink to Google</h2>
<a href="https://www.google.com" target="_blank">Visit Google</a>
<hr>
<h2>Task 15: Link to Another Section</h2>
<p><a href="#section2">Go to Section 2</a></p>
<h2 id="section2">Section 2</h2>
<p>This is Section 2. Click the link above to return to it from other parts of the page.</p>
<hr>
<h2>Task 16: Email Link</h2>
<a href="mailto:example@example.com">Send an Email</a>
<hr>
<h2>Task 16: Telephone Link</h2>
<a href="tel:+1234567890">Call +1 234 567 890</a>
</body></html>
OUTPUT:
17.Create a table with 3 rows and 3 columns, using <table>, <tr>, and <td>.
18. Add a table header (<th>) for each column in a table.
19. Apply a border to a table and set cell spacing to 10px.
<!DOCTYPE html>
<html lang="en">
<head> </head>
<body>
<table border="1" cellspacing="10">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
<tr>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
</tr>
</table>
</body> </html>
OUTPUT:
<!DOCTYPE html>
<html>
<head>
<title>My Schedule</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
padding: 8px;
table {
width: 80%;
margin: auto;
th {
background-color: #f0f0f0;
</style>
</head>
<body>
<h2 style="text-align: center;">My Schedule</h2>
<table>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<th>Breakfast</th>
<td>In lair</td>
<td>with cronies</td>
<td>In lair</td>
<td>in lair</td>
<td>in lair</td>
</tr>
<tr>
<th>Morning</th>
<td colspan="2">Design traps</td>
<td colspan="3">Improve Hideout</td>
</tr>
<tr>
<th>Afternoon</th>
<td>train<br>minions</td>
<td>train<br>minions</td>
<td>train<br>minions</td>
<td>train<br>minions</td>
<td rowspan="2">world<br>domination</td>
</tr>
<tr>
<th>Evening</th>
<td>maniacal<br>laughter</td>
<td>maniacal<br>laughter</td>
<td>maniacal<br>laughter</td>
<td>maniacal<br>laughter</td>
</tr>
</table>
</body>
</html>
OUTPUT:
20.Design a registration form with text fields, radio buttons, and a submit button.
21.Create a dropdown menu with three options using <select> and <option>.
22. Add a checkbox for "I agree to terms and conditions" in a form.
23. Insert a text area (<textarea>) for user feedback.
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h2>Registration Form</h2>
<form action="#" method="post">
<label>First Name:</label><br>
<input type="text" name="fname"><br><br>
<label>Last Name:</label><br>
<input type="text" name="lname"><br><br>
<label>Gender:</label><br>
<input type="radio" name="gender" value="Male"> Male<br>
<input type="radio" name="gender" value="Female"> Female<br>
<input type="radio" name="gender" value="Other"> Other<br><br>
<label>Country:</label><br>
<select name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
</select><br><br>
<input type="checkbox" name="terms"> I agree to terms and conditions<br><br>
<label>Feedback:</label><br>
<textarea name="feedback" rows="4" cols="40"></textarea><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
OUTPUT:
<!DOCTYPE html>
<html>
<head>
<title>Novell Services Login</title>
</head>
<body>
<h2 >Novell Services Login</h2>
<form action="#" method="post" >
<label>Username:</label><br>
<input type="text" name="username"><br><br>
<label>Password:</label><br>
<input type="password" name="password"><br><br>
<label>City of Employment:</label><br>
<input type="text" name="city"><br><br>
<label>Web server:</label><br>
<select name="server">
<option>-- Choose a server --</option>
<option>Server 1</option>
<option>Server 2</option>
<option>Server 3</option>
</select><br><br>
<label>Please specify your role:</label><br>
<input type="radio" name="role" value="admin"> Admin<br>
<input type="radio" name="role" value="engineer"> Engineer<br>
<input type="radio" name="role" value="manager"> Manager<br>
<input type="radio" name="role" value="guest"> Guest<br><br>
<label>Single Sign-on to the following:</label><br>
<input type="checkbox" name="sso" value="mail"> Mail<br>
<input type="checkbox" name="sso" value="payroll"> Payroll<br>
<input type="checkbox" name="sso" value="selfservice"> Self-service<br><br>
<input type="submit" value="Login">
<input type="reset" value="Reset">
</form>
</body>
</html>
OUTPUT:
24. Embed a YouTube video using the <iframe> tag.
25. Insert an audio file using the <audio> tag with controls.
26.Use the <video> tag to display a video with play/pause controls.
27.Use the <svg> tag to draw a circle, rectangle and polygon.
<!DOCTYPE html>
<html>
<body>
<h2>24. YouTube Video</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"
frameborder="0" allowfullscreen></iframe>
<h2>25. Audio</h2>
<audio controls><source src="audiofile.mp3" type="audio/mpeg"></audio>
<h2>26. Video</h2>
<video width="480" height="320" controls><source src="videofile.mp4"
type="video/mp4"></video>
<h2>27. SVG Shapes</h2>
<svg width="400" height="200">
<circle cx="60" cy="60" r="40" stroke="black" stroke-width="2" fill="red" />
<rect x="130" y="30" width="100" height="60" stroke="blue" stroke-width="2" fill="green" />
<polygon points="270,90 300,30 330,90" stroke="purple" stroke-width="2" fill="yellow" />
</svg>
</body>
</html>
OUTPUT:
27. Apply inline CSS to change the color of a paragraph to green.
28.Use internal (embedded) CSS to set the background color of a webpage.
29. Link an external CSS file to style headings (<h1>) with blue color.
30.Create a CSS rule to change the font family of all paragraphs to "Arial".
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: lightyellow; }
p { font-family: Arial; }
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Heading Styled</h1>
<p style="color: green;">This paragraph is green.</p>
<p>This paragraph uses Arial font.</p>
</body>
</html>
css
h1 {
color: blue;}
OUTPUT:
CONCLUSION
In this lab, we explored the fundamental structure and elements
of HTML, including document setup, text formatting, lists, links,
tables, and forms. By implementing various tags and attributes,
we gained hands-on experience in creating structured, styled,
and interactive web pages. This foundational knowledge is
essential for building more complex websites in future projects.
