Chapter 4- Concept of Web Technology
Give appropriate
technical terms for the following:
Web Technologies
b.
The comment on blogs (such as this one), play games and is regrettably
responsible for all of the obnoxious popup adverts on the website.
JavaScript
c.
A server-side scripting language for developing dynamic web pages and
applications.
. PHP
d.
The presentation layer is made up of HTML, CSS, and JavaScript.
Front-End Technologies
e.
The hidden realm of servers and databases provides data storage and servers for
the front end.
Back-End
f
The crucial for user interaction, encompassing layout, visual design,
typography, color schemes, and interactive components.
User Interface (UI) Design
g.
The user's overall interaction with a website or application encompasses ease
of use, efficiency, and satisfaction.
User Experience (UX)
h.
An effective tool for developing complex wireframes and high-fidelity
prototypes
Wire framing Tools
i.
A tag that comes in a pair, consisting of an opening tag and a closing tag
Paired Tag (Container Tag)
j.
A tag that does not have a closing tag or any content inside it.
Singular Tag (Empty or Unpaired Tag)
k.
The information about web documents is ignored by any web browser.
HTML Comments
l.
A scrolling piece of text displayed either horizontally across or vertically
down
Marquee
m. A collection of related items that have no special order or sequence.
Unordered List (<ul>)
n.A list of
items with a description or definition of each item.
Definition list
o.
A single-line text input but it masks the character as soon as a user enters
it.
Password Field (<input
type="password">)
Short Answer
Questions:
a.Define
tag. Differentiate between paired tag and singular tag with examples.
A
tag is an HTML element that defines how content should appear on a webpage.
Paired
Tag:
Has opening and closing, e.g., <p> ... </p>
Singular
Tag:
Has no closing tag, e.g., <br>.
b.What
is meant by attributes? Explain.
Attributes
provide additional information about HTML elements, such as style or behavior.
Example: <img src="image.jpg" alt="description">.
c.Explain
the structure of HTML with an example.
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Rosebud School</h1>
</body>
</html>
d.
How is the font tag used? What are its attributes?
<font
face="Arial" size="4" color="blue">Text</font>
Attributes:
face, size, color.
e
Name the tags for breaking paragraphs and lines.
Paragraph:
<p>
Line
Break: <br>.
f
What are the different types of lists used in HTML?
Ordered
List (<ol>)
Unordered
List (<ul>)
g
What is a hyperlink? Give example.
Hyperlink
is a link that creates a clickable link.
<a
href="https://example.com">Visit Example</a>
h
Is it possible to insert an image to the web page? If yes, then how?
Yes,
using <img> tag.
<img
src="image.jpg" alt="Description">
i.What
are the main HTML tags used in <TABLE> tags?
<table>,
<tr>, <td>, <th>, <caption>, colspan, rowspan.
j
What are the types of text input used on forms? Explain in brief.
text,
password, radio, checkbox, textarea, select.
k.
What is CSS? Write its syntax.
CSS
stands for Cascading Style Sheets. It is used to define the style and layout of
HTML elements on a web page, including colors, fonts, spacing, and positioning.
CSS
Syntax:
selector
{
property: value;
}
Example:
p
{
color: blue;
font-size: 16px;
}
l.
What are the types of a CSS?
Inline
CSS
Internal
CSS
External
CSS
Long Answer Questions:
a.
Explain the basic structure of an HTML document. Describe the purpose of each
section, including <html>, <head>, and <body>. Provide an
example of a simple HTML document.
Ans:An
HTML document has a structure with three main parts:
<html>:
This is the root tag. It tells the browser that this is an HTML document.
<head>:
This part has information about
the webpage like the title, styles, or links to CSS.
<body>:
This part contains everything we see on the page like text, images, buttons,
etc.
Example:
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first HTML page.</p>
</body>
</html>
b. What are HTML attributes? Discuss their role
with examples. Mention attributes like src, and href.
Ans: Attributes give extra information about HTML elements.
They are added inside the opening tag.
Examples:
src
is used in the <img> tag to give the image file location.
<img
src="image.jpg" alt="My Image">
href
is used in the <a> tag to add a link.
<a
href="https://www.google.com">Go to Google</a>
c.How are forms created in HTML? Explain the
different input types and attributes used to build a functional form. Include
an example of a complete HTML form.
Ans:Forms
are made using the <form> tag. It helps collect user data like name,
email, etc.
Input types
include:
·
text
for names,
·
email
for email addresses,
·
password
for passwords,
·
submit
for the submit button.
Common
attributes:
·
action
(where to send data),
·
method
(how to send it, like GET or POST).
Example:
<form
action="/submit" method="post">
Name: <input type="text" name="username"><br>
Email: <input type="email" name="email"><br>
<input type="submit" value="Send">
</form>
d. What are lists in HTML? Explain the difference between ordered
lists, unordered lists, and description lists with examples.
Ans: Lists are used to show items in
a sequence or group.
Types:
Ordered list
<ol>: Items are numbered.
<ol>
<li>First</li>
<li>Second</li>
</ol>
Unordered list
<ul>: Items have bullets.
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
e. What is the role of hyperlinks in HTML? Describe the use of the
<a> tag and its attributes.
Ans: Hyperlinks help us connect to
other pages or websites.
·
The
<a> tag is used to make links.
·
The
href attribute gives the URL to open when clicked.
Example:
<a
href="https://www.wikipedia.org">Visit Wikipedia</a>
f. Discuss the importance of the <table> element in HTML.
Explain the structure of an HTML table, including rows, columns, and attributes
like border, colspan, and rowspan.
Ans: Tables help show data in rows
and columns.
Structure:
<table>
starts the table.
<tr>
creates a row.
<td>
is for a cell (data).
<th>
is for a header cell.
Useful
attributes:
border:
shows table borders.
colspan:
one cell spans many columns.
rowspan:
one cell spans many rows.
Example:
<table
border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td rowspan="2">Alice</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
</tr>
</table>
g. What is CSS? Discuss the three types of CSS (inline, internal,
and external) with examples.
Ans:CSS (Cascading Style Sheets) is used to style
HTML pages, like changing colors, fonts, and layout.
Types
of CSS:
Inline
CSS – written
inside the HTML tag:
<p
style="color:blue;">Hello</p>
Internal
CSS – written
inside the <style> tag in the <head>:
<head>
<style>
p { color: green; }
</style>
</head>
External
CSS – written in
a separate .css file and linked:
<link
rel="stylesheet" href="style.css">
css
p {
color: red;
}
Notes
Anchor Tag (<a>)
Creates a hyperlink to another web page, file, location, or email.
Example:
<a href="manasalu9.blogspot.com">Example</a>
Image Tag (<img>)
Embeds an image in a webpage.
Example:
<img src="manasalu.jpg" alt="A sample image" width="200" height="100">
<div> Tag
<div> stands for "division".It is a block-level container element used to group other HTML elements together for styling or layout purposes using CSS. It does not display anything special on its own — it's like a plain box used for organization.
<body>
<div>
<h2>Subscribe to Our Newsletter</h2>
<form>
<label>Email:</label><br>
<input type="email" name="email" placeholder="Enter your email"><br><br>
<input type="submit" value="Subscribe">
</form>
</div>
Form and Input Elements
Used to collect user input.
<HTML>
<HEAD>
<TITLE>FORM</TITLE>
</HEAD>
<BODY>
<H1 align="center">Newsletter</H1>
<form>
<!-- Text Input -->
<label>Name: <input type="text" name="username"></label><br><br>
<!-- Checkbox -->
<label><input type="checkbox" name="subscribe"> Subscribe to newsletter</label><br><br>
<!-- Radio Button -->
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label><br><br>
<!-- Select Box -->
<label>Choose a subscription of Newsletter:
<select name="Newsletter">
<option value="1 month">1 month</option>
<option value="3 months">3 months</option>
<option value="6 months">6 months</option>
<option value="1 year">1 year</option>
</select>
</label><br><br>
<!-- File Select -->
<label>Upload Photo: <input type="file" name="Upload Photo"></label><br><br>
<!-- Submit Button -->
<input type="submit" value="Submit">
<!-- Reset Button -->
<input type="reset" value="Reset">
</form>
</body>
</HTML>
Web Development Life Cycle (WDLC)
A step-by-step process of creating and maintaining a website to ensure fast, easy, and user-friendly development.
Stages of WDLC:
Planning: Create a basic layout and site map.
Design and Layout: Choose colors, fonts, and images.
Content Creation: Add text, images, videos, etc.
Development: Convert design into code.
Testing: Check and fix errors.
Maintenance: Update and improve the website regularly.
DNS (Domain Name System)
DNS translates website names into IP addresses so computers can understand them.
Examples of Domain Types:
.com – Commercial
.org – Organization
.gov – Government
.edu – Education
.np – Nepal
DNS Registration Process:
1. Choose a unique domain name.
2. Check if it's available.
3. Select a domain registrar (e.g., nestnepal.com).
4. Buy and register it.
5. Renew before expiry to keep ownership.
UI/UX Concepts
Front End:
Visible part of a website (buttons, text, images). Focuses on UI/UX.
Back End:
Behind-the-scenes operations (data, functions, logic).
UI (User Interface):
What the user sees and interacts with. Focuses on design and appearance.
UX (User Experience):
How the user feels using the website. Focuses on ease and satisfaction.
Why UI/UX is Important:
· Engages users
· Makes navigation easy
· Supports branding
· Saves time and cost
Who designs UI/UX?
Web Designers and UI/UX Designers.
In which WDLC stage?
Design and Layout
Wireframe
A rough sketch showing the layout of a web page.
Purpose:
· Shows structure and user flow
· Easy to modify and understand
· No coding required
Benefits of Wireframe:
· Easy to draw
· Easy to understand
· No need for programming
· Saves cost and time
Tools for UI/UX Design:
Figma – Collaborative design
Adobe XD – Create interfaces and layouts
Balsamiq – Create wireframes