Scribd
Upload
21 views

HTML using lists and nested lists

Uploaded by

pravallikanemala1
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
21 views

HTML using lists and nested lists

Uploaded by

pravallikanemala1
Copyright
© © All Rights Reserved
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