Information and

Communication Technology
Class XI-XII

Chapter-4
Website design and HTML
Concept of web design
Web client:
 Web client in a computer which is
connected to Internet and used by
common user to visit(browse) website
from server.

 Web server :
 Web server in a computer which is
connected to Internet and stores(hosts)
websites.

 Upload:
 transferring any information from
client’s computer to Server

 Download
 transferring any information from
Server computer to client’s
computer

Website
 A set of related web pages located
under a single domain name, typically
produced by a single person or
organization.
Website may contain

text
image
audio
video
graphics
Database and
hyperlinks to other web pages
and files
Tim Berners-Lee

 CERN
 Switzerland
Tim Berners-Lee

 Suggest a method that will able to send

document from one computer to another by
using IP address

 Inventor of WWW(World Wide Web)

 He also give concept of hypertext, hyper link,

hypermedia
IP address
 Example
 192.168.4.3

 Each computers is uniquely identified by

its IP address(Public IP address)
 IPv4 is 32 bit address
 Hypertext
All text document are called hypertext
 Hyperlink
 Network address that used to find hypertext
called hyperlink.
 a click is on hyperlink can make to find a
hypertext
 Hypermedia
Picture, audio, video etc. (other than text) is
called hypermedia

 Title bar

Welcome
www.Facebook.com

Address bar

Content
Web browser

 A web browser is a software use for visiting

website.

 Internet connection and web browser

needed to visit/browse the websites.
Example of some popular web browsers:

 Google chrome
 Mozilla Firefox
 Opera
 Internet explorer
 MS Edge
 Safari
Network Protocol
 A set of rules that provide communication in a
network.

 Examples:

 HTTP= Hyper Text Transfer Protocol

Domain Type
Server-Client Relationship
 How web site works

Request

Server
Response (host website)
Client
(user
device)
 Request

Server

Client
Response

Database
Website has 2 parts
 Client
 Server

 Client: Client sends request to

server
 Server: servers sends response
according to client’s request
 Example: How server response to
client

 1) User sends request through a client

computer to server for opening an
new mail account.

Request

Client Server
 Example: how server response to
client

 2) Server check whether the request

is valid or not
 (may be this id is already existed)

Response

Client Server
 Example: how server response to
client

 If everything is alright then servers

makes new account and send
response to client
Language used in server :

 The software that runs on the server is

usually written using programming language

 Php=Hypertext Pre-Processor
 Python
 Java
 Rubi
HTML and CSS
 Websites or web applications running in the
browser are made with HTML or CSS

 HTML: Hyper Text Markup Language

 CSS: Cascading Style Sheet

 In modern days HTML and CSS are used

together to make an website attractive

Markup language:
 Used to show information on browser
 Tags are used in markup language to display
data on websites
Clint side programing in dynamic
website
 For dynamic websites its not always
mandatory to send data to server.
Clint side programing in dynamic
website
 Its also possible to perform many tasks on
client side. For this reason client part of a
website support programming. JavaScript is
most popular for such purposes.
 Request

Server
Client

Response

Database
Types of website

Static websites
Information are fixed. Can’t take input by user

Dynamic website
Information are changeable. Can take input by
users.
Web application
Websites is also called web application.

Examples:
google.com
services.nidw.gov.bd
Passport.gov.bd
 Static Website Dynamic website
1) Cant take input form user 1) Can take input form user
2) No Database used 2) Database used
3) Use HTML, CSS for 3) Use PHP, python, etc. for
developing developing and MySQL &
SQL server for database
4) Faster load 4) Slower load
5) Hard to update 5) Easy to update
6) One way Communication 6) Two way Communication
7) Simple structure & easy to 7) Complex structure & hard
develop to develop
8) Fixed number of pages 8) New pages can be
generated
Stem:
 Students of higher secondary level of a
college divided into two groups and told to
develop website. The 1st group developed
the website by using HTML and CSS. The
2nd group used CSS, MySQL, php etc. for
developing their website. the Judges choose
the 2nd one.

 D) Explain why the judges selected the 2nd

website?
Stem:
 Teacher discussed about two types of
website in his lecture in the class and he said
out of two, one is interactive and other is not.
Then he taught how to hyperlink is to be
done.

 Which one of the two do you think is suitable

for use according to the discussion by the
teacher of noticed stem.
Stem:
 By using the web site of ‘KHA’ college some
one can fill up the admission form, input the
marks of examination and guardian can
exchange their views and opinions related to
education.

 D) what type of website in the above stem?

s19
 Website of Shila’s college provide both way
communication between server and browser.

 C) describe types of website mentioned on

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 take the decision to
change the website with the tools like PHP,
MySQL etc.
 (d) Analyze the logic of the decision
mentioned in the stem.
 Risha wanted to develop a website. So she
got suggestion from a web developer. The
web developer suggested 2 method. One is
cheap but hard to update regularly. Another
is costly but easier to update.

 What type of website mentioned in the stem


 Structure a website
 Traditional website

Home page

About us Contact us FAQ

(Frequently Asked Questions)
 Audio/Video sharing Website Structure

 Audio/video sharing website may own

separate webpage for each audio or video

Home page

Video1 Video2 Audio1 Audio2

Structure of blog posting Website

 Each blogger may own a separate page

Home page

user1 user2 user3 user4

Benefit of Website
 Easy marketing and sales

 Publicity & Advertising

 Easy communication

 Reduce waste and improve efficiency

 Reaching a Wider Audience

 Anyone, Anywhere & Anytime

 Easy Access To Information

Disadvantage of Website
 The information on the site may not be reliable.

 Internet connection needed to access the information

 Server down leads to unavailability of information

HTML editor:

Note pad
Note pad++
Sublime text
Smart phone app is also possible to test
HTML tags
(Structure of A simple HTML program)
একটি সাধারণ HTML প্রাগ্রামের কাঠামো

<html>
<head>
…………………………………………….
</head>

<body>
…………………………………………….
…………………………………………….
</body>
</html>
Formatting Tags
<b>, <i>, <u>
<b> tag

 Used to make the text bold

 Example:
 <html>
 <head> </head>
 <body> Result

 <b> Bangladesh</b>

 </body>
 </html>
<i> tag
 Used to make the text italic

 Example:
 <html>
 <head>
 </head>
 <body> Result:
 <i> Uttara</i>
 </body>
 </html>
<u> tag
 Used to make the text underlined

 Example:
 <html>
 <head> </head>
 <body>
Result:
 <u> Dhaka </u>

 </body>
 </html>
different tags can be applyed on the same
text

 <b><u><i>Bangladesh</i></u></b>

Result:
  <i>Bangladesh </i>

opening Tag Element Closing Tag

 CQ

 Write HTML code of above stem

<strong>

Emphasis tag in HTML

So we can say
Title tag
<title> tag:
 We change text in title bar of browser
 <html>
 <head>
Title bar
 <title> Welcome </title>
 </head>
Welcome

 <body>

 </body>
 </html>
Remarks/comment in HTML
Remarks or comments in HTML
 <! This a HTML document >
 <html>
 <head>
 </head>
 <body>
 This my websites
 </body> This my websites

 </html>
Remarks or comments in HTML
 <html>
 <head>
 </head>
 <body>
 This my websites
 <! This a HTML document >
 </body> This my websites

 </html>
<sup> tag
 Used for superscript

 Example:
 <html>
 <head></head>
 <body>
Result:
 X ³Y
 </body>
 </html>
<sub> tag
 Used for subscript any text

 Example:
 <html>
 <head></head>
Result:
 <body>
 H ₂ O
 </body>
 </html>
 CQ

Write HTML code for the above output?

Heading tag
<h1> tag
 Used to make Headline/Heading

 Syntax:
 <h1>………text……</h1>

 Example:

 <html>
 <body>
 <h1> Today’s Headline</h1>
 </body>
 </html>
Try your self
 <h1> Headline 1</h1>
 <h2> Headline 2</h2>
 <h3> Headline 3 </h3>
 <h4> Headline 4 </h4>
 <h5> Headline 5 </h5>
 <h6> Headline 6 </h6>
<Del> and <strike> tag
Del tag
 Cut the text along the middle

 <Html>
 <head> </head>
 <Body>
 <del> My old phone number </del>
 </Body>
 </Html>
<Strike> tag
 Cut the text along the middle

 <Html>
 <head> </head>
 <Body>
 <Strike> My old phone number </Strike>
 </Body>
 </Html>
Comilla-19

 Write HTML code for showing the output like

above stem
<p> tag
 Used to make a new paragraph

 Syntax:
 <p>………text……</p>

 Example:
 <html>
 <head></head>

 <body>

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

 </body>
 </html>
 <DIV> tag
 Used to divide a document in different sections

 <div>DHAKA</div><div> BANGLADESH</div>
Pair tag and empty tag
 Pair tag(container tag)

 If a tag has both opening and closing

 Example:
 <b> </b>
 <i> </i>
 <p> </p>
 <u> </u>
Non Pair tag/Empty tag

 If a tag has only opening

 Example:

 <br>
 <hr>
 <img>
<br> tag
 Used to make a new line

 Example:
 <html>
 <body>
Result:
 My Name is <br> Messi

 </body>
My Name is
 </html> Messi
<HR> Tag

 for drawing a horizental line


 Example:
 <body>

 <hr>

 </body>
FONT tag
 <font color="red"> Uttara </font>
 <font size="7" color="Blue"> Uttara </font>
With alignment
 <p align=“center”><font size=“2"
color=“Blue"> Uttara </font></p>
 <font face="Times New Roman"> Rajuk College </font>

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

 <font face="calibri"> Rajuk College </font>

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

 <font size="10" face="Arial Black"
color="Blue"> Uttara </font>
CQ
 Trisha created a website. In her home
page there is line-
 “Welcome to Dhaka” in green color.

 Write HTML code for Trisha’s home

page

 <font color=“Green”> Welcome to Dhaka

</font>
CQ
 Maliha created a website in her home page
there is line-
 “Welcome to my place” in Blue color. the text
is shown in right side of the page and with a
special font “Arial Black ”
 Write HTML code for Malia’s home page

 <p align=“Right” ><font color=“Blue”

face=“Arial Black”> Welcome to Dhaka
</font></p>
How write Bangla in HTML
 <html >
 <head>
 </head>
 <body>
 সবাই কেমন আছ া?

 </body>
সবাই কেমন আছ া?
 </html>
How write Bangla in HTML
 <html lang="bn">
 <head>
 <meta charset="utf-8">
 </head>
 <body>

 </body>

 </html>
Region code for Bangla(Bangladesh)
 <html lang="bn-BD">
 <head>
 <meta charset="utf-8">
 </head>
 <body>

 </body>

 </html>
Region code of English(USA)
 <html lang=“en-US">
 <head>

 </head>
 <body>

 </body>

 </html>
Div and span tag
Div tag
 defines a division or a section in an HTML
document.
 used to group block-elements to format them
with styles.

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

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

this is other text </span>
Style tag in HTML
Set background color
 <html>
 <head> </head>
 <body style="background-color:red">

 </body>
 </html> Out Put:


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>
Stem: write HTML code the show
the following ouput
Benefit of HTML for creating website

 Is very easy to learn

 It totally free (need not buy any
software)
 Its supported by all browsers.
 Platform independent
 Can be used to present any kind of
data.
 text, picture, video,
Disadvantage of HTML
1. It can create only static website

2. Need to write a lot of tags

3. Security features are not good in HTML.

4. Need to memorized tags

5. Don’t support database

LIST TAG
UL=UNORDERED LIST
OL=ORDERED LIST
UL tag
 used to create Unordered List
 Example:
 <ul>
 <li> Messi</li>
 <li> Ronaldo</li>
 <li> Neymar</li>
 </ul>
UL tag
 used to create Unordered List
 Example:
 <ul type="circle">
 <li> Messi</li>
 <li> Ronaldo</li>
 <li> Neymar</li>
 </ul>
UL tag
 used to create Unordered List
 Example:
 <ul type="square">
 <li> Messi</li>
 <li> Ronaldo</li>
 <li> Neymar</li>
 </ul>
UL tag
 used to create Unordered List
 Example:
 <ul type="Disk">
 <li> Messi</li>
 <li> Ronaldo</li>
 <li> Neymar</li>
 </ul>
Nested list
 <ul>
 <li> Gulshan</li>
 <li> Uttara </li>
 <ul>
 <li> Rajlaxmi</li>
 <li> House Building</li>
 <li> Azampur</li>
 </ul>
 <li> Farmgate</li>
 </ul>
 <ul>
 Area inside dhaka
 <li> Gulshan</li>
 <li> Uttara </li>
 Some area inside Uttara
 <ul>
 <li> Rajlaxmi</li>
 <li> House Building</li>
 <li> Azampur</li>
 <ul>
 <li>Rabindra Shorani</li>
 <li>Sector-7</li>
 </ul>
 </ul>
 <li> Farmgate</li>
OL tag
 used to create Ordered List

 Example:
<ol>
 <li> Messi</li>
 <li> Ronaldo</li>
 <li> Neymar</li>
</ol>
OL tag

 Example:

<ol type="a">
 <li> Messi</li>
 <li> Ronaldo</li>
 <li> Neymar</li>
</ol>
OL tag
 used to create Ordered List

 Example:
 <ol type="A">
 <li> Messi</li>
 <li> Ronaldo</li>
 <li> Neymar</li>
 </ol>
OL tag
 used to create Ordered List

 Example:
 <ol type="i">
 <li> Messi</li>
 <li> Ronaldo</li>
 <li> Neymar</li>
 </ol>
OL tag
 used to create Ordered List

 Example:
 <ol type="I">
 <li> Messi</li>
 <li> Ronaldo</li>
 <li> Neymar</li>
 </ol>
Start attribute with list
 <ol type=”i” start =”3”>

 iii.
 iv.
 v.
List in reverse order
 <ol reversed>
 <li>Kapil</li>
 <li>sachin</li>
 <li>Will</li>
 <li>nikhil</li>
 </ol>
 M-19

<OL Type=“a”>
<li>Mizan </li>
<li>Rahman </li>
<li>Anika </li>
</ol>
M-19
 Home page of ABC college has a list of
different faculties in sequential form: Sc, B.St
and humanities .
 Write down the html tag for home page of
ABC college.

 <OL>
 <li> Sc </li>
 <li> B.St</li>
 <li> Humanities </li>
 </OL>
Write HTML code

 Subject list :
 d. Bangla
 e. English
 f. ICT
<img> tag
<img> tag
 Used to insert an image in website

 Example:

Result:

 <img src=“Car.jpg”>
CQ
 Joly developed an website . In her home
page there is picture of a tree.

 Write HTML code for Joly’s home page

Ch-19:Draw html code to show the pic given below

 water Lily.jpeg
Extension/format file of image file

.jpg
.jpeg
.bmp
.tif
.gif
.png
Define size of picture

<img src="Car.jpg" width="200px"

height="100px">
Use of alt attribute with img

<img src="abc.jpg" alt="sorry! NOT found">

 * ‘ALT’ for failure to show the image

 Suppose, Image name is mrc.jpg. It is
located in a folder named Picture and
the folder is under D drive of hard disc.
 Write HTML code for showing the image

 <img src=“D:\Picture\mrc.jpg”>
 Mr. Arif developed a website. In his home
page he showed a picture of his company.
The image of his company is 300 × 200 and
kept in a folder name MY Photograph in E
drive of his hard disc.
 Write HTML code for Mr. Arif’s website
Keep your mouse on the picture and see!

 <abbr title=“this is a nice car”>

 <img src=“Car.jpg”>
 </abbr>
Set an image as background
 <head>
 <style type="text/css">
 Body{background-image:url(abc.jpg);}
 </style>
 </head>

 <body>
 </body>
<A> tag
Hyper link
 Used to make hyperlink
 Example:

<a href="https://www.google.com"> click here </a>

Result:
Click here
Opening Tag URL as Value

 <a href=“https://www.google.com”> Click here

</a>

Link text as content

Closing Tag

Hyper reference as attribute

 Shila made a website and click “our board”.
Thus she visited a website named
 www.e-board.gov.bd

 D)write code for shila’s web site

 Home.html Company Profile.html

………………….
…………………
visit company profile

<a href=“Company Profile.html”> visit company profile</a>

 Home page of Jaisa’s website contains two links.
One leads to facebook.com another link leads to
page name details.html
 Website of A company has 2 links:
 Click ‘Social Network’ to open twitter.com
 Another link goes to product details of a
company
 Mr. Azim developed a website. In homepage
there is a picture name Bannar.jpg. By
Clicking there a visitor can go to visit
Wikipedia.org.

 Write HTML code for Mr. Azim’s homepage

 Hyper link open in a new tab

 <a href="http://www.google.com" target="_blank">

click here to open in a new tab
 </a>
 Hyper link open in on same tab
<a href="http://www.google.com" target="_self">
click here to open on same tab
</a>
 Calling the home page it self
<a href=“#”> home <a>

 Jump top of the page

 <a href=“#top”> go to top <a>

 Jump specific part of the page

 <a href=“#tips”> useful tips <a>
<Table> tag
 Create the table given below
<table border="2">

<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>
 <table border="5">
 <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>
 <table border=“0">

 <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>
CB: 2017

 Write HTML code for showing the above stem

 <table border="1">
 <Tr> <th> ID </th><th>Name</th><th>GPA</th>
 </Tr>
 <Tr> <td> 101 </td> <td> Azim </td>
<td>4.50</td>
 </Tr>
 <Tr> <td> 102</td> <td> Prince </td>
<td>5.00</td>
 </Tr>
 </table>
 Make table without border

<table>

<Tr> <th> ID </th><th>Name</th><th>GPA</th>

</Tr>
<Tr> <td> 101 </td> <td> Azim </td> <td>4.50</td>
</Tr>
<Tr> <td> 102</td> <td> Prince </td> <td>5.00</td>
</Tr>

</table>

 <table border="1">
 <caption> My table</caption>
 <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>
 <table border=“1”>
 <tr> <th colspan=“2”>ICT </th></tr>

 <tr><td> Sub</td> <td>Obj</td> </tr>

 </table>
 <table border="1">
 <tr> <td colspan="2">ICT </td></tr>
 <tr><td> Sub</td> <td>Obj</td> </tr>

 </table>
 <table border="1">
 <tr> <td align="Center" colspan="2">ICT
</td></tr>
 <tr><td> Sub</td> <td>Obj</td> </tr>
 </table>

 <table border="1">
 <tr><td align="Center" colspan="2"><b>ICT</b>
</td></tr>
 <tr><td> Sub</td> <td>Obj</td> </tr>
 </table>
 <table border="2">
 <tr>
 <th colspan="3">Dhaka</th>
 </tr>
 <tr>
 <td> Uttara </td><td> Farmgate</td> <td>
Badda</td>
 </tr>
 </table>
cellpadding

 <table border="1" cellpadding="10">

 <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>
cellpadding

 <table border="1" cellpadding="20">

 <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>
cellspacing

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

 <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>
cellspacing

 <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>
 You need to click on “Board” for visiting
www.board.edu.bd to see ICT marks
<Table border="3">

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

<tr> <td>B.St </td></tr>

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

</Table>
 <Table border="3">
 <tr> <td>A</td> <th rowspan="2">BF</th>
<td>C</td> <td>D</td>
 </tr>
 <tr> <td>E </td> <td>G</td> <td> H</td>
 </tr>
 <tr> <td>I</td> <td>J</td>
 <th colspan="2">KL</th>
 </tr>
 </Table>
 <Table border="1" >
 <tr>
 <th> FName</th>
 <th> Name </th>
 </tr>
 <tr>
 <td bgcolor="Yellow">
 A</td>
 <td bgcolor="Red"> B </td>
 </tr>
 </Table>
CQ: What is Output of the HTML code

 <body>
 <Table border=“3” >
 <tr>
 <th> FName</th>
 <th> Name </th>
 </tr>
 <tr>
 <td> A</td>
 <td> B </td>
 </tr>
 </Table>
 </body>
 <html>
 <head> <title> ICT</title> </head>
 <body>
 <h3> COLLEGE RESULT</h3>
 <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 Result.html"> MY test
Result</a></td>
 </tr>
 </table>
 </body>
 </html>
Stem:
 Rajuk college decided to develop a website in order
to proper management of the institute. For this
purpose they used only HTML and created a
Student’s Information table with fields: Students
Name, Father’s Name, Date of Birth, Roll Number &
Section.

 C) write HTML code to create the table mentioned in

the stem.
c) Write HTML code to draw the table given below

Hyper link

<
Cumilla-19

 Write html code with inserting a picture in the

blank cell
 Explain the importance of the uses of image in the
webpage after writing HTML code to see the
information of the 1st table with the picture of the
name mentioned in the blank cell of 1st table.

 Write the necessary code with HTML in order to see

the information of the 2nd table in Mozilla Firefox

Stem: Ctg 2017

 Write HTML code so that if we click on

image.jpg to visit www.moedu.gov.bd.
Stem: SB 2017
 Promita created 3 pages: Home.html, Admission.html
and Result.html for developing a website. Result.html
was shown like the following picture

 Then she make some connection system for going

from home page to other pages.
 C) write HTML code for result.html
 D)What are the importance of Promita’s last initiative

 <body>

 <a href=“Result.html”> click result</a>

 <a href=“Admission.html”> click

Admission</a>

 <body>
Practicing CQ
RB 16 Stem:
 A school named “Alor Shopan” was thinking to
develop a website. In it’s home page a picture named
“Campus.jpg” will appear and there will be arranged
in a list of sections named: IT , Physical Sc and
Biological Science etc. and there will be also a
‘Notice Board’ linked in the home page. The school
authority called three IT specialists. The IT specialist
suggested 2 solution. 1st one was cheaper but some
difficulties for updating regularly. The 2nd solution
was costly but easy to update regular basis.
 C) write HTML code to create the home page.
 D) which soloution is better for Alor Shopan ? (Next
page for Solution)
Cb 16 Stem
 The picture of the administrative building of the ‘X’
institute shown in the home page of it’s website.
Two webpages named “Employee.html” and
“Product.html” are linked with the home page. If
the website published in Internet , awarded people
of the world will be informed about the institute.
 C) write down the HTML code for design the home
page.
 D) according to stem what steps should be taken to
make people interested about the institute
Mr. Z was showing HTML coding in programming
class. He added a picture from c drive under a
folder name picture. The name of the image was
Logo.Jpg and size of the image was 300 x 300
pixel. Then he said his student to write an HTML
code that will allow the image to click and it will take
a visit xiadmissionboard.edu.bd. then he write

c) What are the HTML code written by the students.

Explain its attributes
Dhk 18
 A Website has been designed for "Chandana Model
College" using HTML only. There is a picture named
ict.jpg of size 200x300 Pix in the home page of the
site. There have a link of notice page named
notice.html 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.
 Write down the HTMI, Code to develop the Home
page as mentioned in stern.
 Explain necessary steps taken so that visitors can
give their opinion in website.
Stem:
 ICT teacher added the web site of Ministry of
Education with the home page of the
college’s website with the word
www.moedu.gov.bd
C) Explain the code written by the ICT teacher.
s19
 The website of Shila’s college distributes data
bidirectional between the server and
browsers. Shila has made a webpage where
www.e-board.edu.bd website is shown when
the word “our-board” is clicked

 (c) Explain the type of the website of Shila’s
college.
 (d) The webpage, which is. made by Shila is
a webportal”-Analyze with HTML codes.
Jb 17 Stem:
 XYZ College, Dhaka.
 Available Honor’s subject:
1.Bangla
2. English
3. Mathematics
4.Accounting

 c) Write the HTML code for showing the stem in your

college’s home page.
 XYZ College, Dhaka.
 Available Honor’s subject:
1.Bangla
2. English
3. Mathematics
4.Accounting

 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.
 <table border="1">
 <tr> <td> Student Name</td> <td colspan="3"
align="Center"> Compulsory</td> <td>
Optional</td> </tr>
 <tr> <td rowspan=3>Harry Potter</td>
 <td rowspan=3>Bangla</td>
 <td rowspan=3>English</td>
 <td rowspan=3>ICT</td>
 <td >Physics</td> </tr>
 <tr> <td> Math </td></tr>
 <tr> <td> Biology </td></tr> </table>
CONVERT ALL ROW IN COLUM
 <table border="2">
 <tr> <td>Student </td><td colspan="3">Harry
Porter</td></tr>
 <tr> <td rowspan="3">Compoulsary </td>
 <td colspan="3">Bangla</td></tr>
 <tr><td colspan="3">English</td></tr>
 <tr><td colspan="3">ICT</td></tr>
 <tr><td>Optioanl</td><td>Physics</td><td>M
ath
 </td><td>Biology</td></tr></table>
Website design and development
Some key points keep in mind
while designing an website
 Looks like attractive to the user

 User can find the different features

easily

 User can use the features

Website design
Suppose you are going a design an website
that user can post programing related question
and answer.
So the features can be:

User will be able to register and log in

User can post question
User submit answer of the question of website
Website design
 Determine a layout of a website
 Layout/design can be depict on paper by
using pen.
Website design
 design of website on paper is called
wireframe. It is also possible to draw an
wireframe by graphic design software like:
 Adobe illustrator
 Gimp
Website development
 After design, development will be started
 Development of website needs
 front end development
 back end development
Website development
 Front ends development:
 Developed by HTML,CSS and other languages
like php, JavaScript etc.
Website development
 Back end development :
 Used to connect with database
 Implement different features of websites
Website development
 Full stack developer
 Can perform both front end and back end
development
Website development
 Different changes in design maybe needed
during development.

 Besides regular testing(checking error) and

debugging(correcting error) is also needed.

Publishing a website
 After development website will be
kept(hosting) in a computer(server) for
publishing.
Publishing a website
 Sever must remain active(run) 24 hours in a
day
 Server must be connected to Internet
 Server must have an public IP address
Publishing a website
 Domain Name need to registration

 Buying domain name form Internet is possible if

available unused.
Publishing a website
 Link should be established between domain
name and web hosting server
Publishing a website
 t is possible to browse any website with IP
address but it is not convenient. Because the
IP address is numerical.
 So the domain name is used instead of the IP
address

www.abc.com 152.123.12.06
Stem:
 Shuvo got some training on web page
development. He created a webpage with his
picture and information and can run it from
his own computer. He wanted to improve his
site and start it by giving name ”shuvo.net”.
Knowing this his friend Rahul says-”I want to
visit your web page tonignt”. In replay Shuvo
says-”Not now. Yet, I need to do some
publishing work”
 D) Explain Shuvo’s comment
Describe the steps to publish the
following table
Stem:
 A Company named Delta wants to develop a website
for them where they express only introduce them self.
They appointed a web developer for that work. Web
developer told the authority to express in the website
they need domain name & hosting.

C. What are the difference between domain & hosting?

which is express in the stem.
Cb 16 Stem
 The picture of the administrative building of the ‘X’
institute shown in the home page of it’s website.
Two webpages named “Employee.html” and
“Product.html” are linked with the home page. If
the website published in Internet , awarded people
of the world will be informed about the institute.
 D) according to stem what steps should be taken to
make people interested about the institute