Scribd
Upload
22 views

HTML using lists and nested lists

Uploaded by

pravallikanemala1
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
22 views

HTML using lists and nested lists

Uploaded by

pravallikanemala1
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/ 11

Date : 27-12-2024 Page No :

Week-1
a) AIM : A HTML program, to explain the working of lists.
Note: It should have an ordered list, unordered list, nested lists and ordered list in an
unordered list and definition lists.

Description :
The tags used in this program are:

Tags Description
Open Tag Close Tag
<html> </html> It is a root element and it defines the whole HTML
document.
<head> </head> It is used to contain elements that provide information
about the document but are not directly displayed on the
web page. It plays a crucial role in defining how the page
behaves, how it interacts with external resources, and how
it appears in search engines.
<title> </title> It defines the title of a web page, which appears in the
browser's title bar or tab. It is a required element within
the <head> section of an HTML document.
<body> </body> It defines the document’s body. It represents the main
content of web page. Everything inside the tag is visible to
the user in the browser.
<h1> to <h6> </h1> to </h6> These tags represent heading elements used to define
headings of different levels on a web page. <h1> is the
highest important heading. <h6> is the lowest important
heading.
<p> </p> This tag defines a paragraph. It automatically adds white
space before and after the paragraph.
<ul> </ul> This tag in HTML is used to create unordered lists. These
lists display items in bullet point format by default
<li> </li> It is used to define list items within list containers.
<ol> </ol> It is used to create ordered lists, where list items are
displayed in a specific sequence, typically with numbers or
letters.
<dd> </dd> It is used to define a description or definition within a <dl>
<dl> </dl> It is used to create a description list. This type of list pairs
terms with their descriptions
Page No :

Code:
<html>
<head>
<title>Paragraph</title>
</head>
<body id="section1">
<h1> Bachelor of Technology(B.Tech)</h1>
<h2>Overview of B.Tech</h2>
<p>Bachelor of Technology is an Undergraduate academics degree program focused on engineering
and technology.</p>
<h2>Branches of B.Tech</h2>
<ul>
<li>Computer Science and Engineering(AIML)</li>
<li>Computer Science and Engineering(DS)</li>
<li>Information Technology</li>
</ul>
<h2>Key Features Of B.Tech</h2>
<ol>
<li>Duration:4 years</li>
<li>Mode:Full Time</li>
<li>Career Opportunities</li>
<ul>
<li>Engineering Roles</li>
<li>Research Positions</li>
<li>Higher Studies</li>
<li>Entrepreneurship</li>
</ul>
</ol>
<h2>Branches of CSE</h2>
<p>Software Development<p>
<dd>Focuses on the design,development,and maintenance of software.</dd>
<p>Data Science</p>
<dd>Involves the one of algorithm,data analysis and machine learning.</dd>
</body>
</html>

Output:
Page No :
Page No :

b) Aim: A HTML program, to explain the working of hyperlinks using tag and href,
target Attributes.

Description:
Tags Description
Open Tag Close Tag
<a> </a> It is used to create hyperlinks, allowing users to
navigate to other web pages, sections within the
same page, email addresses, or files. It stands
for "anchor".
Attributes used in <a> tag:
 href:- The href attribute specifies the destination of the hyperlink, i.e., the URL
or location where the link points to.
 target:- The target attribute specifies where the linked document will be opened.
It defines how the new page will be loaded when the link is clicked.

Code:
<html>
<head>
<title>Hyperlinks</title>
</head>
<body>
<h1>Hyperlinks Demonstration</h1>
<p>The &lta&gt tag is used to create hyperlinks in HTML</p>
<h2>Examples of Hyperlinks</h2>
<ol>
<li><a href="https://www.google.co.in/">Visit Google(Same tab)</a></li>
<p><b>Explanation:</b>The target="_self" is default to show in same web page.</p>
<li><a href="https://www.wikipedia.org/" target="_blank">Visit Wikipedia(New tab)</a></li>
<p><b>Explanation:</b>The target="_blank" attribute opens the link in new tab or window.</p>
<li><a href="http://127.0.0.1:5500/exp-1-a.html" target="_blank">Our file(Same tab)</a></li>
<p><b>Explanation:</b>Using # followed by an ID allows navigation to a specific section of same
page.</p>
</ol>
</body>
</html>
Page No :

Output:

 When clicked on “Visit Google”:


Page No :

 When clicked on “Visit wikipedia”:

 When clicked on “Our file”:


Page No :

c) Aim : A HTML program, that has your image and your friend’s image with specific
height and width. Also, when clicked on the images it should navigate to their respective
profiles.

Description :
 <img> tag : This tag is used to embed an image in HTML page.

Attributes in <img> tag :


 src : The src (short for source) attribute specifies the path to the media
resource, such as an image, video, or audio file.
 alt : It is used to provide a text description for images and other non-text
content when the content cannot be displayed.
 height, width : These attributes define the dimensions of the element, typically
in pixels.

style attribute : This attribute is used to add styles to an element such as color, font, size,
etc.

Code :
<html>
<head>
<title>Profiles</title>
</head>
<body>
<h1>Image Links To Profiles</h1>
<dd>Click on images below to visit their respective profiles</dd>
<h2>My Profile</h2>
<a href="http://127.0.0.1:5500/my-profile.html" target="_self">
<img src="my profile.webp" alt="My Image" width="150" height="200">
</a>

<dd><b style="color: green">Note: </b>Clicking on this image navigates to my profile</dd>


<h2>My Friend Profile</h2>
<a href="http://127.0.0.1:5500/myfrnd-profile.html" target="_self">
<img src="my friend.jpg" alt="My Image" width="150" height="200">
</a>
<dd><b style="color:green">Note: </b>Clicking on this image navigates to my friend's profile</dd>
</body>
</html>

Output :
Page No :

 When clicked on My Profile:


Page No :

 When clicked on My Friend Profile:


Page No :

d) Aim : A HTML program, in such a way that, rather than placing large images on a page,
the preferred technique is to use thumbnails by setting the height and width parameters to
something like to 100*100 pixels Each thumbnail image is also a link to a full-sized version
of the image. Create an image gallery using this technique.

Description :
 Thumbnails : A thumbnail is a small, reduced-size version of an image or video,
commonly used for preview purposes. It allows users to quickly browse and select
from a set of images or videos without loading the full-size versions. Thumbnails
are often used in galleries, file explorers, video platforms, and photo albums.

Code :
<html>
<head>
<title>Experiment-d</title>
</head>
<body><h1 style="text-align: center;">Gallery</h1>
<a href="dhoni.jpg" target="_self">
<img src="dhoni.jpg" alt="Image 1" width="100" height="100">
</a>
<a href="ironman.jpg" target="_self">
<img src="ironman.jpg" alt="Image 2" width="100" height="100">
</a>
<a href="kohli.webp" target="_self">
<img src="kohli.webp" alt="Image 3" width="100" height="100">
</a>
<a href="jerry.png" target="_self">
<img src="jerry.png" alt="Image 4" width="100" height="100">
</a>
<a href="marvel2.webp" target="_self">
<img src="marvel2.webp" alt="Image 5" width="100" height="100">
</a>
</body>
</html>
Page No :

Output :

 When clicked on a particular image:

You might also like