Unit-IV: Organizing a Page's Content with Lists, Figures, and Various Organizational Elements; Tables and CSS Layout; Links and Images

 

Unit-IV: Organizing a Page's Content with Lists, Figures, and Various Organizational Elements; Tables and CSS Layout; Links and Images

This unit covers essential HTML and CSS techniques for structuring and presenting web content effectively.

1. Organizing a Page's Content with Lists, Figures, and Various Organizational Elements

This section focuses on using HTML elements to create structured content and how CSS can be used to style them, along with understanding CSS selection and inheritance.

Lists (<ul>, <ol>, <dl>, <li>, <dt>, <dd>):

·         Unordered List (<ul>): For items where order doesn't matter (e.g., ingredients for a dish).

·         Ordered List (<ol>): For items where order is important (e.g., steps in a recipe).

·         Description List (<dl>): For terms and their descriptions.

·         <li> is a list item, <dt> is a description term, and <dd> is a description detail.

Example (HTML):

HTML

<h3>My Favorite Fruits (Unordered)</h3>

<ul>

    <li>Apple</li>

    <li>Banana</li>

    <li>Orange</li>

</ul>

 

<h3>Steps to Bake a Cake (Ordered)</h3>

<ol>

    <li>Preheat oven.</li>

    <li>Mix ingredients.</li>

    <li>Bake for 30 minutes.</li>

</ol>

 

<h3>Glossary (Description)</h3>

<dl>

    <dt>HTML</dt>

    <dd>HyperText Markup Language.</dd>

    <dt>CSS</dt>

    <dd>Cascading Style Sheets.</dd>

</dl>

Descendant Selector (CSS): Selects all elements that are nested within another specified element.

·         Syntax: ancestor_selector descendant_selector { properties; }

Example (CSS):

CSS

/* Styles all <li> elements that are inside a <ul> */

ul li {

    color: darkgreen;

    font-weight: bold;

}

 

/* Styles all <dd> elements that are inside a <dl> */

dl dd {

    font-style: italic;

}

Figure with picture and caption (<figure>, <figcaption>, <img>):

·         <figure> is for self-contained content, often an image, code, or video.

·         <figcaption> provides a caption for the <figure>'s content.

·         <img> is the actual image.

Example (HTML):        

HTML

<figure>

    <img src="https://via.placeholder.com/400x200" alt="Placeholder image of a landscape">

    <figcaption>A scenic view from the mountains, demonstrating image embedding.</figcaption>

</figure>

Example (CSS for styling):

CSS

figure {

    border: 1px solid #ccc;

    padding: 10px;

    margin: 20px auto; /* Center the figure */

    width: fit-content; /* Adjust width to content */

    text-align: center;

}

figure img {

    max-width: 100%; /* Ensure image is responsive */

    height: auto;

    display: block; /* Remove extra space below image */

    margin-bottom: 5px;

}

figcaption {

    font-style: italic;

    color: #555;

    font-size: 0.9em;

}

Organizational Elements (<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>): Semantic HTML5 tags that provide structure and meaning, improving accessibility and SEO.

Example (HTML Structure):

HTML

<body>

    <header>

        <h1>My Website</h1>

        <nav>

            <ul>

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

                <li><a href="/about">About</a></li>

                <li><a href="/contact">Contact</a></li>

            </ul>

        </nav>

    </header>

 

    <main>

        <section>

            <h2>Welcome to Our Site!</h2>

            <p>This is the main content of our section.</p>

        </section>

 

        <article>

            <h3>Blog Post Title</h3>

            <p>Content of a blog post, self-contained.</p>

            <aside>

                <h4>Related Articles</h4>

                <ul>

                    <li><a href="#">Article 1</a></li>

                    <li><a href="#">Article 2</a></li>

                </ul>

            </aside>

        </article>

    </main>

 

    <footer>

        <p>&copy; 2025 My Website. All rights reserved.</p>

    </footer>

</body>

Example (CSS for basic layout):

CSS

body {

    font-family: Arial, sans-serif;

    margin: 0;

    line-height: 1.6;

}

header, footer {

    background-color: #333;

    color: white;

    padding: 1em;

    text-align: center;

}

nav ul {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex; /* For horizontal nav */

    justify-content: center;

}

nav li a {

    color: white;

    text-decoration: none;

    padding: 0 15px;

}

main {

    padding: 20px;

    display: flex; /* Example for main layout with aside */

    gap: 20px;

}

section, article {

    flex: 3; /* Take more space */

    background-color: #f4f4f4;

    padding: 15px;

    border-radius: 5px;

}

aside {

    flex: 1; /* Take less space */

    background-color: #e9e9e9;

    padding: 15px;

    border-radius: 5px;

}

·          

·          

User agent stylesheet: The browser's default styles (e.g., <h1> is bold and large, <ul> has bullet points). You override these with your own CSS.

Child selector (CSS): Selects only direct children of an element.

·         Syntax: parent_selector > child_selector { properties; }

Example (CSS):

CSS

/* Only styles <li> elements directly inside <nav> ul, not nested lists */

nav > ul > li {

    display: inline-block; /* Makes nav items horizontal */

    margin-right: 20px;

}

·         CSS Inheritance: Properties like color and font-family are inherited by child elements from their parents unless explicitly overridden.

Example (CSS):

CSS

body {

    font-family: sans-serif; /* All text on page inherits this font */

    color: #333; /* All text on page inherits this color */

}

 

footer {

    color: white; /* Footer text overrides the inherited color */

}

2. Tables and CSS Layout

This section covers HTML tables for tabular data and how CSS can be used to style them.

Data tables vs Layout tables:

·         Data tables: Correct use. For presenting genuine tabular data (e.g., product lists, financial figures).

·         Layout tables: Incorrect use. Using tables for overall page layout is an outdated practice. Use CSS (Flexbox, Grid) for layout.

Table elements (<table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, <caption>):

·         <table>: The main table container.

·         <thead>: Table header group.

·         <tbody>: Table body group.

·         <tfoot>: Table footer group.

·         <tr>: Table row.

·         <th>: Table header cell (bold, centered by default).

·         <td>: Table data cell.

·         <caption>: Table title/caption.

Example (HTML):

HTML

<table>

    <caption>Monthly Sales Report</caption>

    <thead>

        <tr>

            <th>Month</th>

            <th>Product A Sales</th>

            <th>Product B Sales</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>January</td>

            <td>RS: 1,500</td>

            <td>RS: 2,200</td>

        </tr>

        <tr>

            <td>February</td>

            <td>RS: 1,800</td>

            <td>RS: 2,500</td>

        </tr>

    </tbody>

    <tfoot>

        <tr>

            <td>Total</td>

            <td>RS: 3,300</td>

            <td>RS: 4,700</td>

        </tr>

    </tfoot>

</table>

·         Format table (CSS):

Example (CSS for styling tables):

CSS

table {

    width: 80%;

    border-collapse: collapse; /* Collapses borders between cells */

    margin: 20px auto;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

caption {

    font-size: 1.2em;

    margin-bottom: 10px;

    font-weight: bold;

    color: #333;

}

th, td {

    border: 1px solid #ddd;

    padding: 8px;

    text-align: left;

}

th {

    background-color: #4CAF50;

    color: white;

    text-align: center;

}

tr:nth-child(even) { /* Zebra striping */

    background-color: #f2f2f2;

}

tr:hover {

    background-color: #ddd;

}

tfoot {

    font-weight: bold;

    background-color: #eee;

}

3. Links and Images

This section focuses on implementing hyperlinks and incorporating various image formats into web pages.

Implement a link with the <a> element: The anchor <a> element creates a hyperlink.

·         href attribute: Specifies the destination URL.

Example (HTML):

HTML

<p>Visit <a href="https://www.google.com/">Google</a> for search.</p>

<p>Learn more <a href="about.html">About Us</a>.</p>

Different types of href attribute Values:

·         Absolute URLs: Full address, including protocol and domain.

HTML

<a href="https://www.example.com/products/item1.html">Product 1</a>

·         Relative URLs: Path relative to the current file.

HTML

<a href="contact.html">Contact Us</a>

<a href="docs/manual.pdf">User Manual</a>

<a href="../index.html">Back to Home</a>

<a href="/images/logo.png">View Logo</a>

·         Email links (mailto:): Opens user's email client.

HTML

<a href="mailto:support@example.com?subject=Inquiry%20from%20Website">Email Support</a>

·         Phone links (tel:): Initiates a phone call (on mobile devices).

HTML

<a href="tel:+1234567890">Call Us</a>

Implement a link that jumps to a particular location within a web page (Fragment Identifiers):

·         Add an id to the target element.

·         Link to that id using #.

Example (HTML):

HTML

<p><a href="#about-us">Jump to About Us</a></p>

 

<h2 id="about-us">About Our Company</h2>

<p>Details about the company...</p>

Element's target attribute: Controls where the linked document opens.

·         _self (default): Opens in the same tab/window.

·         _blank: Opens in a new tab/window.

·         _parent: Opens in the parent frame (if using frames).

·         _top: Opens in the full body of the window (breaks out of frames).

Example (HTML):

HTML

<p><a href="https://www.w3.org/" target="_blank">Visit W3C (opens in new tab)</a></p>

Understand the concepts behind GIF, JPEG, and PNG bitmap image formats:

GIF:

·         Best for: Simple graphics, logos with few colors, animated images (e.g., loading spinners, simple memes).

·         Characteristics: 256 colors max, lossless compression, supports transparency (fully opaque or fully transparent), supports animation.

JPEG (or JPG):

·         Best for: Photographs, complex images with many colors and subtle gradients.

·         Characteristics: Millions of colors, lossy compression (smaller file size, but some quality loss), no transparency, no animation.

PNG:

·         Best for: Logos, icons, illustrations, images requiring high quality and/or varying transparency (e.g., a product image with a soft shadow).

·         Characteristics: Millions of colors (PNG-24) or 256 colors (PNG-8), lossless compression, supports alpha channel transparency (partial transparency), generally no animation (APNG exists but less common).

Implement bitmap image elements within a web page (<img>):

·         src: Path to the image file.

·         alt: Essential alternative text for accessibility and when image fails to load.

·         width, height: Optional, but recommended for browser rendering performance.

Example (HTML):

HTML

<img src="images/sunset.jpg" alt="A beautiful sunset over the ocean" width="600" height="400">

<img src="images/logo.png" alt="Company logo" width="150">

Implement SVG image elements within a web page (<svg> or <img> with .svg):

·         SVG (Scalable Vector Graphics): Vector-based, scales without pixelation, can be styled with CSS and manipulated with JavaScript.

·         Methods:

Inline SVG (recommended for complex styling/animation): Embed the SVG code directly in HTML.

HTML

<svg width="50" height="50" viewBox="0 0 100 100">

    <circle cx="50" cy="50" r="40" fill="#ff6600" stroke="#333" stroke-width="5"/>

    <text x="50" y="55" font-family="Arial" font-size="30" fill="white" text-anchor="middle">A</text>

</svg>

<img> tag (simpler, but less CSS control over internal SVG parts):

HTML

<img src="images/icon-scalable.svg" alt="Scalable icon">

Comments

Post a Comment

Popular posts from this blog

digital marketing ppt-u1

 ppt unit 1-1   download unit 1-2 download unit 2-1 download unit 2-2 download Migrating from Traditional Channels to Digital Channels Migrating from traditional to digital channels can be a significant undertaking for businesses, but it can also lead to significant benefits, such as increased reach, improved customer engagement, and better data-driven decision-making. Here's a breakdown of the process: 1. Define Your Goals and Objectives: What are you hoping to achieve with your digital presence? What specific metrics will you use to measure success? Who is your target audience, and what are their digital habits? 2. Assess Your Current Situation: What are your strengths and weaknesses in terms of digital marketing? What resources do you have available (budget, personnel, technology)? What are the potential risks and challenges of migrating to digital? 3. Choose the Right Digital Channels: Social Media: Which platforms are your target audience most active on? S...
Read more

SOFTWARE

Image
 01 Winrar -64-bit version-623 Download link click- 02 chrome setup Download link click- 03 Turbo-c Download link click-  Dev  C , C ++ 04 typing master 11 Download link click- 05 java software 64-bit version-8 Download link click-               64-bit                                        32-bit        06 Adobe-version-10 Download link click- 07 sublime text -64-version-4 Download link click- 08 python -64-bit-version-3.8.6 -32-bit-version-3.8.10 Download link click- 64-bit                                                  32-bit     09 MS-office 2007 Download link click-    Download link click-wps-office-2020    10 xampp ...
Read more

cn lab

Image
download   01 programs import java.net. * ; import java.io.*; class Ports { public static void main (String [] args) throws Exception { InetAddress h = InetAddress.getLocalHost(); String host =h. getHostName(); String haddr = h. getHostAddress();  System.out.println("\nHost Name: :"+ host);  System.out.println("In Host Address:: "+haddr); for (int i=0; i < 1024; i++) { Socket s=null; try  { s = new Socket ((host), i); System.out.println(" port "+ i + "Active"); } catch (SocketException se) { } catch(Exception e) { System.out.println(" Error...."); } } } } Output:- 02 -program 2 a) import java.io.*; import java.net. *; import java.lang. * ; class chats extends Thread { public static void main (String args []) { try { ServerSocket ss = new ServerSocket (111);  System.out.println ("server ready ");  Socket s = ss.accept (...
Read more

Computer Operations and Performing - D L Unit-1-1

Image
unit-1-1 download   unit-1-2 download   unit-1-3 download  unit-1-1 download  DIGITAL LITERACY syllabus :    Computer      A computer is a programmable electronic device that processes data to perform various tasks. It can store, retrieve, and process information and it is capable of executing a wide range of operations based on instructions provided to it. Computers come in various forms, including personal computers, laptops, servers, and embedded systems. 1.       Central Processing Unit (CPU): Often referred to as the brain of the computer, the CPU performs calculations and executes instructions.   2.       Memory (RAM): Random Access Memory is used to temporarily store data that the CPU needs to access quickly. It is volatile memory, meaning it loses its contents when the power is turned off.   3.       Storage: This includes devices l...
Read more

DBMS Degree Lab Records

Image
  PRACTICAL-I ER-DIAGRAM FOR TRAIN SERVICES  DRAW   ER-DIAGRAM FOR TRAIN SERVICES IN A RAILWAY STATION                              An Entity can be any object, place, person or class. Entity is represented using rectangles. An “ Entity–Relationship Model’’ ( ER- model ) modelling was developed for database design by “ Peter Chen ” and published in a “1976”. An ER- model describes about the inter-related things of interest in a specific domain of knowledge. An ER model is composed of entity types and specifies relationships that can exist between instances of those entity types. RAILWAY MANAGEMENT SYSTEM :-     ·         Railway management System is the computerized system of reserving the seats of train seats in advanced . ·      On-line reservation has made t...
Read more

DS-Record-mca-04) write a program for evaluating a given postfix expression using stack.

Image
    Program:-04   AIM:- write a program for evaluating a given postfix expression using stack. #include<stdio.h> #include<conio.h> int stack[20]; int top = -1; void push(int x) { stack[++top] = x; } int pop() { return stack[top--]; } void main() { char exp[20]; char *e; int n1,n2,n3,num; clrscr(); printf("\nEnter the expression :: "); scanf("%s",exp); e = exp; while(*e != '\0') { if(isdigit(*e)) { num = *e - 48; push(num); } else { n1 = pop(); n2 = pop(); switch(*e) { case '+': { n3 = n1 + n2; break; } case '-': { n3 = n2 - n1; break; } case '*': { ...
Read more

Unit 2: Foundations of Ownership, Security Related Concepts in Blockchain

  Unit 2: Foundations of Ownership, Security Related Concepts in Blockchain Foundations of Ownership In traditional systems, ownership is often documented and verified by centralized authorities (e.g., land registries, banks). In blockchain, ownership is established and proven through cryptographic methods, primarily using public-key cryptography . Public and Private Keys: Each user on a blockchain network has a unique pair of cryptographic keys: a public key and a private key. The public key acts as an address, similar to an account number, visible to everyone. It's used to receive assets or data. The private key is a secret code that grants control over the assets associated with the public key. Only the person possessing the private key can authorize transactions from that address. Digital Signatures: To prove ownership or authorize a transaction, a user digitally "signs" a message or transa...
Read more

Unit-1 Foundations of Software Systems and Blockchain

  Unit 1: Foundations of Software Systems and Blockchain 1. Layers of a Software System Software systems are typically organized into layers to separate responsibilities, improve maintainability, and allow independent scaling. Common layers include: Presentation Layer: Handles user interface (UI) and user interaction (e.g., web pages, mobile app screens). Application/Business Logic Layer: Contains the core business rules and orchestrates data flow, processing user requests (the "brains" of the application). Data Access Layer (DAL): Provides an interface for the application to interact with data storage, abstracting database complexities. Data Layer: The actual persistent storage for data (e.g., databases, file systems). This layered approach promotes modularity and makes systems easier to develop, test, and update. 2. Integrity Integrity in software systems ensures that data is accurate, consistent, and trustworth...
Read more

Access the Internet to Browse Infromation & E-Mail Operation- D L Unit-2-1

    1. what is internet and what are the applications        The internet is a global network of interconnected computers and other electronic devices that communicate with each other using standardized protocols. It allows users to access and share information, resources, and services across vast distances. The internet facilitates various activities such as communication, research, entertainment, commerce, and much more. Key components of the internet include: 1. **Network Infrastructure** :       This comprises physical and virtual components, including cables, routers, switches, servers, and data centers, that enable the transmission of data across the network. 2. **Protocols** :       Protocols are rules and standards that govern how data is transmitted, routed, and received across the internet. Examples include TCP/IP (Transmission Control Protocol/Internet Protocol), HTTP (Hypertext Transfer Protoc...
Read more

6)what are the various service of internet and protocols ICT-unit-1

Image
The Internet offers a wide range of services that cater to communication, information sharing, entertainment, and business operations. Below are some of the key services provided by the Internet: 1. World Wide Web (WWW) The World Wide Web is a vast collection of interlinked documents, websites, and multimedia content accessible through web browsers like Chrome, Firefox, and Safari. Uses: Accessing websites, reading articles, watching videos, conducting research, and browsing online content. Protocols: Primarily uses HTTP (Hypertext Transfer Protocol) and HTTPS (for secure communication). 2. Email (Electronic Mail) Email allows users to send and receive messages electronically over the Internet. Uses: Communication between individuals or organizations, file sharing, and business correspondence. Protocols: SMTP (Simple Mail Transfer Protocol), IMAP (Internet Message Access Protocol), and POP3 (Post Office Protocol). 3. File Transfer (FTP) The File Transfer Protocol (FTP) allows users to ...
Read more