Scribd
Upload
5 views6 pages

FSD Experiments

The document contains multiple HTML examples showcasing different elements such as anchor tags, semantic HTML structure, and profile links with images. It includes styling with CSS and demonstrates the layout of a simple website with a header, navigation, main content, sidebar, and footer. Each section highlights various aspects of web development, including the importance of HTML and CSS.

Uploaded by

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

FSD Experiments

The document contains multiple HTML examples showcasing different elements such as anchor tags, semantic HTML structure, and profile links with images. It includes styling with CSS and demonstrates the layout of a simple website with a header, navigation, main content, sidebar, and footer. Each section highlights various aspects of web development, including the importance of HTML and CSS.

Uploaded by

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

Fsd experiments

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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


scale=1.0">

<title>Document</title>

</head>

<body>

<h1>anchor tags</h1>

<a href="www.google.com" target="_blank">google in another tab


</a>

<a href="www.google.com" target="_self">google in self tab</a>

<a href="www.google.com" target="_top">google in entire browser


window </a>

<a href="www.google.com" target="_parent">google in parent


window</a>

</body>

</html>

2a

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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


scale=1.0">

<title>Semantic HTML Example</title>

<style>

body {
font-family: Arial, sans-serif;

margin: 0;

padding: 0;

header {

background: #0073e6;

color: white;

text-align: center;

padding: 10px;

nav {

background: #005bb5;

padding: 10px;

text-align: center;

nav a {

color: white;

text-decoration: none;

margin: 0 10px;

main {

display: flex;

padding: 20px;

section {

flex: 2;

padding: 10px;

aside {
flex: 1;

background: #f4f4f4;

padding: 10px;

article {

background: #e6f2ff;

padding: 10px;

margin-bottom: 10px;

footer {

background: #333;

color: white;

text-align: center;

padding: 10px;

margin-top: 10px;

figure {

text-align: center;

img {

width: 100%;

max-width: 300px;

.highlight {

color: red;

font-weight: bold;

</style>

</head>
<body>

<header>

<h1>Welcome to My Website</h1>

</header>

<nav>

<a href="#">Home</a>

<a href="#">About</a>

<a href="#">Services</a>

<a href="#">Contact</a>

</nav>

<main>

<section>

<h2>Main Content Section</h2>

<article>

<h3>Article 1: The Importance of HTML</h3>

<p>HTML is the backbone of web development. It provides


structure to web pages.</p>

<figure>

<img src="html-logo.png" alt="HTML Logo">

<figcaption>HTML5 Logo</figcaption>

</figure>

</article>

<article>

<h3>Article 2: Styling with CSS</h3>

<p>CSS helps in designing beautiful web pages. It provides


layout and styles.</p>
</article>

</section>

<aside>

<h3>Sidebar Content</h3>

<p>Useful Links:</p>

<ul>

<li><a href="#">HTML Tutorial</a></li>

<li><a href="#">CSS Guide</a></li>

<li><a href="#">JavaScript Tips</a></li>

</ul>

</aside>

</main>

<footer>

<p>© 2025 My Website | Designed by <span


class="highlight">Kavya</span></p>

</footer>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Profile Links with Images</title>

</head>
<body>

<h1>Our Profiles</h1>

<!-- Your Image -->

<a href="https://your-profile-link.com" target="_blank">

<img src="your-image.jpg" alt="My Photo" width="200"


height="200">

</a>

<p>This is me!</p>

<!-- Friend's Image -->

<a href="https://friends-profile-link.com" target="_blank">

<img src="friend-image.jpg" alt="Friend's Photo" width="200"


height="200">

</a>

<p>This is my friend!</p>

</body>

</html>

You might also like