Chpater#4

Introduction to web design and HTML

Website:

A website is a collection of related web pages that are connected and available on the internet under one
domain name.

Example:

[Link], [Link], [Link]

Webpage:

A single document on a website that displays: Text, Images, Videos, Links etc.

Example:

A product page on Amazon.

A website can contain:

o Text, Images, Audio, Video, Databases, Hyperlinks etc.

A website can be owned by:

 A company
 The government
 An educational institute
 An individual person
 A hospital

Advantages/Benefits of website:

 Easy to communicate
 Gives quick access to info
 Saves paper and time
 Helps in marketing and selling
 Reaches more people
 Good for publicity and ads
 Works from anywhere, anytime
 24/7 hours services

1
Disadvantages of a Website:

 Info may be wrong or fake

 Needs internet to use
 Site may not open if server is down
 Can be hacked
 Privacy can be at risk
 Costly to build and maintain
 Needs regular updates
 Slow speed can cause problems
 May not work well on all devices

Birth of the Internet & Web

 Need to transfer files led to the creation of the World Wide Web.
 Invented by Tim Berners-Lee in 1989 at CERN, Switzerland.
 Each computer is uniquely identified by its IP address(Public IP address)
 Used IP addresses to send documents between computers.
 Example
o [Link]
o IPv4 is 32 bit address

Key Concepts by Tim Berners-Lee

 Hypertext: Linked text on websites.

 Hyperlink: Address of the hypertext.
 Hypermedia: Media files like photo, video, audio on the web.
 Created Web Browser to view web documents.
 Enabled easy navigation with just a click.

Web client:

A web client is a computer connected to the Internet that allows users to browse
websites from servers.

Example: Mobile, Tab, Laptop, PC etc.

2
 Web server:

A web server is a computer connected to the Internet that hosts (stores) websites

Sample MCQ Ans.

1. Image, video, audio on internet called--

a) hyper link b) hyper text c) hyper media d) hyper voice 1.c
2. The purpose of a web server is to ______

a) host websites b) store files in c) access websites from d) create websites 2.a
browser client
3. Websites can contains ---- 3.d

i. Database

ii. Hyper link

iii. Video

Which is correct?
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 3.d

4. How many bits remain in the IPv4 address?

a) 2 b) 8 c) 16 d) 32 4.d

5. Shuvo went to a cybercafé and filled up an electronic application form for college admission. Sitting
there he received an SMS of confirmation of the successful submission of the form. What type of IT
service did Shuvo receive?
a) Web hosting b) E-Commerce c) Electronic mail d) Websites browsing 5.d

6. Who is the inventor of WWW?

a) Tim Berners Lee b) Mark Zuckerberg c) Steve Jobs d) Charles Babbage 6.a

7. What is the term for the clickable elements on a web page that lead to other locations online?
a) Icons b) Images c) Hyperlinks d) Buttons 7.c

8. Transferring information from client to server is called--------

a) upload b) hyperlink c) download d) client 8.a

3
 Browser:

A web browser is a software that helps you visit websites.

Example:

o Mozilla Firefox
o Google Chrome
o Safari
o Internet Explorer
o Microsoft Edge

Internet connection and web browser needed to visit/browse the websites.

Sample MCQ Ans.

1. The primary function of a web browser is to ----

a) Store data on your b) Run video games c) Access and interact d) Write computer 1.c
computer with websites programs
2. Which software are used to display data on the website?
a) Paint and Word b) Notepad and SQL c) chrome and Mozilla d) Norton and bKash 2.c

4
3. To visit a home page we must need.....

i) web browser

ii) search Engine

iii) Internet

Which is correct?
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 3.b

4. Someone can visits a website by----

i) Google chrome

ii) MySQL

iii) Mozilla

Which is correct?
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 4.c

5. Which part of the browser is located at the top?

a) address bar b) title bar c) close button d) open 5.b

6. What is the address bar in a web browser used for?

a) Entering Uniform b) Managing c) Displaying search d) Viewing browsing 6.a
Resource Locators bookmarks results history

Network protocol:

A set of rules that provide communication in a network called protocol.

Examples:

HTTP= Hyper Text Transfer Protocol(used for browsing)

FTP= File Transfer Protocol

TCP/IP = Transmission Control Protocol/Internet Protocol

URL (Uniform Resource Locator):

A URL is the address of a webpage on the Internet.

5
 Example:

[Link]

Sample MCQ Ans.

1. The full form of URL is ---------

a) Uniform Resource b) Uniform Research c) Uniform Reaching d) Unit Resource 1.a
Locator Locator Locator Locator
2. Which is NOT the task of HTTP?
A. connection between B. transmit the client’s C. change and enhance D. stop transmission 2.c
browser & server request to the server data while reaching to when the transmission
client is done
3. Usually, the address used on Internet---

i) IP address ii) Text-based DNS iii) Local Address

Which is correct?
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 3.a

4. What is HTTP?
a) Hyper Text Transfer b) Hyper Test Transfer c) Higher Test Transfer d) Hyper Text 4.a
Protocol Protocol Protocol Transection Protocol
5. [Link] what is the last part?
a) protocol b) domain name c) file type d) domain type 5.c

6
6. The unique address of web site….

a) IP address b) URL c) HTTP d) domain type 6.b

7. HTTP is a browsing __________

a) website b) search engine c) web portal d) protocol 7.d

8. [Link] what is the top-level domain here?

a) http b)www c) gov d)board 8.c

9. What is called the rule of receiving and sending data in a computer network?
a. URL b. Protocol c. Browser d. IP address 9.b

10 Which represents the domain name?

a) Internet b) URL c) Yahoo d) google 10.b

Client –Server relationship

 Client: Sends user input (Request).
 Server: Processes input and sends back result (Response).

7
 Example:

Creating an account on a website involves:

1. Client sends form data.

2. Server checks and processes.
3. Sends success/error message.

Programming for Web:

Server-side languages: PHP, Python, Ruby, Java.

Client-side technologies:

o HTML: Structures content (not a programming language).

o CSS: Styles the website (colors, layout).
o JavaScript: Handles client-side actions and interactivity.

HTML is used to create the structure of a webpage (like text, images, buttons), while CSS is used
to style it (like colors, fonts, layout).

Using them together makes the webpage both organized and attractive.

Sample MCQ Ans.

1. Examples of server side software are---

a) Python, Ruby b) HTML,CSS c) C/C++ d) JavaScript, R 1.a

2. What is the full form of CSS?

a) Case Style Sheet b) Computer Style c) Cascading Style Shift d) Cascading Style 2.d
Sheet Sheet
3. Relation between web client and server--
i) client send request
ii) server checks the validity of request
iii) server response with feedback
Which is correct?
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 3.d

4. Which type of website allows client-side programing?

a) static b) dynamic c) fixed d) structure 4.b

5. What is the full form of HTML?

a) Hi Text Markup b) Hyper Text Markup c) Hyper Text Makeup d) Hyper Text Markup 5.b
Language Language Language Level

8
6. What is sent by client to server?
a) acknowledge b) response c) request d) feedback 6.c

7. To make a website look visually appealing, what is commonly used in conjunction with HTML?

a) PHP b) Python c) Ruby d) CSS 7.d

8. What are tags used for in a markup language?

a) To define variables b) To insert comments c) To structure and d) To perform 8.c

and functions and annotations display data mathematical
operations

Types of websites (based on runtime changes)

1) Static Websites

2) Dynamic Websites

1) Static Websites

Static Websites are simple sites built using HTML and CSS with fixed pages
that cannot take user input or use a database.

Example:

Company brochure websites, small business info sites, or documentation pages built
without a database.

2) Dynamic Websites:

Dynamic Websites are interactive sites that use server-side languages like PHP
or Python with databases (e.g., MySQL, SQL Server) to generate new pages and
take user input.

Example:

YouTube, Amazon, Twitter, Gmail, and online banking websites

9
 Static vs Dynamic Websites

Static Websites Dynamic Websites

1) Can’t take input from user 1) Can take input from user
2) No database used 2) Database used
3) Use HTML and CSS 3) Use PHP, Python, etc. with database
(MySQL/SQL Server)
4) Fixed number of pages 4) New pages can be generated
5) Hard to update 5) Easy to update
6) One-way communication 6) Two-way communication
7) Simple structure & easy to develop 7) Complex structure & hard to develop
8) Faster loading time 8) Slower loading time
9) Less expensive to build 9) Expensive
10) User login system is not possible 10) User login system is possible
11) Company brochure websites, small business 11) YouTube, Amazon, Twitter, Gmail, and
info sites, or documentation pages built without a online banking websites
database.

Sample MCQ Ans.

1. Based on the change of runtime how many types of websites?

a) 2 b) 3 c) 4 d) 5 1.a

2. Websites built with HTML and CSS are most likely ---
a) Dynamic websites b) Static websites c) Mobile-friendly d) CMS websites 2.b
websites
3. Developing a dynamic website requires -----

i. PHP ii. Python iii. MySQL

Which of the following is correct?

a) i & ii b) i & iii c) ii & iii d) i, ii & iii 3.d

10
4. Which languages are used for creating static websites?

a) PHP & MySQL b) ASP & Python c) CSS & HTML d) JSP & XML 4.c

5. Joy and Shaheed developed a website using HTML where each page can be visited from any page and
the website can be loaded faster. Later because of some problems they use MySQL and PHP and some
tools to change the website. Their decision may lead to____

i) easy change the content

ii) can add a database

iii) increase the security of the website

Which of the following is correct?

a) i & ii b) i & iii c) ii & iii d) i, ii & iii 5.d

6. For developing a web-based database you will need :

a) MS Access b) SQL Server c) Debase d) FoxPro 6.b

7. Static Website —
i) Faster loading time
ii) Difficult to update content
iii) Developed mainly using HTML
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 7.d

Sample CQ
Students at the higher secondary level of a college were divided into two groups and instructed to develop a website. The
first group developed their website using HTML and CSS, while the second group used CSS, MySQL, PHP, etc., to
develop theirs. The judges selected the second website.

Q) Explain why the judges selected the second website.

The teacher discussed two types of websites in his lecture, explaining that one is interactive while the other is not.

Q) Based on the teacher's discussion in the passage, which of the two types of websites do you think is more suitable for
use?

11
By using the website of ‘KHA’ College, one can fill out the admission form, input examination marks, and guardians can
exchange their views and opinions related to education.

Q) What type of website is mentioned in the above stem?

The website of Shila’s college provides two-way communication between the server and the browser.

Q) Describe the type of website mentioned in the above stem.

Two friends, Ela and Anjum, developed a website. Though the website can be browsed quickly, the information cannot
be updated regularly. That’s why they decided to rebuild the website using tools like PHP, MySQL, etc.

Q) Analyze the logic behind the decision mentioned in the stem.

Risha wanted to develop a website, so she consulted a web developer. The web developer suggested two methods: one is
cheap but hard to update regularly, and the other is costly but easier to update.

Q) What type of websites are mentioned in the stem?

Structure a website

A website has one or more web pages. The first page is called the Homepage. Websites have
different pages based on their purpose. For example, audio/video sites have pages to play videos.
Most sites have a profile page for users. Blog sites have a page for each blog post. Some
common pages are Contact Us, About Us, and FAQ.

Types of Websites Based on Structure

A) Hierarchical/Tree structure

B) Linear/Sequential structure

C) Network/Relational structure

D) Hybrid structure

12
A) Hierarchical/Tree structure:

A tree-like structure where the homepage acts as the root, leading to main categories and
subcategories.

Example:

Common in corporate and e-commerce sites.

B) Linear/Sequential structure

Pages are arranged in a step-by-step sequence, guiding users through a predefined order.

Example:

Used in tutorials, online courses, and presentations.

C) Network/Relational structure

Pages are interconnected in a web-like manner, allowing users to navigate freely between related
content.

13
 Example:

Found in wikis and research websites.

D) Hybrid structure:

A combination of multiple structures, typically mixing hierarchical and network models for
better navigation.

Example: Common in complex websites like news portals and educational platforms.

Ans.

Sample MCQ
1. Which model of the website consists of 2 or more models?
a) sequential b) network c) hybrid d) relational 1.c

2. Which structure is commonly used for online tutorials?

A) Hierarchical B) Linear Structure C) Network Structure D) Hybrid Structure 2.
Structure
3. Usually an website consists of—
i) FAQ
ii) home page
iii) contact us
Which of the following is correct?
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 3.d

14
4. The figure indicates ______structure of website

a) relational b) network c) hybrid d) sequential 4.d

5. The figure indicates ______structure of website

a) relational b) hierarchical c) hybrid d) sequential 5.b

6. The figure indicates ______structure of website

a) relational b) hierarchical c) hybrid d) sequential 6.a

Sample CQ

Q) What types of website structures are shown in Figure 1 and Figure 2? Which one is better?

15
Q) What type of website structure is shown in this figure?
A university website has a homepage that contains links to different faculties. Each faculty page further contains links to
departments, and each department page provides links to faculty members and course details.

Q) What type of website structure is used in this scenario?

What type of website structure is shown in this figure?

An online training program offers a step-by-step learning experience. Users must complete each module before
proceeding to the next. Navigation is strictly sequential, ensuring learners follow a predefined learning path.

What type of website structure does this training program follow?

A news portal organizes its content in a main menu with sections like "Politics," "Sports," and "Entertainment." However,
within articles, there are also links to related news stories, allowing readers to explore topics non-linearly.

What type of structure does this news portal primarily use?

Basic idea of HTML

 HTML is used to create webpages.

 File extension must be .html (e.g., [Link]).
 Open with a web browser → shows output.
 Edit using text editors like Notepad, Notepad++ and Sublime Text.

HTML Tags

Tags are like brackets: <tagname> and </tagname>.

<b> Hello </b>

Opening tag Closing tag

Content

16
 Content is written between opening and closing tags.

Example:

<b>Hello</b>

Sample HTML file

<!DOC Type HTML>

<html>
<head>
- ---------
</head>
<body>
----------
</body>
</html>

Formatting tags:

HTML formatting tags are used to change the appearance of text on a webpage. Here's a quick
list of common formatting tags:

Example of some common formatting tags:

tag Purposes
<b> Used to display bold text
<i> Used to display italic text
<u> Used to display underlined text

17
<b> tag:

Used to display bold text

Example:

<!DOC Type HTML>

<html>
<head> </head>
<body>
<b> Bangladesh </b>
</body>
</html>

Result:

Note: <strong> tag can also serve the same purposes

<i> tag:

Used to display italic text

Example:

<!DOC Type HTML>

<html> Result:

<head> </head>
<body>
<i> Uttara </i>
</body>
</html>

18
Result:

Note: <em> tag can also serve the same purposes emphasize (italic)

<u> tag:

Used to display italic text

Example:

<!DOC Type HTML>

<html> Result:

<head> </head>
<body>
<u> Dhaka </u>
</body>
</html>

Result

Note: <ins> tag can also serve the same purposes

Different tags can be applied to the same text:

<!DOC Type HTML>

<html>
<head> </head>
<body>
<b><u><i>Bangladesh</i></u></b>
19
</body>
</html>
Result:

<title> tag:

Displays the text in the browser's title bar. The title tag should be placed inside the <head>
section

<!DOC Type HTML>

<html>
<head> <title> Welcome </title>
</head>
<body>
</body>
</html>

Result:

20
 Remarks/comments:

In HTML, remarks/comments are notes in the code that are not displayed on the web page.
They are written between <!-- and --> and are used to explain code, leave reminders, or disable
parts of the code temporarily.

Example:

<!-- DOC Type HTML -->

Ans.

Sample MCQ
1. The extension of an HTML file is ______
a) .http b) .html c) .txt d) .c 1.b

2. Which is a HTML editor?

a) Notepad b) Paint c) Mozilla d) MS Word 2.a

3. The HTML editor can be—

i) Notepad++

ii) Sublime Text

iii) chrome

Which of the following is correct? a) i & ii b) i & iii c) ii & iii d) i, ii & iii
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 3.a

4. Feature of html---

i) case sensitive

ii) supported by all browsers

iii) need to use tag

Which of the following is correct? a) i & ii b) i & iii c) ii & iii d) i, ii & iii
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 4.c

5. Formatting tags are---

a) <ol>,<th>,<src> b) <table>, <li>, <td> c) <a>,<img>,<href> d) <b>, <i>, <u> 5.d

6. Which tag is used to make text bold?

a) <a> b) <b> c) <i> d) <u> 6.b

21
7. Which tag is used to make text underlined?
a) <a> b) <b> c) <i> d) <u> 7.d

8. Which tag is used to make text italic?

a) <a> b) <b> c) <i> d) <u> 8.c

9. Which is the correct example of writing tag?

a) <b><i> abc<i><b> b) </b></i> abc<i><b> c) <b><i> abc</b></i> d) <b><i> 9.d
abc</i></b>
10 Which are basic tags?
a) <ol>, <img>, <del> b) <a><b><table> c) <html><head><body> d) <font>, <p>, <div> 10.c
11 Which symbols are used for a tag?
a) {} b) <> c) [] d) $$ 11.b

12 <title> tag is used under ____

a) <body> b) <h1> c) <p> d) <head> 12.d

<sup> tag:

Displays text as superscript.

<!DOC Type HTML>

<html>
<head> </head>
<body>
X ³Y
</body>

</html>

Result:

22
 <sub> tag:

Displays text as subscript.

<!DOC Type HTML>

<html>
<head> </head>
<body>
H ₂ O
</body>
</html>

Result:

Sample MCQ Ans.

1. What is the output of the following tag?

A₂B³
a) A2B3 b) A2B3 c) A2B3 d) A2B3 1.d

2. What is the correct tag for seeing P2Q3 as output?

a) b) c) d) 2.a
P²Q₃ P₂Q₃ P²Q₃ P²Q₃

3. What is the correct tag for seeing the following output?

a) X²N b) X<sup>2^{N c) X}2<sup>N d) X²N 3.b

 </sup></sup> </sup><sup>

23
4. What is the meaning of <sub> in HTML?

a) Superscript text b) Subscript text c) Small text d) strong text 4.b

Heading tags : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Used to define headings:

<h1> tag:

<!DOC Type HTML>

<html>
<head> </head>

<body>

<h1>Today’s Headline</h1>

</body>

</html>

Result:

<h2> tag:

<!DOC Type HTML>

<html>
<head> </head>
<html>
<body>
<head>
<h2>Today’s Headline</h2>
<title>Heading Example</title>
</body>
</head>
</html>
24
 Result:

………………..

………………..

<!DOC Type HTML>

<html>
<head> </head>

<body>

<h1> Headline 1</h1>

<h2> Headline 2</h2>

<h3> Headline 3 </h3>

<h4> Headline 4 </h4>

<h5> Headline 5 </h5>

<h6> Headline 6 </h6>

</body>

</html>

Ans.

Sample MCQ
1. What is the smallest heading tag in HTML?

a) <h1> b) <h3> c) <h6> d) <h7> 1.c

2. What is the highest heading tag in HTML?

a) <h1> b) <h3> c) <h6> d) <h7> 2.a

25
3. <h2> ABC </h2> the output text “ABC” will be ---

i) larger

ii) bold

iii) underlined
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 3.a

4. What is the valid range of heading tags in HTML?

a) <h0> to <h5> b) <h1> to <h6> c) <h1> to <h5> d) <h2> to <h7> 4.b

5.

What is the output of the HTML code?

a) Text will be in larger b) Text will shown as c) Text will be scrolled d) hyper link will be 5.a
size title created

<del> tag:

<del> tag shows deleted text, usually displayed with a strikethrough.

<!DOC Type HTML>

<html>
<head> </head>

<body>

<del> My old phone number </del>

</body>
26
</html>
 Note: <strike> tag serves similar purpose as <del>

Sample MCQ Ans.

1. Which is alternate of the < del > tag?

a) < img > b) < strike > c) < div > d) < font > 1.

2. What is the output of the below html tag?

2.

3. Correct tag for the output mentioned below are___

i) < del >

ii) < strike >

iii) < div >

Which of the following is correct?

a) i & ii b) i & iii c) ii & iii d) i, ii & iii 3.

<br> tag:

Used to insert a line break in text. It’s an empty tag (no closing tag needed).

<!DOC Type HTML>

<html>
<head> </head>

<body>

Hello! <br> World

</body>

</html>

27
 Result:

Sample CQ

Write HTML code to produce the output shown in the above stem.

<p> tag:

Defines a paragraph in HTML. Automatically adds some space (margin) before and after the
paragraph.

<!DOC Type HTML>

<html>
<head> </head>

<body>

<p>DHAKA</p><p> BANGLADESH</p>

</body>

</html>

Result:

28
 <p> tag with attribute:

<!DOC Type HTML>

<html>
<head> </head>

<body>

<p align="center"> Dhaka </p>

</body>

</html>

<p align="center"> Dhaka </p>

Opening tag Attribute Attribute Closing tag

The value "left" and "right" is also possible with align attribute.

Attribute:

An attribute is a modifier of an HTML element that provides extra information about that
element. Attributes are always included in the opening tag and usually come in name-value pairs.

29
 <p align="center"> Dhaka </p>

Opening tag Attribute Attribute Closing tag

Value:

In HTML, the value is the specific information assigned to an attribute of an HTML element.
It tells the browser how to apply that attribute to the element.

<p align="center"> Dhaka </p>

Opening tag Attribute Attribute Closing tag

<div> tag:
The <div> tag is used to divide a document into separate sections.

Sample MCQ Ans.

1. Which tag creates more space between two lines?

a) <div> b) <br> c) <p> d) <del> 1.c

2. What is the correct syntax for aligning a <p> tag to the center using the align attribute?
a) <p align =centre> b) <p align = "center"> c) <p align : center> b) <p center= "align"> 2.b

3. Value of align can be: iii) top is correct? 3.a

30
 i) left ii) center iii) top

Which of the following is correct

a) i & ii b) i & iii c) ii & iii d) i, ii & iii 3.a

4. Which is the attribute value of the following HTML code?

b) <p align = "right"> ICT </p>
a) p b) ICT c) right d) align 4.c

5. Which can be alternate of <div> tag?

a) <a> b) <b> c) <i> d) <br> 5.d

Pair tag/container tag

A pair tag has both an opening and a closing tag.

Also called double tag

Syntax:

<b> Hello </b>

Opening tag Closing tag

Conte

Examples:
nt
o <b> </b>
o <i> </i>
o <p> </p>
o <u> </u>

Non Pair tag/Empty tag:

An empty tag is an HTML tag that does not have a closing tag and cannot enclose content.

Also called self cslosing tag.

Example:

31
 o <br>
o <hr>
o <img>

<hr> Tag:

Used to draw a horizontal line in an HTML page, typically for separating sections of content.

Sample MCQ Ans.

1. Which is a non-pair tag?

a) <a> b) <b> c) <br> d) <tr> 1.c

2. Which tag has no closing tag?

a) table tag b) empty tag c) pair tag d) basic tag 2.

3. Example of empty tag: i) <img> ii) <hr> iii) <br> Which is correct ?

a) i & ii b) i & iii c) ii & iii d) i, ii & iii 3.d

4. Which one is an empty tag?

a) <hr> b) <b> c) <caption> d) <tr> 4.a

5. Which one is a pair tag?

b) <hr> c) <img> c) <br> d) <span> 5.d

6. What is the use of the < br > tag?

a) page break b) line break c) Delete page d) hyperink 6.b

7. The tag <HR> means---

a) heading of table b) heading new c) horizontal line d) header file 7.c

32
 Sample CQ
<html>

<head><title> my web</title></head>

<body>

<i>Uttara</i> <br> <b>Dhaka </b>

<br><u>Bangladesh </u><br>

H₂O

</body>

</html>

What is the output of the above html code?

Write HTML code to the show the above output.

33
Advantages / Benefits of HTML for Creating Websites:

 Very easy to learn and use

 Free – no need to buy software
 Not case sensitive
 Works on all browsers
 Platform independent – runs on any device
 Can show text, images, audio, video
 Helps create links to other pages (hyperlinks)
 Can be used with CSS and JavaScript for better design and interactivity
 Used to build the structure of every website

Disadvantages of HTML:

 Can only create static websites

 Must write many tags manually
 No built-in security
 Must memorize many tags
 Can’t connect with a database directly
 Not suitable for complex or dynamic websites
 Design and layout are limited without CSS

<font> tag:

An HTML tag used to change the font face, size, and color of text.

Example1:

<!DOC Type HTML>

<html>
<head> </head>

<body>

<font color="red"> Uttara </font>

</body>

</html>
34
 Example2:

<font size="7" color="Blue"> Uttara </font>

<!DOC Type HTML>

<html>
<head> </head>

<body>

<font size="7" color="Blue"> Uttara </font>

</body>

</html>

Example3:

<!DOC Type HTML>

<html>
<head> </head>

<body>

<font face="Arial"> Rajuk College </font>

</body>

</html>

Sample MCQ Ans.

1. What is the HTML color code for black? a

a) #000000 b) #FFFFFF c) #FF0000 d) #00FF00 1.a

2. What is the HTML color code for white?

a) #FFFFFF b) #000000 c) #FF0000 d) #00FF00 2.a

3. Attributes of font tag are----

35
 i) type

ii) color

iii) size
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 3.c

4. Which is a valid html code?

a) <font size="red" color="5" > b) <font size="5" color="red" > c) <size="5" color="red" > c) size="5" font color="red" 4.b

5. What is the correct value for face attribute?

a) 7 b) red c) Times New Roman d) size 5.c

<span> tag:

<!DOC Type HTML>

<html>
<head> </head>

<body>

This is a black text. But <span style="color:RED"> this is other text </span>

</body>

</html>

Red color

Example:

I am fine. <div style="color:RED">This is a colorful line</div>

36
 How to set background color:

<!DOC Type HTML>

<html>
<head> </head>

<body style="background-color:red">

</body>

</html>

Another way to set background color:

<!DOC Type HTML>

<html>
<head> </head>

<body bgcolor="Yellow">

<body>

</body>

</html>

Sample MCQ Ans.

1. Style attribute related with---

A) img B) table C) body D) list 1.c

2. Which attribute used to change background color in html

a) br b) style c) img d) list 2.b

37
3. The color of text can be changed by--- tag

i) Font

ii) Span

iii) Div

Which is correct
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 3.d

List tag:
ul=unordered list
ol=ordered list

<ul> tag in:

the <ul> tag in HTML is used to define an unordered list, where list items are displayed with
bullets (•) by default.

Example1:

<!DOC Type HTML>

<html>
<head> </head>
<ul>
<li> Messi</li>
<li> Ronaldo</li>
<li> Neymar</li>
</ul>
<body>
</body>
</html>

38
Result:

Example2:

<!DOC Type HTML>

<html>
<head> </head>
<ul type="circle">
<li> Messi</li>
<li> Ronaldo</li>
<li> Neymar</li>
</ul>
<body>
</body>
</html>

Result:

39
Example3:
<!DOC Type HTML>
<html>
<head> </head>
<ul type="square">
<li> Messi</li>
<li> Ronaldo</li>
<li> Neymar</li>
</ul>
<body>
</body>
</html>

Result:

Example4:

<!DOC Type HTML>

<html>
<head> </head>
<ul type="disc">
<li> Messi</li>
<li> Ronaldo</li>
<li> Neymar</li>
</ul>
<body>
</body>
</html> 40
Result:

<ol> tag:

The <ol> tag is used to create an ordered list, where items are displayed in a specific sequence
using numbers or letters.

Example:

<!DOC Type HTML>

<html>
<head> </head>
<ol>
<li> Messi</li>
<li> Ronaldo</li>
<li> Neymar</li>
</ul>
<body>
</body>
</html>

Result :

41
 <!DOC Type HTML>
<html>
<head> </head>
<ol type="1">
<li> Messi</li>
<li> Ronaldo</li>
<li> Neymar</li>
</ul>
<body>
</body>

Result:

Example:

<!DOC Type HTML>

<html>
<head> </head>
<ol type="a">
<li> Messi</li>
<li> Ronaldo</li>
<li> Neymar</li>
</ul>
<body>
</body>

42
Result :

Example:

<!DOC Type HTML>

<html>
<head> </head>
<ol type="A">
<li> Messi</li>
<li> Ronaldo</li>
<li> Neymar</li>
</ul>
<body>
</body>

Result :

43
Example:

<!DOC Type HTML>

<html>
<head> </head>
<ol type="i">
<li> Messi</li>
<li> Ronaldo</li>
<li> Neymar</li>
</ul>
<body>
</body>

Result:

Example:

<!DOC Type HTML>

<html>
<head> </head>
<ol type="I">
<li> Messi</li>
<li> Ronaldo</li>
<li> Neymar</li>
</ul>
<body>
</body>

44
Result:

Example:

<!DOC Type HTML>

<html>
<head> </head>
<ol type="A" start ="4">

<li> Orange</li>

<li> Mango </li>

<li> Apple </li>

</ol>
</ul>
<body>
</body>
Result:

45
 Sample MCQ Ans.

1. Which is used to create list in html?

a) ul b) th c) tr d) td 1.a

2. Which tag indicates each item of a list in HTML?

a) <ol> b) <li> c) <ul> d) <start> 2.b

3. Related tags of list in HTML are:

i) ol

ii) ul

iii) li
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 3.d

4. What is the default type of an unordered list?

a) square b) circle c) disc d) round 4.c

5. What is the default type of an ordered list?

a) 1 b) a c) i d) A 5.a

6. The values used for ordered list are:

i) 1
ii) A and a
iii) I and i
which is correct?
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 6.d

7. The values used for unordered list are:

i) disc
ii) square
iii) rectangle
which is correct?
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 7.a

8. The output the below tag--

a) A. Dhaka 3. Gazipur b) C. Dhaka D. c) 1. Dhaka C. Gazipur d) a. Dhaka c. Gazipur 8.b

Gazipur

46
 Sample CQ
Home page of ABC college has a list of different faculties in sequential form: Sc, [Link] and humanities .

Write down the html tag for home page of ABC college.

Write HTML code to the display the above figure.

Write HTML code to the display the above figure.

<img> tag:

The <img> tag is used to display images on a webpage.

<!Doctype html>

<html>

<head> </head>

<body>

<img src="[Link]">

</body>

</html>

47
 How to change size of an image:

<img src="[Link]" width="200px" height="100px">

Alt attribute:

The alt attribute provides alternative text if the image cannot be displayed.

Example:

<img src="[Link]" alt="Sorry! Not found">

Show image from a specific location:

Display an image named [Link] stored in the picture folder on the D: drive

<!Doctype html>

<html>

<head> </head>

<body>

<img src="D:/picture/[Link]"></body>

</html>

Sample MCQ Ans.

1. What does the HTML 'img' tag stand for?

a) Import b) Imagine m) Inline d) Image 1.d

2. Which attribute used to show image?

a) source b) src c) jpg d) img 2.b

3. Mr. Rupam tried to show an image on his home page. But the image was NOT displaying properly. the
reasons can be ------
i) The browser did NOT support
ii) The image name was NOT written properly
iii) did not mention the location of the image
Which is correct?
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 3.d

48
4. What is full form of JPG/JPEG?
a) Joint Photographic b) Joint Picture c) Joy Photographic d) Joint Photoshop 4.a
Experts Group Experts Group Export Group Extra Group
5. HTML support --------file.
i) .jpg
ii) .gif
iii) .psd
Which is correct?
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 5.a

6. The size of an image can be changed by –----and ----- attribute.

A) length, weight B) width , height C) border, order D) volume, weight 6.b

7. Which tag is similar of image tag?

a) tr b) hr c) width d) font 7.b

8. 4th page of the website contains a picture name [Link] and its size is 300 x 300 pixels. But the problem is; the
HTML code for page No. 4 is :
a) < img src "[Link]" height b) < img src = "[Link]", c) < image src = "[Link]" d) < img src = "[Link]" 8.d
"300px" width "400px"> length = "300" width = height = "300" width = height = "300px" width =
"300"> "300"> "300px">
9. The most important attribute with an img tag is ———
a) width b) alt c) src d) height 9.c

10 If webpage unable to show the picture which attribute will send a message?
a) alt b) post c) cancel d) hlt 10.a
Tree is name of an image. It is saved in F drive under a folder named XYZ. The tag should be---
a) F:\ XYZ\[Link] b) F:\ [Link]\XYZ c) D:\ XYZ\[Link] d) XYZ\[Link]\F:\ 11.a
Sample CQ
Joly developed a website. On her homepage, there is a picture of a tree.

Write HTML code for Joly’s home page

water [Link]

Write html code to show the picture

Mr. Arif developed a website. On his homepage, he wants to display a picture of his company. The image is 300 × 200
pixels and is stored in a folder named My Photograph on the E: drive of his computer.

Write html code for the home page of Mr. Arif.

49
Hyper link(anchor tag)

The <a> tag in HTML is used to create hyperlinks that connect one page to another, or link to files and
external websites.

Example:

<a href="[Link] Click here </a>

Result:
Click here

Different parts of hyperlink:

Internal hyperlink:

If both pages are within the same website, it is called an internal hyperlink.

Example:

50
 If you want visit [Link] page from home page then the html code will be:

<a href="[Link]"> click here </a>

The importance for hyper link:

o Save time
o Easy to navigate
o Connects related information
o Provides quick access to external resources
o improve user experience
o Makes websites interactive
o Improves search engine ranking (SEO)
o Allows easy sharing of information

Sample MCQ Ans.

1. What is the attribute with anchor tag?

A) href B) a C) url D) src 1.a

2. Which is the correct example of a hyperlink in HTML?

d) <a url="src"> b) ) <a href="URL"> c) <link href=a> d) <href a="URL"> 2.b

3. Hyper link includes—

i) <a>
ii) URL
iii) hyper-reference
Which of the following is correct?
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 3.d

4. Which is the link text here?

<a href="[Link] click here</a>

a) <a> </a> b) href c) [Link] d) click here 4.d

5. Keya and Diya often go to each other's websites to collect the necessary information. It seems quite
time-consuming for them. When they tell their IT teacher about the problem, he suggests them to use a
special tag. Which tag is suggested by the IT teacher in the stem?
a) href b) del c) a d) URL 5.c

6. The advantages of hyper link are ---

i) save time

51
 ii) easy navigation
iii) visit a page or new website
Which of the following is correct?
b) i & iii b) i & iii b) i & iii b) i & iii 6.d

7. Hyper link may connect---

i) two pages in a website
ii) two sites in Internet
iii) two fields of table
Which of the following is correct?
b) i & iii b) i & iii b) i & iii b) i & iii 7.a

Sample CQ
Shila visited a website, clicked on 'Our Board', and was taken to [Link]

Q) Write HTML code for Shila's website.

The ‘Home page’ of Jaisa’s website contains two links. One leads to [Link], and the other link leads to a page
under the home page named ‘[Link]’.

Q) Write html code for Jaisa’s home page

The website of a company has two links: Click ‘Social Network’ to open [Link]. Another link goes to
the product page of the company.

Q) Write HTML code for the above description.

Mr. Azim developed a website. In homepage there is a picture name [Link]. By Clicking on the image a visitor
can go to visit [Link].
Q) Write HTML code for Mr. Azim’s homepage
Promita created 3 pages: [Link], [Link] and [Link] for developing a website. Then she make some
connection system for going from home page to other pages.
Q) What are the importance of Promita’s initiative

52
<table> tag:

Exercise 1:

<table border="1">

<tr><th> Roll </th> <th> Name </th> </tr>

<tr> <td>1</td> <td> Dipu </td> </tr>

<tr><td>2</td> <td> Jashim </td> </tr>

</table>

Exercise 2:

<table border="1">

<tr> <th colspan=“2”>ICT </th></tr>

<tr><td> Sub</td> b<td>Obj</td> </tr>

</table>

53
Exercise 3:

<table border="3">

<tr> <th rowspan="3"> College </th> <td>Sc </td> </tr>

<tr> <td>[Link] </td></tr>

<tr> <td>Hum</td></tr>

</table>

Exercise:

<table border="1" cellspacing="10">

<tr><th>Roll</th><th>Name</th></tr>

54
 <tr><td> 101</td><td> ABC</td></tr>

<tr><td>206</td><td>XY</td></tr>

</table>

Exercise:

<table border="1" cellspacing="0">

<tr><th>Roll</th><th>Name</th></tr>

<tr><td> 101</td><td> ABC</td></tr>

<tr><td>206</td><td>XY</td></tr>

</table>

Sample MCQ Ans.

1. Which is the most important attribute of a table tag?

a) border b) caption c) cellpadding d) cellspacing 1.a

2. Which element is used to define a cell in an HTML table?

a) caption b) th c) header d) td 2.d

3. Related terms of tables are ---

i) td
ii) tr
iii) strike
Which is correct?
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 3.a

4. Which tag is used for creating the row of a table?

a) td b) tr c) th d) cell 4.b

5. Cellspacing is attribute used with ---tag

a) td b) table c) th d) tr 5.b

6. Which attribute joins multiple row of a table?

a) colspan b) Rowadd c) Rowsapn d) Rowjoin 6c.

55
7. Which means table heading ?
a) td b) tr c) th d) h1 7.c

8. What is the output of the following tag?

<table>
<tr><td>a</th><td>b</th></tr>
<tr><td> c</td><td> d</td></tr>
</table>
a) b) c) d) 8.a

9. Which one is connected to table tag?

a) img b) del c) caption d) font 9.c

Sample CQ

Write html code to display the above table if opened by chrome.

Write HTML code so that clicking the "Board" link opens [Link] to view ICT marks.

56
Write html code to display the above table
<table border="1">
<tr>
<th>Roll</th> <th>Name</th> <th>Result</th>
</tr>
<tr>
<td>501</td><td>Sumaiya</td>
<td> <a href="Exam [Link]"> MY test Result</a></td>
</tr>
</table>
What will be the output of the above html code?

Write html code with inserting a picture in the blank cell

Write HTML code so that clicking on [Link] opens [Link]

57
c) Write html code to display the above table
d) Write html code to display the table by converting all rows into columns and vice versa

More Sample CQ
A school named “Alor Shopan” was planning to develop a website. On its homepage, a picture named
“[Link]” will appear, and a list of sections such as IT, Physical Science, and Biological Science will be
arranged. There will also be a ‘Notice Board’ linked on the homepage.

The school authority invited three IT specialists. The IT specialists suggested two solutions. The first one was
cheaper but had some difficulties with regular updates. The second solution was more costly but easy to
update on a regular basis.

C) Write HTML code to create the homepage.

D) Which solution is better for Alor Shopan?
The picture of the administrative building of the ‘X’ Institute is shown on the homepage of its website. Two
webpages named “[Link]” and “[Link]” are linked with the homepage. If the website is
published on the Internet, people around the world will be informed about the institute.

C) Write the HTML code to design the homepage.

D) According to the stem, what steps should be taken to make people interested in the institute?
Mr. Z was demonstrating HTML coding in a programming class. He added a picture from the C drive under a
folder named “Picture.” The name of the image was “[Link]” and its size was 300 × 300 pixels. Then he

58
asked his students to write an HTML code that would allow the image to be clickable and redirect to
[Link]. After that, he wrote:

C) What HTML code was written by the students? Explain its attributes.
A Website has been designed for "Chandana Model College" using HTML only. There is a picture named [Link] of size
200x300 Pix in the home page of the site. There have a link of notice page named [Link] under the picture. The
text "Welcome to Chandana Model College" is displayed on the top of the picture in blue color. There is no
arrangement to give visitors opinion in that website.

C) Write down the HTMI, Code to develop the Home page as mentioned in stern.

D) Explain necessary steps taken so that visitors can give their opinion in website.
XYZ College, Dhaka.
Available Honor’s subject:
[Link]
2. English
3. Mathematics
[Link]

c) Write the HTML code for showing the stem in your college’s home page.
d) Write HTML code for taking the list of Honor’s subject and make a table. There will be a table with headline serial
No and subject name.

Website design and development:

Some key points to keep in mind while designing a website:

 The design should look attractive to users.

 Users should be able to find different features easily.
 The features should be simple and usable.
 The website should load quickly on all devices.
 Security and privacy of users should be ensured.

The design of a website depends on its purpose:

For example, consider a website where users can ask and answer programming-related questions.
Before designing, we must first decide on the key features. These may include:

 User registration and login system.

 Ability to post questions.
 Ability to post answers to existing questions.
 Option for the question owner to select the best answer.

59
  Voting system for helpful answers.
 A points or reputation system to reward good questions and answers.

Next, we decide which pages the website will require.

For each page, we design a layout that defines the placement of elements. At the initial stage, this layout
can be sketched as a wireframe using pen and paper. Later, graphic design tools such as

Adobe Illustrator

GIMP.

Two Parts of Building a Website

Front-End Development (What you see)

 Uses HTML and CSS to build web pages based on design.

 Called front-end development.
 Requires knowledge of more tools beyond HTML & CSS.

Back-End Development (The hidden brain)

 Involves programming for features and database connection.

 Called back-end development.
 Developer with both skills = full-stack developer.

Full-Stack Developer: A developer who knows how to do both front-end and back-end development.

Important Things during Development:

 Design Can Change: Requirements often change, so you should write code that is easy to
modify later.
 Testing is a Must: You must constantly test the website and fix bugs (debugging) to make sure
everything works perfectly.

Publishing a Website (How to Launch It Online

Steps to publish a website:

1. Register a Domain
2. Host the Website.
3. Connect Domain and Server

60
 1) Register a Domain (Naming Your Website)

Problem: IP addresses (e.g., [Link]) are hard to remember.

Solution: Use a Domain Name (e.g., [Link]).

DNS(Domain Name System): It is a system that translates domain names into their
corresponding IP addresses so browsers can find websites.

2) Web Server(hosts the website)

To make your site available to everyone, your files must live on a special computer called a web
server.

A web server must: Have a Public IP Address (its unique location on the internet).

Be on 24/7.

Since personal computers are not practical for this, we use a Hosting Service.

Hosting: You pay a company to rent space on their server and upload your files there.

Example: [Link], [Link]

3) Connect Domain and Server – Link the domain name to your server’s IP address.

Sample MCQ Ans.

1. What is step after design and development of an website?

A) collection of data B) wireframe C) publishing D) system analyze 1.b

2. Which programming languages are commonly used for front-end development?

a) Python and Ruby b) PHP and SQL c) HTML and CSS d) Java and C++ 2.c

3. Steps of website publishing are:

i. Register a Domain
ii. ii. Host the Website
iii. iii. Connect Domain and Server
Which is correct?
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 3.d

4. Who develop both front end and back of website?

a) Front end developer b) Back end developer c) Middle point d) Full stack developer 4.d
developer
5. What is the purpose of a public IP address in website hosting? To improve website security

61
 a) To restrict access to b) To identify the c) To manage web d) d) To improve 5.b
the website location of the server performance website security
6. Debugging means—
A) create B) draw C) correction D) release 6.c

7. What is the process of making a website accessible to all internet users?

a) Publishing b) Design c) Development d) Maintenance 7.a

8. A web server must---

i. have a public IP
ii. Run 24 hours
iii. Connect to the internet
Which is correct?
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 8.d

9. Which one can identify a computer uniquely?

A) Public IP B) Private IP C) host PC D) browser 9.a

10 Task of back end of website--

i. Connect database
ii. Sending email
iii. Implement features of websites
a) i & ii b) i & iii c) ii & iii d) i, ii & iii 10.d
11 Publishing includes ---
A) browsing and upload B) wireframe and design C) domain and hosting D) HTML and tags 11.c

Sample CQ
Shuvo received some training on web page development. He created a webpage with his picture and information, and he
could run it from his own computer. He wanted to improve his site and name it “[Link].” Knowing this, his friend
Rahul said, “I want to visit your webpage tonight.” In reply, Shuvo said, “Not now. I still need to do some publishing
work.”

Q) Explain Shuvo’s comment.

The picture of the administrative building of the ‘X’ institute shown in the home page of it’s website. If the website
published in Internet , awarded people of the world will be informed about the institute.

Q) According to stem what steps should be taken to make people interested about the institute
A company named Delta wants to develop a website where they will only introduce themselves. They appointed a web
developer for that work. The web developer told the authority that to publish the website, they need a domain name and
hosting.

Q) What is the difference between domain and hosting, as expressed in the stem?
A website can be created and run on a personal computer, but for others to access it worldwide, it must be placed online.
To make this possible, the site’s files need to be stored on a special server connected to the Internet. This allows people
from anywhere to open the site using its web address. In this way, a simple local webpage becomes available to
everyone.
Q) What activities reflected in the stem?

62