COM5EJ307 • Computer Application in Business

Module 2

Calicut University • FYUGP B.Com Elective•Course Code: COM5EJ307 (4)•Semester V Computer Applications Specialization

Module II: HTML, Cascading Style Sheets & Web Publishing

Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) represent the foundational building blocks of the digital economy, enabling enterprises to build structured, interactive, and visually compelling web applications. Module II provides an exhaustive, textbook-depth exposition across two extensive units: 1. Elements of HTML & Styling: Document anatomy, document type declaration, tags vs attributes, formatting text, creating ordered, unordered, and definition lists, tabular data representation (table rows, headers, cells, merging via colspan and rowspan), hyperlinks (absolute, relative, email, bookmarks), multimedia integration (images, audio, video), and Cascading Style Sheets (inline, internal, external, CSS selectors, Box Model, and typography); 2. Web Publishing and Hosting Lifecycle: Domain name registration, Top-Level Domains (TLDs), web hosting architectures (Shared, VPS, Dedicated, Cloud), File Transfer Protocol (FTP/SFTP) deployment, directory organization, content management themes, and leveraging digital web properties for business growth, search engine optimization (SEO), and conversion funnels.

Key Topics Prescribed in this Module

✓HTML5 Anatomy: <!DOCTYPE html>, <html>, <head>, <meta charset>, viewport & <body>

✓Tag Typology: Paired container tags vs empty/void self-closing tags & global attributes

✓Display Models: Block-level elements (full width) vs inline elements (content flow)

✓Semantic Typography: Physical vs semantic formatting (<b> vs <strong>, <i> vs <em>, <mark>)

✓Lists & Tables: <ul>, <ol>, <dl> lists, tabular data, <thead>, <tbody>, colspan & rowspan

✓Hyperlinks & Media: Absolute/relative URLs, bookmarks, <img alt>, <audio> & <video>

✓CSS Architecture: Inline, Internal, External CSS, element/class/id selectors & Box Model

✓Publishing Lifecycle: Domain registration, DNS mapping, FTP/SFTP deployment & public_html/

✓Hosting & Growth: Shared vs VPS vs Dedicated vs Cloud (AWS), SEO, CRO & analytics tracking

Unit 2.1

Elements of HTML & Document Architecture

1. Concept, History & Evolution of HTML

Formal Definition & Conceptual Foundation:

HTML (HyperText Markup Language) is the standard markup language engineered to structure and present content across the World Wide Web. Originating from SGML (Standard Generalized Markup Language), HTML was created by Tim Berners-Lee in 1991. The language has evolved through HTML 2.0, HTML 3.2, HTML 4.01, XHTML, culminating in the modern HTML5 standard maintained jointly by the W3C and WHATWG.

Unlike procedural programming languages (such as C++, Java, or Python) that execute algorithmic instructions, HTML is a declarative markup language. It utilizes predefined tags enclosed in angle brackets (<tagname>) to annotate plain text, instructing web browsers how to render headings, paragraphs, images, tables, and hyperlinks.

2. Basic Structure of an HTML5 Document

Every valid HTML5 document must conform to a standardized hierarchical skeleton comprising five essential structural elements:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Enterprise Corporate Portal</title>
</head>
<body>
  <h1>Welcome to Enterprise Solutions</h1>
  <p>Driving commerce through digital innovation.</p>
</body>
</html>

Anatomy of Structural Document Components:

<!DOCTYPE html>The document type declaration informed to the browser rendering engine, ensuring the page renders in modern standards mode rather than legacy quirks mode.

<html lang="en">The root element wrapping all content on the page. The lang="en" attribute declares English as the primary natural language for search engines and screen readers.

<head>The non-rendered metadata container housing the document title, character encoding, viewport settings for responsive design, external CSS links, and script tags.

<meta charset="UTF-8">Declares the universal UTF-8 character encoding, enabling correct rendering of international characters, Malayalam fonts, and mathematical symbols.

<meta name="viewport" content="width=device-width, initial-scale=1.0">The vital responsive design tag instructing mobile browsers to set screen width to device width with a 1:1 initial zoom scale.

<title> & <body><title> defines the page title on browser tabs, bookmarks, and SERPs; <body> houses all visible content rendered on screen.

3. HTML Tags, Elements, and Attributes

An HTML Element consists of a starting tag, content, and an ending tag (e.g., <p>Content</p>). Elements are categorized into two fundamental syntactic types:

Paired (Container) Tags

Possess distinct opening and closing tags enclosing content. The closing tag is prefixed with a forward slash. Examples include: <h1>...</h1>, <p>...</p>, <div>...</div>, and <table>...</table>.

Empty (Void / Self-Closing) Tags

Contain no inner content or separate closing tag; they insert an object directly into the document. Examples include: line break <br>, horizontal rule <hr>, image <img>, input <input>, and metadata <meta>.

Essential Global HTML Attributes:

Attributes are modifiers placed inside the opening tag providing additional information or styling instructions, formatted as name="value" pairs:

id: A globally unique identifier used for CSS styling, JavaScript DOM manipulation, and bookmark anchor linking.

class: A reusable identifier assigned to multiple elements across a page to apply uniform CSS class styles.

title: Displays advisory tooltip text when a user hovers their mouse cursor over the element.

style: Embeds inline CSS styling rules directly onto the tag (e.g., style="color: blue;").

4. Block-Level vs Inline Elements

Block-Level Elements

New Line

Always begin on a fresh new line in the document flow.
Automatically expand horizontally to occupy the full available width of their parent container (100% width).
Can contain other block-level elements as well as inline elements.
Examples: <div>, <p>, <h1>–<h6>, <table>, <ul>, <ol>, <form>, <header>, <footer>, <section>.

Inline Elements

Text Flow

Do not start on a new line; flow seamlessly within existing text lines.
Occupy only the exact width necessary to enclose their inner content.
Cannot contain block-level elements (can only contain data or other inline tags).
Examples: <span>, <a>, <strong>, <em>, <img>, <code>, <small>, <sub>, <sup>.

5. Text Formatting Tags in HTML

HTML provides dedicated semantic and physical tags to structure and emphasize typography:

Headings (<h1> to <h6>):Establish document hierarchy. <h1> is the supreme document title (used once per page for optimal SEO), descending in importance and font scale to <h6>.

Paragraphs (<p>):Block element encapsulating blocks of prose with automatic top and bottom browser margins.

Line Break (<br>) & Horizontal Rule (<hr>):<br> forces an immediate inline carriage return without margin spacing; <hr> renders a thematic horizontal dividing line across the section.

Physical / Presentation Tag	Semantic Standard Tag	Semantic Meaning & Screen Reader Behavior
`<b>` (Bold text)	`<strong>`	Indicates strong importance, seriousness, or urgency; read with vocal emphasis by screen readers.
`<i>` (Italic text)	`<em>`	Indicates stressed emphasis, changing the verbal meaning of a sentence.
`<u>` (Underline text)	`<mark>`	Highlighted yellow background indicating relevance in a search result or referenced passage.
`<sub>` (Subscript, e.g. H₂O)	`<sup>` (Superscript, e.g. X²)	Renders characters half a character height below or above the baseline for chemical and mathematical formulas.
`<blockquote>`	`<q>`	`<blockquote>` creates an indented block for long citations; `<q>` inserts inline text with automatic quotation marks.
`<pre>`	`<code>`	`<pre>` preserves exact whitespace and newlines; `<code>` styles computer code fragments in a monospace font.

6. Working with Lists: Ordered, Unordered & Description

1. Unordered Lists (`<ul>`)

Bullet-point lists where the sequential order of items is immaterial:

<ul>
  <li>Financial Audit</li>
  <li>Tax Filing</li>
  <li>Payroll</li>
</ul>

CSS bullet styles: disc, circle, square, none.

2. Ordered Lists (`<ol>`)

Numbered lists where sequential chronological order is critical:

<ol type="A" start="1">
  <li>Registration</li>
  <li>Verification</li>
  <li>Approval</li>
</ol>

Types: 1 (numbers), A, a, I, i (Roman numerals).

3. Description Lists (`<dl>`)

Glossary and dictionary lists pairing terms with definitions:

<dl>
  <dt>PACS</dt>
  <dd>Primary Credit</dd>
  <dt>UCB</dt>
  <dd>Urban Bank</dd>
</dl>

<dt>: Definition Term; <dd>: Definition Description.

7. Tabular Data Representation in HTML

Tables organize multidimensional financial, inventory, and accounting figures into structured grids of horizontal rows and vertical columns:

<table>: The outer container tag for the entire table.

<caption>: Specifies the table title placed above the grid.

<tr>: Table Row, defining a horizontal row of cells.

<th>: Table Header cell, rendering text centered and in bold font.

<td>: Table Data cell, holding standard data values.

<thead>, <tbody>, <tfoot>: Semantic structural tags grouping column headers, body data, and summation footers.

Cell Merging Attributes:

colspan="n": Merges a cell horizontally across n columns.

rowspan="n": Merges a cell vertically downwards across n rows.

HTML Table Code Example:

<table border="1" cellpadding="6" cellspacing="0">
  <caption>Quarterly Sales Summary</caption>
  <thead>
    <tr>
      <th>Product</th>
      <th>Q1</th>
      <th>Q2</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Software</td>
      <td>50,000</td>
      <td>60,000</td>
      <td>1,10,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Grand Total</td>
      <td>1,10,000</td>
    </tr>
  </tfoot>
</table>

Rendered Table Representation

Quarterly Sales Summary
Product	Q1	Q2	Total
Software	50,000	60,000	1,10,000
Grand Total			1,10,000

8. Hyperlinks and Navigation Mechanics

Hyperlinks constitute the connective tissue of the World Wide Web, instantiated through the anchor tag <a>:

Absolute vs Relative URLs

Absolute URL: Complete internet path including protocol and domain name (e.g., https://www.degreelive.in/bcom). Used for outbound links to external websites.

Relative URL: Path relative to the current file location (e.g., about.html, /products/item.html). Used for internal navigation within the same website.

Target Attributes & Bookmarks

target="_blank" opens destination in a fresh new browser tab; target="_self" (default) loads in the current frame.

Bookmark Anchor Links: Linking to specific sections on the same page using IDs (e.g., <a href="#contact">Contact Us</a> jumping to <div id="contact">).

Special Protocols: Email links (<a href="mailto:[email protected]">) and telephone links (<a href="tel:+919876543210">).

9. Working with Images and Multimedia Elements

The Image Tag (`<img>`)

An empty element displaying raster or vector graphics:

<img src="images/logo.png" alt="Official Logo" width="250" height="80">

The alt attribute is mandatory under W3C accessibility guidelines: it displays if the file fails to load and is read aloud by screen readers for visually impaired users.

HTML5 Audio (`<audio>`)

Embeds native audio players without legacy Flash plugins:

<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
</audio>

The controls attribute renders play, pause, and volume controls natively in modern browsers.

HTML5 Video (`<video>`)

Embeds high-definition video players with native controls:

<video width="640" height="360" controls poster="thumb.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

The poster attribute specifies a preview thumbnail image displayed before playback commences.

Unit 2.2

Cascading Style Sheets (CSS)

1. Concept and Three Integration Methods of CSS

Cascading Style Sheets (CSS) is a stylesheet language designed to describe the presentation, layout, colors, typography, and visual aesthetics of documents written in HTML. CSS enables the clean Separation of Presentation from Content.

1. Inline CSS

Tag Level

Applied directly to individual HTML tags via the style attribute:

<h1 style="color: #091e42; font-size: 24px;">
  Heading
</h1>

Drawback: Violates separation of concerns; cumbersome to maintain across multiple pages.

2. Internal (Embedded) CSS

Page Level

Placed within a <style> tag inside the document <head> section:

<style>
  h1 { color: #091e42; }
  p { font-size: 13px; }
</style>

Use Case: Single-page websites requiring page-specific custom styling.

3. External CSS

Site Wide

Written in a standalone .css file and linked in the <head>:

<link rel="stylesheet"
      href="styles.css">

Advantage (Industry Standard): A single stylesheet controls hundreds of pages; cached by browsers for lightning-fast loading.

2. CSS Syntax and Selectors

A CSS rule consists of a Selector and a Declaration Block:

selector { property: value; property: value; }

Element (Tag) Selector:Selects all HTML elements of that type across the page (e.g., p { color: #333; }).

Class Selector (.classname):Targets all elements marked with that class attribute (e.g., .btn-primary { background: #0052cc; color: #fff; }). Can be applied to multiple elements across the page.

ID Selector (#idname):Targets a singular, unique element with that ID attribute (e.g., #main-header { padding: 20px; }).

Grouping Selector:Combines multiple selectors separated by commas to share common styles (e.g., h1, h2, h3 { font-family: 'Segoe UI', sans-serif; }).

3. The CSS Box Model

In CSS, every HTML element is treated as an invisible rectangular box consisting of four concentric layers:

MARGIN → BORDER → PADDING → CONTENT

Layer 1 (Core)

Content

The innermost core where actual text, images, or child elements reside (defined by width and height).

Layer 2

Padding

Transparent space surrounding the content, clearing an area inside the border (e.g., padding: 12px;). Adopts the element's background color.

Layer 3

Border

A decorative outline enclosing the padding and content (e.g., border: 1px solid #cbd5e1;).

Layer 4 (Outer)

Margin

Transparent buffer space outside the border, creating distance between the element and adjacent neighboring elements (e.g., margin: 16px 0;).

The box-sizing: border-box Rule: In modern responsive CSS, applying box-sizing: border-box ensures that padding and border dimensions are included inside the specified width, eliminating layout-breaking calculation errors.

Unit 2.3

Web Publishing, Hosting & Business Growth

1. The Complete Web Publishing Lifecycle

Deploying a business website from a local development computer to the live public Internet involves a structured four-phase technical workflow:

Phase 1

Domain Name Registration

Securing a unique corporate web address through an ICANN-accredited Registrar (e.g., GoDaddy, Namecheap, Google Domains). Selecting an appropriate Top-Level Domain (TLD): Generic TLDs (.com for commercial, .org for non-profits, .edu for education) or Country-Code TLDs (ccTLDs like .in for India, .co.uk for UK).

Phase 2

Procuring Web Hosting Space

Renting server hardware storage space and bandwidth from hosting service providers to store website files and serve them 24/7 with zero interruption to global visitors.

Phase 3

Domain Name System (DNS) Mapping

Configuring DNS 'A Records' and 'CNAME' records at the domain registrar to point the registered human-readable domain name to the web server's public static numerical IP address.

Phase 4

File Upload via FTP / SFTP

Uploading compiled HTML files, CSS stylesheets, images, and JavaScript assets to the server's public root directory (e.g., public_html/) using FTP client software such as FileZilla or automated Git CI/CD deployment pipelines.

2. Comparative Taxonomy of Web Hosting Architectures

Shared Web Hosting

Budget

Hundreds of customer websites share the physical CPU, RAM, and network bandwidth of a single physical server machine.

Cost: Highly economical (₹100–300/month); ideal for startups and local small businesses.

Limitation: Security risks and traffic spikes on neighboring sites degrade overall performance ("bad neighbor effect").

Virtual Private Server (VPS)

Partitioned

A physical server is partitioned into multiple isolated virtual servers using hypervisor virtualization technology.

Control: Dedicated CPU cores, RAM, and root administrative access; completely isolated from other tenants.

Application: Growing e-commerce stores and mid-sized corporate web portals.

Dedicated Server Hosting

Exclusive

An entire physical server machine is leased exclusively to a single enterprise client with zero resource sharing.

Performance: Maximum computing power, raw I/O throughput, and bespoke physical security firewalls.

Application: Commercial banking cores, high-traffic portals, and sensitive medical databases.

Cloud Hosting (AWS, Azure, GCP)

Elastic

Websites run across a distributed cluster of virtual servers spanning global data centers.

Elasticity: Auto-scales computing resources instantaneously during traffic surges; pay-as-you-go pricing.

Reliability: 99.99% uptime SLA; automated failover if individual hardware nodes experience failure.

3. Organizing Enterprise Website Directory Structure

Professional web development mandates a logical, standardized directory hierarchy to prevent broken file links:

/root_directory
├── index.html        (Default Home Page)
├── about.html        (Company Profile Page)
├── contact.html      (Contact Us Page)
├── /css
│   └── styles.css    (External Master Stylesheet)
├── /images
│   ├── logo.png      (Corporate Brand Asset)
│   └── banner.jpg    (Hero Banner Image)
└── /js
    └── script.js     (Client-Side Interactive Scripts)

4. Leveraging Websites for Business Growth & Conversion Funnels

In contemporary enterprise strategy, a corporate website functions as the primary driver of commercial revenue:

Search Engine Optimization (SEO)

Optimizing on-page HTML tags (semantic title tags, meta descriptions, image alt tags, structured schema markup) and off-page backlinks to rank on the first page of Google searches, capturing valuable free organic customer traffic.

Conversion Rate Optimization (CRO)

Designing frictionless Call-to-Action (CTA) buttons, high-converting checkout carts, and persuasive micro-copy that convert casual web visitors into paying corporate clients.

Digital Analytics & Tracking

Integrating analytics tracking tags (Google Analytics 4, heatmaps) to monitor crucial key performance indicators (KPIs): bounce rate, average session duration, customer acquisition cost (CAC), and shopping cart abandonment rates.

Comprehensive HTML & Web Publishing Synthesis (Exam Revision Matrix)

Technical Domain	Core HTML / CSS Constructs	Commercial / Functional Utility
Document Structure	`<!DOCTYPE>`, `<html>`, `<head>`, `<body>`	Provides standard standards-mode rendering and metadata for browser indexing and mobile viewports.
Tabular Formatting	`<table>`, `<tr>`, `<th>`, `<td>`, `colspan`, `rowspan`	Structured display of corporate financial balance sheets, price lists, and quarterly performance schedules.
Hyperlinks & Media	`<a href>`, `<img src alt>`, `<audio>`, `<video>`	Interconnects site navigation, embeds corporate logos, and streams product demonstration videos.
CSS Box Model	Content, Padding, Border, Margin, `box-sizing`	Controls visual spacing, button dimensions, card layouts, and responsive alignment.
Web Hosting	Shared, VPS, Dedicated, Cloud (AWS), SFTP	Enables 24/7 global accessibility, dynamic traffic auto-scaling, and automated disaster recovery.

COM5EJ307Computer Application in Business

Module 2 • PDF Notes

Download PDF

Finished this module?

Continue reading the next module or return to the subject overview.

All Modules Next: Module 3