Laboratory Experiment

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.

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.

-:END:-

Search This Blog

Web Technology Lab by Dr. G Anil Kumar

Why to study Web Technology ?

Laboratory Experiment - 5

Comments

Post a Comment

Popular posts from this blog

Why to study Web Technology ?