Scribd
Upload
6 views

Assignment 10 HTML Nancy

The document contains code for multiple HTML pages. The first page includes styled text and spans. The second page styles city name divs and includes the capitals London, Paris, and Tokyo. The third page repeats this content. The fourth page styles an H2 and paragraph with the class "city" and includes Paris. The fifth page adds anchors to jump to chapters and includes chapters 1-5.

Uploaded by

Nancy Kumari
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
6 views

Assignment 10 HTML Nancy

The document contains code for multiple HTML pages. The first page includes styled text and spans. The second page styles city name divs and includes the capitals London, Paris, and Tokyo. The third page repeats this content. The fourth page styles an H2 and paragraph with the class "city" and includes Paris. The fifth page adds anchors to jump to chapters and includes chapters 1-5.

Uploaded by

Nancy Kumari
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/ 5

ASSIGNMENT-10

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
color: red;
}
</style>
</head>
<body>
<p style="font-size: xx-large;"><b>My <span>Important</span> Heading</b></p>
<p>This is some <span>important</span> text.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.city{
border: 2px solid black;
background-color: orangered;
font-size: larger;
flex-direction: row;
height: 50px;
width: 500px;
color: white;
align-items: center;
justify-content: left;
display: flex;
margin: 20px;
}
</style>
</head>
<body>
<div class="city"><b>London</b></div><br>
<p>London is the capital of England.</p>
<div class="city"><b>Paris</b></div><br>
<p>Paris is the capital of France.</p>
<div class="city"><b>Tokyo</b></div><br>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.city{
border: 2px solid black;
background-color: orangered;
font-size: larger;
flex-direction: row;
height: 50px;
width: 500px;
color: white;
align-items: center;
justify-content: left;
display: flex;
margin: 20px;
}
</style>
</head>
<body>
<div class="city"><b>London</b></div><br>
<p>London is the capital of England.</p>
<div class="city"><b>Paris</b></div><br>
<p>Paris is the capital of France.</p>
<div class="city"><b>Tokyo</b></div><br>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
4. Design the following output.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.city{
border: 2px solid black;
background-color: orangered;
flex-direction: row;
height: 50px;
width: 500px;
color: white;
align-items: center;
justify-content: left;
display: flex;
margin: 20px;
}
</style>
</head>
<body>
<div><h2 class="city">Paris</h2></div>
<div><p class="city">Paris is the capital of France.</p></div>
</body>
</html>
<!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>
<a href="#c4">Jump to Chapter 4</a><br>
<a href="#c5">Jump to Chapter 5</a>
<h1>Chapter 1</h1>
<p>This chapter explains ba bla bla</p>
<h1>Chapter 2</h1>
<p>This chapter explains ba bla bla</p>
<h1>Chapter 3</h1>
<p>This chapter explains ba bla bla</p>
<h1 id="c4">Chapter 4</h1>
<p>This chapter explains ba bla bla</p>
<h1 id="c5">Chapter 5</h1>
<p>This chapter explains ba bla bla</p>
</body>
</html>

You might also like