.png)
6.1. Introduction to Web Page and Content Management System (CMS)
A web page is a digital document that is part of a website and is accessed through the internet using a web browser. It is typically written in HTML (Hypertext Markup Language) and may include text, images, videos, links, and other multimedia elements.
Features of a Web Page:
· Contains text, images, hyperlinks, and videos.
· Can be static (unchanging) or dynamic (changes based on user interaction).
· Every web page has a URL (Uniform Resource Locator).
· Can be interconnected through hyperlinks to form a website.
Types of Web Pages:
1. Static Web Page: Content remains the same for all users.
2. Dynamic Web Page: Content can change based on user preferences or actions.
Examples:
· Home page of a website
· Blog article
· Product detail page
B. Content Management System (CMS)
v Stands for content management system
v It is a software platform used to manage digital content
v An application that enables user to create, edit, publish and store digital content
v In terms of web design, it is a graphical user interface that provides tools to create, edit, and publish web content without the need of writing code.
Popular CMS Platforms:
· WordPress
· Joomla
· Drupal
· Wix
· Squarespace
Features of a CMS:
· Easy content creation and editing (WYSIWYG editor).
· Media management (images, videos).
· User management (admins, editors, users).
· Themes and templates for design.
· Plugins or extensions for added functionality.
· SEO tools and security features.
Advantages of CMS:
· No technical knowledge required.
· Saves time in web development.
· Easy collaboration among multiple users.
· Allows quick updates to content.
6.2. Introduction to HTML
· Stands for HyperText Markup Language
· It is a markup language used to design the structure of web pages
· An essential technology used to create, organize, and display content on the World Wide Web
· Allows users to define headings, paragraphs, links, images, tables, and more using predefined tags
· In terms of web development, it is the foundation of all web pages and works alongside CSS and JavaScript
· HTML provides a way to add content to the web and helps browsers understand how to display text, media, and other elements
· It is not a programming language, but a markup language that uses tags and elements to define web content
Basic Structure of an HTML Document:
<!DOCTYPE html><html> <head> <title>My First Web Page</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is a simple paragraph.</p> </body></html>
6.3. HTML Document
· An HTML document is a text file containing HTML code used to build a webpage.
· It is saved with the .html or .htm file extension.
· It contains HTML elements and tags that define the content and structure of a web page.
·
Every
HTML document starts with a <!DOCTYPE html> declaration
and includes <html>,
<head>,
and <body>
sections.
· Web browsers read HTML documents and render them as visual web pages.
6.3.1. HTML Tags
· HTML uses tags to mark up the content of a web page.
·
Tags
are usually written inside angle brackets, e.g., <p>, <h1>, <a>.
·
Most
tags have opening
and closing parts, e.g., <p>Text</p>.
· Tags define headings, paragraphs, images, links, tables, and more.
· Example:
<p>This is a paragraph.</p>
6.3.2. Working with Text, Hyperlinks, Images, Lists, Forms, Tables, Frames, etc.
·
Text: Use tags like <h1> to <h6>
for headings and <p>
for paragraphs.
Example: <h2>Welcome
to My Website</h2>
·
Hyperlinks: Use the <a> tag to create
links.
Example: <a
href="https://example.com">Visit</a>
·
Images: Use the <img> tag with src
and alt
attributes.
Example: <img
src="image.jpg" alt="Sample Image">
· Lists:
o
Ordered list
(numbered): <ol>
and <li>
o
Unordered list
(bulleted): <ul>
and <li>
Example:
<ul> <li>Item 1</li> <li>Item 2</li></ul>
·
Forms: Use the <form> tag to
collect user input with <input>,
<textarea>,
<button>,
etc.
Example:
<form> <input type="text" placeholder="Name"> <input type="submit" value="Submit"></form>
·
Tables: Use <table>, <tr>,
<th>,
and <td>
to organize data in rows and columns.
Example:
<table> <tr><th>Name</th><th>Age</th></tr> <tr><td>Anil</td><td>22</td></tr></table>
·
Frames: Used with <iframe> to embed
another webpage or content like videos or maps.
Example:
<iframe src="https://example.com"></iframe>
6.4. Familiarity with CSS, RSS, and Social Networking
Cascading Style Sheet (CSS)
· Stands for Cascading Style Sheet
· A style sheet language used to describe the presentation and layout of HTML elements
· Allows you to control the look and feel of a website (e.g., colors, fonts, spacing)
· Enables separation of content and design, improving maintainability and consistency
· Used to make websites responsive and visually attractive across different devices
Rich Site Summary (RSS)
· Stands for Rich Site Summary or Really Simple Syndication
· A web feed format used to deliver regularly changing web content automatically
· Allows users to subscribe to blogs, news, podcasts, and updates from websites
· Uses XML-based format to publish frequently updated content in a standardized way
· Saves time by bringing content directly to the user’s feed reader
Social Networking
· Refers to online platforms where users can create profiles, share content, and interact
· Examples include Facebook, Twitter, LinkedIn, Instagram, etc.
· Facilitates communication, collaboration, and information sharing
· Plays a significant role in marketing, education, job networking, and entertainment
· Enhances global connectivity and user engagement on the internet
6.4. Familiarity with CSS, RSS, and Social Networking
Cascading Style Sheet (CSS)
· Stands for Cascading Style Sheets
· It is used to style and layout HTML elements (like colors, fonts, spacing)
· Allows separation of content (HTML) and presentation (CSS)
· Helps maintain consistency across multiple web pages
· CSS can be added inline, internal, or external
· Example:
<style> body { background-color: lightblue; font-family: Arial; }</style>
Rich Site Summary (RSS)
· Stands for Really Simple Syndication or Rich Site Summary
· It is an XML-based format used to deliver updated web content
· Commonly used in news websites, blogs, and podcasts
· Allows users to subscribe to updates and receive new content automatically
· Example:
o
RSS
feed link on a blog: https://example.com/feed.xml
o Used in applications like Feedly, Inoreader, etc.
Social Networking
· Refers to online platforms that enable users to create profiles and interact with others
· Allows sharing of messages, photos, videos, and interests
· Used for communication, marketing, education, and entertainment
· Examples:
o Facebook – for personal and business networking
o Twitter/X – for microblogging and sharing thoughts
o Instagram – for photo and video sharing
o LinkedIn – for professional networking
6.5. Concept of Web Server and Proxy Server
Web Server
· A web server is a computer software or hardware that serves web content (like HTML pages) to users over the Internet
· It handles HTTP requests from web browsers and returns web pages
· Stores, processes, and delivers website files to the client
· Examples of web server software: Apache, Nginx, Microsoft IIS
· Example:
o
When
you open www.google.com,
a web server processes that request and shows the page
Proxy Server
· A proxy server acts as an intermediary between a user’s device and the internet
· It forwards client requests to other servers and returns the response back to the client
· Used for security, privacy, filtering, caching, and monitoring
· Helps in hiding the real IP address of the client
· Example:
o Schools or offices use a proxy to block social media websites
o VPN services use proxy servers to mask location
6.6. Social Media in Governance
· Social media refers to online platforms like Facebook, Twitter (X), YouTube, Instagram, etc., used to communicate and share information
· In governance, social media is used as a tool to connect the government with citizens
· It enables real-time communication and helps build transparency and accountability
· Helps in spreading awareness about government policies, services, and emergency notifications
· Allows feedback collection, public opinion, and even complaint handling
· Useful for disaster response, e-participation, and digital democracy
· Examples:
o Government of Nepal shares COVID-19 updates via Facebook pages
o Indian PMO uses Twitter to share major decisions and policies
o Local municipalities use social media for public notices and interaction
6.7. E-Commerce
· Stands for Electronic Commerce
· Refers to buying and selling of goods and services using the internet
· It involves online transactions, electronic payments, and digital communication
· E-commerce platforms allow users to browse products, place orders, make payments, and get deliveries
· Includes B2B (Business to Business), B2C (Business to Consumer), C2C (Consumer to Consumer) models
· Examples:
o Amazon, Daraz, Flipkart, eBay, Alibaba
· Benefits:
o Saves time and cost
o Available 24/7
o Provides wider choices to customers
o Helps businesses reach global markets
· Requires secure technologies like SSL encryption, online payment gateways, and data protection