Loksewa Preparation · Computer Operator
Web Designing & Social Media
HTML · CSS · CMS · RSS · Social Networking · E-Governance
📋 Topics Covered
Web Page & CMS
HTML Structure
HTML Tags
CSS
RSS
Social Networking
E-Governance
1. What is a Web Page?
A web page is a digital document displayed in a web browser. It can contain text, images, videos, and interactive elements. Web pages are built using three core technologies:
HTML
Defines the structure of the page
CSS
Adds design and layout styling
JavaScript
Makes the page interactive
| Type |
Description |
Example |
| Static |
Fixed content, does not change dynamically |
Basic company website |
| Dynamic |
Content changes based on user interaction or database |
E-commerce sites, blogs |
2. Content Management System (CMS)
A CMS is a software application that allows users to create, manage, and modify website content without needing to code.
Key Features:
- Easy content editing (like MS Word)
- Templates for consistent design
- User management (admin, editor, author roles)
- Media management (images, videos)
- Built-in SEO tools
| CMS Platform |
Best For |
| WordPress | Blogs, business sites, e-commerce (most popular) |
| Joomla | Flexible sites (requires some technical knowledge) |
| Drupal | Large, highly customizable websites |
| Shopify | E-commerce stores |
| Wix | Beginners — drag-and-drop builder |
3. HTML — Structure of a Web Page
An HTML document is saved with a .html extension and displayed in a browser.
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a simple webpage.</p>
</body>
</html>
| Tag |
Purpose |
| <!DOCTYPE html> | Declares the document as HTML5 |
| <html> | Root element containing all HTML content |
| <head> | Holds meta information, title, and styles |
| <title> | Webpage title shown in browser tab |
| <body> | Contains the visible content of the page |
Common HTML Tags
| Tag |
Use |
Example |
| <h1>–<h6> | Headings | <h1>Heading</h1> |
| <p> | Paragraph | <p>Text here</p> |
| <a> | Hyperlink | <a href="url">Link</a> |
| <img> | Image | <img src="img.jpg" alt="..."> |
| <ul> / <ol> | Lists | <ul><li>Item</li></ul> |
| <table> | Table | <table>...</table> |
| <form> | Form | <form action="...">...</form> |
| <iframe> | Embed external page | <iframe src="url"></iframe> |
| <div> | Block container / layout | <div>...</div> |
Text Formatting Tags
| Tag |
Effect |
| <b> | Bold text |
| <i> | Italic text |
| <u> | Underlined text |
| <br> | Line break (no closing tag) |
| <hr> | Horizontal divider line |
| <mark> | Highlighted text |
Form Input Elements
| Element |
Description |
| <input type="text"> | Text input field |
| <input type="password"> | Password field |
| <input type="email"> | Email address field |
| <input type="radio"> | Radio button (single choice) |
| <input type="checkbox"> | Checkbox (multiple choices) |
| <select> | Dropdown menu |
| <textarea> | Multiline text input |
| <input type="submit"> | Submit button |
4. Cascading Style Sheets (CSS)
CSS is used to style HTML elements and control the appearance of web pages.
Types of CSS
Inline CSS
style="color:blue;"
Applied directly inside an HTML tag
Internal CSS
<style> in <head>
Defined within the <style> tag inside <head>
External CSS
styles.css linked file
Separate .css file linked to the HTML page
CSS Selectors
| Selector |
Description |
Example |
| * | Selects all elements | * { margin: 0; } |
| p | Selects all <p> elements | p { color: blue; } |
| .class | Selects elements with a class | .box { background: yellow; } |
| #id | Selects element with a specific ID | #main { font-size: 20px; } |
| div > p | Selects <p> inside <div> | div > p { color: red; } |
CSS Box Model
Margin — Space outside the border
Border — Surrounds the element
Padding — Space between content and border
Content — Actual content inside the box
Responsive Web Design
Responsive design ensures a website adapts to different screen sizes using CSS media queries.
@media screen and (max-width: 600px) {
body { background-color: lightblue; }
}
5. RSS — Rich Site Summary
RSS is a web feed format that allows users to receive automatic updates from websites without visiting them manually.
How it works
Websites publish RSS feeds → Users subscribe via RSS readers → Reader auto-updates with new content
Benefits
Saves time by aggregating multiple sources in one place. Improves engagement and readership.
RSS feeds use XML format — the main tags used are: <rss>, <channel>, <title>, <link>, <description>, <item>
6. Social Networking
Social networking refers to using online platforms to connect with people, share content, and engage with communities.
| Platform |
Primary Purpose |
| Facebook | Social interaction, news sharing, business promotion |
| Twitter (X) | Short-form updates, discussions, trending topics |
| Instagram | Photo and video sharing platform |
| LinkedIn | Professional networking and job searching |
| YouTube | Video content creation and sharing |
| TikTok | Short-form video sharing |
| Reddit | Community discussions and topic-based forums |
Key Features of Social Media:
- User-generated content (posts, videos, images, blogs)
- Interactivity (likes, comments, shares, retweets)
- Real-time updates (news, trends, announcements)
- Networking and community building
Benefits of Social Networking:
- Communication — Connect with friends and family
- Marketing & Branding — Businesses promote products and services
- Information Sharing — Quick access to news and updates
- Community Building — Engage with groups sharing common interests
7. Social Media in Governance
Social media plays a vital role in governance by facilitating communication between governments and citizens, enhancing transparency, promoting citizen engagement, and enabling real-time information dissemination.
How Governments Use Social Media
| Use Case |
Description |
Nepal Example |
| Public Awareness | Sharing laws, policies, and announcements | Ministry of Health — health guidelines |
| Disaster Management | Real-time updates during crises | Earthquake/flood alerts on Twitter |
| Citizen Engagement | Live Q&A, polls, and surveys | Mayor using Facebook Live |
| E-Governance | Online service access and complaints | Passport Dept — online applications |
| Law Enforcement | Crime alerts, safety tips | Nepal Police on Facebook |
| Recruitment | Job vacancy announcements | Lok Sewa Aayog (PSC) postings |
| Countering Misinformation | Clarifying fake news officially | WHO Twitter during COVID-19 |
✅ Benefits
- Transparency and government accountability
- Accessible information from anywhere
- Cost-effective compared to traditional media
- Immediate communication on events
- Encourages public participation
⚠️ Challenges
- Fake news and misinformation
- Cybersecurity risks and hacking
- Digital divide (not all have access)
- Privacy and data security concerns
8. Managing Social Media in Government
For effective use of social media in governance, proper planning and monitoring are essential.
1
Social Media Strategy — Define objectives, identify target audience, and choose appropriate platforms.
2
Account Management — Appoint a dedicated social media team; use tools like Hootsuite, Buffer, or Meta Business Suite for scheduling.
3
Content Creation — Post informative, visually appealing content; use infographics, videos, and live sessions.
4
Security & Privacy — Use two-factor authentication (2FA), assign access levels, and monitor for fake accounts.
5
Crisis Communication — Have a response plan for emergencies; collaborate with fact-checking organizations.
6
Analytics & Monitoring — Track engagement and reach using Facebook Insights, Twitter Analytics, and Google Analytics.
📚 Computer Operator Loksewa Preparation — Web Designing & Social Media Unit Complete
Comments
Post a Comment