COM5EJ307 • Computer Application in Business

Module 2

Calicut University • B.Com • Semester 5 • Major Elective

Module II: HTML, Cascading Style Sheets & Web Publishing

Course Code: COM5EJ307 (4) • Computer Applications in Business

Module II Syllabus Architecture & Learning Objectives

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.

Unit 2.1: Elements of HTML & Document Architecture

1. Concept, History & Evolution of HTML

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 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>: 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>: Defines the page title appearing on browser tabs, bookmarks, and search engine results pages (SERPs).
<body>: Houses all visible content rendered on screen—headings, text, images, forms, and data tables.

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 (e.g., <h1>...</h1>, <div>...</div>, <p>...</p>).

Empty (Void / Self-Closing) Tags

Contain no content or closing tag; they insert an object directly into the document (e.g., line break <br>, horizontal rule <hr>, image <img>, input <input>, meta <meta>).

Essential Global Attributes

id: A globally unique identifier used for CSS styling, JavaScript DOM manipulation, and bookmark anchor linking.
class: A reusable identifier assigned to multiple elements to apply uniform CSS class styles.
title: Displays advisory tooltip text when a user hovers the cursor over the element.
style: Embeds inline CSS styling rules directly onto the tag.

4. Block-Level vs Inline Elements

Block-Level Elements

Always begin on a fresh new line.
Automatically expand horizontally to occupy the full available width of their parent container.
Can contain other block elements and inline elements.
Examples: <div>, <p>, <h1>–<h6>, <table>, <ul>, <ol>, <form>, <header>, <footer>.

Inline Elements

Do not start on a new line; flow seamlessly within existing text lines.
Occupy only the exact width necessary to enclose their content.
Cannot contain block-level elements.
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 SEO), descending in importance to <h6>.
Paragraphs (<p>): Block element encapsulating blocks of prose with automatic top and bottom margins.
Line Break (<br>) & Horizontal Rule (<hr>): <br> forces an inline carriage return; <hr> renders a thematic horizontal dividing line.
Semantic vs Physical Formatting:
<b> (Visual bold) vs <strong> (Semantic strong importance).
<i> (Visual italic) vs <em> (Semantic stress emphasis).
<u> (Underline) vs <mark> (Yellow relevance highlight).
<sub> (Subscript, e.g., H₂O) vs <sup> (Superscript, e.g., X²).
<blockquote> (Indented long quotation), <q> (Inline quotation with quotes), and <pre> (Preformatted text preserving exact whitespace).

6. Working with Lists: Ordered, Unordered & Description

1. Unordered Lists (<ul>)

Bullet-point lists where sequence is immaterial:

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

CSS styles: disc, circle, square, none.

2. Ordered Lists (<ol>)

Numbered sequences where order is critical:

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

Types: 1, A, a, I, i.

3. Description Lists (<dl>)

Glossary terms and descriptions:

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

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

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 container tag for the entire table.
<caption>: Specifies the table heading/title placed above the grid.
<tr>: Table Row, defining a horizontal line 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 grouping tags separating column headers, body data, and summation footers.
Cell Merging Attributes: colspan="n" (merges across n columns) and rowspan="n" (merges down across n rows).

<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>

8. Hyperlinks and Navigation Mechanics

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

Syntax: <a href="destination_url" target="_blank">Link Text</a>
Absolute URLs: Complete path including protocol and domain name (e.g., https://www.degreelive.in/bcom). Used for external links.
Relative URLs: Path relative to the current file location (e.g., about.html, /products/item.html). Used for internal navigation.
Target Attributes: target="_blank" opens the link in a fresh new tab; target="_self" (default) loads in the current tab.
Bookmark Anchor Links: Jumping to an element ID on the same page (e.g., <a href="#contact">Contact</a> jumping to <div id="contact">).
Specialized Protocols: Email (<a href="mailto:info@degreelive.in">) and Phone (<a href="tel:+919876543210">).

9. Working with Images and Multimedia Elements

The Image Tag (<img>)

An empty element displaying graphics. The alt attribute is legally required for accessibility:

HTML5 Audio (<audio>) & Video (<video>) Tags

Embed native multimedia streaming without obsolete third-party Flash plugins:

<video width="640" height="360" controls poster="thumbnail.jpg">
<source src="overview.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

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

Applied directly to individual HTML tags via the style attribute:

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

Violates separation of concerns; cumbersome to maintain.

2. Internal (Embedded) CSS

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

Useful for single-page standalone documents.

3. External CSS (Industry Standard)

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

Single stylesheet styles thousands of pages; cached by browsers.

2. CSS Syntax and Selectors

selector { property: value; property: value; }

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

Class Selector (.classname):Targets elements with that class attribute (e.g., .btn-primary { background: #0052cc; }).

ID Selector (#idname):Targets a singular unique element on the page (e.g., #header { padding: 20px; }).

Grouping Selector:Combines multiple selectors to share styles (e.g., h1, h2, h3 { font-family: sans-serif; }).

3. The CSS Box Model

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

The CSS Box Model ArchitectureSPATIAL DIMENSIONS

CONTENT → PADDING → BORDER → MARGIN

1. Content: The innermost core where actual text, images, or child elements reside (defined by width and height).
2. Padding: Transparent space surrounding the content inside the border (e.g., padding: 12px;). Adopts the element's background color.
3. Border: A decorative outline enclosing the padding and content (e.g., border: 1px solid #cbd5e1;).
4. Margin: Transparent buffer space outside the border, creating distance between the element and adjacent neighbors (e.g., margin: 16px 0;).
The box-sizing: border-box Rule: In modern CSS, applying box-sizing: border-box ensures padding and borders are included within the specified width, eliminating layout-breaking calculations.

Unit 2.3: Web Publishing, Hosting & Business Growth

1. The Complete Web Publishing Lifecycle

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

Four Phases of Web Publishing

Phase 1: Domain Name Registration: Securing a unique corporate web address through an accredited Registrar. Selecting appropriate Top-Level Domains (TLDs): Generic TLDs (.com, .org, .edu) or Country-Code TLDs (ccTLDs like .in for India, .co.uk for UK).
Phase 2: Procuring Web Hosting Space: Renting server hardware, CPU, and bandwidth to store website files and serve them 24/7 to global visitors.
Phase 3: Domain Name System (DNS) Mapping: Configuring DNS 'A Records' and 'CNAME' records at the domain registrar to point the domain name to the web server's public IP address.
Phase 4: File Upload via FTP / SFTP: Uploading HTML files, CSS stylesheets, images, and script assets to the server's public root directory (e.g., public_html/) using FTP client software such as FileZilla or automated Git pipelines.

2. Comparative Taxonomy of Web Hosting Architectures

Shared Web Hosting

Hundreds of websites share the CPU, RAM, and bandwidth of a single physical server.
Cost: Highly economical (Rs. 100–300/month); ideal for startups and local small businesses.
Limitation: Security risks and traffic spikes on neighboring sites degrade performance ("bad neighbor effect").

Virtual Private Server (VPS)

A physical server is partitioned into isolated virtual servers using hypervisor virtualization.
Control: Dedicated CPU cores, RAM, and root access; completely isolated from other tenants.
Application: Growing e-commerce stores and mid-sized corporate web portals.

Dedicated Server Hosting

An entire physical server machine is leased exclusively to a single enterprise client.
Performance: Maximum computing power, raw I/O throughput, and bespoke security firewalls.
Application: Commercial banking cores, high-traffic portals, and sensitive medical databases.

Cloud Hosting (AWS, Azure, GCP)

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; automated failover if individual hardware nodes fail.

3. Organizing Enterprise Website Directory Structure

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

/root_directory
  ├── index.html        (Default Home Page)
  ├── about.html        (Company Profile)
  ├── contact.html      (Contact Us Page)
  ├── /css
  │   └── styles.css    (External Stylesheet)
  ├── /images
  │   ├── logo.png
  │   └── banner.jpg
  └── /js
      └── script.js     (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 free organic customer traffic.
Conversion Rate Optimization (CRO): Designing frictionless Call-to-Action (CTA) buttons, high-converting checkout carts, and micro-copy that convert casual web visitors into paying customers.
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.

5. Comprehensive HTML & Web Publishing Synthesis Matrix

Technical Domain	Core HTML / CSS Constructs	Commercial / Functional Utility
Document Structure	<!DOCTYPE>, <html>, <head>, <body>	Provides standards-mode rendering and metadata for browser indexing and responsive viewports.
Tabular Formatting	<table>, <tr>, <th>, <td>, colspan, rowspan	Structured display of corporate financial balance sheets, price lists, and delivery 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, and card container layouts.
Web Hosting	Shared, VPS, Dedicated, Cloud (AWS), SFTP	Enables 24/7 global accessibility, auto-scaling during traffic surges, and disaster recovery.

COM5EJ307Computer Application in Business

Download Module 2 Notes (PDF)

Calicut University • FYUGP 2024 Syllabus

Download PDF

Finished this module?

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

All Modules Next: Module 3