Scribd
Upload
47 views47 pages

Web D File-1

web development file

Uploaded by

worldeader
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
47 views47 pages

Web D File-1

web development file

Uploaded by

worldeader
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/ 47

Submitted by: Mohit Kumar

Roll No : 231031160045
Submitted to: Ms. Anu Yadav
EXPERIMENT – 1
AIM: Prepare a survey document of websites which you like and dislike with
various reasons.

PROCEDURE:
1. First, we go to google and search google forms.
2. We have to search templates.
3. We have to enter numbers.
4. We can make different types of questions like multiple choice questions, tick the
correct, short answer, long answer and many more.
5. Now save the file.
6. Create link for thew document and share it with friends.
7. The responses given by the individuals will be saved in the form of graphs, charts and
excel sheet.

LINK FOR THE SURVEY :


https://docs.google.com/forms/d/e/1FAIpQLSfkrCVFObsqcEOifXG3fr
LX2blCVu5vfRebM8RAlEaJpe39Zw/viewform?usp=sf_link

RESPONSES:
Conclusion:

In conclusion, the benefits and conveniences offered by Amazon are undeniable. Through its user-
friendly interface, vast array of features, and commitment to excellence, Amazon has become an
indispensable tool for users around the globe. Whether seeking information, entertainment, or
connectivity, Amazon consistently delivers. Its impact spans industries, fostering learning,
collaboration, and innovation. As we navigate an increasingly digital landscape, Amazon remains a
beacon of reliability, accessibility, and quality. Embracing the future while honoring its roots, Amazon
stands as a testament to the power of technology to enrich lives and transform communities. Join
the millions who have already experienced the difference—explore Amazon today and unlock a
world of possibilities.
EXPERIMENT -2

AIM: Introduction to basic HTML tags


THEORY:
HTML stands for Hyper Text Markup Language which is used for creating webpages and web
applications. It consists of a set of tags and elements that define the structure and content
of a webpage. Web browsers interpret HTML code to render web pages visually to users.

Hyper Text Stands for Text Within Text:


A text has a link within it whenever you click on link which brings you to the new webpage.

ML stands for markup language:


It is a computer language that is used to apply layout and formatting. It makes words more
creative interactive and dynamic. It creates words into table, diagram, links etc...

WEBPAGE:
A web page is a document which is written in HTML and translated by a web browser. It can
be a static or dynamic type . a web page can be identified by URL (uniform resource locator
). With the help of HTML only we can create a static webpage.

Format Of HTML Code


<! DOCTYPE>
<html>
<head>
<title> Web Page </title >
</head>
<body>
<h1> Write Your Heading </h1>
<p> paragraph <p>
</body >
</html>
• Description of tags used: -
(i)<!DOCTYPE>
It defines the document type and instruct the browser about the version of html.

(ii)<html>-----------</html>
This tag informs the browser that it is the HTML language text between the HTML tag
describe the web browser .
(iii)<head>-----------</head>
It should be the first element in HTML which contains the metadata means information about
document.

(IV)<title>---------</title>
It appears at the top of the browser window. It is optional and placed inside head.

(V)<body>--------</body>
It describes the content of web browser which appear to end user .

(VI)<h1>----------</h1>
It describes the first level of heading of the web page.

(VII)<p>------------</p>
Text between it describe the paragraph of a web page.

• HTML code with notepad: -


Step 1: Open the notepad in window.
Step 2: Write the code in HTML.
Step 3: Save the HTML file with ‘.html’ extension.
Step 4: Open the html page in your web browser.

• Building Blocks of HTML


There are two types of building blocks: -
(i)Tags: The content in tag is written between ‘<’ and ‘>’.

(ii)Attribute: It provides the extra information about the element and applied within the start
tag.

o Attribute contain two fields: -


(i)Name (ii) Value
• Element: -
It is an individual component of html file, everything written within tags are termed as html
elements.
Elements

Start tag Content End tag


HTML Tags

Closed tag Unclosed tag


P = paragraph br = break rule
I = Italic hr = horizontal rule
B = Bold U = underline

• Types of Tags:

1.Meta tag :
Doctype, title, link, style and meta

2.Text tag
P, h1,
h2,h3,h4,h5,h6,strong,em,address,abbr,acronym,bdo,q,code,pre,variable,br,Samp,ins,del,bloc
kquote,cite,kbd, dfn

3.Link tags:
<a> and <base>

4.Image and object tags:


area,map,param,object, img

5.Table tags:
table, tr,td,th,tbody,thead,tfoot,caption, cdgroup, cd

6.List tags:
ol, ul,dd,dl, dt
7.Scripting tags:
Script, no script

8.Form tags:
Form, input , text , area, select, option, opt group ,bottom , label , field set, legend
Version 1{1991, barebones version}
Version 2{1995}

HTML versions Version 3{1997}


Version 4{1999 December, CSS}
Version 5{2008 January}

• History of HTML: -
1) Version 1:
In 1989, Tim Berner’s Lee, who was a contractor at CERN, write a memo for internet which
is based on hypertext system. Tim Berner’s Lee is also known as ‘father of HTML’. Version 1
is also called barebones version.

2) Version 2:
It supports extra features such as form based, file upload. Example, text box, radio button,
etc.

3) Version 3:
This version is capable of creating tables and providing support for extra option, it supports a
webpage with complex mathematical equation. Officially released in month of January.,
version 3.2. It also includes W3C [World Wide Web Contortion].

4) Version 4:
It provides support for CSS and multimedia elements.

5) Version 5:
Development of version 5 is done by W3C and WHATWG [Web Hypertext Application
Technology Working Group].

• Features of HTML: -

a) It is easy and simple language.


b) It is a markup language, hence provide a flexible way to design web pages using text.
c) It is platform independent.
d) It is case insensitive language.
e) It is very easy to make effective presentation using tags.
f) It allows programmers to add graphic, audio and video to web page for attractive and
interactive.
g) It allows programmers to add a link on a web page.

• HTML attributes: -

1. HTML attributes are special word which provides additional information about the
element or attribute.
2. It is also applied to the start tag and include name and value pair.
3. Each tag has attribute which defines the behavior of that element.
4. You can add multiple attributes in one HTML but required a space between two attributes.
5. Attribute name and value are case sensitive. It should be written in lower case only.

• Syntax: -
<element attribute name=”value”>
Content
</element>

• Example: -
<html>
<head> ---- </head>
<body>
<h1>EXAMPLE</h1>
<p style=” height:50px; colour: blue”>
This is paragraph which is represented by blue font.
</p>
</body>
</html>

Conclusion: In conclusion, understanding basic html tags forms the foundation for web
development. these tags are the building block that structure and organize content on web
page. As one delves into more advanced concepts, a solid grasp of these fundamental tags
will empower you to create well- structured and visually appealing web pages.
EXPERIMENT: - 3

AIM: Use table tag to format web page. Also create the time table of your
class using table tag.

THEORY:

▪ Description of table tags:

1. <table> ------ </table>


It is used to present data in tabular form or to create a table within HTML document.

2. <tr> ------ </tr>


It defines the row cells in an HTML table.

3. <th> -------</th>
IT defines the head cell of an HTML table.

4. <td> ------</td>
It is used to define cells of an HTML table which contains table data.

5. Colspan
It is an attribute of <td> tag which is used to specify the number of columns a cell should
merge.

6. Rowspan
It is an attribute of <td> tag which is used to specify the number of rows a cell should merge.

Format of time table in HTML:


<html>
<head>
<title>Time table of CS</title>
</head>
<h2 align="centre"> Btech GUG Cyber security 2023-27</h2>
<table border="5" bordercolor="black" align="centre">
<tr>
<th>Day</th><th>9:00-10:00</th><th>10:00-11:00</th><th>11:00-12:00</th><th>12:00-
1:00</th><th>1:00-2:00</th><th>2:00-3:00</th><th>3:00-4:00</th><th>Teachers</th>
</tr>
<tr>
<th>Monday</th><td colspan="2" align="centre">DSC LAB(G2)/OOPS
LAB(G2)</td><td>Maths2</td><td>Physics</td><td rowspan="5"
align="centre">Lunch</td><td>DSC</td><td>OOPS</td><td>OOPS= Manvi mam</td>
</tr>
<tr>
<th>Tuesday</th><td colspan="2" align="centre">DSC LAB(G1)/OOPS
LAB(G2)</td><td>Maths2</td><td>Physics</td><td colspan="2" align="centre">WEB D
LAB(G1)</td><td>DSC/ Human Value=Sachin Sir</td>
</tr>
<tr>
<th>Wednesday</th><td>Human
values</td><td>Maths2</td><td>DSC</td><td>Physics</td><td>OOPS</td><td></td><td>Maths=
Sonu mam</td>
</tr>
<tr>
<th>Thursday</th><td>DSC</td><td>OOPS</td><td colspan="2" align="centre">WEB D
Lab(G2)</td><td colspan="2" align="centre">Physics lab(G2)</td><td>WEB D= Anu mam</td>
</tr>
<tr>
<th>Friday</th><td>Maths2</td><td>Physics</td><td>WEB D</td><td>Human
values</td><td colspan="2" align="centre">Physics lab(G1)</td><td>Physics= Mousumi mam</td>
</tr>
<tr>
<th>Saturday</th><td rowspan="2" colspan="7" align="centre">Weekend</td><td>Physics
lab(G1)= Shradha mam</td>
</tr>
<tr>
<th>Sunday</th><td>Physics lab(G2)=Sheetal mam</td>
</tr>
</table>
</html>
▪ Result of Coding of time table in HTML: -

Conclusion:
In conclusion building a timetable using html offers a practical exercise in structuring
information for effective display. Through this process we have learned how to organize time
related data in a clear and accessible manner. This foundational experience in html
timetabling sets the stage for broader exploration into web development and data
presentation.
EXPERMIENT – 4
AIM: Create Your Profile Page i.e., educational details, Hobbies, Achievement,
My ideals etc.

THEORY:
A Profile page in web development serves as a digital representation of an individual or
entity typically created using HTML and styled with CSS, a profile page includes: header,
bio/summary, contact information, work experience, portfolio or projects, skills, ideals etc.

List of tags used:


<html>, <head>,<title>, <style>,<div>, <img>, <h1>, <h2>, <h3>, <p>,<th>, <td>, <tr>,
<u>,<a>, <ul>, <ol>, <li>, <span>, <strong>, <br>, <hr>.

Description of tags used:


• <style>: This tag is used to define the style information for a document. it includes
setting properties like colors, fonts, margins, and more.
• <div>: used as a container to group and style other elements.
• <img>: for displaying images such as a profile picture.
• <h1>, <h2>, <h3>: headings to represent different sections or headings for the
profile.
• <p>: paragraph tag for text content.
• <ul>, <ol>, <li>: unordered or ordered lists for listing items like skills or
achievements.
• <span>: inline container for styling specific portions of text.
• <strong> or < em>: emphasize text, making it bold or italic.

Code for Profile is:

<!DOCTYPE html>
<html>

<head>
<title>Profile</title>
<style>
.profile-image {
float: right;
width: 200px;
height: 200px;
object-fit: cover;
margin-left: 20px;
}
</style>
</head>
<body>
<img class="profile-image" src="Me.jpg" alt="Me">
<h1>
Mohit Kumar
</h1>
<p>Hey, I'm Mohit kumar. I am a passionate software developer with a keen interest
in web development and programming.</p>
<p>
My goal is to contribute to meaningful projects and continue learning in the field of
technology.
</p>
<h3>
Educational Details
</h3>
<ul>
<li>Completed secondary education from Guru Nanak international academy
</li>
<li>
Completed senior secondary education from V.N.B.Sr.Sec school
</li>
<li>
Pursuing B.tech in Computer science(Cyber security) from Gurugram university
</li>
</ul>
<h2>Interesets</h2>
<ul>
<li>Listening Music</li>
<li>Cooking</li>
<li>Video Games</li>
</ul>
<h2>Skills</h2>
<ul>
<li>HTML</li>
<li>C</li>
<li>Python</li>
</ul>
<h2>Inspiration</h2>
<p>
Athlete David Gogging is my inspiration.
</p>
<p>
An accomplished endurance athlete, Goggins has completed over 60 ultra-
marathons,
</p>
<p>
triathlons, and ultra-triathlons, setting new course records and regularly
placing in the top five.
</p>
<p>
He once held the Guinness World Record for pull-ups completing 4,030 in 17
hours, and he's a sought after public speaker.
</p>

</body>
</html>
Outcome:
Experiment-6

AIM : Design sign up form to validate username, password, and


phone numbers etc.
THEORY :
This experiment is performed to know how to make Signup Form
using HTML code.
Form Tags :-
1. <form>----</form> : It is used to define an HTML form.
2. <input> : It defines an input field within an HTML form.
3. <option>----</option> : It is used to define options or items in a
drop-down list.
4. <span>-----</span : It is used for styling and grouping inline.
5. <select>----</select> : It represents a control which provides a
menu of options.

Program:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h1>Login</h1>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username"
name="username"required><br>
<label for="password">Password:</label><br>
<input type="password" id="password"
name="password"required><br>
<label for="confirm-password">Confirm Password:</label><br>
<input type="password" id="confirm-password" name="confirm-
password"required><br>
<input type="checkbox" id="remember-me" name="remember-
me">
<label for="remember-me">Remember me</label><br>
<input type="checkbox" id="terms-and-conditions" name="terms-
and-conditions"required>
<label for="terms-and-conditions">I accept the terms and
conditions</label><br>
<input type="submit" value="Login">
</form>
</body>
</html>

Outcome:
Experiment-6
Aim : Design a web page and embed various multimedia features in the page.
Theory:
Multimedia elements enhance the user experience on a website by incorporating various
types of media content. Here's a brief explanation of the multimedia features used in the
above HTML code:

• Images:
<img> tag is used to embed images on the web page.
The src attribute specifies the source (URL or file path) of the image.
The alt attribute provides alternative text for screen readers and if the image cannot be
displayed.

• Videos:
<video> tag is used to embed videos on the web page.
The width and height attributes define the dimensions of the video player.
The controls attribute adds video player controls (play, pause, volume, etc.).
The <source> tag within <video> specifies the video source and type.

• Audio:
<audio> tag is used to embed audio on the web page.
The controls attribute adds audio player controls.
The <source> tag within <audio> specifies the audio source and type.
Header and Footer:

<header> and <footer> tags are used to define header and footer sections of the web page.
This provides structure and organization to the content.

PROGRAM : Welcome to Multimedia Web Page


Images
Experiment-7

AIM: Write a Javascript program to convert temperatures to and from celcius , Fahrenheit.
THEORY :
This experiment is performed to find the conversion of temperature (Celcius to Fahrenheit
and its Vice-Versa).
Celcius = (Fahrenheit - 32) * 5/9 ;
Fahrenheit = Celcius * 9/5 + 32

TAGS :-
1. <script>-----</script> : It is used to declare the Javascript within HTML document.
2. <input> : It defines an input field within an HTML form. It is an open tag.
3. <label>-----</label> : It defines a text label for the input field of form.

PROGRAM :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temperature Converter</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
input {
padding: 10px;
margin: 10px;
}
button {
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#result {
margin-top: 20px;
font-size: 18px;
}
</style>
</head>
<body>

<h2>Temperature Converter</h2>

<form onsubmit="convertTemperature(); return false;">


<label for="temperature">Enter Temperature:</label>
<input type="number" id="temperature" required>

<label for="conversionType">Choose Conversion:</label>


<select id="conversionType" required>
<option value="toFahrenheit">Celsius to Fahrenheit</option>
<option value="toCelsius">Fahrenheit to Celsius</option>
</select>
<button type="submit">Convert</button>
</form>

<div id="result"></div>

<script>
function convertTemperature() {
var temperatureInput = document.getElementById('temperature').value;
var temperature = parseFloat(temperatureInput);

if (isNaN(temperature)) {
alert('Please enter a valid number for temperature.');
return;
}

var conversionType = document.getElementById('conversionType').value;


var result;

if (conversionType === 'toFahrenheit') {


result = (temperature * 9/5) + 32;
document.getElementById('result').innerHTML = temperature + ' Celsius is ' +
result.toFixed(2) + ' Fahrenheit.';
} else if (conversionType === 'toCelsius') {
result = (temperature - 32) * 5/9;
document.getElementById('result').innerHTML = temperature + ' Fahrenheit is ' +
result.toFixed(2) + ' Celsius.';
}
}
</script>

</body>
</html>
Outcome:
Experiment-8

Aim: Write a Javascript program to perform various javascript operators.


Theory:
The program above demonstrates the use of three types of JavaScript
operators: Arithmetic, Comparison, and Logical operators.

Arithmetic Operators:
These operators perform mathematical operations on numeric values.
Examples include addition (+), subtraction (-), multiplication (*), division (/),
and modulus (%).

Comparison Operators:
These operators compare two values and return a boolean result (true or
false).
Examples include equal to (===), not equal to (!==), greater than (>), less than
(<), greater than or equal to (>=), and less than or equal to (<=).

Logical Operators:
These operators perform logical operations and return a boolean result.
Examples include logical AND (&&), logical OR (||), and logical NOT (!).
PROGRAM :

<!DOCTYPE html>
<html>
<head> <title>Javascript program on operators</title> </head>
<body>
<h2>Airthematic operators</h2>
<script language="javascript">
var a,b,c,d,e,f,g,h,i;
a=10;
b=5;
document.write("a=",a,",<br>");
document.write("b=",b,",<br>");
c=a+b; document.write("c=",c,",<br>");
d=a-b; document.write("d=",d,",<br>");
e=a*b; document.write("e=",e,",<br>");
f=a/b; document.write("f=",f,",<br>");
g=a%b; document.write("g=",g,",<br>");
h=++a; document.write("h=",h,",<br>");
i=--a; document.write("i=",i,"<br>");
</script>
<h2>Comparison and logical operators</h2>
<script language="javascript">
var a,b,c,d;
a=76;
b=56;
c=32;
d=53;
document.write("a=",a,",b=",b,",c=",c,",d=",d,"<br>");
document.write("a>b&&a>c&&a>d=",a>b&&a>c&&a>d,"<br>");
document.write("a>b||a>c||a>d=",a>b||a>c||a>d,"<br>");
document.write("!(a>c)=",!(a>c),"<br>");
</script>
</body>
</html>

Outcome:
Experiment-9
AIM: JavaScript Program for Leap Year.
THEORY:
In programming, crafting a leap year detection program involves employing a
straightforward algorithm. Begin by checking if the given year is divisible by 4. If
true, proceed to the next condition, checking for divisibility by 100. If this
condition is met, advance to the final check for divisibility by 400. If the year
satisfies all three conditions, it is classified as a leap year. This logical sequence
ensures accuracy in identifying leap years, aligning with the established rules
governing their occurrence. By incorporating these conditional checks, a leap
year program becomes a concise yet effective tool for determining whether a
particular year exhibits the characteristics of a leap year.

PROGRAM :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leap Year Checker</title>
</head>
<body>
<h1>Leap Year Checker</h1>
<label for="yearInput">Enter a year:</label>
<input type="number" id="yearInput" placeholder="Enter a year">
<button onclick="checkLeapYear()">Check Leap Year</button>
<p id="result"></p>
<script>
function isLeapYear(year) {
return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
}
function checkLeapYear() {
let year = document.getElementById("yearInput").value;
if (isNaN(year)) {
alert("Please enter a valid year.");
return;
}
let result = isLeapYear(year);
let resultMessage = result ? "Leap year!" : "Not a leap year.";
document.getElementById("result").innerHTML = resultMessage;
}
</script>
</body>
</html>

OUTCOME :
Experiment-10
AIM : Submission of website with report.

THEORY :
• HTML (HyperText Markup Language):
HTML provides the structure of the web page.
Used for creating headings, paragraphs, lists, forms, and other content
elements.

• CSS (Cascading Style Sheets):


CSS is used for styling and layout.
Applied to HTML elements to control colors, fonts, spacing, and overall visual
presentation.
Enables responsiveness and ensures a consistent design across different devices.

• JavaScript:
JavaScript adds interactivity to the website.
Used for dynamic content, form validation, and implementing features like
sliders or image galleries.

• Responsive Design:
Utilized CSS media queries to make the website responsive to different screen
sizes.
Ensured a seamless user experience on desktops, tablets, and mobile devices.

• Color Scheme:
Chose a harmonious color scheme that aligns with the website's theme.
Used CSS styles to apply colors consistently throughout the site.

• Typography:
Selected appropriate fonts for readability and aesthetics.
Implemented font styles using CSS to enhance the overall design

PROGRAM :
• HTML (index.html) :

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>CryptoCosmos</title>
<link rel="stylesheet" href="styles.css">
</head>

<body style="background: url('Background.png') no-repeat center center


fixed; background-size: cover;">

<header>
<h1>CryptoCosmos</h1>
<p>Your Comprehensive Guide to Cryptocurrency and Blockchain</p>
</header>

<main>
<section id="Brief-section">
<h2>Brief</h2>
<p>Embark on a journey through the exciting realm of
cryptocurrency and blockchain technology with our comprehensive website.
Discover the latest trends, unravel the history of digital currencies, and
explore the myriad facets of blockchain innovation. From practical tips on
handling your crypto assets to deep dives into investment strategies, we've
got you covered. Join us as we decode the world of cryptocurrency,
providing insights, expert analyses, and a wealth of resources to help you
make informed decisions in this dynamic and evolving landscape. Whether
you're a seasoned investor or a curious beginner, our content is tailored to
empower and enrich your understanding of the crypto cosmos. Welcome to
a space where the future of finance is unfolding before your eyes.</p>
</section>

<section id="history-section">
<h2>History of Cryptocurrency</h2>
<p>Cryptocurrency, born in 2009 with Bitcoin, revolutionized finance.
Its roots trace back to cryptographic concepts in the 1980s. Bitcoin,
introduced by Satoshi Nakamoto, pioneered decentralized, transparent
transactions through blockchain.</p>
<p>Altcoins like Litecoin and Ethereum added diversity and
functionality. The ICO boom brought innovation but also regulatory
challenges. Cryptocurrency faced scalability and environmental concerns,
prompting developments like Proof of Stake.</p>
<p>Adoption grew; companies accepted Bitcoin, and blockchain
found use beyond finance. NFTs expanded blockchain applications.
Challenges persist, but cryptocurrencies move towards mainstream
integration. The history of cryptocurrency is a dynamic saga of innovation,
challenges, and maturation, shaping the future of finance and technology.
</p>
</section>

<section id="handling-section">
<h2>Handling Cryptocurrency</h2>
<p>Handling cryptocurrency involves navigating its unique security
landscape. Key tips:</p>
<p> </p>
<p>1. Secure Wallets: Choose reliable wallets—hardware for large
holdings, software for accessibility.</p>
<p>2. Private Keys: Guard your private keys; they're the gateway to
your funds. </p>
<p>3. Two-Factor Authentication (2FA): Add an extra layer of
protection to exchanges and wallets.</p>
<p>4. Regular Backups: Safeguard against data loss by regularly
backing up wallet information.</p>
<p>5. Stay Informed: Stay updated on market trends, security
measures, and regulatory changes.</p>
<p>6. Phishing Awareness: Be cautious of phishing attempts; verify
URLs and emails.</p>
<p>7. Diversification: Spread investments across assets to minimize
risk.</p>
<p>8. Offline Storage: Consider keeping a portion of assets in offline
or cold storage.</p>
<p> </p>
<p>By adopting these practices, crypto enthusiasts can enhance the
security and management of their digital assets</p>

</section>

<section id="investment-section">
<h2>Cryptocurrency Investment Strategies</h2>

<p>Cryptocurrency investment strategies encompass a range of


approaches tailored to diverse risk appetites and financial goals. Long-term
HODLing involves holding assets for extended periods, relying on potential
future value appreciation. Day trading, on the other hand, capitalizes on
short-term market fluctuations through frequent buying and selling. Dollar-
Cost Averaging (DCA) offers a systematic investment method, spreading
purchases over regular intervals to mitigate the impact of price
volatility.</p>
<p>Staking involves actively participating in blockchain networks by
locking up assets to support network functions and earning rewards in
return. Initial Coin Offerings (ICOs) and token sales provide opportunities for
early investment in promising projects, although caution is warranted due
to associated risks. Thorough research and analysis are paramount,
requiring investors to stay informed about technological advancements,
project fundamentals, and overall market trends.</p>
<p>Risk management plays a crucial role, emphasizing diversification,
clear profit and loss targets, and proactive adjustments to the investment
portfolio. Peer-to-peer lending platforms offer an avenue for earning
interest on crypto holdings. Successful cryptocurrency investing hinges on
aligning chosen strategies with individual risk tolerance and financial
objectives, creating a well-rounded approach to navigate the dynamic
crypto landscape.</p>
</section>

<section id="blockchain-section">
<h2>Blockchain Technology</h2>
<p>Blockchain technology, the foundation of cryptocurrencies, has
evolved beyond its original purpose to become a transformative force
across industries. Its decentralized and transparent nature fosters trust,
enabling new strategies for data management and security. Businesses are
leveraging blockchain to streamline supply chains, ensuring transparency
and traceability. Smart contracts, self-executing agreements on the
blockchain, automate processes, reducing costs and enhancing efficiency. In
finance, blockchain facilitates faster and more secure transactions, with
decentralized finance (DeFi) platforms offering alternatives to traditional
banking. The strategy involves harnessing the power of blockchain for
enhanced security, efficiency gains, and fostering collaboration within
ecosystems. As the technology matures, strategic adoption of blockchain
continues to revolutionize how we store, share, and verify information,
promising a future where trust and innovation go hand in hand.</p>
</section>

<section id="video-section">
<h2>Video Content</h2>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/rYQgy8QDEBI" frameborder="0"
allowfullscreen></iframe>
<p>Watch informative videos about cryptocurrency, blockchain, and
related topics. Stay informed with video content covering market updates,
interviews with industry experts, and educational content.</p>
</section>

<section id="podcast-section">
<h2>Spotify Podcast</h2>

<iframe style="border-radius:12px"
src="https://open.spotify.com/embed/episode/0yzV1vY0cKDAO0jwvqKqyZ?
utm_source=generator" width="100%" height="352" frameBorder="0"
allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media;
fullscreen; picture-in-picture" loading="lazy"></iframe>

<p>Listen to engaging podcasts discussing the latest developments in


the cryptocurrency space. Stay connected with industry insights, expert
interviews, and discussions on emerging trends.</p>
</section>

<section id="popular-crypto-section">
<h2>Popular Cryptocurrencies</h2>

<div class="crypto-item" id="bitcoin">


<div class="crypto-content">
<div class="crypto-text">
<h3>Bitcoin (BTC)</h3>
<p>Current Price: 35,61,389.37 INR</p>
<p>Bitcoin, created in 2009 by the mysterious Satoshi Nakamoto, is
the first decentralized digital currency. Operating on a peer-to-peer
network, it utilizes blockchain technology for transparent and secure
transactions without the need for intermediaries. With a capped supply of
21 million coins, Bitcoin is known for its scarcity, making it a deflationary
asset. Despite criticisms, it has gained widespread recognition as a store of
value and a hedge against inflation, influencing discussions on the future of
finance and digital assets.</p>
</div>
<img src="Bitcoin.svg.png" alt="Bitcoin" class="crypto-image">
</div>
</div>

<div class="crypto-item" id="ethereum">


<div class="crypto-content">
<div class="crypto-text">
<h3>Ethereum (ETH)</h3>
<p>Current Price: 1,87,671.46 INR</p>
<p>Ethereum, launched in 2015 by Vitalik Buterin, introduced
smart contracts and decentralized applications (DApps). Powered by Ether
(ETH), its native cryptocurrency, Ethereum is a hub for DeFi and NFTs. With
ongoing upgrades like Ethereum 2.0, it continues to redefine blockchain
possibilities.</p>
</div>
<img src="ethereum-image.png" alt="Ethereum" class="crypto-
image">
</div>
</div>

<div class="crypto-item" id="xrp">


<div class="crypto-content">
<div class="crypto-text">
<h3>XRP (XRP)</h3>
<p>Current Price: 52.41 INR</p>
<p>XRP, created by Ripple, aims to facilitate fast and low-cost
international money transfers. It operates on a unique consensus algorithm,
enabling transactions to be processed quickly. Ripple, the company behind
XRP, has established partnerships with various financial institutions,
positioning XRP as a bridge currency for cross-border payments. Despite
controversies, XRP remains one of the top cryptocurrencies, with a focus on
efficiency in the global financial system.</p>
</div>
<img src="xrp-image.png" alt="XRP" class="crypto-image">
</div>
</div>

<div class="crypto-item" id="dogecoin">


<div class="crypto-content">
<div class="crypto-text">
<h3>Dogecoin (DOGE)</h3>
<p>Current Price: 7.68 INR</p>
<p>Dogecoin, initially started as a meme, has gained popularity for
its active and friendly community. While originally created as a lighthearted
cryptocurrency, it has found practical use in tipping and charitable
donations. Dogecoin transactions are fast and have low fees. Despite its
humorous origin, Dogecoin has become a significant player in the
cryptocurrency space, known for its Shiba Inu dog logo and viral social
media presence.</p>
</div>
<img src="dogecoin-image.png" alt="Dogecoin" class="crypto-
image">
</div>
</div>

<div class="crypto-item" id="binance-coin">


<div class="crypto-content">
<div class="crypto-text">
<h3>Binance Coin (BNB)</h3>
<p>Current Price: 24,728.34 INR</p>
<p>Binance Coin (BNB) is the native cryptocurrency of the Binance
exchange, one of the largest cryptocurrency exchanges globally. Initially
created as an ERC-20 token on the Ethereum blockchain, BNB later migrated
to Binance's native blockchain. BNB is used to pay for transaction fees on
the Binance platform and can be used in various applications within the
Binance ecosystem. With continuous developments and utility, Binance Coin
has become a key player in the crypto market.</p>
</div>
<img src="binance-coin-image.png" alt="Binance Coin" class="crypto-
image">
</div>
</div>

<div class="crypto-item" id="tether">


<div class="crypto-content">
<div class="crypto-text">
<h3>Tether (USDT)</h3>
<p>Current Price: 83.35 INR</p>
<p>Tether (USDT) is a stablecoin pegged to the value of the US
Dollar. It is designed to provide the stability of a fiat currency combined with
the benefits of a cryptocurrency. Each USDT token is meant to be backed by
an equivalent amount of real-world currency held in reserve, ensuring a 1:1
peg with the US Dollar. Tether is widely used for trading and as a stable
store of value in the volatile cryptocurrency market.</p>
</div>
<img src="tether-image.png" alt="Tether" class="crypto-image">
</div>
</div>

</section>

</main>

<footer class="footer-container">
<p>&copy; CryptoCosmos. Made By - Yash Singh Dhanda.</p>
</footer>

<script src="script.js"></script>
</body>

</html>

• CSS (styles.css) :

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #0f0f0f;
color: #fff;
}
header {
background-color: #1a1a1a;
color: #ffffff;
text-align: center;
padding: 20px;
position: fixed;
top: 0;
width: 100%;
}

h1, h2 {
color: #00bfff;
}

main {
padding: 20px;
padding-top: 200px;
}

section {
margin-bottom: 30px;
}

section img {
display: block;
margin: 0 auto;
}

footer {
background-color: #1a1a1a;
color: #ffffff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
.crypto-item {
max-width: 600px;
margin: 20px auto;
padding-bottom: 100px;
}

.crypto-content {
display: flex;
justify-content: space-between;
align-items: center;
}

.crypto-image {
max-width: 200px;
max-height: 150px;
height: auto;
}

.crypto-text {
width: 60%;
}

#crypto-list {
display: flex;
flex-wrap: wrap;
}

.crypto-card {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
width: 200px;
background-color: #2c2c2c;

.crypto-card:hover {
background-color: #3c3c3c;
}

.crypto-symbol {
font-weight: bold;
}

.crypto-price {
margin-top: 5px;
}

#graph-section img {
max-width: 100%;
}

#video-section iframe {
width: 100%;
height: 350px;
}

#podcast-section {
width: 100%;
}

#handling-section {
margin-top: 10px;
padding-bottom: 10px;
}

• JavaScript (script.js) :

document.addEventListener('DOMContentLoaded', function () {
const cryptoListElement = document.getElementById('crypto-list');
cryptoData.forEach(crypto => {
const cryptoCard = document.createElement('div');
cryptoCard.classList.add('crypto-card');
const symbolElement = document.createElement('div');
symbolElement.classList.add('crypto-symbol');
symbolElement.textContent = crypto.symbol;

const priceElement = document.createElement('div');


priceElement.classList.add('crypto-price');
priceElement.textContent = `$${crypto.price.toFixed(2)}`;

cryptoCard.appendChild(symbolElement);
cryptoCard.appendChild(priceElement);

cryptoListElement.appendChild(cryptoCard);
});
});

OUTCOME :
Conclusion :
Cryptocosmos, your gateway to the dynamic world of cryptocurrency, serves as
a comprehensive guide to understanding current prices, essential
cryptocurrency information, and secure handling practices. By offering real-time
updates on cryptocurrency prices and delivering fundamental insights into
various digital assets, Cryptocosmos empowers users to stay informed and make
informed decisions in the ever-evolving crypto landscape. Our platform not only
provides a snapshot of the latest market trends but also equips users with
practical tips for secure handling and management of their crypto assets.
Whether you're a seasoned investor or a newcomer exploring the crypto
universe, Cryptocosmos strives to be your go-to resource for navigating the
complexities of the crypto market with confidence and knowledge.

You might also like