Scribd
Upload
4 views7 pages

5 PRGM

Uploaded by

Maheshwari
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
4 views7 pages

5 PRGM

Uploaded by

Maheshwari
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/ 7

5. Develop HTML page named as “newspaper.

html” having variety of HTML semantic


elements with background colors, text-colors & size for figure, table, aside, section,
article, header, footer… etc.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>NewspaperLayout</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

header {

background-color: #4CAF50;

color: white;

padding: 20px;

text-align: center;

font-size: 2rem;

nav {

background-color: #333;

overflow: hidden;

nav a {

float: left;
display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

nav a:hover {

background-color: #ddd;

color: black;

section {

display: flex;

margin: 10px;

article {

background-color: #f9f9f9;

padding: 15px;

margin-right: 20px;

flex: 2;

aside {

background-color: #f1f1f1;

padding: 15px;

flex: 1;

footer {

background-color: #333;

color: white;
text-align: center;

padding: 10px 0;

position: fixed;

width: 100%;

bottom: 0;

figure {

margin: 0;

padding: 0;

text-align: center;

figure img {

width: 100%;

max-width: 300px;

height: auto;

figure figcaption {

color: #555;

font-size: 0.9rem;

table {

width: 100%;

border-collapse: collapse;

margin: 20px 0;

table, th, td {
border: 1px solid #ddd;

th, td {

padding: 8px;

text-align: left;

th {

background-color: #f2f2f2;

</style>

</head>

<body>

<header>

Daily News

</header>

<nav>

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

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

<ahref="#">Sports</a>

<ahref="#">Entertainment</a>

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

</nav>

<section>
<article>

<h2>Latest Headlines</h2>

<p>This is the main article section where the latest news stories are published.</p>

<figure>

<img src="news.jpg" alt="News Image">

<figcaption>Breaking news headline image</figcaption>

</figure>

<table>

<thead>

<tr>

<th>Category</th>

<th>Headline</th>

</tr>

</thead>

<tbody>

<tr>

<td>World</td>

<td>Global Summit 2024: Key Highlights</td>

</tr>

<tr>

<td>Sports</td>

<td>Olympics2024: Record-breaking Events</td>

</tr>

</tbody>

</table>

</article>
<aside>

<h3>Related News</h3>

<p>Check out the most trending stories in different categories.</p>

</aside>

</section>

<footer>

&copy; 2024 Daily News - All Rights Reserved

</footer>

</body>

</html>

Output:

Explanation:
 Header: The <header> tag is used for the title of the newspaper, styled with a
green background and white text.
 Nav: The navigation menu is built using the <nav> tag with links for different
sections of the newspaper, styled with a black background and white text.
 Section and Article: The <section> tag groups the main content, where the
<article> tag contains the main news stories, including a heading and a
paragraph.
 Aside: The <aside> element is used to display related content or side stories.
 Figure: The <figure> and <figcaption> elements are used to display an image
with a caption.
 Table: The <table> element organizes headlines by category, with styling for
borders and alternating row colors.
 Footer: The <footer> tag contains the copyright information, styled with a fixed
position at the bottom.

You might also like