HTML and Excel- Paper-3
ICT(0417)
By Anushka Prakash
1. HTML in the Content Layer
Head Section
Attach external CSS using <link rel="stylesheet" href="style.css">.
Use <meta> tags for:
o Charset: <meta charset="UTF-8">
o Description: <meta name="description" content="Your Page
Description">
o Keywords: <meta name="keywords" content="keyword1, keyword2">
o Author: <meta name="author" content="Your Name">
o Viewport: <meta name="viewport" content="width=device-width,
initial-scale=1.0">
Define the default target for links: <base target="_blank"> (opens links in a
new tab).
Body Section
Tables:
o <table>, <thead>, <tbody>, <tr>, <th>, <td>
o Adjust cells using rowspan and colspan.
o Define table width, height in pixels or percentages.
o Apply inline styles: style="border: 1px solid black; width: 50%;".
Objects:
o Insert images: <img src="image.jpg" alt="Description" width="300"
height="200">
o Insert audio: <audio controls><source src="audio.mp3"
type="audio/mpeg"></audio>
o Insert video: <video controls width="400"><source src="video.mp4"
type="video/mp4"></video>
Div & Text Styling:
o Use <div> to group elements and apply CSS classes.
o Apply heading styles <h1>, <h2>, <h3>.
o Use <p> for paragraphs and <li> for lists.
Bookmarks & Hyperlinks:
o Create a bookmark: <a id="section1"></a>
o Link to a bookmark: <a href="#section1">Go to Section 1</a>
o Link to another page: <a href="page2.html">Next Page</a>
o Link to an external website: <a href="https://www.example.com"
target="_blank">Visit Site</a>
o Email link: <a href="mailto:
[email protected]">Send Email</a>
2. CSS in the Presentation Layer
Creating Stylesheets
Use external CSS: style.css
Attach in <head>: <link rel="stylesheet" href="style.css">
CSS Properties
Background:
o background-color: #f0f0f0;
o background-image: url("background.jpg");
Font Styling:
o font-family: Arial, sans-serif;
o font-size: 16px;
o color: #333;
o text-align: center;
o font-weight: bold;
o font-style: italic;
Table Styling:
o table { border-collapse: collapse; width: 100%; }
o th, td { border: 1px solid black; padding: 8px; text-align: left; }
Classes:
o .highlight { background-color: yellow; font-weight: bold; }
o .center { text-align: center; }
Lists
Ordered List: <ol><li>Item 1</li><li>Item 2</li></ol>
Unordered List: <ul><li>Item 1</li><li>Item 2</li></ul>
Styling: ul { list-style-type: square; }
Adding Comments in CSS
Use /* Comment here */ to explain sections of CSS.
Saving Styles
Save as style.css with proper formatting.
Ensure correct hierarchy of CSS rules for proper application.
3. File Paths and Hyperlinking
File Paths
Relative Path: Used for linking local files.
o <a href="folder/page.html">Go to Page</a>
Absolute Path: Should not be used for local files.
o Example (Avoid): <a
href="C:/Users/Username/Documents/page.html">.
Anchors & Bookmarks
Use <a id="bookmark"></a> to create a bookmark.
Link to it using <a href="#bookmark">Jump to Section</a>.
Targeting Links
_self (default, opens in the same window)
_blank (opens in a new tab)
_parent (opens in parent frame)
_top (opens in full window)
Named window: <a href="page.html" target="myWindow">Open in
myWindow</a>
3. Spreadsheet Modeling
Creating and Editing a Spreadsheet Model
Insert/Delete: Cells, rows, columns.
Merge cells for better layout.
Create formulae using cell references.
Replicate formulae using absolute and relative cell references.
Use arithmetic operators: +, -, *, /, ^ (indices).
Define named cells and ranges for easier reference.
Functions & Formulae
Basic Functions:
o SUM(range), AVERAGE(range), MAX(range), MIN(range).
o ROUND(value, decimals), INT(value), COUNT(range).
Lookup Functions:
o LOOKUP(value, range), VLOOKUP(value, table, col_index, false).
o HLOOKUP(value, table, row_index, false), XLOOKUP(value,
lookup_array, return_array).
Conditional Logic:
o IF(condition, value_if_true, value_if_false).
o Nested functions for complex operations.
Sorting and Filtering Data
Sort by single/multiple criteria (ascending/descending).
Search using AND, OR, NOT, >, <, =, >=, <=, <>.
Use wildcards * and ? for flexible searches.
Presenting Data
Display formulae or values.
Adjust row height, column width, wrap text.
Hide/display rows and columns.
Format cells: text color, cell color, bold, italic, shading.
Numeric formatting: decimal places, currency, percentage.
Apply conditional formatting based on cell values.
Printing & Page Layout
Set page orientation: Portrait or Landscape.
Define print area and control number of pages.
Show/hide gridlines, row and column headings.
Summary of Best Practices
Use correct HTML structure for web pages.
Apply CSS for proper styling and presentation.
Organize and structure spreadsheet data efficiently.
Use appropriate functions and formulae for calculations.
Validate data for accuracy and formatting.
Ensure print settings and display properties are optimized.
