Scribd
Upload
31 views21 pages

CSE (112) Lab Report

Uploaded by

Md Ali Hossen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
31 views21 pages

CSE (112) Lab Report

Uploaded by

Md Ali Hossen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

INDEX

Ex. No Ex. Name Page no

1 Introduction and Basics of HTML 1-2

2 Html Elements, Attributes and Different HTML Tags 3-4

3 Html Style Tags,Colours(RGB,HEX ,HSL),Images 5-6

4 HTML Links and Basics of CSS 7-9

5 HTML Tables,Colspan,Rowspan,Padding and Spacing 9-14

6 HTML Lists and Iframes 14-17

7 HTML Forms,Different Elements Used In Form(Design a 17-20


Registration Page)
1

Experiment No: 01
Experiment Name: Introduction and Basics of HTML
Description:
 HTML (Hypertext Markup Language) is the standard markup language used to create and
structure content on the web.
 HTML consists of a series of elements or tags that define different parts of a web page,
such as headings, paragraphs, images, and links.
 The basic structure of an HTML document includes the <!DOCTYPE> declaration,
<html>, <head>, and <body> tags.
 The <!DOCTYPE> declaration tells the browser which version of HTML the document is
using.
 The <html> tag is the container for the entire HTML document, and it contains two child
elements: the <head> element and the <body> element.
 The <head> element contains information about the document, such as the page title and
meta data.
 The <body> element contains the visible content of the web page.
 HTML tags are used to define the structure of the content, and they are enclosed in angle
brackets (< and >).
 HTML attributes provide additional information about an element, and they are added to
the opening tag of the element.
 HTML tags can be nested inside other tags to create a hierarchical structure of the content.
 The most common HTML tags include <h1> to <h6> for headings, <p> for paragraphs,
<a> for links, <img> for images, and <ul> and <ol> for lists.
 HTML also includes special characters that are represented by entities, such as &lt; for <
and &amp; for &.
 HTML can be created using a simple text editor, or with more advanced tools such as
integrated development environments (IDEs) or content management systems (CMSs).
Source Code:

<!DOCTYPE html>

<html>

<head>

<title> Introduction and Basics of HTML </title>

</head>

<body>
2

<h1> My name is Md Ali Hossen </h1>

<p> This is my first Coding </p>

</body>

</html>

Output:

Discussion:
HTML, or Hypertext Markup Language, is the foundation of the World Wide Web. It is a markup
language used to create web pages and web applications. HTML is used to structure the content,
layout, and appearance of a webpage. HTML uses tags enclosed in angle brackets to indicate how
the content should be displayed on the webpage. For example, the <h1> tag is used to indicate a
top-level heading, while the <p> tag is used to represent a paragraph of text. In addition to basic
text elements, HTML provides tags for creating more complex content such as images, videos,
forms, and links to other web pages. HTML also provides the ability to add metadata to a web
page, such as keywords, descriptions, and author information. To create an HTML document, one
must use a plain text editor to write the code, and then save the file with a .html extension. Once
the file is saved, it can be opened in a web browser to view the page. By combining HTML with
CSS and JavaScript, web developers can create engaging, dynamic, and interactive web pages and
web applications. Understanding the basics of HTML is essential for anyone looking to build
websites or web applications.
3

Experiment No: 02
Experiment Name: Html Elements, Attributes and Different HTML Tags
Description:
HTML (Hypertext Markup Language) is a markup language used for creating web pages. It
consists of various elements, attributes, and tags that are used to structure the content and layout
of a web page. Here is a brief description of HTML elements, attributes, and different HTML tags:
HTML Elements:
 HTML elements are the building blocks of a web page, and they define the structure and
content of the page.
 Each HTML element is represented by a tag, which consists of a tag name enclosed in
angle brackets, such as <p> for a paragraph element.
 HTML elements can be nested inside one another to create a hierarchical structure of the
page.
HTML Attributes:
 HTML attributes are used to provide additional information about an HTML element.
 Attributes are defined within the opening tag of an element, and they have a name and a
value separated by an equal sign.
 HTML attributes can be used to define characteristics such as the color, size, and alignment
of an element.
Different HTML Tags:
 <html>: The root element of an HTML page.
 <head>: The container for metadata such as title, meta tags, and links to external resources.
 <body>: The container for the main content of the web page.
 <p>: Used to define a paragraph of text.
 <a>: Used to create hyperlinks to other web pages or resources.
 <img>: Used to embed images in a web page.
 <ul> and <li>: Used to create an unordered list of items.
 <ol> and <li>: Used to create an ordered list of items.
 <div>: Used to group and style a block of elements.
 <table>: Used to create a tabular data structure on a web page.
4

Source Code:

<!DOCTYPE html>
<html lang="en">
<body style="background-color:powderblue;">
<h1 style="background-color:red;"> This text's background-color is made red
using style attribute</h1>
<p style="color:green;">This text's color is made green using style attribute<p>
<p style="color:blue;">This text's color is changed to blue using style attribute<p>
</body>
</html>

Output:

Discussion:
HTML (Hypertext Markup Language) is a markup language used for creating web pages.
HTML consists of elements, attributes and different tags. HTML elements are the building
blocks of HTML pages. They define the structure of a web page and include headings,
paragraphs, lists, images and more. Attributes provide additional information about an
element and are used to modify the behavior of an element. HTML tags are used to mark
up content within a web page, and they can be classified into various types, such as
structural, formatting and interactive tags. Understanding HTML elements, attributes and
different tags is essential for creating well-structured and effective web pages.
5

Experiment No: 03
Experiment Name: Html Style Tags,Colours(RGB,HEX ,HSL),Images
Description:
HTML Style Tags:
HTML style tags allow you to add style information to an HTML document. Here are some key
concepts of HTML style tags:
 The <style> tag is used to define a block of CSS code within an HTML document.
 The style information within the <style> tag applies to all the HTML elements within the
document.
 You can also use the style attribute to apply styles to individual HTML elements within
the document.
 Style tags can be used to set styles for a wide variety of HTML elements, including fonts,
colors, backgrounds, borders, and more.
Colors in HTML:
There are several ways to specify colors in HTML, including RGB, HEX, and HSL. Each of these
methods uses a different format to define colors.
 RGB: RGB stands for Red, Green, and Blue. This color model defines colors based on the
intensity of each of these primary colors. The values range from 0 to 255, and they can be
combined to create millions of colors.
 HEX: HEX is short for hexadecimal, and it is a six-digit code that represents the intensity
of the three primary colors. Each digit represents a value from 0 to F, and the code starts
with a hash symbol (#).
 HSL: HSL stands for Hue, Saturation, and Lightness. This color model defines colors based
on their hue (color), saturation (intensity), and lightness (brightness). The values range
from 0 to 360 for hue, and 0% to 100% for saturation and lightness.
Images in HTML:
Images are a crucial component of web design, and they can be added to HTML documents using
the <img> tag. Here are six important things to know about images in HTML:
 The <img> tag requires two attributes: src (which specifies the location of the image file)
and alt (which provides a text description of the image).
 Images can be resized using the height and width attributes.
 Images can be aligned using the align attribute.
 Images can be hyperlinked by wrapping the <img> tag inside an <a> tag.
 Image formats supported by HTML include JPEG, PNG, and GIF.The <figure> and
<figcaption> tags can be used to group images and provide captions.
6

Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Html Style Tags,Colours(RGB,HEX ,HSL),Images</title>
</head>
<body style="background-color:powderblue;">
<h1 style="background-color:red;">CSE 112</h1>
<h2 style="background-color:green;">Computer Fundamental</h1>
<h2>HTML LINKS</h2>
<a style="color:red;"https://www.facebook.com/">Facebook</a>
</body>
</html>
Output:

Discussion:
HTML style tags, colors, and images are essential elements of web design. Style tags allow web
developers to modify the appearance of HTML elements such as font size, color, and layout. Color
selection is a vital aspect of web design, with several methods to specify colors in HTML such as
RGB, HEX, and HSL. RGB (red, green, blue) uses numbers from 0 to 255 to represent a color,
while HEX (hexadecimal) uses a combination of numbers and letters. HSL (hue, saturation,
lightness) is another method for defining colors, which allows designers to specify a color's hue,
saturation, and lightness. Additionally, images can be inserted into web pages using the <img>
tag, and can be styled and formatted with CSS. Web developers must carefully select the
appropriate color and image schemes to enhance user experience and overall design.
7

Experiment No: 04
Experiment Name: HTML Links and Basics of CSS
Description:
HTML Links:
HTML Links are a fundamental component of the web. They allow users to navigate between
different web pages and to access different types of content. Here are some key concepts of HTML
Links:
 Links are created using the anchor tag <a> in HTML.
 The href attribute specifies the URL of the page or resource being linked to.
 Links can be styled using CSS to change their appearance, including their color and
underlining.
 Links can also include a target attribute to specify how the linked page should be opened,
such as in a new window or tab.
 Links can be used to navigate within a page using anchor links, which link to specific
sections of the same page.
 Links can also be used to link to other types of content, including images, videos, and files.
Basics of CSS:
Cascading Style Sheets (CSS) is a language used to style and format web pages. CSS provides a
way to control the presentation of HTML elements, including layout, fonts, colors, and more. Here
are some key concepts of CSS:
 CSS rules consist of a selector and a declaration block, which includes one or more
properties and their corresponding values.
 Selectors are used to target HTML elements that you want to style, such as <h1> or <p>.
 Properties define the specific style you want to apply, such as font size or color.
 CSS can be included in an HTML document using an external style sheet or inline styles
within HTML tags.
 CSS can be used to create complex layouts, including multi-column designs and responsive
designs that adapt to different screen sizes.
 CSS also provides advanced techniques such as animations and transitions, which can be
used to create dynamic and interactive web pages.
8

Source code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Links and Basics of CSS</title>
</head>
<body>
<h1 style="background-color:2px solid tomato;">Hello World</h1>
<h2 style="color:Dodgerblue;">Hello 30 Batch</h2>
<p style="color:tomato;">CSE 112</p>
<p style="color:slatblue;">30 Batch</p>
<p style="border:2px solid violet;">Hello World</p>
<h2>Html Links</h2>
<a href="https//www.google.com/">Google</a><br>
<a href="https//www.w3schools.com/">W3 School</a>
</body>
</html>

Output:
9

Discussion:
HTML links are used to create clickable links that can navigate users to different web pages,
sections of a page, or to other resources such as documents and images. HTML links are created
using the anchor tag <a> in combination with the href attribute that specifies the destination of the
link.
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of an
HTML document. CSS provides a way to separate the presentation of a web page from its content,
which allows for greater flexibility and control over the appearance of a website.CSS works by
selecting HTML elements and applying styles to them. Styles are defined using property-value
pairs, where the property is the attribute of the element that we want to style, and the value is the
desired styling for that property.

Experiment No: 05
Experiment Name: HTML Tables,Colspan,Rowspan,Padding and Spacing
Description:
HTML Tables are a useful tool for displaying data in a structured manner on a webpage. They
consist of rows and columns, where each intersection of a row and a column forms a cell that can
contain text, images, or other elements. Here are some key features of HTML tables, as well as
some related attributes:
 Colspan: The colspan attribute allows you to merge two or more columns into a single cell.
For example, if you have a table with four columns and you want to make the first two
columns into one larger column, you can use the colspan attribute to merge them together.
 Rowspan: Similarly, the rowspan attribute allows you to merge two or more rows into a
single cell. For example, if you have a table with four rows and you want to make the first
two rows into one larger row, you can use the rowspan attribute to merge them together.
 Padding: The padding attribute allows you to add space between the contents of a cell and
the edges of the cell. This can help make your table easier to read and more visually
appealing. Padding can be applied to all four sides of a cell, or you can specify different
padding values for each side.
 Spacing: The cellspacing attribute allows you to add space between the cells in a table.
This can help make your table easier to read and more visually appealing. The spacing
attribute can be used to control the amount of space between rows, columns, or both.
 Table Headers: You can designate one or more rows or columns as table headers using the
th element. This can help improve accessibility and make it easier for screen readers to
read your table.
10

 Styling: HTML tables can be styled using CSS. This allows you to change the font size,
font color, background color, and other visual properties of your table to better match the
design of your website. You can also use CSS to apply different styles to different rows or
columns of your table.

Source code:
1. <DOCTYPE HTML>
<html>
<style> th, td { border-style: dashed; } </style>
<body>
<table style="width:50%">
<tr>
<th>ID</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>A</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
</tr>
</table>
</body>
</html>
2. <!DOCTYPE html>
<html>
<head>
<style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td
{ padding-top: 10px; padding-bottom: 20px; padding-left: 30px; padding-right: 40px;
} </style>
</head>
<body>
<table style="width:100%">
<tr>
<th>1</th>
<th rowspan="2">4</th>
<th>7</th>
</tr>
<tr align="center">
11

<td>2</td>
<td>8</td>
</tr>
<tr align="center">
<td rowspan="2">3</td>
<td>5</td>
<td>9</td>
</tr>
<tr align="center">
<td>6</td>
<td>10</td>
</tr>
</table>
</body>
</html>
3. <!DOCTYPE html>
<html>
<head>
<style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td
{ padding-top: 10px; padding-bottom: 20px; padding-left: 30px; padding-right: 40px;
} </style>
</head>
<body>
<table style="width:100%">
<tr>
<th colspan="2">1</th>
<th>8</th>
<th>12</th>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>9</td>
<td>13</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td colspan="2">10</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
12

<td>11</td>
<td>14</td>
</tr>
</table>
</body>
</html>
4. <!DOCTYPE html>
<html>
<head>
<title>HTML Tables,Colspan,Rowspan,Padding and Spacing</title>
</head>
<body>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
<table style="width:100%">
<tr align="center">
<td style="background-color:DodgerBlue;">1</td>
<td style="background-color:red;">2</td>
<td colspan="2" style="background-color:yellow;" >3</td>
</tr>
<tr align="center">
<td colspan="4" style="background-color:purple;">4</td>
</tr>
<tr align="center">
<td colspan="2" style="background-color:pink;">5</td>
<td style="background-color:darkred;">6</td>
<td style="background-color:powderblue;">7</td>
</tr>
<tr align="center">
<td rowspan="2" style="background-color:green;">8</td>
<td rowspan="2" style="background-color:indigo;">9</td>
<td rowspan="2" style="background-color:orange;">10</td>
<td style="background-color:violet;">11</td>
</tr>
</tr>
<tr align="center">
<td style="background-color:skyblue;">12</td>
</tr>
</table>
13

</body>
</html>

Output:

1.

2.

3.
14

4.

Discussion:
HTML tables are a useful way to organize data in a structured format on a web page. They
consist of rows and columns, and various attributes can be used to customize their
appearance and behavior.
The "colspan" and "rowspan" attributes allow a cell to span multiple columns or rows,
respectively. This is useful when dealing with larger sets of data and can help to simplify
the table layout. Padding and spacing are also important attributes that can be used to
control the spacing between table cells and the table border. Padding controls the space
between the content of a cell and its border, while spacing controls the space between the
borders of adjacent cells.
By using these attributes effectively, you can create tables that are visually appealing, easy
to read, and provide a clear structure for data. However, it's important to use them sparingly
and not to overcomplicate the layout of your tables, as this can make them harder to read
and understand.

Experiment No: 06
Experiment Name: HTML Lists and Iframes
Description:
HTML Lists:
 HTML lists allow you to display information in a structured, organized manner, making it
easier for users to understand and navigate your content.
 There are three types of HTML lists: unordered lists, ordered lists, and definition lists.
15

 Unordered lists are used for items that don't need to be in a specific order, and are usually
displayed with bullet points.
 Ordered lists are used for items that need to be in a specific order, and are usually displayed
with numbers or letters.
 Definition lists are used for terms and their corresponding definitions, and are usually
displayed with a term followed by its definition.
 HTML lists can be nested within one another to create more complex hierarchies of
information.
Iframes:
 An iframe is an HTML element that allows you to embed another HTML document within
your current document.
 Iframes are often used to embed third-party content, such as videos or maps, into a web
page.
 Iframes have their own separate document structure, which means that the content within
the iframe is independent of the content in the main document.
 You can customize the appearance and behavior of an iframe using CSS and JavaScript.
 Iframes can be used to display content from a different domain, but this can potentially
introduce security risks such as cross-site scripting (XSS) attacks.
 To ensure security, it's important to only embed content from trusted sources and to use
secure iframe attributes, such as the sandbox attribute, when appropriate.

Source code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists and Iframes</title>
</head>
<body>
Unorder List:
<ul>
<li>Mango</li>
<li>Orange</li>
<li>Apple</li>
</ul>
16

Order List:
<ol>
<li>Book</li>
<li>pen</li>
<li>Scale</li>
</ol>
Other List:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl><br>
<h1>Iframes:</h1>
<iframe src="https://youtu.be/wAc9pzXPWCg"></iframe>
</html>
Output:
17

Discussion:

HTML Lists and Iframes are two important elements in web development. HTML Lists
allow developers to organize information into ordered or unordered lists, making it easier
for users to read and navigate. Lists can also be nested within each other to create more
complex structures.

On the other hand, Iframes are used to embed content from other websites or sources within
a webpage. This is particularly useful for displaying videos, maps, social media feeds, or
other interactive elements without redirecting the user to another webpage.

Both HTML Lists and Iframes play an important role in creating a well-designed and user-
friendly website. They help to structure and organize content in a way that is easy to
navigate and visually appealing. However, it's important for developers to use these
elements judiciously, as too many nested lists or iframes can negatively impact page load
times and overall user experience.

Experiment No: 07
Experiment Name: HTML Forms,Different Elements Used In Form(Design a Registration Page)
Description:
HTML forms allow website developers to collect data from their users through a variety of input
methods, such as text fields, checkboxes, radio buttons, dropdown menus, and more. These forms
can be used for a variety of purposes, such as registering for a website, making a purchase, or
submitting feedback. Here is a description of HTML forms, along with a design for a registration
page:
HTML Forms:
 HTML forms are used to collect data from users on a website.
 They are created using the <form> tag and can contain a variety of input elements.
 When a user submits the form, the data is sent to the server for processing.
 Different Elements Used in a Form:

 Text Fields - used for collecting text-based input from users, such as names, email
addresses, and passwords.
 Checkboxes - used for selecting multiple options from a list.
 Radio Buttons - used for selecting a single option from a list.
 Dropdown Menus - used for selecting an option from a list that is hidden until the user
clicks on the dropdown.
 Submit Buttons - used for submitting the form data to the server for processing.
18

 Reset Buttons - used for resetting the form to its original state.
Design for a Registration Page:Assuming a user is registering to create an account on a website, a
possible design for a registration page using HTML forms could include the following elements:
 A heading indicating that this is a registration form.
 Text fields for the user's name and email address.
 A dropdown menu for selecting the user's country of residence.
 Checkboxes for selecting the user's areas of interest, such as sports, news, or entertainment.
 Password fields for creating a new password and confirming it.
 Submit and reset buttons at the bottom of the form.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title> HTML Forms,Different Elements Used In Form(Design a Registration


Page)</title>

</head>

<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">

<label for="fname">Name:</label><br>

<input type="text" id="name" name="name" value=""><br>

<label for="name">Father name:</label><br>

<input type="text" id="name" name="name" value=""><br>

<label for="name">Mother name:</label><br>

<input type="text" id="fname" name="name" value=""><br><br>

<label for="email">Email:</label>
19

<input type="email" id="email" name="email"><br>

<p>Gender:</p>

<input type="radio" name="gender" value="male" checked> Male<br>

<input type="radio" name="gender" value="female"> Female<br>

<label for="datemax">Date:</label>

<input type="date" id="datemax" name="datemax" ><br><br><p>Address:</p><br>

<textarea rows="5" cols="50" placeholder="Describe yourself here..."></textarea><br>

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

</form>

</body>

</html>

Output:
20

Discussion:

HTML forms are used to collect information from website visitors. Forms are essential to
gather information from users like their names, email address, password, address, and
more. HTML provides various elements to create a form, such as input, textarea, select,
label, button, and more.

The input element is the most commonly used element in HTML forms, which is used to
take input from users. There are various input types like text, password, checkbox, radio,
email, and more. The textarea element is used to collect a large amount of text from users.
The select element is used to create a drop-down list of options, while the label element is
used to associate a label with an input element. The button element is used to submit or
reset a form.

Overall, HTML forms play a crucial role in collecting data from users, and the different
elements provided by HTML help developers to create user-friendly and efficient forms.

Submitted by

Md Ali Hossen

CSE 030 07934

Section:B(B2)

You might also like