Scribd
Upload
11 views23 pages

Palak It Lab

Uploaded by

macrowni273
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
11 views23 pages

Palak It Lab

Uploaded by

macrowni273
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/ 23

Q1. What is HTML ?

Write down the basic structure of HTML program

Ans: . HTML stands for Hyper Text Markup Language

 HTML is the standard markup language for creating Web pages


 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.

A HTML document is basically separated in two parts: the head (HTML head tag) and the body
(HTML body tag). We also add a Document type declaration on top of it to get the basic document structure
and HTML version. The structure of a HTML document is shown below.

Structure of HTML program:


<! DOCTYPE …> version information
<HTML>
<HEAD>
...information about document, scripts, styles….
</HEAD>
<BODY>
...visible content of document….
</BODY>
</HTML>

§ The !DOCTYPE declaration: Every well written HTML document begins with a basic declaration that defines
what type of document it is. This declaration is made using the!DOCTYPE tag and is to be written at the
beginning of the document. It tellS the processing agent and HTML version. Sample is shown below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

§ <HTML> tag: The html tag acts as a container for the whole document. Every character in the document should
be in between the html start and end tags. The html tag can also be used to define the language of the
contained document through the "lang" attribute. The content of the html tag is divided in two parts using
the head (HTML head tag) and the body (HTML body tag).

§ <HEAD> tag: This section is the document's head. All the information contained in the document's head is
loaded first, before any other thing in the document, as it's defined before the body segment. It includes
tags like title, script, style, meta and so on.

§ <BODY> tag: This is the document's body: The body is the container for the visual part of a document. All the
things written here will be shown when the document is rendered. Most of the tags in HTML can be inserted
in the body section (inside the HTML body tag) and will take care of the visual aspects of the document.

Example:
<HTML>
<HEAD>
<TITLE> My first Page </TITLE>
</HEAD>
<BODY>
<H1> Hello HTML <H1>
</BODY>
</HTML>
Q2. What is a tag in HTML ? What do you mean attributes of a tag ?

Ans: The <a> tag defines a hyperlink, which is used to link from one page to
another.

The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue


 A visited link is underlined and purple
 An active link is underlined and red

An HTML tag is a piece of markup language used to indicate the beginning and
end of an HTML element in an HTML document.

As part of an HTML element, HTML tags help web browsers convert HTML
documents into web pages. For example, the <p> tag is used to organize text content
into paragraph elements and the <img> tag is used to embed image elements.

Many tags, though not all, use an opening tag and closing tag to wrap around the
content that they are used to modify. Closing tags are denoted with a backslash like
this: </tag_name>. HTML tags are not visible in the browser.

The following diagram illustrates how tags are commonly used in HTML elements:
Q3. Create a web page by writing a lyrics of your favourite song with the use of
formatting tags like <p> tag , <br> tag and horizontal ruler and <font>

Q3: Create a web page by writing lyrics of your favourite song with the use
of all formatting tags like <p> tag, & <br>; tag and horizontal ruler and
<font>
<! DOCTYPE html>
<html>
<head>
<title>Gasolina Lyrics</title>
</head>
<body>
<h1><font color="blue">Gasolina</font> Lyrics</h1>
<hr>
<p>
<font color="red"><strong>[Chorus]</strong></font><br>
A ella le gusta la <strong><font size="4">gasolina</font></strong><br>
Dame más gasolina<br>
A ella le gusta la gasolina<br>
Dame más gasolina<br>
</p>
<p>
<font color="red"><strong>[Verse 1]</strong></font><br>
Como le encanta la gasolina<br>
Dale más gasolina<br>
Como le encanta la gasolina<br>
Dale más gasolina<br>
</p>
<p>
<font color="red"><strong>[Chorus]</strong></font><br>
A ella le gusta la gasolina<br>
Dame más gasolina<br>
A ella le gusta la gasolina<br>
Dame más gasolina<br>
</p>
<p>
<font color="red"><strong>[Verse 2]</strong></font><br>
Esto está prendido, esto está prendido<br>
Esto está prendido, esto está prendido<br>
Esto está prendido, esto está prendido<br>
Esto está prendido, esto está prendido<br>
</p>
<hr>
</body>
</html>

Q4: Write an application to class coordinator asking for 1 and 2 semester


st nd

mark sheet with heading styles (h1-h6) And & <center>, <marquee> and
other remaining text formatting tags.
ANS:
<html>
<head>
<title>Request for Marksheet</title>
</head>
<body>
<h1 style="text-align: center;">Mark Sheet Request</h1>
<p>
<center>
<strong>Date:27-05-2023</strong>
</center>
</p>
<hr>
<p>
<strong>To,</strong><br>
<span style="font-size: 20px;">Class Coordinator</span><br>
<span style="font-size: 18px;">Jagannath International Management School
</span><br>
MOR Pocket 105, Kalkaji, New Delhi, Delhi 110019
</p>
<h2 style="text-align: center;">Subject: Request for Semester 1 and 2
Marksheet</h2>
<p>
<strong>Dear Class Coordinator,</strong>
</p>
<p>
I am writing to request the marksheet for Semester 1 and 2 of my academic year. I
am currently enrolled in the BBA (GENERAL) and my details are as follows:
</p>
<ul>
<li><strong>Name:</strong> Palak Bisht</li>
<li><strong>Student ID:</strong> 80214101722</li>
</ul>
<p>
I have completed the mentioned semesters and would like to receive the marksheet
as soon as possible for personal reference and future use. Kindly provide me with the
marksheet for both semesters.
</p>

<p>
I understand that there may be some administrative procedures involved in
generating the marksheet, and I am willing to cooperate with any requirements or
provide any additional information if necessary.
</p>
<p>
Thank you for your attention to this matter. I look forward to receiving the
marksheet at your earliest convenience.
</p>
<p>
<strong>Sincerely,</strong><br>
Palak Bisht<br>
9773751540
</p>
</body>
</html>
Q5: Create a web page by designing the menu of your favourite restaurant.
Use Listing. <!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>Barbeque Nation Menu</title>
</head>
<body>
<h1>Barbeque Nation Menu</h1>
<ul class="listing">
<li>
<h2>Appetizers</h2>
<ul>
<li>Chicken Wings</li>
<li>Samosa Chaat</li>
<li>Chicken Tikka Nachos</li>
<li>Chicken Lollipops</li>
</ul>
</li>
<li>
<h2>Salads</h2>
<ul>
<li>Garden Salad</li>
<li>Caesar Salad</li>
<li>Barbeque Nation Salad</li>
<li>Chicken Caesar Salad</li>
</ul>
</li>
<li>
<h2>Soups</h2>
<ul>
<li>Tomato Soup</li>
<li>Mushroom Soup</li>
<li>Chicken Soup</li>
<li>Lentil Soup</li>
</ul>
</li>
<li>
<h2>Main Course</h2>
<ul>
<li>Chicken Tikka Masala</li>
<li>Butter Chicken</li>
<li>Lamb Rogan Josh</li>
<li>Fish Curry</li>
</ul>
</li>
<li>
<h2>Sides</h2>
<ul>
<li>Naan</li>
<li>Roti</li>
<li>Rice</li>
<li>Vegetables</li>
</ul>
</li>
<li>
<h2>Desserts</h2>
<ul>
<li>Gulab Jamun</li>
<li>Rasmalai</li>
<li>Kheer</li>
<li>Ice Cream</li>
</ul>
</li>
</ul>
</body>
</html>
Q6: Design a web page of the restaurant home page with an <Image> and
link it with the menu of the restaurant.
ans:
<html>
<head>
<title> Barbeque Nation Home Page </title>
</head>
<body>
<h1> Welcome to Barbeque Nation!</h1>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Barbeque_Nation_
logo.svg/1200px-Barbeque_Nation_logo.svg.png" alt="Barbeque Nation image">
<p> We offer a wide variety of delicious Indian cuisine, including appetizers,
salads, soups, main courses, and desserts. </p>
<p> Click here to view our MENU. </p>
<a href="menu.html">View Menu </a>
</body>
</html>

Q7: Create a web page in which add an image of solar system.


<html>
<head>
<title>Solar System</title>
</head>
<body>
<h1>The Solar System</h1>
<img src="solar_system.jpg" alt="Solar System">
</body>
</html>
Q 8: Design a web page for mark sheet of your own for 12 Class. th

<html>
<head>
<title>12th Class Mark Sheet</title>
<style>
body {font-family: Arial, sans-serif;}
table {width: 400px; border-collapse: collapse;
th, td {padding: 8px; text-align: left; border-bottom: 1px solid #ddd;}
th {background-color: #f2f2f2;}
. total {font-weight: bold;}
</style>
</head>
<body>
<h1>12th Class Mark Sheet</h1>
<table>
<tr>
<th>Name:</th>
<td>Palak Bisht</td>
</tr>
<tr>
<th>Father's Name:</th>
<td>Ravindra Singh Bisht</td>
</tr>
<tr>
<th>Mother's Name:</th>
<td>Manju Bisht</td>
</tr>
<tr>
<th>Enrolment Number:</th>
<td>80214101722</td>
</tr>
<tr>
<th>Phone Number:</th>
<td>+91 9599730306</td>
</tr>
</table>
<br>
<table>
<tr>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>English</td>
<td>95</td>
</tr>
<tr>
<td>Mathematics</td>
<td>90</td>
</tr>
<tr>
<td>Business Studies</td>
<td>92</td>
</tr>
<tr>
<td>Accounts</td>
<td>88</td>
</tr>
<tr>
<td>Economics</td>
<td>94</td>
</tr>
<tr class="total">
<td>Total</td>
<td>459</td>
</tr>
</table>
</body>
</html>

Q 9: Create your CV with all the appropriate tags.


<!DOCTYPE html>
<html>
<head>
<title>CV - Palak Bisht</title>
<style>
body {font-family: Arial, sans-serif;}
h1, h2 {margin-bottom: 10px;}
.section {margin-bottom: 20px;}
.section h2 {font-size: 18px;
.section ul {list-style-type: none; margin: 0; padding: 0;}
.section li {margin-bottom: 5px;}
</style>
</head>
<body>
<h1>Palak Bisht</h1>
<p>Address: E-6/54,Sangam Vihar, New Delhi,110017</p>
<p>Email: [email protected]</p>
<p>Phone: (+91) 9599730306 </p>

<div class="section">
<h2>Education</h2>
<ul>
<li>
<strong>Bachelor of Business Administration (BBA)</strong><br>
Guru Gobind Singh Indraprastha University<br>
Year of Graduation: 2022-2025
</li>
</ul>
</div>

<div class="section">
<h2>Work Experience</h2>
<ul>
<li>
<strong>STUDENT</strong><br>
HAMDARD PUBLIC SCHOOL<br>
23/42a, TALIMABAD , SANGAM VIHAR, NEW DELHI 110017
<br>
2020 - 2022
<ul>
<li>CLASS REPRESENTATIVE</li>
<li>STUDENT COUNCIL</li>
</ul>
</li>
</ul>
</div>
<div class="section">
<h2>Skills</h2>
<ul>
<li>Time Management</li>
<li>Leadership</li>
<li>Problem Skills</li>
</ul>
</div>
</body>
</html>
Q10: Explain the concept of lists in HTML in detail.
In HTML, lists are used to group together related pieces of information so they are clearly
associated with each other and easy to read. There are three types of lists in HTML:

 Ordered lists (<ol>)


 Unordered lists (<ul>)
 Description lists (<dl>)

Ordered lists are used to present items in a specific order, such as a list of steps in a recipe or
a list of items on a shopping list. The items in an ordered list are numbered by default, but
you can also use letters or Roman numerals.
Unordered lists are used to present items that do not need to be in a specific order, such as a
list of ingredients in a recipe or a list of features of a product. The items in an unordered list
are typically marked with bullets.
Description lists are used to present a list of terms and their definitions. The terms are marked
with <dt> tags and the definitions are marked with <dd> tags.
Here are some examples of HTML lists:
Ordered list
<ol>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ol>
Unordered list
<ul>
<li>Ingredient 1</li>
<li>Ingredient 2</li>
<li>Ingredient 3</li>
</ul>
Description List
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
</dl>

Q 12: What are logical and physical tags?

In the context of HTML, there is no specific categorization of tags into "logical"


and "physical" tags. It seems that you may be referring to the concepts of
"semantic" and "presentational" tags instead.

1. Semantic Tags: Semantic tags are HTML elements that carry meaning or
convey the purpose or structure of the content they surround. They describe the
type of content contained within the tags, making it easier for search engines,
assistive technologies, and developers to understand the webpage's structure.
Semantic tags help improve accessibility, maintainability, and search engine
optimization (SEO) of a website.

Some examples of semantic tags introduced in HTML5 are:


 <header>: Represents the introductory content at the top of a page or section.
 <nav>: Represents a section of navigation links.
 <main>: Represents the main content of the document.
 <section>: Represents a standalone section of content.
 <article>: Represents a self-contained composition in a document.
 <aside>: Represents content that is tangentially related to the main content.
 <footer>: Represents the footer of a page or section.

These semantic tags provide contextual information about the content, allowing
developers and browsers to understand the structure and purpose of different
sections.

2. Presentational Tags: In the past, HTML included tags that were primarily
used for presentational purposes, meaning they were used to control the
appearance or layout of the content rather than describing its meaning or
structure. These tags were often used to define styles, colors, alignments,
and other visual aspects of the webpage.

Examples of presentational tags (which are now considered deprecated) include:

 <b>: Represents text that should be rendered in bold.


 <i>: Represents text that should be rendered in italics.
 <font>: Specifies font-related properties such as size, color, and face.
 <center>: Defines center alignment of content.

It's important to note that using presentational tags is generally discouraged in


modern web development practices. Instead, developers are encouraged to
separate content and presentation by using semantic tags for structure and
applying CSS (Cascading Style Sheets) to define the visual appearance.
In summary, while there is no explicit distinction between "logical" and
"physical" tags in HTML, the terms "semantic" and "presentational" are
commonly used to describe the purpose and usage of HTML tags. Semantic tags
focus on the meaning and structure of content, while presentational tags were
historically used for visual formatting but are now considered outdated.

Q 13: What do you mean by Empty & Container?


In the context of HTML, "empty" and "container" are not specific terms used to
categorize elements. However, I can provide an explanation of the general
concepts of empty elements and container elements in HTML.
1. Empty Elements:
Empty elements, also known as void elements, are HTML elements that do not
have any content or closing tags. These elements are self-closing and do not
require an opening tag and a closing tag pair. They are used to insert specific
types of content or define elements that do not contain any inner content.
Examples of empty elements in HTML include:
- `<br>`: Inserts a line break.
- `<hr>`: Represents a thematic break or horizontal rule.
- `<img>`: Displays an image.
- `<input>`: Represents an input control.
- `<meta>`: Defines metadata about an HTML document.
Empty elements are written in a self-closing format, like `<br>` or `<input>`,
without a closing tag. However, in HTML5, the closing slash (`/`) at the end of
the tag is optional, so `<br>` and `<br />` are both valid representations of an
empty element.
2. Container Elements:
Container elements, also known as parent elements, are HTML elements that
can contain other elements or content within them. They provide a structural
framework for organizing and grouping elements together. Container elements
consist of an opening tag, content, and a closing tag.

Examples of container elements in HTML include:


- `<div>`: Defines a division or a generic container for other elements.
- `<section>`: Represents a standalone section of content.
- `<ul>`: Defines an unordered list.
- `<table>`: Represents tabular data.
- `<p>`: Represents a paragraph of text.
Container elements create a hierarchical structure, allowing you to nest
elements inside one another to create more complex layouts and organization of
content.
It's important to note that not all elements in HTML are either empty or
container elements. Some elements, such as `<a>`, `<span>`, or `<strong>`, can
be used for specific purposes but don't necessarily fall into either category. The
usage and behavior of an HTML element depend on its specific purpose and
how it is intended to be used within the overall structure of the webpage.
Q 14: Design a program for the following output:
<! DOCTYPE html>
<html>
<head>
<title>Student Activities and Software Learning Websites</title>
</head>
<body>
<h1>Proposed Student Activities:</h1>
<ol>
<li>Develop programs related to unit-wise topics in the computer laboratory.</li>
<li>Develop any module to be useful in real-life applications.</li>
<li>Multimedia presentation of modules developed by students.</li>
</ol>
<h1>List of Software Learning Websites:</h1>
<ul>
<li>
<a href="https://www.w3schools.com/asp">ASP Tutorial - W3Schools</a>
</li>
<li>
<a href="https://www.webwiz.co nk-Knowledgebase">Classic ASP Tutorials & Articles
- Web Wiz</a>
</li>
<li>
<a href="https://www.macheol.com/html">HTML Tutorial - WiSchools</a>
</li>
<li>
<a href="https://www.tutorialspoint bscript index.htm">VBScript Tutorial - Tutorials
Poust</a>
</li>
<li>
<a href="https://www.achels.com/ADO/default.as">ADO Tutorial - WiSchools</a>
</li>
</ul>
<h2>Markup Languages:</h2>
<p>HTML - Hyper Text Markup Language</p>
<p>XML - eXtensible Markup Language</p>
</body>
</html>

15. Display your family information with background and other


formatting.

You might also like