Laboratory Experiment - 5
- Get link
- X
- Other Apps
<!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>
© 2024 Daily News - All Rights Reserved
</footer>
</body>
</html>
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.
Viva-Voce Questions:
- What
is the purpose of the <header> tag?
Answer: The <header> tag is used to define the header of a document or section, usually containing introductory content or navigation links. - What
is the semantic use of the <article> tag?
Answer: The <article> tag is used to represent a self-contained piece of content that could stand alone, such as a news article. - Why
do we use the <figure> tag?
Answer: The <figure> tag is used to group media elements (like images or illustrations) along with a caption, providing semantic meaning to the media. - What
does the <nav> tag represent?
Answer: The <nav> tag is used to define a block of navigation links to other parts of the website. - What
is the difference between <section> and <article>?
Answer: The <section> tag is used to group related content, while the <article> tag represents independent content like news stories or blog posts. - What
is the role of the <aside> element?
Answer: The <aside> element is used for content related to the main article but not part of it, often used for sidebars or related links. - What
does the <footer> tag do?
Answer: The <footer> tag defines the footer section of a document, typically containing copyright information or links to important documents. - How
do you style text color in CSS?
Answer: Text color is styled using the color property in CSS. - What
property is used to set background color in CSS?
Answer: The background-color property is used to set the background color. - What
is the purpose of the flex property in the CSS layout?
Answer: The flex property is part of the CSS Flexbox layout, used to make responsive layouts by adjusting the width of flex items based on available space. - How
is the <table> tag used?
Answer: The <table> tag is used to create a table structure, with nested <tr>, <th>, and <td> elements for rows, headers, and data cells. - What
is the default display behavior of the <nav> tag?
Answer: The <nav> tag behaves like a block-level element by default. - Why
is semantic HTML important?
Answer: Semantic HTML helps improve accessibility, SEO, and the overall structure of web pages by using meaningful tags. - What
is the use of the <caption> tag in a table?
Answer: The <caption> tag provides a title or brief description of the table content. - What
is the difference between the <th> and <td> tags?
Answer: <th> defines a table header cell, while <td> defines a regular table data cell. - How
can you center an image using CSS?
Answer: You can center an image using CSS by setting the margin: 0 auto; or using Flexbox with justify-content: center. - What
does the © symbol in the footer represent?
Answer: The © symbol is an HTML entity representing the copyright symbol (©). - How
do you apply a border to a table in CSS?
Answer: You apply a border to a table by using the border property on <table>, <th>, and <td> elements. - What
is the position: fixed; property used for?
Answer: The position: fixed; property is used to fix an element in place relative to the browser window, even when the page is scrolled. - How
do you adjust the padding of an element in CSS?
Answer: The padding of an element is adjusted using the padding property in CSS.
- Get link
- X
- Other Apps
Comments
Post a Comment