Scribd
Upload
9 views39 pages

Practical File For Cs

Practical File for Cs

Uploaded by

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

Practical File For Cs

Practical File for Cs

Uploaded by

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

Name- Harsh Vashishtha

Class- X A
Subject- Computer Application

 Submitted to:- Prashant Sir

 Submitted by:- Harsh Vashishtha


Acknowledgment

I express my heartfelt gratitude to my computer teacher, Mr.


Prashant Kumar, for their invaluable guidance in helping me
complete this project successfully.
I am thankful to G.D. Public School, Iglas Road, Khair, for
providing me with resources and an inspiring environment to
work on this project.
Special thanks to my parents and friends for their constant
support and encouragement throughout the process.

- Harsh Vashishtha
CERTIFICATE
This is to certify that Harsh Vashishtha, a student of Class
10th A, has successfully completed his computer project on
"HTML And CSS Web development."
The project demonstrates a keen understanding of HTML, CSS,
and other web technologies. It was completed under the
guidance of Mr. Prashant Kumar with commendable dedication.
We wish him all the best for his future endeavors.

______________ ___________________
Harsh Vashishtha - Mr. Prashant Kumar
Index

1. Front Page
2. Acknowledgment
3. Certificate of Completion
4. HTML and CSS Coding
o Introduction to the internet
o Output Introduction to the internet
o Basics of HTML Programming
o Basics of HTML Programming
o Prime minister of India
o Output of Prime minister of India
o 5th Generation Technology (5G)
o Output 5th Generation Technology (5G)
o G7 Summit: India and Italy Meetup
o Output of G7 Summit: India and Italy Meetup
o School Admission Form
o Output of School Admission Form
o Cloud Computing: Revolutionizing Technology
o Output of Cloud Computing: Revolutionizing
Technology
o Advantages of Artificial Intelligence
o Output of Advantages of Artificial Intelligence
o Disadvantages of Artificial Intelligence
o Output of Disadvantages of Artificial Intelligence
o The Journey of the Internet: From ARPANET to Web 3.0
o Output of The Journey of the Internet: From ARPANET to Web 3.0
5. Bibliography
6. Glossary
7. Teacher Remarks
<html>

<head>

<title>Introduction to the Internet</title>

<style>

body {font-family: Arial, sans-serif; margin: 0;padding: 0;background-color: #f4f4f4;color: #333;}

header {text-align: center; background: #0056b3;color: white; padding: 20px 10px;}

header h1 {font-size: 2.5rem;margin: 0;}

section {padding: 20px;}

ul {padding-left: 40px;}

ul li {margin: 10px 0;}

img {display: block; margin: 20px auto; max-width: 100%;height: auto; border-radius: 8px;}

footer {text-align: center; margin-top: 20px;padding: 10px;background: #0056b3;color: white;}

</style>

</head>

<body>

<header>

<h1>Introduction to the Internet</h1>

</header>

<section>

<p>The Internet is a global network of interconnected devices enabling communication and


information sharing worldwide. It was developed in the 1960s and has since revolutionized how people
interact, learn, and conduct business by using the internet in this generation internet is basic need of
everyone and every one use internet in their common life in every sector this play an important rone in
our day to day life.</p>

<h2>Key Features :</h2>

<ul>

<li>Instant communication through emails, messaging apps, and video calls.</li>

<li>Access to an endless pool of information and resources.</li>

<li>Facilitation of e-commerce, remote work, and online education.</li>

</ul>
<img src="C:\Users\desktop\Downloads\download.jpg" alt="Internet Connectivity">

<h2>Did You Know?</h2>

<p>The first-ever message sent over the Internet was "LO" in 1969. It was meant to be "LOGIN," but
the system crashed before the word could be completed!</p>

</section>

<footer>

Learn more about the Internet at <a href="https://www.history.com/topics/inventions/invention-of-


the-internet" target="_blank" style="color: #FFD700;">History of the Internet</a>.

</footer>

</body>

</html>
<html>

<head>

<title>Basics of HTML Programming</title>

<style>

body {font-family: Arial, sans-serif; margin: 0;padding: 0;background-color: #f9f9f9;color: #333;}

header {text-align: center; background-color: #8b0000;color: white; padding: 20px;}

header h1 {margin: 0;font-size: 2.5rem;}

p, ul, h2, pre {max-width: 800px;margin: 20px auto;

padding: 0 20px;}

ul {padding-left: 40px;}

ul li {Margin-bottom: 10px;}

pre {background-color: #f4f4f4;padding: 15px;border-radius: 8px;border: 1px solid #ddd;font-


family: "Courier New", monospace; color: #8b0000;}

img {display: block; margin: 20px auto; max-width: 100%;border-radius: 8px;}

footer {text-align: center; background-color: #8b0000;color: white; padding: 10px;}

footer a {color: #ffd700;text-decoration: none;}

footer a:hover {text-decoration: underline;}

</style>

</head>

<body>

<header>

<h1>Basics of HTML Programming</h1>

</header>

<p>HTML (Hypertext Markup Language) is the backbone of web development. It provides the basic
structure of a webpage and allows developers to include elements like text, images, links, and
multimedia content. Here's an overview of key concepts :</p>

<h2>Key Tags in HTML</h2>

<ul>

<li><b>html:</b> The root element of the document.</li>


<li><b>head:</b> Contains metadata, such as the title and styles.</li>

<li><b>body:</b> Contains the visible content of the webpage.</li>

<li><b>h1 to h6:</b> Define headings, with h1 being the largest.</li>

<li><b>p:</b> Adds paragraphs to your page.</li>

<li><b>a:</b> Creates hyperlinks to connect web pages.</li>

<li><b>img:</b> Embeds images into the webpage.</li>

</ul>

<h2>Sample HTML Structure</h2>

<pre>

html

head

titleMy First HTML Page/title

/head

body

h1Welcome to HTML Basics/h1

pThis is an example paragraph./p

/body

/html

</pre>

<h2>Did You Know?</h2>

<p>The first website ever created by Tim Berners-Lee in 1991 was a simple HTML page that explained
how to create web pages!</p>

<img src=" C:\Users\desktop\Downloads\tim_berners_lee.png" alt="HTML Basics">

<footer>

Learn more about HTML at <a href="https://developer.mozilla.org/en-US/docs/Web/HTML"


target="_blank">MDN Web Docs</a>.

</footer>

</body>

</html>
<html>

<head>

<title>Prime Minister of India</title>

<style>

body {font-family: Arial, sans-serif; margin: 0;padding: 0;background-color: #f4f4f4;color: #333;}

header {text-align: center; background-color: #1e90ff;color: white; padding: 20px;}

header h1 {margin: 0;font-size: 2.5rem;}

p, ul {max-width: 800px;margin: 20px auto; padding: 0 20px;}

ul {padding-left: 20px;}

ul li {margin-bottom: 10px;}

footer {text-align: center; background-color: #1e90ff;color: white; padding: 10px;}

footer a {color: #ffd700;text-decoration: none;}

footer a:hover {text-decoration: underline;}

</style>

</head>

<body>

<header>

<h1>Prime Minister of India</h1>

</header>

<p>The Prime Minister of India is the head of the government and holds the highest executive authority
in the country. The position has evolved since the independence of India, and the Prime Minister plays a
critical role in guiding national policy and representing India globally.</p>

<h2 style="color: #1e90ff;">Role and Responsibilities</h2>

<ul>

<li><b>Head of government:</b> Leads the executive branch of the government.</li>

<li><b>Policy-making:</b> Forms policies related to the economy, defense, and international


relations.</li>
<li><b>Cabinet Leader:</b> Appoints ministers and manages the Cabinet.</li>

<li><b>Representation:</b> Represents India in international forums and bilateral relationships.</li>

</ul>

<h2 style="color: #1e90ff;">Current Prime Minister</h2>

<p>The current Prime Minister of India is <b>Narendra Modi</b>, who assumed office on May 26, 2014.
He was re-elected in 2019 and is the leader of the Bharatiya Janata Party (BJP).</p>

<h2 style="color: #1e90ff;">Did You Know?</h2>

<p>The first Prime Minister of India was <b>Jawaharlal Nehru</b>, who served from 1947 until his
death in 1964. He played a pivotal role in India's struggle for independence and in shaping modern
India.</p>

<img src="C:\Users\desktop\Downloads\pm.jpg" alt="Prime Minister of India" style="display: block;


margin: 20px auto; max-width: 60%; height: auto; border-radius: 8px;">

<footer>

Learn more about the Prime Minister of India at <a


href="https://en.wikipedia.org/wiki/Prime_Minister_of_India" target="_blank">Wikipedia - Prime
Minister of India</a>.

</footer>

</body>

</html>
<html>

<head>

<title>5th Generation Technology (5G)</title>

<style>

body {font-family: Arial, sans-serif; margin: 0;padding: 0;background-color: #f9f9f9;color: #333;}

header {text-align: center; background-color: #4caf50;color: white; padding: 20px;}

header h1 {margin: 0;font-size: 2.5rem;}

p, ul {max-width: 800px;margin: 20px auto; padding: 0 20px;}

ul {padding-left: 20px;}

ul li {margin-bottom: 10px;}

img {display: block; margin: 20px auto; max-width: 100%;height: auto; border-radius: 8px;}

footer {text-align: center; background-color: #4caf50;color: white; padding: 10px;}

footer a {color: #ffd700;text-decoration: none;}

footer a:hover {text-decoration: underline;}

</style>

</head>

<body>

<header>

<h1>5th Generation Technology (5G)</h1>

</header>

<p>5G is the fifth generation of wireless communication technology. It promises to revolutionize how
we connect by offering significantly faster speeds, lower latency, and greater connectivity for billions of
devices.</p>

<h2 style="color: #4caf50;">Key Features of 5G</h2>

<ul>

<li><b>Speed:</b> Up to 100 times faster than 4G, enabling high-speed data transfer.</li>
<li><b>Low Latency:</b> Almost real-time communication with a latency of less than 1
millisecond.</li>

<li><b>Massive Connectivity:</b> Supports a large number of connected devices, crucial for IoT
applications.</li>

<li><b>Enhanced Reliability:</b> Provides consistent connectivity even in densely populated


areas.</li>

</ul>

<h2 style="color: #4caf50;">Applications of 5G</h2>

<ul>

<li><b>Smart Cities:</b> Enables real-time monitoring and management of city infrastructure.</li>

<li><b>Autonomous Vehicles:</b> Allows self-driving cars to communicate instantly with


surroundings.</li>

<li><b>Healthcare:</b> Supports remote surgeries and real-time medical data sharing.</li>

<li><b>Entertainment:</b> Facilitates seamless streaming of 4K and 8K videos and augmented reality


(AR) experiences.</li>

</ul>

<h2 style="color: #4caf50;">Did You Know?</h2>

<p>The first commercial rollout of 5G technology began in April 2019, with South Korea becoming the
first country to offer nationwide 5G services!</p>

<img src="C:\Users\desktop\Downloads\images (5).jpg" alt="5G Technology">

<footer>

Learn more about 5G technology at <a href="https://en.wikipedia.org/wiki/5G"


target="_blank">Wikipedia - 5G</a>.

</footer>

</body>

</html>
<html>

<head>

<title>G7 Summit: India and Italy Meetup</title>

<style>

body {font-family: Verdana, sans-serif; margin: 0;padding: 0;background-color:#eaeaea;color:#222;}

header {text-align: center; background-color: #0056b3;color: white; padding: 20px;}

header h1 {font-size: 2.2rem;margin: 0;}

header p {margin: 5px 0 0;font-size: 1rem;}

p, ul {max-width: 800px;margin: 20px auto; padding: 0 20px;}

ul {padding-left: 30px;}

ul li {margin-bottom: 10px;}

img {display: block; margin: 20px auto; max-width: 100%;border-radius: 8px;}

footer {text-align: center; background-color: #0056b3;color: white; padding: 10px;font-size:


0.9rem;}

footer a {color: #ffcc00;text-decoration: none;}

footer a:hover {text-decoration: underline;}

</style>

</head>

<body>

<header>

<h1>G7 Summit: India and Italy Meetup</h1>

<p>Building Stronger Diplomatic and Economic Ties</p>

</header>

<p>The G7 (Group of Seven) is an international economic forum consisting of Canada, France, Germany,
Italy, Japan, the United Kingdom, and the United States. It addresses pressing global challenges,
including trade, security, and climate change. India, as an invited guest, participated in the latest G7
summit, fostering important discussions with key nations.</p>
<h2 style="color: #0056b3;">India-Italy Collaboration at the G7</h2>

<p>During the summit, India’s Prime Minister, <b>Narendra Modi</b>, engaged in bilateral talks with
Italy's Prime Minister and President. These discussions focused on advancing cooperation in key areas
such as:</p>

<ul>

<li>Strengthening trade relations and economic growth.</li>

<li>Collaborating on renewable energy and climate resilience.</li>

<li>Enhancing technological exchange for digital transformation.</li>

<li>Boosting cultural ties and tourism between the two nations.</li>

</ul>

<h2 style="color: #0056b3;">Key Outcomes</h2>

<p>The meetup signaled renewed commitment to shared global priorities, with both nations pledging
to:</p>

<ul>

<li>Expand investments in green energy and sustainable infrastructure.</li>

<li>Support global health initiatives, including pandemic preparedness.</li>

<li>Work together on international peacekeeping and security.</li>

</ul>

<h2 style="color: #0056b3;">Did You Know?</h2>

<p>The G7 Summit was initially formed in the 1970s to address the oil crisis and has since evolved to
include discussions on global economic stability, development, and environmental issues. Italy has been
a founding member of the group.</p>

<img src="C:\Users\desktop\Downloads\modi-meloni-1718106023.jpg" alt="G7 Summit: India and Italy


Meetup">

<footer>

Explore more about the G7 Summit at <a href="https://www.g7germany.de/g7-en"


target="_blank">G7 Germany Official Website</a>.

</footer>

</body>

</html>
<html>

<head>

<title>School Admission Form</title>

<style>

body {font-family: Arial, sans-serif; background-color: #f8f9fa;margin: 0;padding: 20px;}

h1 {text-align: center; color: #2c3e50;}

form {max-width: 600px;margin: 20px auto; background: #ffffff;padding: 20px;border-radius:


8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}

input, select, textarea, button {display: block; width: 100%;padding: 10px; margin-bottom:
15px;border: 1px solid #ddd;border-radius: 4px;}

input::placeholder, textarea::placeholder {color: #888; }

button {background-color: #28a745;color: white;border: none;border-radius: 4px;font-size:


16px;cursor: pointer;}

button: hover { background-color: #218838;}

</style>

</head>

<body>

<h1>School Admission Form</h1>

<form>

<input type="text" name="student-name" placeholder="Student's Name" required>

<input type="date" name="dob" placeholder="Date of Birth" required>

<select name="gender" required>

<option value="">Select Gender</option>

<option value="male">Male</option>

<option value="female">Female</option>
<option value="other">Other</option>

</select>

<input type="text" name="parent-name" placeholder="Parent/Guardian's Name" required>

<input type="tel" name="contact" placeholder="Contact Number" required>

<textarea name="address" rows="4" placeholder="Address" required>

</textarea>

<input type="text" name="previous-school" placeholder="Previous School (if any)">

<button type="submit">Submit Application</button>

</form>

</body>

</html>
<html>

<head>

<title>Cloud Computing: Revolutionizing Technology</title>

<style>

body {font-family: Arial, sans-serif; margin: 0; padding: 0;background-position: center; color: white;}

header {text-align: center; background-color: rgba(0, 0, 0, 0.7);padding: 20px;color: white;}

header h1 { margin: 0; font-size: 2.5rem;}

p, ul {max-width: 800px; margin: 20px auto; padding: 0 20px;background-color: rgba(0, 0, 0,


0.6);border-radius: 8px;}

ul { padding-left: 20px;}

ul li { margin-bottom: 10px;}

h2 {color: #ffcc00;}

footer {text-align: center; background-color: rgba(0, 0, 0, 0.7);color: white; padding: 10px;margin-


top: 20px;}

footer a {color: #ffd700;text-decoration: none;}

footer a:hover {text-decoration: underline;}

</style>

</head>

<body>

<header>

<h1>Cloud Computing: Revolutionizing Technology</h1>

</header>

<p>Cloud computing has transformed the way individuals and organizations store, process, and access
data. By using remote servers hosted on the internet, cloud computing eliminates the need for physical
storage devices and promotes flexibility, scalability, and cost-efficiency.</p>

<h2>Key Features of Cloud Computing</h2>

<ul>
<li><b>On-Demand Services:</b> Access resources like storage and computing power as needed.</li>

<li><b>Scalability:</b> Easily scale resources up or down based on demand.</li>

<li><b>Global Accessibility:</b> Access data and applications from anywhere in the world.</li>

<li><b>Cost Efficiency:</b> Pay only for the resources used, reducing upfront infrastructure costs.</li>

</ul>

<h2>

<center>

<img src="C:\Users\desktop\Downloads\1675396902464.jpg">

<h2>

</center>

<h2>Applications of Cloud Computing</h2>

<ul>

<li><b>Data Storage:</b> Securely store large amounts of data online.</li>

<li><b>Remote Work:</b> Enable employees to collaborate from different locations.</li>

<li><b>Streaming Services:</b> Platforms like Netflix and Spotify rely on cloud infrastructure.</li>

<li><b>Artificial Intelligence:</b> Use cloud platforms to train and deploy AI models.</li>

</ul>

<footer>

Discover more about cloud computing at <a href="https://www.ibm.com/cloud/learn/cloud-


computing" target="_blank">IBM Cloud Computing Guide</a>.

</footer>

</body>

</html>
<html>

<head>

<title>Advantages of Artificial Intelligence</title>

<style>

body {font-family: 'Arial', sans-serif; margin: 0;padding: 0;background-color: #1a1a2e;color: white;}

header{textalign:center;background:lineargradient(90deg,#0f0c29,#302b63,#24243e);padding:30px;

color: white;}

header h1 {margin: 0;font-size: 2.8rem;}

header p {font-size: 1.2rem;margin-top: 10px;}

p, h2, ul, blockquote {max-width: 800px;margin: 20px auto; padding: 0 20px;}

h2 {color: #f39c12;}

ul {padding-left: 20px;}

ul li {margin: 10px 0;}

block quote {font-style: italic; color: #b0b0b0;padding: 15px;background: rgba(255, 255, 255,
0.1);border-left: 4px solid #f39c12; margin: 20px 0;}

img {display: block; margin: 20px auto; max-width: 100%;border-radius: 8px;}

footer {text-align: center; background: #302b63;color: white; padding: 10px;font-size: 0.9rem;}

footer a {color: #f39c12;text-decoration: none;}

footer a:hover {text-decoration: underline;}

</style>

</head>

<body>

<header>

<h1>Advantages of Artificial Intelligence</h1>

<p>Shaping the Future of Technology and Society</p>

</header>

<p>Artificial Intelligence (AI) has revolutionized various industries and transformed the way humans
interact with technology. Its contributions range from increasing efficiency to solving complex problems,
making it a cornerstone of modern advancements.</p>
<h2>1. Automation of Repetitive Tasks</h2>

<p>AI systems can automate mundane and repetitive tasks, allowing humans to focus on creative and
strategic activities. This increases productivity across industries, from manufacturing to customer
support.</p>

<h2>2. Enhanced Decision-Making</h2>

<p>AI processes vast amounts of data quickly, providing insights and predictions that help businesses
and governments make informed decisions in real-time.</p>

<h2>3. Personalized Experiences</h2>

<p>AI powers personalized experiences in e-commerce, entertainment, and education. For instance,
Netflix recommendations and tailored learning programs are driven by AI algorithms.</p>

<blockquote>"AI is not just a tool; it is the means to amplify human potential and solve challenges
previously thought insurmountable."</blockquote>

<h2>4. Advancements in Healthcare</h2>

<p>AI has revolutionized healthcare by enabling early disease detection, robotic surgeries, and
personalized treatments, significantly improving patient outcomes.</p>

<h2>5. Accessibility and Inclusion</h2>

<p>AI technologies like speech-to-text, real-time translations, and assistive tools empower individuals
with disabilities, making digital and physical spaces more inclusive.</p>

<img src=" C:\Users\desktop\Downloads\ai.jpg " alt="Artificial Intelligence">

<footer>

Discover more about AI at <a href="https://www.ibm.com/artificial-intelligence" target="_blank">IBM


Artificial Intelligence</a>.

</footer>

</body>

</html>
<html>

<head>

<title>Disadvantages of Artificial Intelligence</title>

<style>

body {font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #1e1e2f;color: white;}

header {text-align: center;background: linear-gradient(90deg, #ff416c, #ff4b2b);padding:


30px;color: white;}

header h1 {margin: 0;font-size: 2.5rem;}

p, ul {max-width: 800px;margin: 20px auto;padding: 0 20px;}

ul {padding-left: 20px;}

ul li {margin-bottom: 10px;}

hr {border: 0;border-top: 2px solid #ff4b2b;margin: 20px 0;}

footer {text-align: center;background-color: #ff4b2b;color: white;padding: 10px;font-size: 0.9rem;}

footer a {color: #ffd700;text-decoration: none;}

footer a:hover {text-decoration: underline;}

</style>

</head>

<body>

<header>

<h1>Disadvantages of Artificial Intelligence</h1>

</header>

<p>While Artificial Intelligence (AI) has brought remarkable advancements, it also presents several
challenges and drawbacks:</p>

<br>

<h2 style="color: #ff416c;">1. High Implementation Costs</h2>

<p>Developing and maintaining AI systems requires significant financial investment. From powerful
hardware to software tools and data storage, the expenses can be prohibitive for small businesses.</p>

<hr>
<h2 style="color: #ff416c;">2. Job Displacement</h2>

<p>AI automation threatens jobs across various industries, particularly in manufacturing, customer
service, and transportation. This raises concerns about unemployment and the need for upskilling
workers.<br>

A report by the World Economic Forum predicts that millions of jobs could be displaced by 2030 due to
AI-driven automation.</p>

<hr>

<h2 style="color: #ff416c;">3. Ethical Concerns</h2>

<p>AI systems can perpetuate biases present in their training data, leading to unfair or discriminatory
outcomes. Moreover, ethical questions arise about the use of AI in surveillance and military
applications.</p>

<hr>

<h2 style="color: #ff416c;">4. Dependence on AI</h2>

<p>As society increasingly relies on AI, there is a risk of losing critical skills. Overdependence on AI
systems could result in vulnerabilities, especially if those systems fail or are attacked.</p>

<hr>

<h2 style="color: #ff416c;">5. Lack of Creativity</h2>

<p>While AI excels at tasks requiring logic and pattern recognition, it lacks human creativity and
emotional intelligence. It cannot replace the originality and empathy that humans bring to problem-
solving and artistic endeavors.</p>

<footer>

Learn more about the implications of AI at <a href="https://www.brookings.edu/topic/artificial-


intelligence/" target="_blank">Brookings Institution</a>.

</footer>

</body>

</html>
<html>

<head>

<title>The Journey of the Internet: From ARPANET to Web 3.0</title>

<style>

body {font-family: 'Arial', sans-serif;margin: 0;padding: 0;background-color: #1a1a2e;color: white;}

header {text-align: center;background: linear-gradient(90deg, #0f2027, #203a43, #2c5364);padding:


30px;color: white;}header h1 {margin: 0;font-size: 2.8rem;}

header p {font-size: 1.2rem;margin-top: 10px;}

h2 {color: #00d4ff;}

p, ul, blockquote {max-width: 800px;margin: 20px auto;padding: 0 20px;}

ul {padding-left: 20px;}

ul li {margin-bottom: 10px;}

blockquote {font-style: italic;color: #b0b0b0;padding: 15px;background: rgba(255, 255, 255,


0.1);border-left: 4px solid #00d4ff;margin: 20px 0;}

.image-row {display: flex;justify-content: center;align-items: center;gap: 20px;margin: 20px auto;}

.image-row img {max-width: 45%;border-radius: 8px;}

footer {text-align: center;background: #203a43;color: white;padding: 10px;font-size: 0.9rem;}

footer a {color: #00d4ff;text-decoration: none;}

footer a:hover {text-decoration: underline;}

</style>

</head>

<body>

<header>

<h1>The Journey of the Internet</h1>

<p>From ARPANET to Web 3.0</p>

</header>

<p>The Internet has undergone a remarkable transformation since its inception. What began as a
military experiment has evolved into a global network that connects billions of people, revolutionizing
communication, commerce, and culture.</p>
<h2>The Beginning: ARPANET</h2>

<p>In 1969, the Advanced Research Projects Agency Network (ARPANET) was launched by the U.S.
Department of Defense. It was the first network to implement packet switching and the precursor to the
modern Internet.</p>

<div class="image-row">

<img src="C:\Users\desktop\Downloads\images (1).jpg" alt="ARPANET Left Image">

<img src="C:\Users\desktop\Downloads\Screen-Shot-2016-12-06-at-12.37.48-PM.png" alt="ARPANET


Right Image">

</div>

<h2>The Rise of the World Wide Web</h2>

<p>In 1989, Sir Tim Berners-Lee invented the World Wide Web, introducing web pages, hyperlinks, and
the HTTP protocol. This innovation transformed the Internet into an accessible platform for information
sharing.</p>

<h2>The Present: Web 2.0</h2>

<ul>

<li><b>Interactive Platforms:</b> Social media, blogs, and video streaming have made the Internet a
collaborative space.</li>

<li><b>E-commerce:</b> Platforms like Amazon and eBay revolutionized the way people shop.</li>

<li><b>Cloud Computing:</b> Enables data storage and computing over the Internet.</li>

</ul>

<h2>The Future: Web 3.0</h2>

<p>Web 3.0 promises a decentralized Internet powered by blockchain and AI. It aims to enhance data
security, privacy, and user control, ushering in a new era of connectivity.</p>

<blockquote>"The Internet is becoming the town square for the global village of tomorrow." – Bill
Gates</blockquote>

<footer>

Learn more about the Internet's evolution at <a


href="https://www.history.com/topics/inventions/invention-of-the-internet"
target="_blank">History.com</a>.

</footer>

</body>

</html>
Glossary
Tags

1. <html>
Represents the root element of an HTML document.
2. <head>
Contains metadata about the document, such as the title and links to
stylesheets.
3. <title>
Specifies the title of the document displayed in the browser tab.
4. <body>
Contains the content of the HTML document visible to the user.
5. <h1> to <h6>
Define headings, where <h1> is the largest and most important, and <h6> is
the smallest.
6. <p>
Defines a paragraph of text.
7. <br>
Inserts a line break within the content.
8. <hr>
Represents a thematic break, often a horizontal line.
9. <strong>
Emphasizes text with strong importance, usually displayed in bold.
10.<em>
Emphasizes text, often displayed in italics.
11.<u>
Underlines text.
12.<mark>
Highlights text.
13.<a>
Creates a hyperlink to another page or resource.
14.<img>
Embeds an image into the document.
15.<ul>
Defines an unordered list.
16.<ol>
Defines an ordered list.
17.<li>
Defines a list item inside <ul> or <ol>.
18.<table>
Defines a table structure.
19.<tr>
Represents a row in a table.
20.<th>
Represents a header cell in a table.
21.<td>
Represents a data cell in a table.
22.<form>
Represents an interactive form for user input.
23.<input>
Defines an input field.
24.<textarea>
Defines a multi-line text input field.
25.<button>
Represents a clickable button.
26.<select>
Creates a dropdown list.
27.<option>
Defines an item within a <select> element.
28.<header>
Represents introductory content or navigation for a page.
29.<footer>
Represents footer content, such as copyright or contact details.
30.<audio>
Embeds audio content.
31.<video>
Embeds video content.
32.<source>
Specifies multiple media sources for <audio> or <video>.
Attributes

1. href
Specifies the URL of a link in an <a> tag.
2. src
Specifies the source of an image, audio, or video.
3. alt
Provides alternate text for an image if it cannot be displayed.
4. width and height
Set the dimensions of an image or media.
5. title
Provides additional information, displayed as a tooltip when hovered.
6. type
Specifies the type of input in a form field (e.g., text, password, submit).
7. placeholder
Provides a hint or placeholder text in an input field.
8. name
Specifies the name of a form input, used when submitting the form.
9. value
Specifies the default value of an input field or button.
10.required
Ensures that a form field must be filled out before submission.
11.checked
Pre-selects a checkbox or radio button.
12.target
Specifies where to open a linked document (e.g., _blank for a new tab).
13.rel
Specifies the relationship between the current document and the linked one.
14.border
Sets the width of a table border.
15.cellspacing and cellpadding
Adjust the spacing between table cells.
16.colspan and rowspan
Merge multiple columns or rows in a table.
Bibliography
1. HTML and CSS Documentation
MDN Web Docs – A comprehensive guide and reference for web
development, including HTML, CSS, and JavaScript.
2. OpenAI Resources
OpenAI Website – Official site providing insights into ChatGPT and other
AI technologies.
3. HTML and CSS Tutorials
W3Schools – A resourceful platform for learning and practicing web
development languages like HTML, CSS, and JavaScript.
4. Artificial Intelligence in Education
AI and Education Resources – Resources discussing the impact and
applications of AI in learning environments.
5. CSS Design Principles
CSS Tricks – A helpful website for exploring advanced CSS design
techniques and layouts.
6. HTML Forms and Accessibility
WebAIM – Information on creating accessible web forms and ensuring
usability.
7. Tim Berners-Lee and the History of the Web
World Wide Web Foundation – Detailed insights into the origins and
evolution of the internet.
8. ChatGPT in Practice
Articles and documentation available from TechCrunch and The Verge.
9. Finance and AI Integration
Reports and examples cited from Forbes AI and AI in Finance.
10.Modern Web Design Standards
References from books and articles on modern web design, such as
"Responsive Web Design with HTML5 and CSS" by Ben Frain.
Teachers Remark

Principal sir Remark

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy