Scribd
Upload
61 views4 pages

File 8

Uploaded by

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

File 8

Uploaded by

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

Question : Make a web page having following features

1. Create an HTML document with following formatting - Bold, italics, Underline,


Colors, Headings,

Title, Font and Font Width, Background, Paragraph, Line Brakes, Horizontal Line
(Covered in class) Blinking text as well as marquee text (Explore on your own)
Complete This by 30 Sept

Ans. HTML Document: webpage_with_formatting.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 Formatting</title>
<style>
body {
background-color: #f0f8ff; /* Light blue background */
font-family: Arial, sans-serif;
color: #333; /* Dark text color */
}

h1 {
font-size: 36px;
color: #2e8b57; /* Green color for Heading 1 */
}

h2 {
font-size: 30px;
color: #4682b4; /* Steel Blue color for Heading 2 */
}

p {
font-size: 18px;
line-height: 1.6;
color: #000;
}

.bold-text {
font-weight: bold;
}

.italic-text {
font-style: italic;
}

.underline-text {
text-decoration: underline;
}

.blinking-text {
animation: blink 1s step-end infinite;
}

@keyframes blink {
50% {
opacity: 0;
}
}

.marquee-text {
font-size: 20px;
color: #ff6347; /* Tomato color for Marquee */
font-weight: bold;
}

hr {
border: 1px solid #000;
margin: 20px 0;
}
</style>
</head>
<body>

<h1>Web Page with Various HTML Formatting</h1>

<h2>Introduction to HTML Formatting</h2>

<p>This is a <span class="bold-text">bold</span> paragraph. You can <span


class="italic-text">italicize</span> text and you can also <span class="underline-
text">underline</span> the text.</p>

<p>This paragraph contains <span class="bold-text">bold</span>, <span


class="italic-text">italic</span>, and <span
class="underline-text">underlined</span> text.</p>

<h3>Font Style and Width</h3>


<p style="font-family: 'Courier New', Courier, monospace; font-size:
20px;">This text uses the Courier font, which is a monospace font, and it is set to
a larger size of 20px.</p>

<p style="font-weight: 700; font-size: 22px;">This text has a font weight of


700, which makes it bold, and it is also sized at 22px.</p>

<h3>Text Colors</h3>
<p style="color: blue;">This text is blue.</p>
<p style="color: red; font-size: 18px;">This text is red and has a font size of
18px.</p>

<h3>Background Color</h3>
<p style="background-color: #ffff00; padding: 10px;">This paragraph has a
yellow background with padding.</p>

<h3>Line Breaks and Horizontal Line</h3>


<p>Paragraph 1.<br>Paragraph 2 after a line break.<br>Paragraph 3 after another
line break.</p>

<hr>

<h3>Blinking Text</h3>
<p class="blinking-text">This text blinks continuously.</p>

<h3>Marquee Text</h3>
<marquee class="marquee-text" behavior="scroll" direction="left">This is a
scrolling marquee text!</marquee>
<footer>
<p>Created by: Your Name</p>
</footer>

</body>
</html>

Explanation:

1. Bold Text:

Using <span class="bold-text">Bold</span> for making text bold.

The font-weight: bold; CSS style is applied.

2. Italic Text:

Using <span class="italic-text">Italic</span> to apply italics.

The font-style: italic; CSS style is applied.

3. Underline Text:

Using <span class="underline-text">Underline</span> to underline text.

The text-decoration: underline; CSS style is applied.

4. Colors:

Text colors are applied using the color property in CSS. Example: <p style="color:
blue;">This text is blue.</p>.

5. Font and Font Width:

The font-family and font-weight styles are used to change the font type and font
weight, respectively. For example, font-family: 'Courier New', Courier, monospace;
and font-weight: 700;.

6. Background:

The background-color property is used to set the background color of elements.


Example: <p style="background-color: #ffff00;">.

7. Paragraphs and Line Breaks:

Line breaks are added using the <br> tag in HTML. Example: Paragraph
1.<br>Paragraph 2 after a line break.
8. Horizontal Line:

The <hr> tag is used to add a horizontal line across the page.

9. Blinking Text:

The blinking effect is created using CSS animations. The @keyframes rule is used to
create the blinking effect, with opacity: 0; at 50% of the animation to make the
text disappear, and back to visible in the next cycle.

10. Marquee Text:

The <marquee> tag is used to create scrolling text. The attribute behavior="scroll"
and direction="left" make the text scroll from right to left.

How to Use:

1. Copy and paste the code into a file and save it as webpage_with_formatting.html.

2. Open the file in a web browser to see the results.

Expected Output:

A web page with various types of text formatting, including bold, italic,
underline, colored text, and background.

A blinking text effect using CSS.

A scrolling marquee text.

Horizontal lines and proper text formatting as specified.

This document covers a range of formatting techniques in HTML and CSS.

You might also like