Fyit Web Prat 2
Fyit Web Prat 2
a. Design a web page with links to different pages and allow navigation
between web pages.
Code:
/project-folder /index.html /about.html /contact.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - My Simple Website</title>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<section>
<h2>Home Page</h2>
<p>Welcome to my simple website! This page serves as the landing page for all
navigation.</p>
</section>
<footer>
<p>© 2024 My Simple Website</p>
</footer>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About - My Simple Website</title>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<section>
<h2>About Us</h2>
<p>This website is a simple example of how to create multiple pages and navigate
between them using HTML and CSS.</p>
</section>
<footer>
This page will have contact information or a form for visitors to get in touch.
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact - My Simple Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Contact Us</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<section>
<h2>Get in Touch</h2>
<p>If you have any questions, feel free to reach out to us at <a
href="mailto:[email protected]">[email protected]</a>.</p>
</section>
<footer>
<p>© 2024 My Simple Website</p>
</footer>
</body>
</html>
b) Design a web page that automatically redirects the user to Other Content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Redirecting...</title>
Othercontent.html
<html lang="en">
<head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Other Content</title>
</head>
<body>
<h1>Welcome to the Other Content Page!</h1>
<p>You have successfully been redirected to this page.</p>
</body>
</html>
3. Creating Hyperlinking to an E-Mail Address
HTML email links allows users to click on a link and automatically open their default
email client with a new message composed to the specified email address.
This is done using the mailto: protocol in the href attribute of an <a> (anchor) tag.
You can also predefine the subject and body of the email using the mailto: protocol. This
is done by appending ?subject= and &body= to the email address. Spaces and special
characters in the subject and body should be URL-encoded. For example, spaces are
encoded as %20.
Syntax:
<a href= "mailto: [email protected]"> [email protected] </a>
</p>
<a href= "mailto: [email protected]">
Click to Send Mail
</a>
</body>
</html>
<body>
<p>
Creating an HTML Email Link
</p>
<a
href="mailto:[email protected]?subject=Hello%20there&body=This%20is%20a%20pr
edefined%20email%20body.">
Click here to Send Mail
</a>
</body>
</html>
/* Footer styling */
footer {
text-align: center;
padding: 10px;
background-color: #3498db;
color: white;
margin-top: 20px;
}
e. Design a web page by applying Styles to Hyperlinks
To design a web page where we apply styles to hyperlinks, let's imagine hyperlinks
as doorways on a web page that take the user to different places, just like a map
with various destinations. The style we apply to these links is like decorating the
doors—giving them colors, underlines, and effects so users can easily spot and
interact with them.
Let’s create a simple web page where we style these hyperlinks in different ways:
one link could change color when hovered over, another could be styled with an
underline, and we could even add a "visited" effect to show users which links they’ve
already clicked.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Hyperlinks</title>
</head>
<body>
<header>
<h1>Welcome to the Styled Hyperlinks Page!</h1>
<p>Click on the links below to see different hyperlink styles in action:</p>
</header>
<section>
<p><a href="https://www.example.com" target="_blank" class="normal-
link">Visit Example Website</a></p>
<p><a href="https://www.google.com" target="_blank" class="hover-link">Go to
Google</a></p>
<p><a href="https://www.wikipedia.org" target="_blank" class="visited-
link">Explore Wikipedia</a></p>
</section>
<footer>
<p>Demo of styled hyperlinks using CSS</p>
</footer>
</body>
</html>
<header>
<h1>Welcome to My Web Page!</h1>
<p>This page is styled using an external CSS file.</p>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section id="home">
<h2>Home Section</h2>
<p>Welcome to the home section of the website. Here you can find general
information about the site.</p>
</section>
<section id="about">
<h2>About Section</h2>
<p>This section provides information about the website's purpose and its
creators.</p>
</section>
<section id="services">
<h2>Services Section</h2>
<p>We offer various services, such as web development, graphic design, and
more!</p>
</section>
<section id="contact">
<h2>Contact Section</h2>
<p>Get in touch with us through the contact form or our social media channels.</p>
</section>
<footer>
</body>
</html>
padding: 0;
box-sizing: border-box;
}
/* Body Styling */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
padding: 20px;
}
/* Header Styling */
header {
background-color: #3498db;
color: white;
text-align: center;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
header h1 {
font-size: 2.5rem;
}
/* Navigation Styling */
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
background-color: #2c3e50;
border-radius: 8px;
}
nav ul li {
margin: 0 20px;
}
nav ul li a {
color: white;
text-decoration: none;
font-size: 1.2rem;
padding: 10px;
nav ul li a:hover {
background-color: #34495e;
border-radius: 4px;
}
/* Section Styling */
section {
margin-bottom: 20px;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
section h2 {
font-size: 2rem;
color: #3498db;
margin-bottom: 10px;
}
section p {
font-size: 1.1rem;
color: #555;
}
/* Footer Styling */
footer {
text-align: center;
padding: 10px;
background-color: #2c3e50;
color: white;
margin-top: 40px;
border-radius: 4px;
}