0% found this document useful (0 votes)

19 views253 pages

Training Report Anu.doxx (2)

This document is an internship report by Rudrawar Anushka Shailesh from Government Polytechnic Nanded, detailing daily activities and learnings in web programming, including HTML, CSS, PHP, and WordPress. It outlines the completion of various tasks and assignments related to HTML structure, JavaScript, CSS, and the installation of Notepad++. The report also includes explanations of HTML concepts, tags, attributes, and practical examples of coding.

Uploaded by

anushkarudrawar18

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

0% found this document useful (0 votes)

19 views253 pages

Training Report Anu.doxx (2)

Uploaded by

anushkarudrawar18

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/ 253

INDEX Internship Report

WEB PROGRAMMING
Including HTML CSS PHP WORDPRESS

By KALAVATI TECHNOLOGIES
CHHATRAPATI SAMBHAJINAGAR

STUDENT NAME:- Rudrawar Anushka Shailesh

COLLEGE NAME:- GOVERNMENT POLYTECHNIC NANDED
GOVERNMENT POLYTECHNIC NANDED
INFORMATION TECHNOLOGY

Date: [05/06/2024 ]

Internship Daily Report

Student Name: Rudrawar Anushka Shailesh

Roll no: 936

HOD: S.N.Dhole

Guide Name: Mr.Nitin Nikam

Documentation:
Status of activities planned in [Current Session]

➢ Date • Description ✓ Status

05/06/2024 Intro of HTML. ✓ Complete

Understanding
Internet.
What is
Website?

06/06/2024 Learn HTML ✓ Complete

structure
Assignment
Installation
of notepad++

07/06/2024 Holiday ✓ Complete

08/06/2024 Holiday ✓ Complete

09/06/2024 Holiday ✓ Complete

10/06/2024 HTML table tag ✓ Complete

HTML table
code structure
Examples
HTML Fonts
11/06/2024 Practice ✓ Complete
Questions

15/06/2024 Holiday ✓ Complete

16/06/2024 Holiday ✓ Complete

17/06/2024 Functions in ✓ Complete

JavaScript
Operators in
JavaScript
getElementbyId
in JavaScript
Ex., One web
page to
another. login
example

18/06/2024 Practice ✓ Complete

Questions

19/06/2024 Pattern using ✓ Complete

JavaScript
( Create 5
patterns)

Arrays in
JavaScript

20/06/2024 VS Code ✓ Complete

Introduction
and features
Installing VS
Code
Looping
statements in
JavaScript
Conditional
statements in
JavaScript.
21/06/2024 CSS ✓ Complete
introduction
Example using
CSS
22/06/2024 Practice ✓ Complete
Questions

25/06/2024 Google Fonts ✓ Complete

API.
Advantages of
google fonts.
Syntax for
class
declaration to
use google
fonts.
5 Tasks using
different google
fonts.
27/06/2024 XAMPP ✓ Complete
Components of
XAMPP.
Format
Support of
XAMPP.
Installation of
XAMPP.

✓
✓

✓
Date: 05/06/2024

Introduction to HTML.

HTML Stands For Hypertext Markup Language.

It is the most basic language, and simple to learn and modify. It is a combination of both
hypertext and markup language. It contains the elements that can change/develop a web
page’s look and the displayed contents. Or we can say that HTML creates or defines the
structure of web pages. We can create websites using HTML which can be viewed on internet-
connected devices like laptops, android mobile phones, etc. It was created by Tim Berners-Lee
in 1991.

Hypertext: Text that is not restricted to a sequential format and that includes links to other text
is called Hypertext. The links can connect online pages inside a single or different website.

Markup Language: Markup Language is a language that is interpreted by the browser and it
defines the elements within a document using “tags”. It is human-readable, which means that
markup files use common words rather than the complicated syntax of programming
languages.

Use of HTML: HTML ) is the code that is used to structure a web page and its content. For
example, content could be structured within a set of paragraphs, a list of bulleted points, or
using images and data tables.
Date: 06/06/2024

HTML Basic learnings and structure

Html used predefined tags and attributes to tell the browser how to display content, means in
which format, style, font size, and images to display. Html is a case insensitive language. Case
insensitive means there is no difference in upper case and lower case ( capital and small letters)
both treated as the same, for r example ‘D’ and ‘d’ both are the same here.

An HTML Document is mainly divided into two parts:

HEAD: This contains the information about the HTML document. For Example, the Title of the
page, version of HTML, Meta Data, etc.

BODY: This contains everything you want to display on the Web Page.

Ex.; Structure of HTML code

Simple HTML Code

Output:
Basic HTML Tags:
Assignment : 1

Q1: Are the HTML tags and elements are same thing ?
Ans: HTML tags and elements are related but distinct concepts in HTML.

1. HTML Tags: Tags are the building blocks of HTML. They are used to mark the start and
end of an HTML element. Tags are enclosed in angle brackets, with the opening tag
indicating the beginning of an element (e.g., `<p>`) and the closing tag indicating the end
(e.g., `</p>`). Some tags do not have a closing counterpart, known as self-closing tags
(e.g., `<img />`).
2. HTML Elements: An element consists of the opening tag, the content (if any), and the
closing tag. For example, in the element `<p>Hello, World!</p>`, `<p>` is the opening
tag, `Hello, World!` is the content, and `</p>` is the closing tag. Together, they form a
paragraph element.

In summary, tags are the markers that define the start and end of an element, while the
element includes the tags and the content they enclose.

Q2: What are tags and attributes in HTML?

Ans: In HTML, tags and attributes are fundamental components used to create and structure
web content.

HTML tags:

HTML tags are like keywords which defines that how web browser will format and display the
content. With the help of tags, a web browser can distinguish between an HTML content and a
simple content. HTML tags contain three main parts: opening tag, content and closing tag. But
some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left
to right. HTML tags are used to create HTML documents and render their properties. Each
HTML tags have different properties.

An HTML file must have some essential tags so that web browser can differentiate between a
simple text and HTML text. You can use as many tags you want as per your code requirement.

Some basic tags in HTML are ,

• Unclosed HTML tags : <br>,<hr>.

• HTML link tags : <a> and <base>.

• HTML text tags : <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>,
<acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>,
<kbd>, <pre>, <samp>, <var> and <br>.

• HTML list tags : <ul>, <ol>, <li>, <dl>, <dt> and <dd>.

• HTML image and object tags : <img>, <area>, <map>, <param> and <object>.

HTML attributes:

HTML attributes give additional information about the HTML elements and are always specified
in the start tag. In our previous blog on HTML tags, we learned about different tags, such as
paragraph tag <p> and image tag <img>, in their simplest form.

Syntax., <tag attribute_name=”attribute_value”>Some content…</tag>

Ex., <p style=” background:lightblue; color:navy;”>Style attribute in HTML.</p>

Commonly used HTML attributes are

• Style attributes.
• Width and height attributes.
• Alt attributes.
• Src attributes.
• Href attributes.

Q3: What are HTML entities?

Ans: The HTML entities are used to display reserved characters (characters that are used in
HTML code), special characters, or invisible characters.

<p>This is a <p> tag.</p>

Output: This is a <p> tag.

Here, < and > are the HTML entities used to display < and > respectively.If we were to use
the <p> tag instead of <p> the browser would read it as a tag. Hence to display <p> we
need to use < and > instead of < and > respectively.

HTML entities are represented by either their name or their number.

• Entity names : We use &entity_name; to add reserved characters using Entity names.
For example,
¢ would be displayed as ¢
• Entity number : We use &#entity_number; to add reserved characters using Entity
number. For example, ¢ would also be displayed as ¢
All entity names and numbers start with an & and end with an ;
• Special Characters: Special characters are characters that are not available on a general
keyboard like ®, ©, ¢, etc.We use HTML entities to add special characters to HTML
documents.
<footer> © 2024 all rights reserved. </footer>
Output: , ©2024 all rights reserved.

Some important HTML entities:

Q4: Describe HTML layout structure.
Ans: HTML Layout

HTML layouts are the backbone of web pages, structuring content for user-friendly
navigation. They ensure organized presentation and enhance user experience. This
guide explores elements and techniques vital for crafting effective HTML layouts.

<header> - Defines a header for a document or a section

<nav> - Defines a set of navigation links

<section> - Defines a section in a document

<article> - Defines an independent, self-contained content

<aside> - Defines content aside from the content (like a sidebar)

<footer> - Defines a footer for a document or a section

<details> - Defines additional details that the user can open and close on demand

<summary> - Defines a heading for the <details> element

Q5: Explain list elements in HTML. OL, UL, DL.
Ans: An HTML list is a record of related information used to display the data or any information
on web pages in the ordered or unordered form.

OL: Ordered List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.The list items will
be marked with numbers by default:

Ex., <!DOCTYPE html>

<html>

<body>

<h2>An ordered HTML list of Programming languages</h2>

<ol>

<li>Python</li>

<li>Django</li>

</ol>

</body>

</html>

Output:
UL: Unordered List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.The list items
will be marked with bullets (small black circles) by default

Ex., <!DOCTYPE html>

<html>

<body>

<h2>An unordered HTML list of primary colors</h2>

<ul>

<li>Green</li>

</ul>

</body>

</html>

Output:
DL: Description List

A description list is a list of terms, with a description of each term.The <dl> tag defines the
description list, the <dt> tag defines the term (name), and the <dd> tag describes each term

Ex., <!DOCTYPE html>

<html>

<body>

<h2>A Description List</h2>

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dd>- white cold drink</dd>

</dl>

</body>

</html>

Output:
Q6: Explain Steps of installation of notepad++.
Ans:

Step 1: Visit the official Notepad++ website on any web browser. Click on Download Notepad++
v8.1.9.3

Step 2: On the next webpage, different installer files are listed, click on the Download button.
Downloading of the executable file will start shortly. It is a small 4.19 MB file that will hardly
take a minute.

Step 3: Now check for the executable file in downloads in your system and run it.
Step 4: It will prompt confirmation to make changes to your system. Click on Yes.

Step 5: Next screen is of selecting language, click OK

Step 6: Setup screen will appear, click on Next.

Step 7: The next screen will be of License Agreement, click on I Agree.

Step 8:The next screen will be of installing location so choose the drive which will have
sufficient memory space for installation. It needed a memory space of 11.3 MB.
Step 9: Next screen is of choosing components, all components are already marked so don’t
change anything just click on the Next button.

Step 10: Next screen is to create a desktop icon so check the box and click install. The
installation will be completed in a few seconds
Step 11: Click on Finish to finish the installation process.

Notepad++ is successfully installed on the system and an icon is created on the desktop
Q7 : Self Task.
Ans: Café Menu

<html>

<body>

<h2> India café </h2>

<h1> welcome to the eatery universe and enjoy yummy food</h1>

<ul>

<li>Coffee</li>

<ol>

<li>Choco frolics</li>

<li>Thick cold coffee</li>

<li>Frappe</li>

<li>Latte</li>

<li>Filter coffee</li>

</ol>

</ul>

<ul>

<li>Grills</li>

<ol>

<li>Plain cheese grill</li>

<li>Corn cheese </li>

<li>Paneer cheese grill</li>

<li>Cheese capsicum grill</li>

<li>veggies cheese grill</li>

</ol>

</ul>

<ul>

<li>Pizza</li>

<ol>

<li>Cheese burst pizza</li>

<li>Cheesy vegetable pizza</li>

<li>Margherita pizza</li>

<li>Pesto pizza</li>

<li>Classic pizza</li>

</ol>

</ul>

</body>

</html>

Output:
Date: 10/06/2024

HTML Table tag

HTML table tag is used to display data in tabular form (row * column). There can be many
columns in a row.We can create a table to display data in tabular form, using <table> element,
with the help of <tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is
defined by <td> tags. HTML tables are used to manage the layout of the page e.g. header
section, navigation bar, body content, footer section etc. But it is recommended to use div tag
over table to manage the layout of the page.

HTML Table tags and their Purpose

Table Format

Code structure of HTML Table

Example.,
<html>

<table border=”1” >

<tr>

<th>Country</th>

</tr>

<tr>

<td>MS Dhoni</td>

<td>India</td>

</tr>

<tr>

<td>England</td>

</tr>

<tr>

<td>Rachin Ravindra </td>

<td>New-Zealand</td>

</tr>

</table>
</html>

<p style=”font-size:11px”>This is another paragraph.</p>

</body>

</html>

Output:
• Task 1

Add index to table containing friends data that is name and contact no.

Source Code:
<!DOCTYPE html>

<html>

<head>

<title> Friend Information </title>

<body>

<h3 align ="center"><b> Friends Contact list</b></h3>

<table border ="4" bgcolor ="#FFC0CB">

<tr bgcolor = cyan >

<th><p style ="font-family : tahoma;font-size :15px;color : blue ">

Sr.No</p> </th>

<th><p style ="font-family : tahoma;font-size :15px;color : blue "> Friend's

Name</p> </th>

<th><p style ="font-family : tahoma;font-size :15px;color : blue "> Contact

Number's</p></th>

</tr>

<tr>

<td> smriti Mandhana </td>

</head>

<body>

<table border = 2 bordercolor ="black" bgcolor ="lightpink" cellspacing =0

cellpadding=0 width =30% >

<tr align ="center" >

<th colspan =5><font face = Calibari ;font size =4>Maharashtra State Board

of<br> Secondary and Higher Secondary Education ,Pune.</font><br>

<font face =Arial ; font size =2 > <br>SECONDARY SCHOOL CERTIFICATE

EXAMINATION -CERTIFICATE</FONT><font size =2><br> Candidate's Full Name( Surname

first)</font><br>

<h4 align="center"><B>RUDRAWAR ANUSHKA SHAILESH <B></H4>

<H6> CANDIDATE MOTHER NAME :TRUPTI</h6>

<tr BGCOLOR ="SILVER">

<th>Divisional Board</th>

<th> Seat No</th>

<th> centre NO</th>

<th> School No</th>

<th> Sr.No of certificate</th>

</tr>

<td>EIGHTY TWO</td>
</tr>

<tr>

<td>72 SCIENCE & TECHNOLOGY</td>

<td>ONE HUNDRED</td>

</TR>

<tr>

<td> SOCAIL SCIENCE</td>

<td>NINETY SEVEN</td>

</tr>

<tr>

<td> TOTAL MARKS</td>

<td>FOUR HUNDRED AND EIGHTY SEVEN</td>

</tr>

<tr align =center>

Output:
• Task 3

Self task : Indian t20i 2024 world cup squad

Source Code :

<!DOCTYPE html>

<html>

<head>

<title> T20i World Cup Squad 2024 <br> Indian Cricket Team </title>

<body>

<h3 align ="center"><b> T20i World Cup Squad 2024 <br> Indian Cricket Team </b></h3>

<table border ="4" bgcolor ="#DDA0DD">

<tr bgcolor = yellow >

<th><p style ="font-family : tahoma;font-size :15px;color : Red">

Sr.No</p> </th>

<th><p style ="font-family : tahoma;font-size :15px;color : Red ">

Player Name</p> </th>

<th><p style ="font-family : tahoma;font-size :15px;color : Red "> Playing Role </p></th>

</tr>

<tr>

<td> Rohit Sharma (C) </td>

<td> Batter</td>

</tr>

<td> Virat Kohli</td>

<td> Batter</td>

</tr>

<tr>

<td> Suryakumar Yadav </td>

<td> Batter</td>

</tr>

<tr>

<td> Yashaswi Jaiswal </td>

<td> Batter </td>

</tr>

<tr>

<td> Hardik Pandya (VC) </td>

<td> All-rounder </td>

</tr>

<tr>

<td> Rishabh Pant (Wk) </td>

<td> Batter , Wicket-Keeper</td>

<td> Yuzvendra Chahal </td>

<td> Bowler</td>

</tr>

<tr>

<td> Arshdeep Singh</td>

<td> Bowler</td>

</tr>

<tr>

<td> Jasprit Bumrah </td>

<td> Bowler</td>

</tr>

<tr>

<td> Mohd. Siraj </td>

<td> Bowler</td>

</tr>

</table>

</body>

<b>Reserves</b>: Shubman Gill, Rinku Singh, Khaleel Ahmed, Avesh Khan.

</head>

</html>

Output:
Date: 11/06/2024

Practice Questions:
Q1: Building the Basics : The Bare Bones Website

Start with a simple HTML document structure: the <!DOCTYPE html>, <html>,
<head>, <title>, <body>, and closing tags.

Experiment with text formatting using heading (<h1> to <h6>), paragraph (<p>),
And line break (<br>) tags.

Add an image (<img>) with a source (src) attribute and explore alternative text
(alt) for accessibility.

Answer:
<!DOCTYPE html>

<html>

<head>

<title> Introduction To The Legends</title>

</head>

<body style =”background-color : lightblue”>

<h2 style =”color : Magenta”><b>Introduction To The Legends<b></h2>

<h2 style = “color: brown”><b> VIRAT KOHLI </b></h2>

<img src =”Phone/Pictures/Screenshots/ Screenshot 2024-06-12-15-38-47-99 680d0

3679600f7af0b4c700c6b270fe7.jpg” width =”185” height =”185” border=”5”>

<p>is an Indian international cricketer and the former captain of the Indian national cricket
team.He is a right-handed batsman and an occasional medium-fast bowler. He currently
represents Royal Challengers Bengaluru in the IPL and Delhi in domestic cricket. Kohli is widely
regarded as one of the greatest batsmen of all time. He holds the record as the highest run-
scorer in IPL, ranks second in T20I, third in ODI, and stands as the fourth-highest in international
cricket.<br>He also holds the record for scoring the most centuries in ODI cricket and stands
second in the list of most international centuries scored. Kohli was a key member of the Indian
team that won the 2011 Cricket World Cup, 2013 ICC Champions Trophy, and captained India to
win the ICC Test mace three consecutive times in 2017, 2018, and 2019.</p>

</body>

</html>

Output:
Q2: Creating Structures with Headings and lists.

Organize content with heading tags (<h1> to <h6>) to create a hierarchy. Use
ordered (<ol>) and unordered (<ul>) lists to present Items sequentially or non-
sequentially, respectively. Practice nesting lists (<li> within <ul> or <ol>) for more
complex structures.

Answer
<!DOCTYPE HTML>

<html>

<head>

<title> Headings</title>

<body style = “ Background-color : #ff9999” >

<h1> PROGRAMMING LANGUAGES </h1>

<h1> Java(Heading H1)<h1>

<h2> Python(Heading H2)<h2>

<h3> Angular(Heading H3)<h3>

<h4> C++(Heading H4)<h4>

<h5> C(Heading H5)<h5>

<h6> C#(Heading H6)<h6>

</body>

</html>

Output:
Use Ordered (<ol>) and unordered (<ul>) lists to present items sequentially or

Non-sequentially, respectively.

Practice nesting lists (<li> within <ul> or <ol>) for more complex structures.

Answer:
<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Food Items</title>

</head>

<body>

<h1>Food Items</h1>

<h2>Ordered List of Food Categories</h2>

<ol>

<li>Fruits</li>

<li>Vegetables</li>

<li>Dairy</li>

<li>Meats</li>

<li>Grains</li>

</ol>

<h2>Unordered List of Food Items</h2>

<ul>

<li>Fruit
<ul>

<li>Apple</li>

<li>Banana</li>

<li>Orange</li>

</ul>

</li>

<li>Vegetables

<ul>

<li>Carrot</li>

<li>Broccoli</li>

<li>Spinach</li>

</ul>

</li>

<li>Dairy

<ul>

<li>Cheese</li>

<li>Yogurt</li>

</ul>

</li>

<li>Meats

<ul>

<li>Chicken</li>

</ul>

</li>

<li>Grains

<ul>

<li>Bread</li>

<li>Pasta</li>

</ul>

</li>

</ul>

</body>

</html>

Output:
Q3: Linking Up : Navigation with Hyperlinks.

Create links (<a>) to connect web pages within your site or to external websites.

Set the href attribute to specify the destination URL.

Optionally, use the title attribute to provide additional information for screen
Readers or tooltips.

Answer:
<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>External Links Example

</title>

</head>

<body>

<h1>Welcome to the External Links Page</h1>

<p>Here are some useful external links:</p>

<a href="https://www.google.com" target="_blank">Google</a><br>

<a href="https://www.msbte.com" target="_blank">MSBTE</a><br>

<a href="https://www.cricbuzz.com" target="_blank">Cricbuzz</a>

</body>

</html>

Output:
Q4: Building a simple resume .

Showcase your skills and experience by creating a basic resume or portfolio

Website.

Use heading tags for sections like “Education,” “Skills,” and “Projects.”

Include unordered lists to display skills or project details.

Optionally, add images and links to further enhance your portfolio.

Answer:
<!DOCTYPE html>

<html>

<head>

<title>Resume - Engineering Student</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f0f8ff;

margin: 0;

padding: 20px;

header {

background-color: #4682b4;

color: white;

padding: 10px 0;

text-align: center;

h2 {

color: #4682b4;

border-bottom: 2px solid #4682b4;

padding-bottom: 5px;

table {
width: 100%;

border-collapse: collapse;

margin-bottom: 20px;

th, td {

border: 1px solid #ddd;

padding: 8px;

th {

background-color: #f2f2f2;

</style>

</head>

<body>

<h1>Anushka Rudrawar</h1>

<p>Diploma in Indormation Technology Student</p>

</header>

<h2>Contact Information</h2>

<table>

<tr>

<th>Email</th>

<td>[email protected]</td>
</tr>

<tr>

<th>Phone</th>

<td>+123 456 7890</td>

</tr>

<tr>

<th>Address</th>

<td>456 Edden Towers, Wakad, Pune, INDIA</td>

</tr>

</table>

</section>

<h2>Education</h2>

<table>

<tr>

<th>Degree</th>

<th>Institution</th>

</tr>

<tr>

<td>Diploma in Information Technology </td>

<td>Government Polytechnic,Nanded</td>

</tr>
</table>

</section>

<h2>Projects</h2>

<ul>

<li><strong> Web Designing:</strong> Developed a website for cafe menu

management.</li>

</ul>

</section>

<h2>Internships</h2>

<table>

<tr>

<th>Position</th>

<th>Company</th>

<th>Duration</th>

</tr>

<tr>

<td>Intern Engineer</td>

<td>Kalavati Technologies</td>

<td>June 2024 - Ongoing</td>

</tr>

</table>
</section>

<h2>Skills</h2>

<ul>

<li>Web developing </li>

<li>Software developing</li>

<li>Presentation Skills</li>

<li>Human Resource</li>

<li>Project Management</li>

</ul>

</section>

<h4> Thank You!</h4>

</body>

</html>

Output:
Q5: Design a fun “About me ” page .

Tell your story! Create a creative “About Me” page to introduce yourself.

Use heading tags, paragraphs, and lists to share your hobbies, interests, and
Aspirations.

Include an image or GIF to personalize your page.

Answer:
<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>About Me</title>

</head>

<body style="font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f9;

color: #333;">

<header style="background-color: #4CAF50; color: white; padding: 10px 0; text-align:

center;">

<h1>About Me</h1>

</header>

<div style="width: 80%; margin: 20px auto;">

<h2 style="color: #4CAF50;">Personal Information</h2>

<p>Hi, my name is Anushka . I am a Diploma student. Live in pune. I have a passion for
coding . I am a open minded person who love to play and watch cricket..</p>
</div>

<h2 style="color: #4CAF50;">Hobbies</h2>

<ul>

<li>watching Cricket</li>

<li> Listning Music</li>

<li> Poetry</li>

<li> Cooking </li>

</ul>

</div>

<h2 style="color: #4CAF50;">My Favorite’s</h2>

<ul>

<li> Favourite Color : Black </li>

<li> Favourite Singer : Arijit Singh , ED sheeran.</li>

<li> Favourite Athelete:Virat Kohli </li>

<li> Favourite Song : Perfect , Shape of You</li>

<li> Favourite City : Rome </li>

<li> Favourite Cuisine: Indian cuisine </li>

</ul>

</div>

</body>
</html>

Output:
Q6: Experimenting with Tables.

Create tables (<table>, <tr>, <th>, <td>) for presenting data in a structured
Format.

Use table headers (<th>) for column labels and table data (<td>) for content.

Explore table formatting options like border style, background color, and cell
spacing and cell padding .

Answer:
<!DOCTYPE html>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>HTML Table Example</title>

</head>

<body>

<h2>Employee Data Table</h2>

<table border=”1” cellpadding=”8” cellspacing=”0” width=”100%”>

<th>Occupation</th>

</tr>

<td>Software Engineer</td>

</tr>

<td>Jane Smith</td>

<td>Graphic Designer</td>

</tr>

<td>Emily Johnson</td>

<td>Data Analyst</td>

</tr>

<td>Michael Brown</td>

<td>Project Manager</td>

</tr>

</table>

</body>

</html>

Output:
Date : 12/06/2024

Marquee Tag
The <marquee> tag in HTML is used to create a scrolling piece of text or an image. It can scroll
in various directions, such as left, right, up, or down. The most typical use was to create a
scrolling text effect where the text moved horizontally across the screen. This was often used
for news tickers or to draw attention to important information. Some websites used it to create
dynamic headers or footers, often including moving text with information like contact details or
social media links.

Marquee Tag Attributes

❖ Width : provides the width or breadth of a marquee. For example width=”10” or
width=”20%”.
❖ Height : provides the height or length of a marquee. For example height=”20” or
height=”30%”.
❖ Direction : provides the direction or way in which your marquee will allow you to
scroll. The value of this attribute can be: left, right, up, or down.
❖ Scrolldelay : provides a feature whose value will be used for delaying each jump.
❖ Scrollamount : provides value for speeding the marquee feature.
❖ Behavior : provides the scrolling type in a marquee. That scrolling can be like sliding,
scrolling, or alternate.
❖ Loop : provides how many times the marquee will loop.
❖ Bgcolor : provides a background color where the value will be either the name of the
color or the hexadecimal color code.
❖ Vspace : provides a vertical space, and its value can be like vspace=”20” or
vspace=”30%”.
❖ Hspace : provides a horizontal space, and its value can be like hspace=”20” or
hspace=”30%”.

Marquee Tag Syntax

Example :
<!DOCTYPE html>

<head>

<title>Marquee Example</title>

</head>

<body style=”background-color:#4B0082 ; color:#9370DB ; font-family: Arial, sans-serif; text-

align: center;”>

<marquee behavior=”scroll” direction=”left” scrollamount=”5” style=”background-

color:#9370DB; color: white; padding: 20px; border-radius: 10px; font-size: 24px;”>

Welcome to the Marquee Example!

</marquee>

</body>

</html>

Output:
HR Tag:
In HTML, <hr> tag stands for horizontal rule. HR is an HTML tag that enables us to add a
horizontal rule or a thematic break to an HTML page. Using the <hr> tag, we can divide
document sections.

The <hr> tag is an empty tag. It means that it does not require an end tag. So, you need to type
<hr> to add a horizontal line to an HTML page.

BR Tag:
The <br> tag in HTML inserts line breaks in a text. It stands for “Break”. This tag is particularly
useful when you want to create a new line within a paragraph or other element without
starting a new paragraph. The <br> tag is an empty tag, meaning it does not have a closing tag.
The <br> tag doesn’t carry any semantic meaning. It’s purely for formatting.

Example of both hr and br tags :

<!DOCTYPE html>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>Simple HTML Example</title>

</head>

<body style=”background-color: green; color: darkred; font-family: Arial, sans-serif;”>

<h1>Welcome to My Webpage</h1>

<hr>

<p>This is the first section of my webpage.</p>

<p>Here is some text with line breaks:<br>

This is a new line.<br>

And this is another new line.</p>

<hr>
<p>This is the second section of my webpage.<br>

Notice how the <hr>tag creates a horizontal line to separate sections.</p>

<hr>

<h2>Thank You for Visiting!</h2>

<p>Feel free to browse around and learn more.<br>

Have a great day!</p>

</body>

</html>

Output:
Inserting Images in Webpage
The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The <img>
tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The <img> tag has two required attributes:

• Src – Specifies the path to the image

• Alt – Specifies an alternate text for the image

Syntax:
<img src=”url” alt=”alternatetext”>

Example :

<!DOCTYPE html>

<html>

<head>

<title>Image tag</title>

</head>

<body>

<h2>HTML image example with height and width</h2>

<img src=https://static.anu/htmlpages/images/animal.jpg height=”180” width=”300”

alt=”animal image”>

</body>

</html>

Output:
Adding Audio into the HTML webpage
The HTML <audio> tag is used to embed a media player which supports audio playback into the
HTML page. We use the HTML <audio> tag along with the <source> tag to add the audio player.

Audio Tag Attributes:

❖ Autoplay : The autoplay attribute automatically plays the audio.
❖ Controls : The control attribute allows the user to control audio playback including
volume, seeking, and pause/resume playback.
❖ Loop : The loop attribute specifies the audio to start from the beginning once it ends.
❖ Muted : The muted attribute sets the volume of the audio to 0.
❖ Src : The src attribute specifies the location of the audio file that should be played in the
audio player.
❖ Preload : The preload attribute specifies how the audio file should be loaded after the
page loads for a better user experience. It may have one of the following values:

None: Indicates that the audio should not be preloaded.

Metadata: Indicates that only audio metadata is fetched.

Audio: Indicates that the entire audio file will be loaded when the page loads.

Example:

<!DOCTYPE html>

<html>

<body bgcolor= “ red”>

<h2> Sound of Horse 🐴 <h2>

<audio controls autoplay>

<source src=”horse.mp3” type=”audio/mpeg”>

Your browser does not support the audio element.

</audio>

</body>

</html>

Output:
Adding You Tube videos into the HTML webpage
Adding a video to a webpage was a real challenge since one had to convert the videos to
different formats to make them play in all browsers. Converting videos to different formats can
be difficult and time-consuming.

Now, adding a video to a webpage has become as easy as copying and pasting and a very apt
solution to add videos to a website is using Youtube. YouTube helps to host a video for a user
so that they can be further embedded on web pages.

YouTube displays an id like “BGAk3_2zi8k“, whenever a video is saved or played. This ID is

further used as a referral for the YouTube video to be embedded in the webpage.

Steps to Add YouTube Video on a Webpage :

Step 1 : Upload the video that you want to embed on your webpage on YouTube.

Step 2 : Copy the video ID of the video.

Step 3 : Use the iframe, object, or ’embed’ element in your web page for video definition

Step 4 : Use the src attribute to point to the URL of the video.

Step 5 : Dimensions of the player can be adjusted using the width and height attributes.

Example :

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Embed YouTube Video</title>

</head>
<body>

<h1>My Favorite Song</h1>

<p>Here is a video I like:</p>

<iframe width="560" height="315" src="https://www.youtube.com/embed/2Vv-BfVoq4g"

</iframe>

</body>

</html>

Output:
Form Tag in HTML
HTML Forms utilize the <form> element as a powerful tool to collect user input through a
variety of interactive controls. These controls range from text fields, numeric inputs, email
fields, password fields, to checkboxes, radio buttons, and submit buttons. In essence, an HTML
Form serves as a versatile container for numerous input elements, thereby enhancing user
interaction.

Syntax :

Form Elements :
HTML <form> comprises several elements, each serving a unique purpose. For instance, the
<label> element is used to define labels for other <form> elements. The <input> element, on
the other hand, is versatile and can be used to capture various types of input data such as text,
password, email, and more, simply by altering its type attribute. Now, let’s all the list of HTML
Form Elements one by one:

❖ <label> : It defines labels for <form> elements.

❖ <input> : It is used to get input data from the form in various types such as text,
password, email, etc by changing its type.
❖ <button> : It defines a clickable button to control other elements or execute a
functionality.
❖ <select> : It is used to create a drop-down list.
❖ <textarea> : It is used to get input long text content.
❖ <fieldset> : It is used to draw a box around other form elements and group the related
data.
❖ <legend> : It defines a caption for fieldset elements.
❖ <datalist> : It is used to specify pre-defined list options for input controls.
❖ <output> : It displays the output of performed calculations.
❖ <option> : It is used to define options in a drop-down list.
❖ <optgroup> : It is used to define group-related options in a drop-down list.

HTML Input Tags :

In HTML forms, various input types are used to collect different types of data
from users. Here are some commonly used input types.

❖ <input type=”text“> : Defines a one-line text input field.

❖ <input type=”password“> : Defines a password field.
❖ <input type=”submit“> : Defines a submit button.
❖ <input type=”reset“> : Defines a reset button.
❖ <input type=”radio“> : Defines a radio button.
❖ <input type=”email“> : Validates that the input is a valid email address.
❖ <input type=”number“> : Allows the user to enter a number. You can specify min,
max, and step attributes for range.
❖ <input type=”checkbox“> : Used for checkboxes where the user can select multiple
options.
❖ <input type=”date“> : Allows the user to select a date from a calendar.
❖ <input type=”time“> : Allows the user to select a time .
❖ <input type=”file“> : Allows the user to select a file to upload.

Example:

<!DOCTYPE html>

<head>

<title>Html Forms</title>

</head>

<body>

<h2>HTML Forms</h2>
<form>

<label for=”username”>Username:</label><br>

<input type=”text” id=”username” name=”username”><br><br>

<label for=”password”>Password:</label><br>

<input type=”password” id=”password” name=”password”><br><br>

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

</form>

</body>

</html>

Output:
• Task

Source Code:
<html>

<head>

<title> Create a Form</title>

</head>

<body bgcolor =”lightyellow”>

<form>

<h1 Style =”color : Magenta”> Student details</h1>

<h3> Enter your Name - <input type=”text”> <br><br><hr>

<h3> Enter your Rollno - <input type=”number”> <br><br><hr>

Output:
Date : 13/06/2024

• Task 1

Source Code:
<HTML>
<HEAD>
<TITLE>CONTACT US FORM</TITLE>
</HEAD>
<BODY>
<STYLE>
INPUT[TYPE=”TEXT”]{
WIDTH:100%;
</STYLE>
<FORM>
<TABLE BORDER=2 BORDERCOLOR=BLACK
BGCOLOR=LIGHTYELLOW
CELLSPACING=10>
<TR ALIGN=CENTER BGCOLOR=maroon><TD><FONT COLOR=white>
Contact Us
</FONT></TD></TR>
<TR><TD>
<INPUT TYPE=”TEXT” PLACEHOLDER=”Name…”>
</TD></TR>
<TR><TD>
<INPUT TYPE=”TEXT” PLACEHOLDER=”Email…”>
</TD></TR>
<TR><TD>
<INPUT TYPE=”TEXT” PLACEHOLDER=”Subject…”>
</TD></TR>
<TR><TD>
<TEXTAREA PLACEHOLDER=”MESSAGE…..” ROWS=3 COLS=30>
</TEXTAREA><BR>
</TD></TR>
<TR ALIGN=CENTER BGCOLOR=LIGHTYELLOW><TD>
<INPUT TYPE=”TEXT” value=”SEND MESSAGE”>
</TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Output:
• Task 2

Source Code:
<!doctype html>

<html>

<head>

<title> Create a login page</title>

<body>

<table border=”5” width =”350” height =”500”>

<tr>

<th colspan=”2” bgcolor=”lightyellow”><font color=”red”><b> Registration

Form</b></font></th>

</tr>

<th> Enter Name</th>

<th> <input type=”text”></th>

</tr>

<tr bgcolor=”cyan” >

<th> Enter Password</th>

</tr> <tr bgcolor=”cyan”>

<th> Enter Address</th>

<th> <textarea rows=”4” > </textarea>

</tr>
<tr bgcolor=”cyan”>

<th> Select Games</th>

<th> <input type=”checkbox”> Hockey<br>

<input type=”checkbox”> Football<br>

<input type=”checkbox”> Badminton<br>

<input type=”checkbox”> Cricket<br>

<input type=”checkbox”> volleyball<br>

</th>

</tr>

<th> Gender</th>

<th> <input type=”radio”>Male <br>

<input type=”radio”>Female<br>

</th>

</tr>

<th> Select your DOB</th>

</tr>

<th> Select a Photo</th>

<th><input type=”File” name =”reference”></th>

</tr>

<input type=”Reset” >

<input type =”submit”></th>

</tr>

</table>

</body>

</html>

Output:
• Task 3

Source Code:
<!DOCTYPE html>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

</head>

<body>

<table border=”1” align=”center” bgcolor=”#34495e” cellpadding=”10”

cellspacing=”0” width=”350”>

<!—Add day options here →

For (let I = 1; I <= 31; i++) {

Document.write(`<option value=”${i}”>${i}</option>`);

</script>

</select>

<select name=”dob-month” required>

<option value=””>Month</option>

<!—Month options →

<option value=”January”>January</option>

<option value=”February”>February</option>

<option value=”March”>March</option>

<option value=”April”>April</option>

<option value=”August”>August</option>

<option value=”September”>September</option>

<option value=”October”>October</option>

<option value=”November”>November</option>

<option value=”December”>December</option>

</select>

<select name=”dob-year” required>

<!—Add year options here →

Let year = new Date().getFullYear();

For (let I = year; I >= 1900; i--) {

Document.write(`<option value=”${i}”>${i}</option>`);

</script>

</select>

</td>

</tr>

<tr>

<td style=”color: #f4c842;”>Gender</td>

<td>

<input type=”radio” id=”male” name=”gender” value=”male” required>

<label for=”male” style=”color: #f4c842;”>Male</label>

<label for=”female” style=”color: #f4c842;”>Female</label>

</td>

</tr>

<tr>

<td><label for=”country” style=”color: #f4c842;”>Country</label></td>

<td>

<select id=”country” name=”country” required>

<option value=””>Country</option>

<option value=”Australia”>Australia</option>

<option value=”Brazil”>Brazil</option>

<option value=”Canada”>Canada</option>

<option value=”China”>China</option>

<option value=”France”>France</option>

<option value=”Germany”>Germany</option>

<option value=”India”>India</option>

<option value=”Japan”>Japan</option>

<option value=”United Kingdom”>United Kingdom</option>

<option value=”United States”>United States</option>

</select>

</td>

</tr>

<tr>

<td><label for=”email” style=”color: #f4c842;”>E-mail</label></td>

</tr>

<tr>

<td><label for=”phone” style=”color: #f4c842;”>Phone</label></td>

<td><input type=”tel” id=”phone” name=”phone” placeholder=”Enter Phone”

required></td>

</tr>

<tr>

<td><label for=”password” style=”color: #f4c842;”>Password</label></td>

<td><input type=”password” id=”password” name=”password”

placeholder=”Enter Password” required></td>

</tr>

<tr>

<td><label for=”confirm-password” style=”color: #f4c842;”>Confirm

Password</label></td>

<td><input type=”password” id=”confirm-password” name=”confirm-

password” placeholder=”Confirm Password” required></td>

</tr>

<tr>

<input type=”checkbox” id=”terms” name=”terms” required>

<label for=”terms” style=”color: #f4c842;”>I Agree to the Terms of

use</label>

</td>

</tr>
<tr>

<td colspan=”2” align=”center”>

<button type=”submit” style=”background-color: #2ecc71; color: white;

padding: 10px 20px; border: none; border-radius: 4px; cursor:
pointer;”>Submit</button>

<button type=”button” style=”background-color: #e74c3c; color: white;

padding: 10px 20px; border: none; border-radius: 4px; cursor:
pointer;”>Cancel</button>

</td>

</tr>

</form>

</table>

</body>

</html>

Output:
Date : 14/06/2024

HTML 5
HTML5 (Hypertext Markup Language 5) is a markup language used for structuring and
presenting hypertext documents on the World Wide Web. It was the fifth and final[4] major
HTML version that is now a retired World Wide Web Consortium (W3C) recommendation. The
current specification is known as the HTML Living Standard. It is maintained by the Web
Hypertext Application Technology Working Group (WHATWG), a consortium of the major
browser vendors (Apple, Google, Mozilla, and Microsoft).

HTML5 was first released in a public-facing form on 22 January 2008, with a major update and
"W3C Recommendation" status in October 2014. Its goals were to improve the language with
support for the latest multimedia and other new features; to keep the language both easily
readable by humans and consistently understood by computers and devices such as web
browsers, parsers, etc., without XHTML's rigidity; and to remain backward-compatible with older
software. HTML5 is intended to subsume not only HTML 4 but also XHTML1 and even
the DOM Level 2 HTML itself.

HTML5 includes detailed processing models to encourage more interoperable implementations;

it extends, improves, and rationalizes the markup available for documents and introduces
markup and application programming interfaces (APIs) for complex web applications.[8] For the
same reasons, HTML5 is also a candidate for cross-platform mobile applications because it
includes features designed with low-powered devices in mind.
Difference between HTML and HTML5:
Features of HTML5:
• Semantic Elements: When constructing an HTML script, the term “semantic” refers
to the meaning of the text. Semantics, to put it simply, is the use of HTML tags that
accurately reflect the content they contain. For instance, using the <div> tag doesn’t
suggest the content it will carry, however using the <p> tag suggests it can be used to
hold paragraph information. There are a lot of reasons why you should write Semantic
tags instead of normal HTML tags, to leverage SEO, accessibility, and browser
compatibility.

• Audio and Video support : One of the many HTML 5 features is the support
for audio and video. It has reduced the hassle of relying upon third-party services such
as Adobe Flash player. To embed Audio and Video into your HTML document, you may
use the following two tags, <audio> and <video> tags. These two tags are launched with
the release of HTML 5 and support a numerous range of attributes such as height,
width, and more that offers developers to leverage the customization of HTML
documents.

• Canvas Elements : Canvas Elements is a top-notch feature that has made the tedious
task of handling graphics easier for developers. With the help of Canvas elements, you
can easily draw graphics using JavaScript. It is optimum for creating simple animations
and drawing photo compositions. To initialize the Canvas element <canvas> tag is used
with only two specific attributes, width and height. Once, the element is initialized, it is
then taken care of with the help of JavaScript to draw shapes, lines, images, and more.

• Geolocation API : The Geolocation API is an HTML feature that is used to access the
geographical position of a user, however, it is not accessed unless the user approves of
it. If you’re wondering where this feature is useful, these come in handy while creating
apps like taxi apps, food order tracking apps, fitness tracking apps, and more. The
location is achieved in a way that a user sends their longitude and latitude and this data
is sent to the backend server, after which we access that data to create all these fancy
applications.

• Local Storage : It is a modern feature of HTML and several browsers that typically
store data in the user’s browsers and can access them with the help of JavaScript
APIs.This feature is useful for creating offline applications where data is need to be
stored locally. Moreover, using this feature you can reduce the transactions between
the application and the backend server, creating a fast application. However, there are
some limitations, such as there is limited storage, and you can not access more storage
than that.

• Responsive Images : Earlier to create responsive images on the web, you have to
rely upon several lines of CSS and sometimes JavaScript, however, HTML 5 makes the
process handy by including srcset attribute to specify multiple versions of an image at
different screen resolutions.

• Web Workers : When you are performing several demanding tasks at once, the
browser gets sluggish and responds slowly. Because of this, web workers were added to
HTML 5 to allow scripts to operate in the background without interfering with the UI
thread. This may be used to execute demanding operations like multimedia processing
in the background. To further demonstrate the usage of Web Workers, we shall create a
simple counter app that starts the counter when you click ‘start’ and stop the counting
when you click ‘stop’.

• Drag and Drop API : Drag and drop is among the most unique features of HTML5
that allow you to grab any element in the DOM and drop it to a different location. To
create an element able to drag and drop, set the attribute “draggable” on the tag and
put its value to true.
HTML Versions:
Elements in HTML5:
• <article>: The <article> tag is used to represent an article. More specifically, the
content within the <article> tag is independent from the other content of the site (even
though it can be related).
• <aside>: The <aside> tag is used to describe the main object of the web page in a
shorter way like a highlighter. It basically identifies the content that is related to the
primary content of the web page but does not constitute the main intent of the primary
page. The
• <aside> : tag contains mainly author information, links, related content and so on.
• <figcaption>: The <figcaption> tag in HTML is used to set a caption to the figure
element in a document.
• <figure>: The <figure> tag in HTML is used to add self-contained content like
illustrations, diagrams, photos or codes listing in a document. It is related to main flow,
but it can be used in any position of a document and the figure goes with the flow of the
document and if it is removed it should not affect the flow of the document.
• <header>: It contains the section heading as well as other content, such as a
navigation links, table of contents, etc.
• <footer>: The <footer> tag in HTML is used to define a footer of HTML document. This
section contains the footer information (author information, copyright information,
carriers etc.). The footer tag is used within body tag. The <footer> tag is new in the
HTML5 The footer elements require a start tag as well as an end tag.
• <keygen>: The <keygen> tag in HTML is used to specify a key-pair generator field in a
form. The purpose of <keygen> element is to provide a secure way to authenticate
users. When a form is submitted then two keys are generated, private key and public
key. The private key stored locally, and the public key is sent to the server. The public
key is used to generate client certificate to authenticate user in future.
• <output>: The <output> tag in HTML is used to represent the result of a calculation
performed by the client-side script such as JavaScript.
• <progress>: It is used to represent the progress of a task. It also defines how much
work is done and how much is left to download a task. It is not used to represent the
disk space or relevant query.
• <svg>: It is the Scalable Vector Graphics.
• <canvas>: The <canvas> tag in HTML is used to draw graphics on web page using
JavaScript. It can be used to draw paths, boxes, texts, gradient and adding images. By
default, it does not contain border and text.
• <audio>: It defines the music or audio content.
• <embed>: Defines containers for external applications (usually a video player).
• <source>: It defines the sources for <video> and <audio>.
• <track>: It defines the tracks for <video> and <audio>.
• <video>: It defines the video content.
• <Main>: Delineates the main content of the body of a document or web app.
• <mark>: The <mark> tag in HTML is used to define the marked text. It is used to
highlight The part of the text in the paragraph.
• <nav>: The <nav> tag is used to declaring the navigational section in HTML documents.
• Websites typically have sections dedicated to navigational links, which enables user to
Navigate the site. These links can be placed inside a nav tag.
• <section>: It demarcates a thematic grouping of content.
• <details>: The <details> tag is used for the content/information which is initially
hidden But could be displayed if the user wishes to see it. This tag is used to create
interactive Widget which user can open or close it. The content of details tag is visible
when open the Set attributes.
• <summary>: The <summary> tag in HTML is used to define a summary for the
<details> Element. The <summary> element is used along with the <details> element
and provides a Summary visible to the user. When the summary is clicked by the user,
the content placed Inside the <details> element becomes visible which was previously
hidden. The<summary> tag was added in HTML 5. The <summary> tag requires both
starting and Ending tag.
Javascript
JavaScript is a scripting or programming language that allows you to implement complex
features on web pages — every time a web page does more than just sit there and display static
information for you to look at — displaying timely content updates, interactive maps, animated
2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably
involved. It is the third layer of the layer cake of standard web technologies, two of which
(HTML and CSS) we have covered in much more detail in other parts of the Learning Area.

Variable Declaration In Javascript :

In JavaScript, there are several ways to declare variables, each with its own scope and
characteristics. The primary keywords used for variable declaration are var, let, and const.

1. Var :
Scope: Function-scoped.
Hoisting: Variables declared with var are hoisted to the top of their containing function
or script.
Re-declaration: Variables can be re-declared and updated.
Ex., Var x = 10;
Var x = 20; // No error, re-declaration is allowed.

2. Let :
Scope: Block-scoped.
Hoisting: Variables declared with let are hoisted but not initialized, so they cannot be
used until they are declared.
Re-declaration: Cannot be re-declared within the same scope but can be updated.
Ex., let y = 10;
y = 20; // Update is allowed
// let y = 30; // Error: Identifier 'y' has already been declared.

3. Const :
Scope: Block-scoped.
Hoisting: Variables declared with const are hoisted but not initialized, so they cannot be
used until they are declared.
Re-declaration: Cannot be re-declared or updated
Ex., .const z = 10;
// z = 20; // Error: Assignment to constant variable
// const z = 30; // Error: Identifier ‘z’ has already been declared
Key Differences
Scope:
Var is function-scoped.
Let and const are block-scoped.

Re-declaration:
Var allows re-declaration.
Let and const do not allow re-declaration within the same scope.

Re-assignment:
Var and let can be re-assigned.
Const cannot be re-assigned after initial assignment.

Best Practices
Use let when you expect the value of a variable to change.
Use const for variables that should not change.
Avoid using var to prevent potential scope and hoisting issues.

First Javascript Program:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Multiplication Operation</title>
</head>
<body>
<h1>Multiplication Operation</h1>

// Print the result using document.write

Document.write(`Multiplication: ${num1} * ${num2} = ${product}`);
</script>
</body>
</html>

Output :
Practice Questions:
Q1. What are the semantic benefits of using HTML5 elements like <header>,
<nav>, <section>, <article>, and <footer>?
Answer :

Using HTML5 semantic elements such as <header>, <nav>, <section>, <article>, and <footer>
provides several semantic benefits:

• Improved Readability and Maintainability: Structure and Clarity: These elements

provide a clear structure to the document, making it easier for developers to
understand and maintain the code. Contextual Meaning: They give meaningful
context to different parts of the web page, allowing developers to quickly grasp
the purpose of each section.

• Enhanced Accessibility: Assistive Technologies: Screen readers and other

assistive technologies can better interpret and navigate the page content, as
these elements convey the purpose and role of different sections. Landmarks:
They create landmarks that assistive technologies use to enable users to jump to
specific parts of a page easily.

• SEO Benefits: Better Indexing: Search engines can better understand the content
and context of the web page, leading to improved indexing and potentially
higher search rankings. Content Hierarchy: These elements help search engines
recognize the hierarchy and importance of content, aiding in more effective
content categorization and retrieval.

• Consistent Structure: Standardization: Using standard HTML5 elements

encourages consistency across different web pages and projects, making it easier
for developers to work on various sites without needing to learn custom or
inconsistent markup. Future-proofing: Semantic HTML5 elements are more likely
to be supported and maintained in future web standards, ensuring long-term
compatibility and usability.

• Improved Collaboration: Team Communication: With clear and standardized

semantic elements, different team members (designers, developers, content
creators) can communicate more effectively about the structure and content of
the web pages.
Easier Onboarding: New team members can more quickly understand the
structure and purpose of a website’s content, reducing the learning curve.

In summary, HTML5 semantic elements enhance the readability, maintainability, accessibility,

SEO, consistency, and collaborative potential of web pages, leading to a better overall web
development experience and improved user interaction.

Q.2. How do you embed audio and video content in HTML5 using the <audio> and
<video> elements? Include controls for playback.
Answer :

The controls attribute adds audio controls, like play, pause, and volume.The <source> element
allows you to specify alternative audio files which the browser may choose from. The browser
will use the first recognized format. The text between the <audio> and </audio> tags will only
be displayed in browsers that do not support the <audio> element.

<!DOCTYPE html>

<html>

<body>

Horse 🐴 Sound

<source src=”horse.ogg” type=”audio/ogg”>

<source src=”horse.mp3” type=”audio/mpeg”>

Your browser does not support the audio element.

</audio>

</body>

</html>

Output:
To add video, we will use the <video> tag defining source using <source> tag. Create an HTML
file just like an audio file example and save the video file in the same directory. Suppose a video
file name test.mp4 save in the same directory where your HTML file was saved.

<!DOCTYPE html>

<html>

<body>

Video

<video width=”320” height=”240” controls>

<source src=”movie.mp4” type=”video/mp4”>

<source src=”movie.ogg” type=”video/ogg”>

Your browser does not support the video tag.

</video>

</body>

</html>

Output:
Q 3 Explain the difference between <canvas> and <svg> Elements, and their use
cases for creating graphics in HTML5.
Answer:

SVG:

Scalable Vector Graphics (SVG) is an XML-based image format used to define two-dimensional
vector-based graphics for the web. Unlike raster images (Ex .jpg, .gif, .png, etc.), a vector image
can be scaled up or down to any extent without losing the image quality. An SVG image is
drawn out using a series of statements that follow the XML schema — that means SVG images
can be created and edited with any text editor, such as Notepad. There are several other
advantages of using SVG over other image formats like JPEG, GIF, PNG, etc.

Ex.,

<!DOCTYPE html>

<html>

<head>

</head>
<body>

SVG Circle Example

</h2>

<svg id=”svgelem” height=”200”>

<circle id=”greencircle” cx=”60”

Cy=”60” r=”50” fill=”green” />

</svg>

</body>

</html>

Output:
Canvas:

The HTML element is used to draw graphics on the fly, via scripting (usually JavaScript). The
element is only a container for graphics. You must use a script to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Canvas Tag</title>

</head>

<body>

<h2>Canvas Square Example.</h2>

<canvas id=”newCanvas” width=”100”

Height=”100” style=”border:1px solid #000000;”>

</canvas>

Var c = document.getElementById(‘newCanvas’);

Var ctx = c.getContext(‘2d’);

Ctx.fillStyle = ‘#7cce2b’;

Ctx.fillRect(0, 0, 100, 100);

</script>

</body>

</html>

Output:
Q 4 How do you create a responsive layout using HTML5 and CSS media queries to
adapt to different screen sizes?
Answer:

1. Set up the HTML5 structure: Start with a basic HTML5 structure including the <html>,
<head>, and <body> tags. Inside the <body>, create your main content sections using
semantic elements like <header>, <nav>, <main>, <aside>, <footer>.These elements
describe the purpose of the content, which helps with accessibility and SEO.
2. Define a baseline layout with CSS:Create a stylesheet (.css file) and link it to your HTML
file. Set basic styles for the body element, including fonts, margins, and paddings. Style
your content sections using the chosen selectors (header, nav, main, etc.).Use flexbox or
grid layout for a more flexible baseline layout that can be adjusted later.
3. Implement media queries: Media queries are wrapped in @media rules in your CSS.
Inside the @media rule, you specify the conditions for the styles to apply. Common
conditions include screen width (max-width: 768px), orientation (orientation: portrait),
or device type ((device-type: mobile)) .Within the @media rule, you can target specific
elements and adjust their styles for different screen sizes.

Example.,
HTML :

<!DOCTYPE html>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>Responsive Layout Example</title>

<link rel=”stylesheet” href=”styles.css”>

</head>

<body>

<h1>My Responsive Page</h1>

</header>

<nav>

<ul>

<li><a href=”#”>About</a></li>

<li><a href=”#”>Contact</a></li>

</ul>

</nav>

<main>

<p>This is the main content area.</p>

</main>

</footer>

</body>

</html>

CSS :

Body {

Font-family: sans-serif;

Margin: 0;

Padding: 0;

Header,

Nav,

Main,

Footer {

Display: flex;

Justify-content: space-between;

Align-items: center;

Padding: 1rem;

Header {

Background-color: #f0f0f0;

Nav ul {
List-style: none;

Margin: 0;

Padding: 0;

Nav li {

Display: inline-block;

Margin-right: 1rem;

/* Media Queries */

@media (max-width: 768px) {

Header,

Nav,

Main {

Flex-direction: column; /* Stack elements vertically on small screens */

Q. 5. What is the purpose of the <form> element, and how do You create
different types of input elements like text fields, radio button and checkboxes?
Answer :

The <form> element is the foundation for creating web forms in HTML. It acts as a container to
group various input elements and a submit button together.expand_less.

Here’s what the <form> element does:

Defines a section of the web page for user input.expand_moreGroups input elements like text
fields, radio buttons, and checkboxes.Specifies how the collected data should be submitted
(usually to a server for processing).

<html>

<body>

Form

</body>

<form>

<input type=”text” id=”name” name=”name”><br>

<label for=”color”>Favorite Color:</label>

<input type=”radio” id=”red” name=”color” value=”red”>

<input type=”radio” id=”green” name=”color” value=”green”>

<label for=”green”>Green</label>

<input type=”radio” id=”blue” name=”color” value=”blue”>

<label for=”interests”>Interests:</label>

<input type=”checkbox” id=”sports” name=”interests” value=”sports”>

<label for=”sports”>Sports</label>

<input type=”checkbox” id=”music” name=”interests” value=”music”>

<label for=”music”>Music</label>

<input type=”checkbox” id=”reading” name=”interests” value=”reading”>

<label for=”reading”>Reading</label><br>

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

</form>

</html>

Output:

Q.6 Explain the concept of web storage in HTML5 (local Storage and session
Storage) and how it’s used to store Data on the client side.
Answer:

Web storage in HTML5 refers to mechanisms for storing data on the client side, offering a way
to save key-value pairs in a web browser. This can be done through two main objects:
localStorage and session Storage. Both provide a way to store data in the user’s browser more
securely and efficiently than cookies. Here’s a detailed explanation of each:

1. Session Storage:
Purpose: Session storage is designed for temporary data storage. The data stored in
session Storage is only available for the duration of the page session. Once the browser
or tab is closed, the data is deleted.
Usage: Suitable for storing data that only needs to be available during a single session,
such as form data during navigation between pages or temporary state information.
Ex ,
// Storing data
sessionStorage.setItem('sessionUser', 'JaneDoe');

// Retrieving data
let sessionUser = sessionStorage.setItem('sessionUser');

// Removing data
sessionStorage.removeItem('sessionUser');

// Clearing all data

sessionStorage.clear();

2. Local Storage:
Purpose: Local storage is designed for persistent data storage. The data stored in
localStorage has no expiration time, meaning it will remain available even after the
browser is closed and reopened.
Usage: Suitable for storing data that needs to persist across sessions, such as user
preferences, settings, or offline data.
Ex.,
// Storing data
localStorage.setItem(‘username’, ‘JohnDoe’);

// Retrieving data
Let username = localStorage.getItem(‘username’);

// Removing data
localStorage.removeItem(‘username’);

// Clearing all data

localStorage.clear();
Q 7 How do you handle form validation using HTML5 Validation attributes like
required, pattern and email.
Answer:

HTML5 offers several built-in validation attributes that make client-side form validation much
simpler and more user-friendly. Here’s how you can use some of the common validation
attributes: required, pattern, and email.

1.Required Attribute

The required attribute specifies that an input field must be filled out before submitting the
form.

Ex., <form>

<input type=”text” id=”name” name=”name” required>

<br>

<button type=”submit”>Submit</button>

</form>

In this example, the form will not submit unless the “Name” field is filled out.

2.Pattern Attribute

The pattern attribute specifies a regular expression that the input field’s value must match for
the form to be submitted.

Ex., <form>

<label for=”username”>Username:</label>

<input type=”text” id=”username” name=”username” pattern=”[A-Za-z]{3,}” required>

<br>

<button type=”submit”>Submit</button>

</form>
In this example, the username must be at least 3 characters long and contain only letters. The
form will not submit if this condition is not met.

3.email Attribute

The email attribute is used for input fields that should contain an email address. The browser
will automatically validate that the input follows the general format of an email address.

Ex., <form>

<label for=”email”>Email:</label>

<input type=”email” id=”email” name=”email” required>

<br>

<button type=”submit”>Submit</button>

</form>

In this example, the form will not submit unless a valid email address is entered.

Combining Attributes

You can combine these attributes to enforce multiple validation rules.

Ex , <form>

<label for=”email”>Email:</label>

<input type=”email” id=”email” name=”email” pattern=”[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-

z]{2,}$” required>

<br>

<label for=”password”>Password:</label>

<input type=”password” id=”password” name=”password” pattern=”.{8,}” required>

<br>

<button type=”submit”>Submit</button>

</form>

Example of a Complete Form

<!DOCTYPE html>

<html>

<head>

<title>Form Validation Example</title>

</head>

<body>

<form>

<input type=”text” id=”name” name=”name” required>

<br>

<label for=”email”>Email:</label>

<input type=”email” id=”email” name=”email” required>

<br>

<label for=”username”>Username:</label>

<input type=”text” id=”username” name=”username” pattern=”[A-Za-z]{3,}” title=”Username

must be at least 3 characters long and contain only letters.” Required>

<br>

<label for=”password”>Password:</label>

<input type=”password” id=”password” name=”password” pattern=”.{8,}” title=”Password

must be at least 8 characters long.” Required>

<br>
<button type=”submit”>Submit</button>

</form>

</body>

</html>

Q.8 Describe the benefits of using the <figure> and <figcaption> elements for
associating a caption with an image Or other content.
Answer:

The <figure> and <figcaption> elements in HTML5 provide a semantic way to associate a
caption with an image or other types of media content. Here are the key benefits of using these
elements:

1. Semantic Meaning

Improved HTML Structure: The <figure> element clearly indicates that the enclosed content is a
self-contained unit, such as an image, illustration, diagram, code snippet, or any other media.

Descriptive Captions: The <figcaption> element explicitly defines the caption for the content
within the <figure>. This makes it immediately clear to both developers and users what the
relationship is between the content and its description.

2. Accessibility

Screen Readers: Assistive technologies like screen readers can easily recognize the <figure> and
<figcaption> elements, providing better context to users with visual impairments.

Contextual Information: The caption provided by <figcaption> offers additional information

about the media, which can be crucial for understanding the content, especially for users
relying on screen readers.

3. SEO Benefits

Search Engine Optimization: The semantic elements help search engines understand the
content better. Search engines can more accurately index and rank the content when the
relationship between images and their descriptions is clear.

Rich Snippets: Proper use of <figure> and <figcaption> can potentially improve how content is
displayed in search results, leading to better visibility.
4. Styling and Layout Control

CSS Styling: Using <figure> and <figcaption> allows for more targeted styling through CSS. You
can easily apply specific styles to the figure content and its caption independently or together.

Responsive Design: These elements can be styled to adapt to different screen sizes and layouts,
ensuring that the media content and its caption remain visually coherent and accessible across
devices.

5. Consistent Markup

Uniformity: Using <figure> and <figcaption> across a website ensures a consistent structure for
media content and captions. This consistency improves maintainability and readability of the
codebase.

Reusability: This structured approach allows for easier reuse of code snippets and components
across different parts of a project or even across different projects.

Example Usage

<img src=”image.jpg” alt=”Description of the image”>

<figcaption>This is the caption for the image.</figcaption>

</figure>

Q.9 What is the <datalist> element used for in HTML5, and how does it help with
autocomplete functionality?
Answer:

The <datalist> element in HTML5 is used to provide a list of predefined options to an <input>
element, enabling autocomplete functionality. This helps users by offering suggestions as they
type, making data entry faster and reducing the likelihood of errors.

Key Features and Benefits of <datalist>:

1. Autocomplete Functionality:
User Assistance: As the user types in the input field, the browser shows a dropdown list
of options that match the user’s input. This helps users quickly find and select from the
available options. Efficiency: It speeds up data entry reducing the amount of typing
required, especially for fields with predictable values like country names, product codes,
or common tags.

2. Improved User Experience:

Ease of Use: Users can see possible values at a glance and select the one they need
without having to type the entire value. Error Reduction: By providing a list of valid
options, it reduces the chance of typos and invalid entries.

3. Flexibility:
Dynamic Options: The options within a <datalist> can be dynamically generated or
updated via JavaScript, allowing for flexible and context-sensitive suggestions.

HTML structure:
<!DOCTYPE html>
<html>
<head>
<title>Data List Example</title>
</head>
<body>
<form>
<label for=”browser”>Choose your browser:</label>
<input list=”browsers” id=”browser” name=”browser”>

<input type=”submit”>
</form>
</body>
</html>
Explanation:

The <input> element is associated with the <datalist> via the list attribute, which points
to the id of the <datalist>.
The <datalist> element contains several <option> elements, each representing a
possible value.

Dynamic Options with JavaScript:

You can also dynamically update the options within a <datalist> using JavaScript.

Example.,
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Data List Example</title>
</head>
<body>
<form>
<label for=”city”>Choose a city:</label>
<input list=”cities” id=”city” name=”city”>

Cities.forEach(city => {
Const option = document.createElement(‘option’);
Option.value = city;
Datalist.appendChild(option);
});
</script>
</body>
</html>

In this example:

A list of city names is defined in a JavaScript array. The script dynamically creates <option>
elements and appends them to the <datalist>.

Overall, the <datalist> element enhances form inputs by providing a convenient, user-friendly
way to implement autocomplete functionality, improving both efficiency and accuracy in data
entry.

Q 10 Explain the role of the Microdata (RDFa) and Microdata (Microdata)

specifications in HTML5 for rich data Representation.
Answer:

HTML5 introduced Microdata and RDFa as specifications to provide rich data representation in
web pages. These specifications allow embedding structured data within HTML content, making
it easier for search engines and other applications to understand and process the information.

1. Microdata

Microdata is a specification that allows you to nest metadata within existing content on web
pages using a set of attributes. This helps search engines better understand the content of your
site and can enhance the way your pages are represented in search results.

Key Attributes:

• Itemscope: Creates a new item. This attribute is added to an element to indicate that it
contains Microdata.
• Itemtype: Specifies the type of item. This is typically a URL that defines the type of the
item (e.g., a schema.org type).
• Itemprop: Defines a property of the item. This attribute is used on elements to describe
properties of the item.

Example.,

<!DOCTYPE html>
<html>

<head>

<title>Microdata Example</title>

</head>

<body>

<div itemscope itemtype=http://schema.org/Person>

<h1 itemprop=”name”>John Doe</h1>

<p>Job Title: <span itemprop=”jobTitle”>Software Engineer</span></p>

<p>Email: <span itemprop=”email”>[email protected]</span></p>

</div>

</body>

</html>

2. RDFa (Resource Description Framework in Attributes)

RDFa is a specification for attributes to express structured data in any markup language. It
provides a way to add metadata to HTML documents to help machines understand the data.
RDFa is part of the broader Linked Data initiative and is used for interlinking data across
different documents and sites.

Key Attributes:

• About: Specifies the resource the metadata is about.

• Typeof: Defines the type of the resource.
• Property: Indicates a property of the resource.
• Content: Provides the value of the property if it’s not the content of the element.
• Rel: Specifies a relationship between the subject and the object.

Example.,

<!DOCTYPE html>
<html>

<head>

<title>RDFa Example</title>

</head>

<body>

<div vocab=http://schema.org/ typeof=”Person”>

<h1 property=”name”>John Doe</h1>

<p>Job Title: <span property=”jobTitle”>Software Engineer</span></p>

<p>Email: <span property=”email”>[email protected]</span></p>

</div>

</body>

</html>

Benefits of Using Microdata and RDFa :

1. Enhanced Search Engine Optimization (SEO):
Rich Snippets: Search engines can create richer search result snippets, improving
visibility and click-through rates.
Better Indexing: Structured data helps search engines understand the context of your
content, potentially leading to better indexing.
2. Improved Data Interoperability:
Linked Data: Especially with RDFa, your data can be interlinked with other datasets,
promoting interoperability on the web.
3. Enhanced User Experience:
Contextual Information: Users can get more context about the content directly from
search results or other tools that use structured data.
4. Ease of Implementation:
Integration: Both Microdata and RDFa can be integrated into existing HTML without
disrupting the content or requiring significant changes to the layout.
Date : 17/06/2024

Functions In Javascript:
A JavaScript function is a block of code designed to perform a particular task. It encapsulates a
set of instructions that can be reused throughout a program. Functions can take parameters,
execute statements, and return values, enabling code organization, modularity, and reusability
in JavaScript programming.

You must already have seen some commonly used functions in JavaScript like alert(), which is a
built-in function in JavaScript. But JavaScript allows us to create user-defined functions also. We
can create functions in JavaScript using the keyword `function`.

Syntax: The basic syntax to create a function in JavaScript is shown below.

To create a function in JavaScript, we have to first use the keyword function, separated by the
name of the function and parameters within parenthesis. The part of the function inside the
curly braces {} is the body of the function. In Javascript, functions can be used in the same way
as variables for assignments, or calculations.

Function Invocation:

• Triggered by an event (e.g., a button click by a user).

• When explicitly called from JavaScript code.
• Automatically executed, such as in self-invoking functions.

Function Definition:

Before, using a user-defined function in JavaScript we have to create one. We can use the
above syntax to create a function in JavaScript. A function definition is sometimes also termed a
function declaration or function statement. Below are the rules for creating a function in
JavaScript:

• Every function should begin with the keyword function followed by,
• A user-defined function name that should be unique,
• A list of parameters enclosed within parentheses and separated by commas,
• A list of statements composing the body of the function enclosed within curly braces {}.

Example: This example shows a basic declaration of a function in Javascript

Function myFunction(g1, g2) {

Return g1 / g2;

Const value = myFunction(8, 2); // Calling the function

Console.log(value);

There are three ways of writing a function in JavaScript:

Function Declaration: It declares a function with a function keyword. The function declaration
must have a function.

syntax: function myfunction (paramA, paramB) {

// Set of statements

Function Expression: It is similar to a function declaration without the function name. Function
expressions can be stored in a variable assignment.

Syntax: let myfunction= function(paramA, paramB) {

// Set of statements

}
Operators in Javascript:
JavaScript Operators are symbols that have a special meaning which make JavaScript engine to
perform some action on operands. For example: the addition + symbol is an operator means to
add two variables or values, while the equal-to ==, greater-than > or less-than < symbols used
to compare two variables or values.

There are following types of operators in JavaScript. :

• Arithmetic operators
• Comparison operators
• Assignment operators
• Logical operators
• String operators
• Bitwise Operators
• Special operators

• Arithmetic operators : The Arithmetic operators are used to perform arithmetic

operations, like addition, subtraction, multiplication, etc.

Ex.,
• Comparison operators: The comparison operators are used to compare two values
(number or string):

Ex.,
• Assignment operators: The Assignment operators ‘=’ is used with numeric values to
assign a value to a variable. There are various ways to assign a value to a variable

Ex.,

• Logical operators : The logical operators are used to combine conditional statements.
Suppose we have two conditional statements ‘x’ and ‘y’.
Ex.,
• String Operators :
Ex.,
• Bitwise operators : The bitwise operators perform bitwise operations on operands.
Ex.,
• Special operators : The following operators are known as JavaScript special operators.
Ex.,
getElementbyId in Javascript :

• The getElementById() method returns an element with a specified value.

• The getElementById() method returns null if the element does not exist.
• The getElementById() method is one of the most common methods in the HTML DOM.
It is used almost every time you want to read or edit an HTML element.

Syntax:

Document.getElementById(elementID)

Example:
<!DOCTYPE html>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>Login Page</title>

</head>

<body>

<h2>Login</h2>

<form id=”loginForm” onsubmit=”return validateLogin()”>

<label for=”username”>Username:</label><br>

<input type=”text” id=”username” name=”username”><br><br>

<label for=”password”>Password:</label><br>

<input type=”password” id=”password” name=”password”><br><br>

<input type=”submit” value=”Login”>

</form>

Function validateLogin() {

Const username = document.getElementById(‘anushka’).value;

Const password = document.getElementById(‘indian’).value;

// Example: hardcoded credentials for simplicity

Const validUsername = “user”;

Const validPassword = “pass”;

If (username === validUsername && password === validPassword) {

Window.location.href = ‘welcome.html’;

} else {

Alert(‘Invalid username or password’);

// Prevent form submission

Return false;

</script>

</body>

</html>

Output:
<!DOCTYPE html>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>Welcome Page</title>

</head>

<body>

<h2>Welcome</h2>

<p>You have successfully logged in!</p>

</body>

</html>

Output:
Date : 18/06/2024

➢ Practice Questions:
Q.1 Guessing Game: Write a script that generates a random number between 1
and 100 and allows the user to guess the number in a limited number of
attempts.
Answer:

<!DOCTYPE html>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>Guessing Game</title>

<style>

Body {

Font-family: Arial, sans-serif;

Text-align: center;

Margin-top: 50px;

Input, button {

Padding: 10px;

Font-size: 16px;

Font-size: 18px;
}

</style>

</head>

<body>

<h1>Guessing Game</h1>

<p>I have selected a number between 1 and 100.</p>

<p>You have 10 attempts to guess it correctly.</p>

<input type=”number” id=”guessInput” min=”1” max=”100” placeholder=”Enter no.”>

<button onclick=”makeGuess()”>Guess</button>

Let numberToGuess = Math.floor(Math.random() * 100) + 1;

Let attemptsLeft = 10;

Document.getElementById(‘attemptsLeft’).innerText = `Attempts left: ${attemptsLeft}`;

Function makeGuess() {

Const guessInput = document.getElementById(‘guessInput’);

Const feedback = document.getElementById(‘feedback’);

Const guess = parseInt(guessInput.value);

If (isNaN(guess) || guess < 1 || guess > 100) {

Feedback.innerText = ‘Please enter a number between 1 and 100.’;

Return;

attemptsLeft--;

document.getElementById(‘attemptsLeft’).innerText = `Attempts left: ${attemptsLeft}`;

if (guess < numberToGuess) {

feedback.innerText = ‘Too low! Try again.’;

} else if (guess > numberToGuess) {

Feedback.innerText = ‘Too high! Try again.’;

} else {

Feedback.innerText = `Congratulations! You guessed the number ${numberToGuess}

correctly.`;

guessInput.disabled = true;

return;

If (attemptsLeft === 0) {

Feedback.innerText = `Sorry, you’ve run out of attempts. The number was

${numberToGuess}.`;

guessInput.disabled = true;

guessInput.value = ‘’;
}

</script>

</body>

</html>

Output:
Q.2 Find the Largest: Write a script that prompts the user for three numbers and
then finds the largest number among them.
Answer :

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Find the Largest Number</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

margin-top: 50px;

input, button {

padding: 10px;

font-size: 16px;

margin: 5px;

font-size: 18px;

</style>
</head>

<body>

<h1>Find the Largest Number</h1>

<p>Enter three numbers:</p>

<input type="number" id="num1" placeholder="First number">

<input type="number" id="num2" placeholder="Second number">

<input type="number" id="num3" placeholder="Third number">

<br>

<button onclick="findLargest()">Find Largest</button>

function findLargest() {

const num1 = parseFloat(document.getElementById('num1').value);

const num2 = parseFloat(document.getElementById('num2').value);

const num3 = parseFloat(document.getElementById('num3').value);

const result = document.getElementById('result');

if (isNaN(num1) || isNaN(num2) || isNaN(num3)) {

result.innerText = 'Please enter valid numbers.';

return;

let largest = num1;

if (num2 > largest) {

largest = num2;

if (num3 > largest) {

largest = num3;

result.innerText = `The largest number is ${largest}.`;

</script>

</body>

</html>

Output:
Q.3 Calculate Area: Write a script that prompts the user for the length and width
of a rectangle and then calculates and displays the area.
Answer:

<!DOCTYPE html>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>Calculate Rectangle Area</title>

<style>

Body {

Font-family: Arial, sans-serif;

Text-align: center;

Margin-top: 50px;

Input, button {

Padding: 10px;

Font-size: 16px;

Margin: 5px;

Font-size: 18px;

</style>
</head>

<body>

<h1>Calculate Rectangle Area</h1>

<p>Enter the length and width of the rectangle:</p>

<input type=”number” id=”length” placeholder=”Length” step=”any”>

<input type=”number” id=”width” placeholder=”Width” step=”any”>

<br>

<button onclick=”calculateArea()”>Calculate Area</button>

Function calculateArea() {

Const length = parseFloat(document.getElementById(‘length’).value);

Const width = parseFloat(document.getElementById(‘width’).value);

Const result = document.getElementById(‘result’);

If (isNaN(length) || isNaN(width) || length <= 0 || width <= 0) {

Result.innerText = ‘Please enter valid positive numbers for length and width.’;

Return;

Const area = length * width;

Result.innerText = `The area of the rectangle is ${area} square units.`;

}
</script>

</body>

</html>

Output:
Q.4 Check Even or Odd: Write a script that prompts the user for a number and
then determines if the number is even or odd using the modulo operator %.
Answer:

<!DOCTYPE html>

<html>

<head>

<title>Even or Odd Checker</title>

</head>

<body>

<h1>Even or Odd Checker</h1>

<input type=”number” id=”numberInput” placeholder=”Enter a number”>

<button onclick=”checkEvenOrOdd()”>Check Number</button>

Function checkEvenOrOdd() {

// Get the input number from the user

Var number = document.getElementById(“numberInput”).value;

// Convert the input to a number

Number = parseInt(number);

// Check if the number is even or odd

If (isNaN(number)) {
Document.getElementById(“result”).innerHTML = “Please enter a valid number.”;

} else {

If (number % 2 === 0) {

Document.getElementById(“result”).innerHTML = “The number “ + number + “ is

even.”;

} else {

Document.getElementById(“result”).innerHTML = “The number “ + number + “ is

odd.”;

</script>

</body>

</html>

Output:
Q.5 Greet the User: Write a script that asks the user for their name using prompt
and then displays a greeting message on the console using console.log.
Answer:

<!DOCTYPE html>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>Greeting Page</title>

</head>

<body>

// Prompt the user for their name

Var userName = prompt(“Please enter your name:”);

// Display a greeting message on the webpage

If (userName) {

Document.getElementById(“greeting”).innerText = “Hello, “ + userName + “! Welcome!”;

} else {

Document.getElementById(“greeting”).innerText = “Hello! Welcome!”;

</script>
</body>

</html>

Output:

.
Date : 19/06/2024

Patterns in JavaScript
A pattern is a series or a sequence that repeats itself. Patterns are the most common programs
practiced while learning the basics of JavaScript. They improve logical thinking and help us
quickly figure out the program's execution flow (especially loops) with practice.

Most of the time, patterns are not directly used while developing applications using JavaScript.
Still, it is advised to practice patterns before jumping to the advanced topics of JavaScript so
that the basic programmer has adequate knowledge of the flow of the programs and how loops
work before jumping to higher concepts of JavaScript. A good practice of pattern in JavaScript
helps improve problem-solving skills and logical thinking.

• Pattern 1
Source Code:

<!DOCTYPE html>

<head>

<title>Pattern Program</title>

</head>

<body>

let rows=5;

let pattern = " ";

for(let n=1; n<= rows ; n++)

for(let num =1; num<=n; num++)

{

pattern= pattern+num;

pattern+= "<br>";

document.write(pattern);

</script>

</body>

</html>

Output:
• Pattern 2

Source Code:

<!DOCTYPE html>

<head>

<title>Pattern Program</title>

</head>

let rows=15;

let pattern = " ";

for(let n=1; n<= rows ; n++)

for(let num =1; num<=n; num++)

pattern= pattern+"$"+" ";

pattern+= "<br>";

document.write(pattern);

</script>
</body>

</html>

Output:
• Pattern 3

Source Code:

<!DOCTYPE html>

<head>

<title>Pattern Program</title>

</head>

let rows=12;

let pattern = " ";

for(let n=1; n<= rows ; n++)

for(let num =1; num<=12-n; num++)

pattern= pattern+"&"+" ";

pattern+= "<br>";

document.write(pattern);

</script>
</body>

</html>

Output:
• Task 4

Source Code:

<!DOCTYPE html>

<head>

<title>Pattern Program</title>

</head>

let rows=15;

let c1="$";

let c2="*";

let pattern = " ";

for(let n=1; n<= rows-1 ; n++)

for(let num =1; num<=n; num++)

pattern= pattern+c1+" ";

pattern+= "<br>";
}

document.write(pattern);

</script>

</center>

</body>

</html>

Output:
• Task 5
Source Code:

<!DOCTYPE html>

<head>

<title>Pattern Program</title>

</head>

let rows=10;

let pattern = " ";

for(let n=1; n<= rows ; n++)

for(let num =1; num<=rows; num++)

pattern= pattern+"*"+" ";

pattern+= "<br>";

document.write(pattern);

</script>
</body>

</html>

Output;
Arrays in JavaScript

An array in JavaScript is a type of global object that is used to store data. Arrays consist of an
ordered collection or list containing zero or more data types, and use numbered indices starting
from 0 to access specific items.

Arrays are very useful as they store multiple values in a single variable, which can condense and
organize our code, making it more readable and maintainable. Arrays can contain any data type
including numbers, strings and objects.

To demonstrate how arrays can be useful, consider assigning the five oceans of the world to
their own variables.

// Assign the five oceans to five variables

const ocean1 = "Pacific";

const ocean2 = "Atlantic";

const ocean3 = "Indian";

const ocean4 = "Arctic";

const ocean5 = "Antarctic";

This method is very verbose, and can quickly become difficult to maintain and keep track of.
Using arrays, we can simplify our data.

// Assign the five oceans

let oceans = [

"Pacific",

"Atlantic",

"Indian",

"Arctic",
"Antarctic", ];

Creating an Array
There are two ways to create an array in JavaScript:

1.The array literal, which uses square brackets.

2.The array constructor, which uses the new keyword.

// Initialize array of shark species with array literal

[label sharks.js]

let sharks = [

"Hammerhead",

"Great White",

"Tiger",

];

We can print out an entire array, which will display the same as our input.

// Print out the entire sharks array

sharks;

Output:

[ ‘ Hammerhead ‘ , ‘ Great White ‘ , ‘ Tiger ‘ ]

Arrays are often used to group together lists of similar data types, but they can technically
contain any value or a mix of values, including other arrays.

// Initialize array of mixed datatypes

let mixedData = [

"String",

null,
7,

"another",

"array",

];

Indexing Arrays

Arrays do not have name/value pairs. Instead, they are indexed with integer values beginning
with 0. Here is an example array, assigned to seaCreatures.

let seaCreatures = [

"octopus",

"squid",

"shark",

"seahorse",

"starfish",

];

Here is a breakdown of how each item in the seaCreatures array is indexed.

octopus squid shark seahorse starfish

0 1 2 3 4
The first item in the array is octopus, which is indexed at 0. The last item is starfish, which is
indexed at 4. Counting starts with 0 in indices, which goes against our natural intuition to start
counting at 1, so special care must be taken to remember this until it becomes natural.

We can find out how many items are in an array with the length property.

seaCreatures.length;

output 5

If we want to find out the index number of a specific item in an array, such as seahorse, we can
use the indexOf() method.

seaCreatures.indexOf("seahorse");

output 3

If an index number is not found, such as for a value that does not exist, the console will return -
1.

seaCreatures.indexOf("cuttlefish");

output -1

Accessing an items in an array

An item in a JavaScript array is accessed by referring to the index number of the item in square
brackets.

seaCreatures[1];

output Squid

Accessing an items in an array

In our seaCreatures variable we had five items, which consisted of the indices from 0 to 4. If we
want to add a new item to the array, we can assign a value to the next index.

seaCreatures[5] = "whale";

seaCreatures;
output

[ ‘ octopus ’, ‘ squid ‘, ‘ shark’ , ‘ seahorse ‘, ‘ starfish ‘, ‘ whale ‘ ]

Removing an items from an array

When we want to remove a specific item from an array, we use the splice() method.

In the splice() method, the first parameter stands for the index number to be removed (in this
case, 7), and the second parameter is how many items should be removed. We put 1, signifying
that only one item will be removed.

seaCreatures.splice(2, 1);

seaCreatures;

output

[ ‘ octopus ’, ‘ squid ‘ , ‘ seahorse ‘, ‘ starfish ‘, ‘ whale ‘ ]

The pop() method will remove last element in an array.

// Remove the last item from the seaCreatures array

seaCreatures.pop();

seaCreatures;

[ ‘ octopus ’, ‘ squid ‘ , ‘ seahorse ‘, ‘ starfish ‘ ]

Conclusion:
Arrays are an extremely versatile and fundamental part of programming in JavaScript. In this
tutorial, we learned how to create an array, how arrays are indexed, and some of the most
common tasks of working in arrays, such as creating, removing, and modifying items. We also
learned two methods of looping through arrays, which is used as a common method to display
data.
Date : 20/06/2024

Vs Code
Visual Studio Code (famously known as VS Code) is a free open source text editor by Microsoft.
VS Code is available for Windows, Linux, and macOS. Although the editor is relatively
lightweight, it includes some powerful features that have made VS Code one of the most
popular development environment tools in recent times.

VS Code supports a wide array of programming languages from Java, C++, and Python to CSS,
Go, and Dockerfile. Moreover, VS Code allows you to add on and even creating new extensions
including code linters, debuggers, and cloud and web development support.

The VS Code user interface allows for a lot of interaction compared to other text editors. To
simplify user experience, VS Code is divided into five main regions:

• The activity bar

• The side bar
• Editor groups
• The panel
• The status bar

The image below shows how these regions are displayed :

After installation, you can run the editor by entering the code -n command into the terminal.
This will prompt VS Code to start and display a fresh instance. If you want to continue working
from where you left off in the previous coding session, enter the code command without the -
n flag. If you want to open VS Code in a certain directory, navigate to the directory and enter
the code -r command. You are now on your way to writing powerful code on your VS Code
environment!

Features
• Language Support: VS Code supports a wide range of programming languages, including
but not limited to JavaScript, TypeScript, Python, C#, Java, Go, Ruby, and others.
• Intelli-Sense: It can detect if any snippet of code is left incomplete. Also, common
variable syntax and variable declarations are made automatically. Ex: If a certain
variable is being used in the program and the user has forgotten to declare it, intelli-
sense will declare it for the user.
• Extensions and Support: Usually supports all the programming languages, but if the
user/programmer wants to use a programming language that is not supported, he can
download and use the extension. And performance-wise, the extension doesn’t slow
down the editor as it runs as a separate process.
• Repository: With the ever-increasing demand for the code, secure and timely storage is
equally important. It is connected with Git or can be connected with any other
repository for pulling or saving the instances.
• Web-Support: Comes with built-in support for Web applications. So web applications
can be built and supported in VSC.
• Hierarchy Structure: The code files are located in files and folders. The required code
files also have some files that may be required for other complex projects. These files
can be deleted as per convenience.
• Improving Code: Some code snippets can be declared a bit differently, which might help
the user in the code. This function prompts the user, wherever necessary, to change it
to the suggested option.
• Terminal Support: Often, the user must start from the root of the directory to start with
a particular action; an in-built terminal or console provides user support to not switch
between two screens for the same.
• Multi-Projects: Multiple projects containing multiple files/folders can be opened
simultaneously. These projects/folders might or might not be related to each other.
• Git Support: Resources can be pulled from Git Hub Repo online and vice-versa; saving
can be done too. Resource pulling also means cloning the code made available on the
internet. This code can later be changed and saved.
• Git Integration: With VS Code’s built-in Git integration, you can perform version control
tasks directly within the editor. You can stage, commit, and push changes, view diffs,
and manage branches without switching to a separate Git client.
• Command Palette: The Command Palette is a useful tool that allows you to quickly
execute commands and access various functionalities with just a few keystrokes. It
offers a fast and efficient way to navigate the editor and perform actions without relying
on menus and toolbars.
• Debugging Support: VS Code offers a robust debugging experience. It lets you set
breakpoints, inspect variables, step through code, and handle exceptions. This makes
finding and fixing bugs in your applications a more manageable task.

Steps For the Installation of VS Code

1. Visit the official Visual Studio Code website: https://code.visualstudio.com/

2. To get the software, click the “Download” button on the website. The system will recognize
your operating system and recommend the suitable version for download – whether it’s
Windows, macOS, or Linux.

3. After downloading the installer file, find it on your computer and run it. Once the Installer
has opened, it will ask you to accept the terms and conditions of Visual Studio Code. Click “I
accept the agreement” and the “Next” button.

4. In the next process, You have to choose the appropriate location to install Visual Studio
Code. You can keep the default location or select a different one according to your preference,
then click the Next button.
5. The same goes for the Visual Studio Code shortcut on your desktop or in the Start menu.

6. Decide whether you would like to add the “Open with Code” function to the context menu
when right-clicking on files and folders, and select the below options accordingly.

7. To proceed with the installation setup, click the “Install” button. Please wait for the
installation process; it might take around one minute.

8. Once the installation setup for Visual Studio Code is complete, a window will appear, as
shown below. Check the box for “Launch Visual Studio Code” and then click on the “Finish”
button.

You can launch Visual Studio Code by locating its icon in the Start menu (for Windows) or
Applications folder (for macOS). For Linux, you can launch it through the application launcher or
by typing the “code” command in the terminal. When you first open Visual Studio Code, a
welcome screen will appear. You can either close it or explore the available features and
extensions.

Congratulations! You have successfully installed Visual Studio Code, which is now ready for use.
Looping Statements in JavaScript

The JavaScript loops are used to iterate the piece of code using for, while, do while or for-
in loops. It makes the code compact. It is mostly used in array.

There are four types of loops in JavaScript.

1. for loop
2. while loop
3. do-while loop
4. for-in loop

1) JavaScript For loop

The JavaScript for loop iterates the elements for the fixed number of times. It should be used if
number of iteration is known. The syntax of for loop is given below.

Syntax:

for (initialization; condition; increment)

code to be executed

Ex., <!DOCTYPE html>

<html>

<body>

for (let i=1; i<=5; i++)

document.write(i + "<br/>")
}

</script>

</body>

</html>

Output :

2) JavaScript while loop

The JavaScript while loop iterates the elements for the infinite number of times. It should be
used if number of iteration is not known. The syntax of while loop is given below.

Syntax:

while (condition)

code to be executed

Ex., <!DOCTYPE html>

<html>

<body>

var i=11;
while (i<=15)

document.write(i + "<br/>");

i++;

</script>

</body>

</html>

Output:

15
Example using while loop :
<!DOCTYPE html>

<html>

<head>

<title>

multiplication program using while loop

</title>

</head>

document.write("Table of 10 ");

document.write("<br>");

let i=1;

while (i<=10)

const n=i*10;

document.write(n);

document.write("<br>");

i++;

}
</script>

</body>

</html>

Output:
Conditional Statements in JavaScript
The JavaScript if-else or conditional statements are used to execute the code whether
condition is true or false. There are three forms of if statement in JavaScript.

1. If Statement
2. If else statement
3. if else if statement

1.JavaScript If statement
It evaluates the content only if expression is true. The signature of JavaScript if statement is
given below.

Syntax:

if(expression)

//content to be evaluated

Ex., <html>

<body>

var a=20;

if(a>10){

document.write("value of a is greater than 10");

</script>

</body>
</html>

Output:

Value of a is greater than 10

2.JavaScript If...else Statement

It evaluates the content whether condition is true of false. The syntax of JavaScript if-else
statement is given below.

Syntax:

if(expression)

//content to be evaluated if condition is true

Else

//content to be evaluated if condition is false

Ex; <html>

<body>

var a=20;

if(a%2==0){

document.write("a is even number");

}
else{

document.write("a is odd number");

</script>

</body>

</html>

Output:

a is even number

2.JavaScript If...else if statement

It evaluates the content only if expression is true from several expressions. The signature of
JavaScript if else if statement is given below.

Syntax:

if(expression1){

//content to be evaluated if expression1 is true

else if(expression2){

//content to be evaluated if expression2 is true

else if(expression3){

//content to be evaluated if expression3 is true

else{

//content to be evaluated if no expression is true

}

Ex., <html>

<body>

var a=20;

if(a==10){

document.write("a is equal to 10");

else if(a==15){

document.write("a is equal to 15");

else if(a==20){

document.write("a is equal to 20");

else{

document.write("a is not equal to 10, 15 or 20");

</script>

</body>

</html>

Output:

a is equal to 20
Example using if…else if :
<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Number Check</title>

</head>

<body>

<h2>Number Checker</h2>

let number = prompt("Enter a number:");

number = parseFloat(number);

if (isNaN(number)) {

document.write("Invalid input. Please enter a valid number.");

} else {

if (number > 0) {

document.write(number + " is a positive number.");

} else if (number < 0) {

document.write(number + " is a negative number.");

} else {

document.write("The number is zero.");

</script>

</body>

</html>

Output:
Date : 21/06/2024

CSS
CSS stands for Cascading style sheets. It describes to the user how to display HTML elements on
the screen in a proper format. CSS is the language that is used to style HTML documents. In
simple words, cascading style sheets are a language used to simplify the process of making a
webpage.

CSS is used to handle some parts of the webpage. With the help of CSS, we can control the
colour of text and style of fonts, and we can control the spacing between the paragraph and
many more things. CSS is easy to understand but provides strong control on the Html
documents.CSS is combined with HTML.

Advantages of CSS :
Faster page speed: It has a faster page speed than other code's page speeds. With the help of
the CSS rule, we can apply it to all occurrences of certain tags in HTML documents.

Better user experience: CSS makes a webpage very attractive to the eyes. Also, CSS makes it
user-friendly. When the button or text is in a proper format, it improves the user experience.

Quicker Development time: With the help of CSS, we can specify the format and style the
multiple pages into one code string. In cascading style sheet, we can make a duplicate copy of
several website pages.
If we make a webpage, it has the same formatting, looks, and feel, so with the help of the CSS
rule for one page, and it is sufficient for all the pages.

Easy Formatting changes: In CSS, if we need to make changes in the format, it is very easy; we
only need to change the one-page format it will automatically apply to the other pages of CSS.
There is no need to correct individual pages in a CSS style sheet. If we fix a CSS style sheet, it
will automatically update the other CSS style sheet.

Compatibility: Compatibility is very important in today's age. If we create any webpage, it

should be very responsive and user-friendly. CSS is used with Html to make webpage design
responsive.

Why do We Use CSS?

As we all know, CSS is a powerful style sheet language used to control the HTML document to
improve the webpage design.
CSS provides efficiency in webpage design: It also provides updates so our webpage works
appropriately. With the help of CSS, we can create and apply those rules within the website. If
we create a webpage design separately, we can make changes in our style sheet, and it will
affect all the style sheets.

CSS provides faster page download: CSS helps with faster page download because when we
download a page, we get the cache that helps to load a page, but with the help of CSS, we can
lead to load a lighter page which helps to improve the performance.

CSS is easy to work: In CSS, we can visual aspect of the website separate entirely from the
content; using CSS, we can create a website that allows us to make quick layout

1. Inline CSS

Inline CSS is used to style the elements of HTML documents. It is used in HTML to style the
attributes without using the selectors. It is challenging to manage the inline function in
websites compared to other types. It is very helpful in Html in some situations.

2. Internal CSS

Internal CSS is used to design the style single page effectively. It is more time-consuming
because we can only work on one page or we need to style each web page. In internal CSS, we
style a single webpage uniquely.

Syntax:

<style>

--- required styles--

</style>

3. External CSS

External CSS is used to link all webpage with an external file. CSS, which can be created in a text
file. It is more efficient for styling an extensive webpage. It also increases the readability of the
CSS files.

Syntax:

<head>
//if the CSS file is in another folder, then

//the href must contain the path to the file

<link rel="stylesheet" href="nameOfTheSheet.css">

</head>

CSS Comment

CSS comment, as the name says, with the help of comments, we can pass the message in our
code so the user can easily understand the code. With the help of comments, we can make our
source code attractive.

For Example:

Hello, my name is Rohit. Here we are using multiple comments format.

body {

font-family: Sans-serif;

font-size: 50 em /* 1em = 10px */

Selectors
In CSS, selectors select the specific word you want to style. There are different types of
selectors:

The element selector

The universal selector

Id selector

Class selectors
1. The Element selector

Element selectors are used to provide styling to a selected HTML document.

Syntax:

Element {

property: value

Example:

background-color: Pink;

2. The universal selector

We use an asterisk (*) sign to define the universal selector in the universal selector. It is used to
select all the Html documents.

For Example:

property: value;

3. Id selector

It is the most commonly used operator in CSS. It is used to set the style to a given id. It is
denoted by (#).

Syntax:

#id {

property: value;

}
4. The Class Selector

The class selector is used to select elements that have some class attributes. We use a (.)
character with a specific class to select an element.

Example:

.intro {

background-color: yellow;

CSS background
In CSS, we have different ways by which we can affect HTML documents. There are a few as
follows:

Colour: It is used to change the background colours.

Repeat: It is used to check if an image has to repeat. If yes, then it will tell you how to do it.

Image: It is used to set the image in the background.

Position: It determines the position of an image in CSS.

CSS Border
It is used to set up the border for the Html elements. There are some main properties for the
setup of the border in Html elements:

Width: It helps to set the width of the borders.

Style: It helps to set the style of the borders.

Colour: It helps to set the colour of the borders.

Radius: It helps to set the radius of the border.

We can set the border from right \, top, bottom, and left. For example: border width = 2px, 5px;
Example of a Café web using CSS

Source Code:

<html>
<head>
<title>
css example
</title>
</head>
<style>
body{
background-color: darkorchid;
font-family: Arial, Helvetica, sans-serif;
}
h1{
color: aquamarine;
font-family: Arial, Helvetica, sans-serif;

}
p{
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: x-large;
color: yellowgreen ;
}
marquee{

font-family: Georgia, 'Times New Roman', Times, serif;

font-size: x-large;
color: cyan ;
}
b{
color: aliceblue;
}

</style>
<center>
<body>
<h1> hello indians</h1>
<p> Welcome to india cafe</p>
On the ocasion of 75th republic day we have <u><b>50%</b></u> of on any
of our outstanding meals ! come with your friends and family and enjoy the yummy
meals.
<marquee scrollamount="20%" direction="right" >
<br><br><br>
hurry up! only few hours left...hurry up! only few hours left...hurry
up! only few hours left...hurry up! only few hours left...hurry up! only few
hours left...hurry up! only few hours left...hurry up! only few hours
left...hurry up! only few hours left...
</marquee>
<br><br><br>
<marquee scrollamount="100%" direction="right" ></marquee>
<b>offer! offer!! offer!!!</b>
</marquee>
<br><br>
</center>
<h1> Menucard</h1>
<ul>
<b> <li>Pizza party</li></b>
<ol>
<li>cheese burst pizza : 450/- </li>
<li>corn cheese pizza : 350/- </li>
<li>cheese burst pizza : 250/- </li>
<li>corn cheese pizza : 250/- </li>
</ol>
<br>
<b><li>fries</li></b>
<ol>
<li>salty potato fries : 100/-</li>
<li>peri peri potato fries : 130/-</li>
<li>cheese loaded potato fries : 200/-</li>
<li>green herbs potato fries : 190/-</li>
<li>tandoori potato fries : 190/-</li>
</ol>
<br>
<b> <li>Chinese Tadkaaa</li></b>
<ol>
<li>veg manchurian : 140/- </li>
<li>paneer manchurian : 180/- </li>
<li>veg fried rice : 180/- </li>
<li>veg shezwan rice : 200/- </li>
<li>veg hakka noodles : 140/- </li>
<li>burnt garlic noodles : 170/- </li>
<li>veg shezwan noodles : 190/- </li>
<li>paneer chilli : 180/- </li>
<li>soya chilli : 140/- </li>
<li>veg crispy : 180/- </li>
<li>chinese bhel : 180/- </li>

</ol>
<br>
<b><li>pasta</li></b>
<ol>
<li>red sauce pasta : 180/-</li>
<li>white sauce pasta : 200/-</li>
<li>pesto pasta : 250/-</li>
<li>pink sauce pasta : 200/-</li>
</ol>
<br>
<b><li>coffee</li></b>
<ol>
<li>cold coffee : 80/-</li>
<li>thick cold coffee : 100/-</li>
<li>cold coffee with ice-cream : 140/-</li>
<li>filter coffee : 80/-</li>
<li>frappe : 160/-</li>
</ol>
</ul>
</body>
</html>

Output :
Date : 22/06/2024

Practice Questions :

Q.1 Style Basic HTML Elements:

• Start by creating a simple HTML document with elements like

<h1>,<p>,<ul>, and <li>.
• Use CSS to change the background color and margins/padding of
these elements. Experiment with different properties to see their
effects.
Answer :

<html>
<title> HTML page using CSS</title>
<style>
body {
border: 0cqw;
background-color: lightseagreen;
color: black;
font-family: 'Times New Roman', Times, serif;
font-size: x-large;
padding: 20px;
margin: 20px;
list-style: 1.6;
}
p {

font-family: 'Times New Roman', Times, serif;

color: black;
font-size: x-large;
}
li {
color:black;
font-family: 'Times New Roman', Times, serif;
}
h1 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-
serif;
color: mediumvioletred;
}
h2 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-
serif;
color:blue;
}
</style>
<body>
<u><h1> INFOTECH ACADEMY</h1></u>
<H2>INTRODUCING ONLINE WEB DEVELOPMENT COURCES </H2>
<p> Dear programmers we are introducing our web development courses of
year 2024-25 <br>
Confirm your admissions and get flat 20% off on any course <br>
</p>
<ul>
<li> Front-end programming course 5000/-</li>
<ol>
<li>JavaScript</li>
<li>HTML</li>
<li>CSS</li>
<li>node-js</li>
</ol><br>
<li> Back-end programming course 7000/-</li>
<ol>
<li>Python</li>
<li>Java</li>
<li>PHP</li>
<li>Ruby</li>
<li>SQL</li>
</ol>
</ul>
<p>For more information please visit our official website
www.infotec.com</p>
<p><b>THANK YOU!</b></p>
</body>
</html>

Output:
Q.2 Create a Two-Column Layout:

• Built an HTML structure with two div elements side-by-side.

• Employ CSS to define width, height, and float properties to position
them horizontally for a two-column layout.
Answer:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two-Column Layout</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
padding: 20px;
background-color:salmon;
color:black;
}
.container {
display: flex;
justify-content: space-between;
}

.column {
width: 45%;
padding: 10px;
border: 1px solid brown;
background-color: khaki;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>Two-Column Layout Example</h1>

<div class="container">
<div class="column">
<h2>Cricketer Name</h2>
<p>Virat kohli <br> Tim David <br> Saurabh Netravalkar <br> Nicholas
Pooran <br> Aiden Markram <br> Rashid Khan</p>
</div>
<div class="column">
<h2>Country</h2>
<p>India <br> Australia <br> America <br> West Indies <br> South
Africa <br> Afganistan</p>
</div>
</div>
</body>
</html>

Output:
Q.3 Style Images and Links:

• Include an Image (<img>) element in your HTML.

• Use CSS to set the image size, add borders, and apply hover effects
that change the appearance on mouseover.
• Style anchor tags(<a>) to modify the link text color, underline style,
and hover effects.
Answer:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image and Link Styling</title>
<style>
body {
font-family: 'Times New Roman', Times, serif;
background-color: lightsteelblue;
margin: auto;
padding: 0%;
}

.container {
max-width: 800px;
margin: 20px auto;
text-align: center;
background-color:mediumslateblue;
padding: 20px;
border-radius: 8px;
box-shadow: gray;
}
.styled-image {
width: 300px;
border: 2px solid gray;
border-radius: 8px;
transition: transform 0.3s ease-in-out;
margin-bottom: 20px;
}

.styled-image:hover {
transform: scale(1.1);
}
.styled-link {
display: inline-block;
padding: 10px 20px;
text-decoration: dashed;
color: bisque;
border: 2px solid yellow;
border-radius: 5px;
transition: background-color 1.0s, color 1.0s;
margin-bottom: 20px;
}

.styled-link:hover {
background-color: khaki;
color: darkviolet;
}
</style>
</head>
<body>
<div class="container">
<h1>Styling Images and Links</h1>
<b><p>Link to visit national portal of INDIA.</p></b>
<a href="https://www.india.gov.in/my-government/constitution-india"
class="styled-link">National portal of India</a><br>
<img src=
"https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Indian_Flag.svg/768px-
Indian_Flag.svg.png?20180822185813" alt="Indian flag" class="styled-image">
</div>
</body>
</html>

Output:
Q.4 Design a Navigation Bar:

• Create an unordered list (<ul>) with list items (<li>) for navigation
links.
• Apply CSS to style the navigation bar. You can use properties like
display: flex, justify-content, align-items, and padding to arrange the
links horizontally with proper spacing. Customize the link appearance
(color, hover effects ) for a visually appealing navigation.
Answer:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

nav {
background-color: lightslategrey;
}

.navbar {
display: flex;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 10px 0;
}

.navbar li {
margin: 0 10px;
}

.navbar li a {
color: gold;
text-decoration: none;
padding: 10px 15px;
transition: background-color 0.3s;
}

.navbar li a:hover {
background-color: gold;
}
</style>
</head>
<body>
<br>
<nav>
<ul class="navbar">
<U> <li><a href="#">Home</a></li></U>
<u><li><a href="#">About</a></li></U>
<u> <li><a href="#">Services</a></li></U>
<u><li><a href="#">Contact</a></li></U>
</ul>
</nav>
</body>
</html>
Output:

Q.5 Experiment with Text Formatting.

• Use CSS properties like font-family, font-weight, font-size, text-

decoration, and text-align to format text.
• Create headings with different font styles, bold text for emphasis,
and centered or justified text alignment.
Answer:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Formatting Example</title>
<style>
body {
background-color: hotpink;
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
}
h1 {
font-family: 'Times New Roman', Times, serif;
font-weight: bold;
font-size: 2.5em;
text-align: center;
text-decoration: underline;
margin-bottom: 20px;
}
p {
font-size: 1.1em;
text-align: center;
margin-bottom: 15px;
}
.emphasis {
font-weight: bold;
color: dodgerblue;
}
.centered {
text-align: center;
}

</style>
</head>
<body>

<h1> This is Header h1 </h1>

<p>This is a paragraph of text demonstrating various text formatting techniques.

We can adjust the <span class="emphasis">font style</span>, <span
class="emphasis">font weight</span>, <span class="emphasis">font size</span>,
<span class="emphasis">text decoration</span>, and <span class="emphasis">text
alignment</span> using CSS properties.</p>

<p class="centered">This paragraph is centered using the CSS class

<code>centered</code>.</p>

<p>In HTML, headings like <code><h1></code>, <code><h2></code>, etc.,

can have different font styles. For example, the main heading above uses <span
style="font-family: 'Times New Roman', Times, serif; font-weight: bold;">Times
New Roman</span> font.</p>

</body>
</html>

Output:
Q.6 Implement Basic Animations:

• While not strictly beginner-level, you can explore basic CSS animations
using the @keyframes rule.
• Create a simple animation like a color change on hover or a button that
slightly scales up/down on click.
Answer:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic CSS Animations Example</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}

.button {
padding: 10px 20px;
font-size: 1em;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: transform 0.2s ease;
}

.button:hover {
background-color: #2980b9;
}

.button:active {
transform: scale(0.95);
}

.color-change {
width: 200px;
height: 200px;
background-color: #e74c3c;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 1.5em;
cursor: pointer;
animation: pulse 1s infinite alternate;
}

.color-change:hover {
animation-play-state: paused;
}

@keyframes pulse {
0% {
background-color: #e74c3c;
}
100% {
background-color: #c0392b;
}
}
</style>
</head>
<body>

<button class="button">Click Me</button>

<div class="color-change">Hover Me</div>

</body>
</html>

Output:
Q.7 Simulate Buttons with CSS:

• Style a regular HTML element (<div>) to mimic a button.

• Use properties like background-color, border, padding, and cursor to
create a button-like appearance and interaction (change cursor style on
hover).
Answer:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Button with CSS</title>
<style>
.button {
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: #fff;
text-align: center;
text-decoration: none;
border: 1px solid #2980b9;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.button:hover {
background-color: #2980b9;
border-color: #3498db;
}

.button:active {
transform: translateY(1px);
}

.button:focus {
outline: none;
}
</style>
</head>
<body bgcolor="lightgreen">
<center>
<br><br>
<h1>This click me button is created using css styling in html</h1>
<br><br>
<div class="button">Click Me</div>
</center>
</body>

Output:
Q.8 Create a Responsive Layout:

• Experiment with media queries to make your webpage responsive.

• Define different styles for various screen sizes (e.g., mobile, tablet, desktop)
using @media queries to ensure your layout adapts properly across
devices.
Answer:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive and Colorful Layout Example</title>
<style>
/* Base styles for all screen sizes */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
color: #333;
}

.container {
width: 80%;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
color: #333;
}

p {
line-height: 1.6;
color: #555;
}

.section {
padding: 20px;
margin-bottom: 20px;
color: #fff;
text-align: center;
}

/* Media queries for responsiveness */

@media only screen and (max-width: 768px) {
/* Styles for tablets and smaller screens */
.container {
width: 90%;
}
.section {
font-size: 1.2em;
}
}

@media only screen and (max-width: 480px) {

/* Styles for mobile phones */
.container {
width: 100%;
padding: 10px;
}
.section {
font-size: 1em;
}
}

/* Different color schemes for sections */

.section:nth-child(odd) {
background-color: #3498db; /* Blue */
}

.section:nth-child(even) {
background-color: #e74c3c; /* Red */
}
</style>
</head>
<body>

<div class="container">
<h1> Information Technology</h1>
<div class="section"><h2>sem1</h2><p><ol><li>M1</li><li>English</li><li>Physics
and Chemistry</li></ol></p></div>
<div
class="section"><h2>sem2</h2><p><ol><li>C</li><li>M2</li><li>BEC</li><li>EEC</li>
</ol></p></div>
<div
class="section"><h2>sem3</h2><p><ol><li>C++</li><li>DTM</li><li>DCO</li><li>POD</
li>
<li>DSU</li></ol></p></div>
<div
class="section"><h2>sem4</h2><p><ol><li>Java</li><li>CNE</li><li>SEN</li><li>DMA<
/li></ol></p></div>
</div>

</body>
</html>

Output:
Q.9 Build a Simple Form:

• Create a basic HTML form with input elements (<input>, <textarea>) and a
submit button (<button>).
• Use CSS to style the form elements (e.g., change input field appearance,
button background color, hover effects).
Answer:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Form Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
}
.form-container {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-group {
margin-bottom: 15px;
}

label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}

input[type="text"],
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 3px;
font-size: 1em;
box-sizing: border-box;
}

textarea {
height: 150px;
resize: vertical;
}

button {
background-color: #3498db;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 1em;
transition: background-color 0.3s;
}
button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>

<div class="form-container">
<h2>Contact Us</h2>
<form action="#" method="post">
<div class="form-group">
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name"
required>
</div>
<div class="form-group">
<label for="email">Your Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email"
required>
</div>
<div class="form-group">
<label for="message">Your Message:</label>
<textarea id="message" name="message" placeholder="Enter your message"
required></textarea>
</div>
<button type="submit">Submit</button>
</form>
</div>

</body>
</html>

Output:
Q.10 Design a Card Layout:

• Structure your content using div elements with appropriate classes.

• Apply CSS to create a card-based layout with rounded corners, shadows,
and spacing for elements like headings, paragraphs, and images.
Answer:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Layout Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
}

.card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 20px;
}

.card-header {
padding: 20px;
background-color: #3498db;
color: #fff;
}

.card-body {
padding: 20px;
}

.card-body p {
line-height: 1.6;
color: #555;
}
.card-footer {
background-color: #f0f0f0;
padding: 10px 20px;
text-align: right;
}

img {
max-width: 20%;
height: auto;
border-radius: 8px 8px 0 0;
}
</style>
</head>
<body>

<div class="card">
<div class="card-header">
<h2>Team India</h2>
</div>
<div class="card-body">
<img src="https://pbs.twimg.com/media/GNMCwFHbcAAWKdh?format=jpg&name=medium"
alt="Rohit Sharma">
<p>Rohit Sharma</p><p>India Captain</p><p>Squad: Rohit Sharma(c), Virat
Kohli, Rishabh Pant(w), Suryakumar Yadav, Shivam Dube, Hardik Pandya, Ravindra
Jadeja, Axar Patel, Arshdeep Singh, Kuldeep Yadav, Jasprit Bumrah, Mohammed
Siraj, Yuzvendra Chahal, Sanju Samson, Yashasvi Jaiswal.</p>

<div class="card">
<div class="card-header" style="background-color: #e74c3c;">
<h2>Team Australia</h2>
</div>
<div class="card-body">
<img src="https://assets-
webp.khelnow.com/d7293de2fa93b29528da214253f1d8d0/news/uploads/2024/05/Australia-
captain-Mitchell-Marsh.jpg.webp" alt="Mitchell Marsh">
<p>Mitchell Marsh</p><p>Australia Captain</p><p>Squad: Mitchell Marsh (c),
Ashton Agar, Pat Cummins, Tim David, Nathan Ellis, Cameron Green, Josh Hazlewood,
Travis Head, Josh Inglis (wk), Glenn Maxwell, Mitchell Starc, Marcus Stoinis,
Matthew Wade (wk), David Warner, Adam Zampa. Travelling reserves: Jake Fraser-
McGurk, Matthew Short. </p>
</div>
<div class="card-footer">
<button>Read More</button>
</div>
</div>

</body>
</html>

Output:
Date : 25/06/2024

Google Font API

It is an important aspect of any web design to choose the right font for the webpage. The use of
Google fonts is advantageous because we get elegant fonts for our website. The Google fonts
API makes it easier and quicker for everyone to use web-fonts. These fonts have been tested on
various browser configurations.

Instead of doing any programming, we simply have to add a special stylesheet link to
our HTML document, then refers to the font family of our choice in the CSS style.

• Google Fonts offers several advantages for web developers and designers:

1. Variety and Selection: Google Fonts provides a wide range of fonts, from serif and sans-serif
to display and handwriting styles. This variety allows designers to choose fonts that align with
their project's aesthetic and functional requirements.

2. Accessibility: All Google Fonts are accessible via a simple integration through a `<link>` tag in
HTML, making it easy for developers to incorporate custom typography without hosting or
managing font files locally.

3. Performance: Google Fonts are hosted on Google's servers, which are optimized for speed
and reliability. This ensures that fonts load quickly and efficiently, contributing to a positive
user experience by reducing page load times.

4. Cross-platform Compatibility: Google Fonts are designed to work across different browsers
and operating systems, ensuring consistent typography and layout regardless of the user's
device or platform.
5. Cost-effective: Google Fonts are free to use for both personal and commercial projects,
eliminating the cost associated with licensing proprietary fonts. This accessibility democratizes
typography, allowing designers of all budgets to access high-quality typefaces.

6. Updates and Maintenance: Google continuously updates its font library with new additions
and improvements, ensuring that designers have access to modern and relevant typography
options. Updates are automatically reflected in websites using Google Fonts, simplifying
maintenance for developers.

7. Flexibility and Customization: Google Fonts can be customized using CSS to adjust attributes
such as font size, weight, line spacing, and more. This flexibility allows designers to achieve the
desired look and feel for their text content.

Overall, Google Fonts democratizes typography by providing designers and developers with a
diverse selection of high-quality, accessible, and free fonts that enhance the visual appeal and
usability of websites and applications.

To include Google Fonts in an HTML document, you typically use a <link> tag in the <head>
section of your HTML file. Here’s how you can declare and include Google Fonts in your HTML:

Syntax:

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Google Fonts Example</title>

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Font1|Font2|Font3">

</head>
<body>

•

</body>

</html>

Explanation:

rel="stylesheet": Specifies the relationship between the current document and the linked
resource, indicating that the linked file is a stylesheet.

href="https://fonts.googleapis.com/css2?family=Font1|Font2|Font3": This attribute specifies

the URL of the external resource, which is the Google Fonts CSS file. Replace Font1, Font2, and
Font3 with the names of the Google Fonts you want to include, separated by | (pipe) if
including multiple fonts.

Ex.,

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Google Fonts Example</title>

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto|Open+Sans">

</head>

<body>

<h1>Welcome to Google Fonts Example</h1>

<p style="font-family: 'Roboto', sans-serif;">This paragraph uses Roboto font.</p>

<p style="font-family: 'Open Sans', sans-serif;">This paragraph uses Open Sans font.</p>

</body>

</html>

❖ Information of different programming languages using different google

fonts.

• Task 1
Source Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts Example</title>
<style>

p.a {
font-family: 'Lobster', cursive;
font-size: 20px;
color: #333;
line-height: 1.6;
text-align: center;
margin: 20px auto;
max-width: 600px;
}

body { background-color: plum;

font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
text-align: center;
}

h2 {
color: purple;
font-weight: bold;
}
</style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lobster">
</head>
<body>
<h1>Welcome to Google Fonts Example</h1>
<h2>Java</h2>
<p class="a"> Java is a versatile and widely-used programming language known
for its platform independence, object-oriented approach, and robustness.
Developed by Sun Microsystems (now Oracle Corporation) in the mid-1990s, Java's
"write once, run anywhere" principle enables bytecode to run on any device with a
Java Virtual Machine (JVM). Its syntax, resembling C and C++, supports features
like automatic memory management through garbage collection, exception handling,
and multithreading, making it suitable for enterprise-level applications, web
development (with frameworks like Spring), Android mobile app development, and
more. Java's extensive ecosystem includes libraries, frameworks (e.g., Hibernate,
Spring Framework), and IDEs (such as Eclipse and IntelliJ IDEA), supported by a
vibrant community and ongoing updates to enhance security, performance, and
developer productivity.</p>
</body>
</html>

Output:
• Task 2

Source Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts Example</title>
<style>

p.a {
font-family: 'Roboto', sans-serif;
font-size: 20px;
color: #333;
line-height: 1.6;
text-align: center;
margin: 20px auto;
max-width: 600px;
}

body {
background-color:lightgreen;
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
text-align: center;
}

h2 {
color: green;
font-weight: bold;
}
</style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto">
</head>
<body>
<h1>Welcome to Google Fonts Example</h1>
<h2>C++</h2>
<p class="a">C++ is a powerful and widely-used programming language known for
its efficiency, flexibility, and performance. Initially developed as an extension
of the C language, C++ supports both procedural and object-oriented programming
paradigms, allowing developers to write efficient, low-level code as well as
high-level abstractions. It offers features such as classes, inheritance,
polymorphism, and encapsulation, making it suitable for developing complex
systems and applications ranging from operating systems and game engines to GUI
applications and embedded systems. C++'s extensive standard library provides
robust support for data structures, algorithms, and I/O operations, while its
compilers and toolchains are widely available across various platforms, ensuring
portability and compatibility. Its continued evolution, with updates like C++11,
C++14, C++17, and C++20, enhances language capabilities with modern features like
lambda expressions, smart pointers, and improved type inference, keeping it
relevant in contemporary software development.</p>
</body>
</html>

Output:
• Task 3

Source Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts Example</title>
<style>

p.a {
font-family: 'Playfair Display', serif;
font-size: 20px;
color: #333;
line-height: 1.6;
text-align: center;
margin: 20px auto;
max-width: 600px;
}

body {
background-color: lightpink;
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
text-align: center;
}

h2 {
color: magenta;
font-weight: bold;
}
</style>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Playfair+Display">
</head>
<body>
<h1>Welcome to Google Fonts Example</h1>
<h2>C Language </h2>
<p class="a"> C is a foundational and widely-used programming language
known for its efficiency, portability, and versatility. Developed in the early
1970s, C provides low-level access to memory and hardware, making it ideal for
system programming and embedded applications. Its syntax influenced many
subsequent languages, emphasizing structured programming with features like
functions, arrays, and pointers. C's simplicity, combined with powerful
capabilities for memory manipulation and bitwise operations, enables developers
to write fast and compact code. It has a minimal runtime library compared to
higher-level languages, allowing it to run on various platforms with minimal
overhead. C remains crucial in operating systems development, compiler
construction, and application development where performance and direct hardware
control are paramount. </p>
</body>
</html>

Output:
• Task 4

Source Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts Example</title>
<style>

p.a {
font-family: 'Cursive', cursive;
font-size: 20px;
color: #333;
line-height: 1.6;
text-align: center;
margin: 20px auto;
max-width: 600px;
}

body {
background-color: lightcyan;
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
text-align: center;
}

h2 {
color: cyan;
font-weight: bold;
}
</style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cursive">
</head>
<body>
<h1>Welcome to Google Fonts Example</h1>
<h2>Python</h2>
<p class="a">Python is a versatile and widely-used programming language known
for its simplicity and readability. Developed in the late 1980s by Guido van
Rossum, Python emphasizes code readability and ease of use, making it accessible
for beginners and powerful enough for experienced developers. It supports
multiple programming paradigms, including procedural, object-oriented, and
functional programming. Python's extensive standard library and third-party
packages provide tools for tasks ranging from web development and data analysis
to artificial intelligence and scientific computing. Its interpreted nature and
dynamic typing contribute to rapid development and debugging. Python's community-
driven development and open-source ethos foster a rich ecosystem of libraries and
frameworks like Django, Flask, NumPy, and TensorFlow, making it a preferred
choice for applications in various domains, including web development,
automation, and machine learning. </p>
</body>
</html>

Output:
• Task 5

Source Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts Example</title>
<style>

p.a {
font-family: 'Pacifico', cursive;
font-size: 20px;
color: #333;
line-height: 1.6;
text-align: center;
margin: 20px auto;
max-width: 600px;
}

body {
background-color: lightskyblue;
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
text-align: center;
}

h2 {
color: dodgerblue;
font-weight: bold;
}
</style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Pacifico">

</head>
<body>
<h1>Welcome to Google Fonts Example</h1>
<h2>Ruby</h2>
<p class="a"> Ruby is a dynamic and object-oriented programming language
celebrated for its simplicity and productivity. Created in the mid-1990s by
Yukihiro Matsumoto, Ruby prioritizes human readability and programmer happiness
with its elegant syntax and flexible design principles. It supports multiple
programming paradigms, including procedural, functional, and object-oriented
programming, making it versatile for various application types. Ruby gained
popularity with the Ruby on Rails web framework, known for rapid development of
web applications. Its rich ecosystem of gems (libraries) extends functionality in
areas like database interaction, testing, and deployment. Ruby's community-driven
development and emphasis on developer satisfaction foster a vibrant community
that continues to innovate and expand the language's capabilities, ensuring its
relevance in modern software development. </p>
</body>
</html>

Output:
Date : 27/06/2024

XAMPP : Cross-Platform, Apache, MySQL, PHP, and Perl.

XAMPP is one of the widely used cross-platform web servers, which helps developers to create
and test their programs on a local webserver. It was developed by the Apache Friends, and its
native source code can be revised or modified by the audience. It consists of Apache HTTP
Server, MariaDB, and interpreter for the different programming languages like PHP and Perl. It
is available in 11 languages and supported by different platforms such as the IA-32 package of
Windows & x64 package of macOS and Linux.

XAMPP is an abbreviation where X stands for Cross-Platform, A stands for Apache, M stands
for MYSQL, and the Ps stand for PHP and Perl, respectively. It is an open-source package of
web solutions that includes Apache distribution for many servers and command-line
executables along with modules such as Apache server, MariaDB, PHP, and Perl.

XAMPP helps a local host or server to test its website and clients via computers and laptops
before releasing it to the main server. It is a platform that furnishes a suitable environment to
test and verify the working of projects based on Apache, Perl, MySQL database, and PHP
through the system of the host itself. Among these technologies, Perl is a programming
language used for web development, PHP is a backend scripting language, and MariaDB is the
most vividly used database developed by MySQL. The detailed description of these components
is given below.
Comopnents Of XAMPP

As defined earlier, XAMPP is used to symbolize the classification of solutions for different
technologies. It provides a base for testing of projects based on different technologies through
a personal server. XAMPP is an abbreviated form of each alphabet representing each of its
major components. This collection of software contains a web server named Apache, a
database management system named MariaDB and scripting/ programming languages such
as PHP and Perl. X denotes Cross-platform, which means that it can work on different platforms
such as Windows, Linux, and macOS.

Many other components are also part of this collection of software and are explained below.

1. Cross-Platform: Different local systems have different configurations of operating

systems installed in it. The component of cross-platform has been included to increase
the utility and audience for this package of Apache distributions. It supports various
platforms such as packages of Windows, Linus, and MAC OS.
2. Apache: It is an HTTP a cross-platform web server. It is used worldwide for delivering
web content. The server application has made free for installation and used for the
community of developers under the aegis of Apache Software Foundation. The remote
server of Apache delivers the requested files, images, and other documents to the user.
3. MariaDB: Originally, MySQL DBMS was a part of XAMPP, but now it has been replaced
by MariaDB. It is one of the most widely used relational DBMS, developed by MySQL. It
offers online services of data storage, manipulation, retrieval, arrangement, and
deletion.
4. PHP: It is the backend scripting language primarily used for web development. PHP
allows users to create dynamic websites and applications. It can be installed on every
platform and supports a variety of database management systems. It was implemented
using C language. PHP stands for Hypertext Processor. It is said to be derived from
Personal Home Page tools, which explains its simplicity and functionality.
5. Perl: It is a combination of two high-level dynamic languages, namely Perl 5 and Perl 6.
Perl can be applied for finding solutions for problems based on system administration,
web development, and networking. Perl allows its users to program dynamic web
applications. It is very flexible and robust.
6. phpMyAdmin: It is a tool used for dealing with MariaDB. Its version 4.0.4 is currently
being used in XAMPP. Administration of DBMS is its main role.
7. OpenSSL: It is the open-source implementation of the Secure Socket Layer Protocol and
Transport Layer Protocol. Presently version 0.9.8 is a part of XAMPP.
8. XAMPP Control Panel: It is a panel that helps to operate and regulate upon other
components of the XAMPP. Version 3.2.1 is the most recent update. A detailed
description of the control panel will be done in the next section of the tutorial.
9. Webalizer: It is a Web Analytics software solution used for User logs and provide details
about the usage.
10. Mercury: It is a mail transport system, and its latest version is 4.62. It is a mail server,
which helps to manage the mails across the web.
11. Tomcat: Version 7.0.42 is currently being used in XAMPP. It is a servlet based on JAVA to
provide JAVA functionalities.
12. Filezilla: It is a File Transfer Protocol Server, which supports and eases the transfer
operations performed on files. Its recently updated version is 0.9.41.

XAMPP Format Support

XAMPP is supported in three file formats

.EXE- It is an extension used to denote executable files making it accessible to install because an
executable file can run on a computer as any normal program.

.7z - 7zip file- This extension is used to denote compressed files that support multiple data
compression and encryption algorithms. It is more favored by a formalist, although it requires
working with more complex files.

.ZIP- This extension supports lossless compression of files. A Zipped file may contain multiple
compressed files. The Deflate algorithm is mainly used for compression of files supported by
this format. The .ZIP files are quite tricky to install as compared to .EXE

Thus .EXE is the most straightforward format to install, while the other two formats are quite
complicated and complex to install.

Installation Of XAMPP

To install XAMPP (Cross-Platform Apache, MySQL, PHP, and Perl) on your system, follow these
steps:
1. Download XAMPP:

- Visit the official Apache Friends website:

[https://www.apachefriends.org/index.html](https://www.apachefriends.org/index.html).

- Choose the version of XAMPP suitable for your operating system (Windows, Linux, or
macOS).

- Click on the download button to get the installer file.

2. Run the Installer:

- Once the download completes, run the installer file you downloaded (e.g., `xampp-
installer.exe` on Windows, `xampp-linux-x64-x.x.x-x-installer.run` on Linux, or `xampp-osx-x.x.x-
x-installer.dmg` on macOS).

- On Windows, you might need to confirm administrative privileges to proceed with the
installation.

3. Follow Installation Wizard:

- The XAMPP installation wizard will guide you through the process. Click "Next" (or
equivalent) to proceed through each step.

- Choose the components you want to install. Typically, you'll need Apache, MySQL/MariaDB,
PHP, and phpMyAdmin for database management. You can also include other components like
Perl if needed.

4. Select Installation Folder:

- Choose a folder where you want to install XAMPP. The default location is usually fine for
most users, but you can choose a different location if needed.

5. Complete the Installation:

- Once you've made your selections, proceed with the installation process. This may take a
few minutes depending on your system's speed.

- On Windows, you may get a firewall alert; make sure to allow Apache HTTP Server to
communicate on private networks.

- On macOS, drag and drop XAMPP into the Applications folder when prompted.

6. Start XAMPP:

- After installation completes, launch XAMPP. On Windows, you can start it from the Start
Menu or desktop shortcut. On macOS, open it from the Applications folder.

- On Linux, start XAMPP from the terminal using `sudo /opt/lampp/lampp start`.

7. Test Installation:

- Open a web browser and go to `http://localhost` or `http://127.0.0.1`. You should see the
XAMPP dashboard indicating that everything is working correctly.

- Verify Apache and MySQL are running by checking their status on the XAMPP dashboard.

8. Configure Additional Settings (Optional):

- If necessary, configure PHP settings or adjust MySQL/MariaDB configurations through

phpMyAdmin or by editing configuration files located in the XAMPP installation directory.

9. Start Developing:

- Now that XAMPP is installed and running, you can start developing and testing your PHP and
MySQL applications locally.

That's it! You've successfully installed XAMPP on your system. Make sure to keep XAMPP up to
date with the latest versions to ensure security and compatibility with your development
environment.

Unit 1_web Designing
No ratings yet
Unit 1_web Designing
31 pages
BCA - (WEB PROGRAMMING) (Total 5 Units PDF
100% (1)
BCA - (WEB PROGRAMMING) (Total 5 Units PDF
153 pages
sumit 000000
No ratings yet
sumit 000000
46 pages
HTML
No ratings yet
HTML
52 pages
U5-2 Vocabulary - Severe Weather, Natural Disasters 2 - Modo - Informe - Unit 5 - Lesson 2 - MyEnglishLab
No ratings yet
U5-2 Vocabulary - Severe Weather, Natural Disasters 2 - Modo - Informe - Unit 5 - Lesson 2 - MyEnglishLab
2 pages
Fswd@unit 1@aiml
No ratings yet
Fswd@unit 1@aiml
56 pages
Training Report Anu-1
No ratings yet
Training Report Anu-1
84 pages
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
No ratings yet
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
98 pages
HTML
No ratings yet
HTML
29 pages
HTML
No ratings yet
HTML
35 pages
Unit-1_HTML_and_CSS
No ratings yet
Unit-1_HTML_and_CSS
189 pages
HTML& CSS (Eng)
No ratings yet
HTML& CSS (Eng)
24 pages
Beginners Guide to HTML
No ratings yet
Beginners Guide to HTML
59 pages
Mrunal D Report4
No ratings yet
Mrunal D Report4
88 pages
lecture01_wt_introduction_to_html
No ratings yet
lecture01_wt_introduction_to_html
44 pages
WP_UNIT 1
No ratings yet
WP_UNIT 1
34 pages
Commmm
No ratings yet
Commmm
39 pages
Ankita 4
No ratings yet
Ankita 4
70 pages
Practical File - Vikas
No ratings yet
Practical File - Vikas
13 pages
Training Report Shreya-3
No ratings yet
Training Report Shreya-3
95 pages
CSE (112) Lab Report
No ratings yet
CSE (112) Lab Report
21 pages
Cbse Notes For Class 10 Foundation of Information Technology - HTML (Hypertext Markup Language)
0% (1)
Cbse Notes For Class 10 Foundation of Information Technology - HTML (Hypertext Markup Language)
2 pages
AIT_UNIT 1,4,5
No ratings yet
AIT_UNIT 1,4,5
48 pages
Basics of HTML and Css From Scratch PDF
No ratings yet
Basics of HTML and Css From Scratch PDF
20 pages
Lecture 1 Introduction To HTML
No ratings yet
Lecture 1 Introduction To HTML
68 pages
Chapter 10 - HTML
No ratings yet
Chapter 10 - HTML
98 pages
HTML Basic
No ratings yet
HTML Basic
9 pages
Ilovepdf Merged
No ratings yet
Ilovepdf Merged
304 pages
Ayush Project
No ratings yet
Ayush Project
17 pages
HTML
100% (1)
HTML
16 pages
Harshit Singhal - 2K24CSUN01161
No ratings yet
Harshit Singhal - 2K24CSUN01161
24 pages
Detailed HTML5 Tutorial
No ratings yet
Detailed HTML5 Tutorial
5 pages
Unit 1
No ratings yet
Unit 1
72 pages
HTML Notes
No ratings yet
HTML Notes
42 pages
Project on HTML Savita Yadav
No ratings yet
Project on HTML Savita Yadav
40 pages
HTML Presentation
No ratings yet
HTML Presentation
5 pages
WD Unit-2 Part 2
No ratings yet
WD Unit-2 Part 2
45 pages
HTML Notes
No ratings yet
HTML Notes
42 pages
HTML Notes
100% (1)
HTML Notes
18 pages
unit 4 ICSE imp topics
No ratings yet
unit 4 ICSE imp topics
43 pages
Copy of Module 2. Introduction to HTML.docx
No ratings yet
Copy of Module 2. Introduction to HTML.docx
26 pages
Lecture Html-Lec1
No ratings yet
Lecture Html-Lec1
33 pages
Ecommerce Technologies File
No ratings yet
Ecommerce Technologies File
48 pages
HTML Material
No ratings yet
HTML Material
4 pages
Web Design-Lecture 2 - HTML
No ratings yet
Web Design-Lecture 2 - HTML
30 pages
HTML - Notes
No ratings yet
HTML - Notes
7 pages
Chapter 02-MARKUP LANGUAGE HTML and CSS
No ratings yet
Chapter 02-MARKUP LANGUAGE HTML and CSS
23 pages
Task 8 HTML
No ratings yet
Task 8 HTML
18 pages
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
No ratings yet
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
36 pages
Trig Bash
No ratings yet
Trig Bash
26 pages
Computer multimedia animation unit 1 assignment
No ratings yet
Computer multimedia animation unit 1 assignment
11 pages
HTML Interview Questionnaire
No ratings yet
HTML Interview Questionnaire
11 pages
Project for Nielit
No ratings yet
Project for Nielit
12 pages
Phast Europe: Fast Delivery Program
No ratings yet
Phast Europe: Fast Delivery Program
40 pages
HTML Notes
No ratings yet
HTML Notes
29 pages
Radhe
No ratings yet
Radhe
17 pages
EPSON tmh6000
No ratings yet
EPSON tmh6000
232 pages
BWD Unit-1
No ratings yet
BWD Unit-1
18 pages
Study Planner Class 10
No ratings yet
Study Planner Class 10
2 pages
HTML Interview QA
No ratings yet
HTML Interview QA
5 pages
Unit 2WD
No ratings yet
Unit 2WD
8 pages
Introduction To HTML
No ratings yet
Introduction To HTML
17 pages
Wave
No ratings yet
Wave
70 pages
Unit 5
No ratings yet
Unit 5
5 pages
Foster ch04 4th Edition
No ratings yet
Foster ch04 4th Edition
28 pages
Joint and Conditional Probability Distributions
No ratings yet
Joint and Conditional Probability Distributions
52 pages
Special Exam
No ratings yet
Special Exam
21 pages
It Spring Edutech: Chapter 1: Getting Started With HTML
No ratings yet
It Spring Edutech: Chapter 1: Getting Started With HTML
12 pages
CRH Case & Question
0% (2)
CRH Case & Question
9 pages
As300-Ma-V06r02 Splitter VHF Ais
No ratings yet
As300-Ma-V06r02 Splitter VHF Ais
20 pages
Learning
No ratings yet
Learning
58 pages
Deteccion y Viabilidad de Cultivo de Panagrellus Redivivus
No ratings yet
Deteccion y Viabilidad de Cultivo de Panagrellus Redivivus
8 pages
Protocol NGS Twist96-PlexLibraryPreparationProtocol 26MAR22 Rev2.0 0
No ratings yet
Protocol NGS Twist96-PlexLibraryPreparationProtocol 26MAR22 Rev2.0 0
14 pages
Remedial Bahasa Inggris: Nama: Cahya Wulan Septiani Kelas: X MIPA 2 No Absen: 09
No ratings yet
Remedial Bahasa Inggris: Nama: Cahya Wulan Septiani Kelas: X MIPA 2 No Absen: 09
12 pages
EEP20-0030 - Kohasa Engineering Company LTD - Technical Tender - Form A PDF
No ratings yet
EEP20-0030 - Kohasa Engineering Company LTD - Technical Tender - Form A PDF
2 pages
Ite2004 Software-Testing Eth 1.0 37 Ite2004
No ratings yet
Ite2004 Software-Testing Eth 1.0 37 Ite2004
2 pages
Page 6 - S or Z
No ratings yet
Page 6 - S or Z
1 page
Basic Features of The Microcredit Regulatory Authority Act, 2006
No ratings yet
Basic Features of The Microcredit Regulatory Authority Act, 2006
10 pages
ABB - Busduct Brochure - 12pp - WEB PDF
No ratings yet
ABB - Busduct Brochure - 12pp - WEB PDF
12 pages
The Family Health Nursing Process
No ratings yet
The Family Health Nursing Process
25 pages
Gupta Dynasty
No ratings yet
Gupta Dynasty
6 pages
Talking Politics
No ratings yet
Talking Politics
4 pages
Adventure Tourism and Risk Management
No ratings yet
Adventure Tourism and Risk Management
6 pages
Ciriaco Esteban Elementary School: Activity Completion Report
No ratings yet
Ciriaco Esteban Elementary School: Activity Completion Report
4 pages
LUXEON Versat 3030 HP CW 150: Industry-Leading Solutions For Exterior Automotive Lighting
No ratings yet
LUXEON Versat 3030 HP CW 150: Industry-Leading Solutions For Exterior Automotive Lighting
17 pages
Ca10 Specs
No ratings yet
Ca10 Specs
2 pages
Syllabus - Master Programme in Health Informatics
No ratings yet
Syllabus - Master Programme in Health Informatics
8 pages
FieldGenius 7 SP1 Release Notes
No ratings yet
FieldGenius 7 SP1 Release Notes
2 pages
Adeel Ahmad Khan C.V
No ratings yet
Adeel Ahmad Khan C.V
3 pages
James Learning Javascript Programming
From Everand
James Learning Javascript Programming
James Lombard
No ratings yet