Unit 6: Web Technology I – HTML and CSS
Complete Class 11 Computer Science Unit 6 notes covering web development, browsers, search engines, CMS, HTML tags, forms, tables, multimedia, domain names, hosting and CSS.
Welcome to Nepal eNotes. Unit 6 introduces Web Technology I and the basic technologies used to create websites.
In this chapter, you will learn about web development, browsers, search engines, CMS, HTML, tables, forms, multimedia, domains, web hosting and Cascading Style Sheets (CSS).
HTML = Structure
CSS = Design and Appearance
- 6.1 Introduction to Web Development
- 6.2 Web Browsers and Search Engines
- 6.3 Internet and Web Technologies
- 6.4 Content Management System
- 6.5 HTML – Language of the Web
- HTML Document Structure
- Basic HTML Tags
- Text Formatting Tags
- HTML Lists
- Links and Anchor Tag
- HTML Tables
- HTML Forms
- HTML5 Multimedia
- Canvas and SVG
- Domain Name and Web Hosting
- 6.6 Cascading Style Sheets
- Solved Code Examples
- Common Mistakes
- Quick Revision
- Sample Board Exam Questions
- Important Questions
Web development is the process of building, structuring and maintaining websites and web applications.
Front-End Development
Front-end or client-side development includes everything a visitor can directly see and interact with in a web browser.
HTML + CSS + JavaScript
Back-End Development
Back-end or server-side development handles the server, application logic and databases behind a website.
The source notes give PHP as an example of a server-side language.
| Front-End | Back-End |
|---|---|
| Runs mainly in the browser. | Runs mainly on the server. |
| Controls visible website content. | Processes data and requests. |
| HTML, CSS, JavaScript | PHP and databases |
Web Browser
A web browser is application software used to request, receive and display webpages.
It interprets HTML, CSS and JavaScript and displays the result on the screen.
Examples: Google Chrome, Mozilla Firefox, Microsoft Edge and Safari.
Search Engine
A search engine is a web-based service that helps users find information on the internet using keywords.
Examples: Google, Bing and DuckDuckGo.
Browser = Opens and displays websites.
Search Engine = Helps find websites and information.
Internet
The Internet is a worldwide network of interconnected computer networks that communicate using common protocols such as TCP/IP.
World Wide Web
The World Wide Web (WWW) is a collection of linked web pages and documents accessed using web browsers.
| Technology | Role |
|---|---|
| HTML | Structures webpage content. |
| CSS | Controls design and layout. |
| JavaScript | Adds interaction and behaviour. |
| PHP | Processes server-side requests. |
| MySQL | Stores and retrieves website data. |
A Content Management System (CMS) is software that allows users to create, edit, organize and publish website content without manually writing code for every page.
WordPress, Joomla and Drupal
Main Features of CMS
Content Editor
Provides a visual interface for creating and formatting content.
Themes / Templates
Control the appearance and overall design of the website.
Plugins / Extensions
Add extra features such as contact forms and SEO tools.
User Management
Allows multiple users to manage a website with different permissions.
HTML stands for HyperText Markup Language.
It is the standard markup language used to structure webpage content.
Objectives of HTML
- Structure webpage content.
- Create hyperlinks.
- Display images and multimedia.
- Provide a foundation for CSS and JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
- <!DOCTYPE html> tells the browser the document uses HTML5.
- <html> is the root element.
- <head> stores information about the page.
- <title> sets the browser-tab title.
- <body> contains visible page content.
HTML Tags vs Attributes
| Tag | Attribute |
|---|---|
| Defines an HTML element. | Provides extra information about an element. |
| <p>…</p> | name=”value” |
| <a>, <p>, <img> | href, src, id |
Heading Tags – H1 to H6
HTML provides six levels of headings.
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
FONT Tag
<font size="5" color="red" face="Arial">
Styled Text
</font>
Paragraph Tag
<p> This is a paragraph. </p>
BR Tag
The <br> tag inserts a single line break.
Kathmandu<br> Nepal
HTML Comment
<!-- This is an HTML comment -->
ADDRESS Tag
<address> Written by Ram Sharma<br> Kathmandu, Nepal </address>
| Tag | Purpose |
|---|---|
| <b> | Bold text |
| <i> | Italic text |
| <u> | Underlined text |
| <mark> | Highlighted text |
| <sup> | Superscript |
| <sub> | Subscript |
| <em> | Emphasized text |
| <blockquote> | Quoted block |
| <pre> | Preserves spaces and line breaks |
Ordered List
An ordered list uses numbers, letters or Roman numerals.
<ol type="A">
<li>HTML</li>
<li>CSS</li>
</ol>
Unordered List
An unordered list uses bullet symbols.
<ul type="square">
<li>HTML</li>
<li>CSS</li>
</ul>
Definition List
<dl>
<dt>HTML</dt>
<dd>
Language used to structure a webpage.
</dd>
</dl>
The <a> tag creates a hyperlink.
Link to Another Page
<a href="about.html">
About Us
</a>
Link Inside the Same Page
<a href="#section2">
Jump to Section 2
</a>
<h2 id="section2">
Section 2
</h2>
- <table> – creates a table.
- <tr> – creates a table row.
- <th> – creates a header cell.
- <td> – creates a data cell.
<table border="1">
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>Sita</td>
<td>85</td>
</tr>
<tr>
<td>Hari</td>
<td>78</td>
</tr>
</table>
An HTML form is used to collect input from users.
<form action="/submit" method="post">
Name:
<input type="text" name="username">
<br>
Gender:
<input
type="radio"
name="gender"
value="M"
> Male
<input
type="radio"
name="gender"
value="F"
> Female
<br>
Interests:
<input
type="checkbox"
name="interest"
value="sports"
> Sports
<input
type="checkbox"
name="interest"
value="music"
> Music
<br>
Message:<br>
<textarea rows="4" cols="30"></textarea>
<br>
<button type="submit">
Submit
</button>
</form>
Common Form Controls
- Text box
- Radio button
- Checkbox
- Textarea
- Submit button
Video
<video width="320" height="240" controls>
<source
src="movie.mp4"
type="video/mp4"
>
<track
src="subs.vtt"
kind="subtitles"
srclang="en"
>
</video>
Audio
<audio controls>
<source
src="song.mp3"
type="audio/mpeg"
>
</audio>
Embed
<embed
src="document.pdf"
width="400"
height="300"
>
Canvas
The <canvas> element provides a drawing surface. The source notes explain that graphics are normally drawn on it using JavaScript.
<canvas
id="myCanvas"
width="200"
height="100"
></canvas>
SVG
SVG stands for Scalable Vector Graphics and describes graphics using markup.
<svg width="120" height="120">
<circle
cx="60"
cy="60"
r="50"
fill="skyblue"
/>
</svg>
| Canvas | SVG |
|---|---|
| Pixel-based drawing surface. | Vector-based graphics. |
| Often controlled using JavaScript. | Shapes can be written directly in markup. |
| Useful for animations, games and charts. | Remains sharp when scaled. |
Domain Name
A domain name is a human-readable web address that points to a website.
DNS converts the domain name into the corresponding server IP address.
Web Hosting
Web hosting is a service that stores website files on a server connected to the internet.
Domain = Website address
Hosting = Place where website files are stored
Types of Hosting
- Shared Hosting
- VPS Hosting
- Dedicated Hosting
CSS stands for Cascading Style Sheets.
It controls the visual presentation of HTML content, including colors, fonts, spacing and layout.
CSS Rule
selector {
property: value;
}
h1 {
color: navy;
font-size: 28px;
}
Inline CSS
Inline CSS is applied directly to one HTML element.
<p style="color:red; font-size:18px;">
Styled paragraph
</p>
Embedded / Internal CSS
Internal CSS is written inside a <style> tag in the HTML document.
<head>
<style>
p {
color: green;
}
h1 {
text-align: center;
}
</style>
</head>
External CSS
External CSS is stored in a separate .css file.
<link
rel="stylesheet"
href="style.css"
>
/* style.css */
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
| CSS Type | Location | Scope |
|---|---|---|
| Inline | Inside style attribute | Single element |
| Embedded | Inside <style> | Current page |
| External | Separate .css file | Multiple linked pages |
1. Simple Personal Profile Page
<!DOCTYPE html>
<html>
<head>
<title>My Profile</title>
</head>
<body bgcolor="#f0f8ff">
<h1>About Me</h1>
<p>
My name is
<b>Sita Gurung</b>,
and I study
<i>Computer Science</i>
in Grade 11.
</p>
<h2>My Hobbies</h2>
<ul type="square">
<li>Reading</li>
<li>Coding</li>
<li>Photography</li>
</ul>
</body>
</html>
2. Result Table
<h2 id="results">Exam Results</h2>
<table border="1">
<tr>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Computer Science</td>
<td>88</td>
</tr>
<tr>
<td>Mathematics</td>
<td>92</td>
</tr>
</table>
<a href="#top">
Back to Top
</a>
3. Contact Form with Internal CSS
<head>
<style>
form {
background-color: #eef6ff;
padding: 15px;
}
input,
textarea {
margin-bottom: 8px;
}
</style>
</head>
<body>
<form
action="/submit"
method="post"
>
Name:
<input
type="text"
name="name"
>
<br>
Message:
<br>
<textarea
rows="3"
cols="25"
></textarea>
<br>
<button type="submit">
Send
</button>
</form>
</body>
⚠ Common HTML & CSS Mistakes
- Forgetting to close HTML tags.
- Forgetting quotation marks around attribute values.
- Using href=”#id” without creating a matching id.
- Using the same id more than once on a page.
- Forgetting the name attribute on form inputs.
- Using an incorrect path for an external CSS file.
- Using deprecated HTML tags in modern projects instead of CSS.
⚡ Quick Revision – Unit 6
- Web development includes front-end and back-end development.
- Front-end commonly uses HTML, CSS and JavaScript.
- A browser opens and displays webpages.
- A search engine helps users find webpages.
- The Internet is a global network of networks.
- WWW is a service that operates through the Internet.
- CMS allows website content management without manually coding every page.
- WordPress, Joomla and Drupal are examples of CMS software.
- HTML stands for HyperText Markup Language.
- HTML is a markup language, not a programming language.
- <h1> to <h6> are heading tags.
- <br> inserts a line break.
- <a> creates hyperlinks.
- <table> creates a table.
- <tr> creates a row.
- <th> creates a header cell.
- <td> creates a normal table cell.
- HTML forms collect user input.
- <video> and <audio> embed multimedia.
- Canvas and SVG are HTML5 graphics technologies.
- Domain = website address.
- Hosting = storage/server space for website files.
- CSS controls webpage appearance.
- CSS types: Inline, Embedded/Internal and External.
📝 Sample Board Exam Questions
Multiple Choice Questions
- <link>
- <a>
- <href>
- <url>
- <td>
- <tr>
- <th>
- <table>
- Inline CSS
- Embedded CSS
- External CSS
- Internal HTML
- Web Browser
- Search Engine
- Content Management System
- DNS
- <media>
- <video>
- <movie>
- <play>
Short Answer Practice
Long Answer Practice
⭐ Important Questions
- What is web development? Differentiate front-end and back-end.
- Differentiate between a web browser and a search engine.
- What is a Content Management System? Give examples.
- Is HTML a programming language? Justify.
- Differentiate between a tag and an attribute.
- Explain the basic structure of an HTML document.
- What is the use of the <br> tag?
- List four text-formatting tags with their uses.
- Differentiate ordered and unordered lists.
- Write HTML code to create a hyperlink.
- Explain <th>, <tr> and <td>.
- Write HTML for a simple registration form.
- Explain <video> and <audio>.
- Differentiate between Canvas and SVG.
- Differentiate domain name and web hosting.
- What is CSS? Explain its three types.
- Write an HTML page using external CSS.
Frequently Asked Questions
No. According to the source notes, HTML is a markup language because it structures and describes webpage content rather than performing programming logic, calculations or decisions.
A browser is software used to open and display websites, while a search engine is a web-based service used to find webpages and information.
A CMS is software that allows users to create, organize and publish website content without manually coding every webpage.
The three types covered in the notes are Inline CSS, Embedded/Internal CSS and External CSS.
A domain is the address people use to reach a website, while hosting is the server space where the website files are stored.
Yes. An HTML file can be opened directly from a computer in a web browser without an internet connection.
Conclusion
Unit 6 introduces the basic technologies used to create and publish websites.
For examination preparation, focus especially on browser vs search engine, CMS, HTML structure, tags and attributes, lists, hyperlinks, tables, forms, HTML5 multimedia, domain and hosting, and the three types of CSS.
Continue learning with Nepal eNotes for more NEB Class 11 Computer Science notes, solutions and exam preparation materials.
Discussion
Share a helpful question, idea, or explanation with other students.