2 Creating Hyperlinks, Anchors and style sheets
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
1 . index.html (Home Page)
This is the main landing page with links to "About" and "Contact" pages.
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>Home - My Simple Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Simple Website</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>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>
2. about.html (About Page)
This page provides information about the website or organization.
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>About - My Simple Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>About My Simple Website</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>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>
<p>© 2024 My Simple Website</p>
</footer>
</body>
</html>
3. contact.html (Contact Page)
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>
<!-- Meta Tag for Automatic Redirect after 5 seconds -->
<meta http-equiv="refresh" content="5;url=othercontent.html">
</head>
<body>
<h1>You are being redirected...</h1>
<p>If you are not redirected automatically, <a href="othercontent.html">click
here</a>.</p>
<p>You will be redirected to the other page in <strong>5 seconds</strong>.</p>
</body>
</html>
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>
Create Email link using href
The following HTML code illustrates how to create an email link using the href attribute
of <a> tag.
<!DOCTYPE html>
<html>
<body>
<p>
Creating an HTML Email Link
</p>
<a href= "mailto: [email protected]">
Click to Send Mail
</a>
</body>
</html>
Define Subject and Body in Email Link
HTML also allows to specify a default email subject as well as email body along with the
email address to make it more specific.
<!DOCTYPE html>
<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>
d. Design a web page for creating Styles for Nested Tags
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Styling Nested Tags</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Styling Nested Tags Example</h1>
<p>This page demonstrates how to style nested HTML elements using
CSS.</p>
</header>
<section class="container">
<div class="box">
<h2>Box 1</h2>
<p>This is a <span class="highlight">nested span</span> inside a
paragraph. The span element is styled differently to stand out.</p>
<ul>
<li>First item in list</li>
<li>Second item in list</li>
<li>Third item in list</li>
</ul>
</div>
<div class="box">
<h2>Box 2</h2>
<p>This is another <span class="highlight">nested span</span>
inside a different paragraph with its own set of styles.</p>
<ol>
<li>First ordered item</li>
<li>Second ordered item</li>
<li>Third ordered item</li>
</ol>
</div>
</section>
<footer>
<p>Demo of Nested Tag Styling</p>
</footer>
</body>
</html>
CSS Code: styles.css
/* Resetting some default styles for all elements */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Basic body styling */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
line-height: 1.6;
}
/* Styling for the header */
header {
background-color: #3498db;
color: white;
text-align: center;
padding: 20px;
margin-bottom: 20px;
}
header h1 {
font-size: 2.5rem;
}
/* Styling the container that holds the boxes */
.container {
display: flex;
justify-content: space-around;
padding: 20px;
}
/* Styling for the .box class */
. box {
background-color: white;
padding: 20px;
width: 45%;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 8px acqua;
}
/* Styling for the h2 tags inside the boxes */
. box h2 {
color: #2c3e50;
font-size: 1.8rem;
margin-bottom: 10px;
}
/* Styling paragraphs inside the boxes */
. box p {
font-size: 1rem;
color: #555;
margin-bottom: 15px;
}
/* Styling for the span inside paragraphs */
.highlight {
color: #e74c3c; /* Red color for highlighting */
font-weight: bold;
}
/* Styling unordered list inside the box */
.box ul {
list-style-type: square;
padding-left: 20px;
margin-top: 10px;
}
/* Styling each list item inside the unordered list */
.box ul li {
color: #555;
font-size: 1rem;
}
/* Styling ordered list inside the box */
.box ol {
padding-left: 20px;
margin-top: 10px;
}
/* Styling each list item inside the ordered list */
.box ol li {
color: #555;
font-size: 1rem;
}
/* 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>
f. Design a web page by Creating and Linking to External Style Sheets.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Page with External Style Sheet</title>
<!-- Link to external CSS file -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<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>
<p>© 2024 My Website. All Rights Reserved.</p>
</footer>
</body>
</html>
2. styles.css (External CSS File)
/* Basic Reset: Remove default margin and padding for all elements */
*{
margin: 0;
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;
}
