Information and

Communication Technology
Class XI-XII

Chapter-4
Website design and HTML
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

 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 computer is uniquely identified by

its IP address(Public IP address)

 IPv4 is 32 bit address

 Hypertext
All text document in Internet 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
Web browser

 A web browser is a software use for visiting

website.

 Internet connection and web browser

needed to visit/browse the websites.
 Title bar

Welcome
www.Facebook.com

Address bar

Content/Element
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

 FTP= File Transfer Protocol
Domain Type
http://www.rumc.edu/help/admission.php

Directory Page/file
 http://www.rumc.edu/admission.php

Domain name
Protocol Page/file
Server-Client Relationship
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.
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 from user 1) Can take input from 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
9) Less expensive to build 9) Expensive
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

Type of website based on structure

A) hierarchical structure

B) linear/sequential structure
C) network/relational structure
D) hybrid structure
 A) hierarchical/tree structure

with a homepage, main categories, and subpages

Home page

Login About us Service Contact us

B) linear/sequential structure

Page-1 Page-2 Page-3 Page-4

Each page can connect another page in sequential order

c) network/relational structure

All pages are connected to each other

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

Dream waver
MS front page
Structure of A simple HTML program
(একটি সাধারণ HTML প্রাগ্রামের কাঠামো)
<!DOCTYPE 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 Content Closing Tag

 CQ

 Write HTML code of above stem

 <html>
 <head></head>
 <body>

 <i>Dhaka</i> is the <b>Capital</b> of

<u>Bangladesh</u>

 </body>
 </html>
<strong>

Emphasis tag in HTML

So we can say
<strong> tag
 Used to make text strong
 <html>
 <head>
 </head>

 <body> Result:
 < strong > How are you</ strong>
 </body>
 </html> How are you
<em> tag
 Used to make text emphasize
 <html>
 <head>
 <title> </title>
 </head>
 <body> Result:
 <em> How are you</em>
 </body>
How are you
 </html>
<small> and <big> tag
<small> tag
 Used to make the text smaller

 Example:

 <html>
 <head>
 </head>
Result:
 <body>
 < small > School </small >
 </body>
School
 </html>
<big> tag
 Used to make the text bigger

 Example:
 <html>
 <head>
Result:
 </head>
 <body>
 <big> College</big>
 </body>
 </html>
College
Title tag
Title bar

Welcome
www.Facebook.com
<title> tag:
 We change text in title bar of browser
 <html>
 <head>
 <title> Welcome </title>
 </head> Title bar

Welcome

 <body>

 </body>
 </html>
Remarks/comment in HTML
Remarks or comments in HTML
 <! DOCTYPE html>
 <html>
 <head>
 </head>
 <body>
 This my websites
 </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>
Heading tag
<h1> tag
 Used to make Headline/Heading

 Example:

 <html>
 <head>
 </head>

 <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>
<br> tag
 Used to make a new line

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

 </body>
My Name is
 </html> Messi
Comilla-19

 Write HTML code for showing the output like

above stem
<b>Quick </b><i>Brown</i> <u>fox</u><br>
<del>jump over </del>the lazy ^dog<br>
and _then<b>it fall </b><br>
<u>prey to a <i>lion</i></u>
<p> tag
 Used to make a new paragraph

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

 <body>

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

 </body> Result
 </html>
 Align an Image/object/text

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

Value

Attribute

Closing tag
Opeing tag

Dhaka
Align an Image/object/text

 <p align=“left"> Dhaka </p>

Value

Dhaka
Align an Image/object/text

 <p align=“RIGHT"> Dhaka </p>

VALUE

Dhaka
 <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 size="7" color="Blue"> Uttara </font>
 <font face="Times New Roman"> Rajuk College </font>

 <font face="Arial"> 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>
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:


Easy way!
 <body bgcolor="Yellow">

 <body>
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>
OL tag
 used to create Ordered List

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

 Example:
<ol type ="1">
 <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=”A” start =”4”>

 <li>
 D.
 E.
 F.
 M-19

<ol Type=“a”>
<li>Mizan </li>
<li>Rahman </li>
<li>Anika </li>
</ol>
M-19

<html>
<head>
</head>

<body>
<ul type ="Circle">
<li> Mahin</li>
<li> Nihan</li>
<li> Zarif</li>
<li> Rafin</li>
</ul>
</body>
</html>
 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.

 <html>
 <head></head>
 <body>
 <OL>
 <li> Sc </li>
 <li> B.St</li>
 <li> Humanities </li>
 </OL>
 </body>
 </html>
Write html code for the output
 <ol type="A">
 <li> Dhaka </li>
 <ul type="circle">
 <li> Gazipur </li>
 <li> Manikgonj</li>
 </ul>
 <li> Khulna</li>
 <li> Rajshahi </li>
 </ol>
Write html code for the output
 <ul type="square">
 <li> Apple of </li>
 <ol type="a">
 <li> Austalia </li>
 <li> Africa</li>
 </ol>
 <li> Orange</li>
 <li> Banana </li>
 </ul>
<img> tag
Extension/format file of image file

.jpg= Joint Photographics

expert Group
.jpeg
.bmp
.tif
.gif
.png
<img> tag
 Used to insert an image in website

 Example:

Result:

 <img src=“Car.jpg”>

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

 <img src=“Tree.jpg”>

Ch-19:Draw html code to show the pic given below

 water Lily.jpeg

<img src=“water Lily.jpeg”>

 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 rail.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\rail.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

<img src=“E:\My Photograph\company.jpg” width=“300px” height=“200px”>

 In the home page of ABC college has a
picture of college campus at the middle of it.

 Write html code for home page of the ABC

college
Set alignment on the image

 <p align=“center”><img src=“ABC.jpg”></p>

 * <div> is also possible to set alignment

<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 Element

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

 <a href=“http://www.e-board.gov.bd”> our

board </a>
 Home.html login.html

………………….
login …………………

<a href=“login.html”> login</a>

 ‘Home page’ of Jaisa’s website contains two links.
One leads to facebook.com another link leads to a
page which is under home page name
‘details.html’

 <a href=“http://www.facebook.com”>
 click to open facebook</a>

 <a href=“details.html”> click to details</a>

 Website of A company has 2 links:
 Click ‘Social Network’ to open twitter.com
 Another link goes to product of a company
 <a href=“http://www.twitter.com”>
 Social Network</a>

 <a href=“product.html”> click to details</a>

 Mr. Azim developed a website. In homepage
there is a picture name Bannar.jpg. Later he
make a hyper link so a visitor can go to visit
Wikipedia.org.
 Write HTML code for Mr. Azim’s homepage

 <img src=“Banner.jpg" >

 <a href="http://www.wikipedia.org">
 Click here </a>
 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.

 <a href="http://www.wikipedia.org">
 <img src=“Banner.jpg" >
 </a>
 Mr. Azim developed a website. In homepage
there is a picture name pic.png. By Clicking
there a visitor can go to visit bing.com the
size of the picture is 200 x 200 and it is kept
in a folder named ABC in
D drive of hard disk.
 Write HTML code for Mr. Azim’s homepage

 <a href="https://www.bing.com">
 <img src=“D:\ABC\pic.png"
width=“200px” height=“200px” >
 </a>
 List of search
engine:
1) google.com
2) yahoo.com
<ol>

<li><a href=“https//www.google.com” >

google.com </a> </li>

<li><a href=“https//www.yahoo.com” >

yahoo.com </a> </li>
</ol>
 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="https://www.google.com" target="_self">
click here to open on same tab
</a>
<Table> tag
 Create the table given below
<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>
 <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>
 <table>

 <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> Roll </th> <th> Subject </th>
</Tr>

 <Tr> <td> 201 </td> <td> Bangla </td> </Tr>

 <Tr> <td> 202 </td> <td> English </td> </Tr>
 <Tr> <td> 203 </td> <td>ICT</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>
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>
 You need to click on “Board” for visiting
www.board.edu.bd to see ICT marks
 <table border=“1”>
 <Caption>HSC-2019</Caption>
 <tr>
 <td align=“Center” colspan=“2”> ICT</td>
 </tr>
 <tr> <td> Subject</td>
 <td>
 <a href=“https://www.board.edu.bd”>Board</a></td>
</tr>
 </table>
<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>
How to change cell color of 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>
ICT
Cumilla-19

 Write html code with inserting a picture in the

blank cell
 <table border=“1”>
 <tr>
 <td> A</td> <td colspan=“2” align="Center">
B</td></tr>
 <tr>
 <td>C</td><td>D</td><td rowspan="2">
 <img src="abc.jpg"> </td>
 </tr>
 <tr><td>E</td><td>F</td></tr>
 </table>
 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 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

 <table border="2">
 <tr><th>serial No</th> <th>Institure
picture</th></tr>
 <tr><td></td><td> <img src="train.jpg“>
</td></tr>
 <tr><td></td><td></td></tr>
 </table>
 <table border="2">
 <Caption><b> Employee Information</b></caption>
 <tr> <th> Id No</th><th> Emp. Name</th><th>
Salary </th></tr>
 <tr><td>1001</td> <td>Hafiz</td><td rowspan="2">
50,000</td> </tr>
 <tr> <td>1005</td><td>Sony</td></tr>
 </table>
Stem: Ctg 2017

 Write HTML code so that if we click on

image.jpg to visit www.moedu.gov.bd.
 <table border="1">
 <tr><th colspan="3"> Test result </th>
 <td rowspan="4">
 <a href=“https://www.moedu.gov.bd.">
 <img src="image.jpg"></a></td>
 </tr>
 <tr> <td>Roll</td> <td> Name </td><td>
Result</td></tr>
 <tr> <td>101</td> <td> Reza </td><td>
A+</td></tr>
 <tr> <td>102</td> <td> Arif </td><td> B+</td></tr>
 </table>
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)
 <HTML>
 <head> </head>
 <body>
 <img src=“Campus.jpg”>
 <OL>
 <li>IT </li>
 <li> Physical Sc</li>
 <li> Biology</li>
 </OL>
 <a href=“Notice.html”> click to visit notice board</a>
 </body>
 </HTML>
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
 <HTML>
 <HEAD> </HEAD>
 <BODY>
 <img src=“x.jpg”>

 <a href=“Employee.html”> click here to see

employee details </a>

 <a href=“Product.html”> click here to see Product

details </a>
 </BODY>
 </HTML>
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
 <html>
 <head>
 </head>
 <body>
 <a href=“http://www.xiadmissionboard.edu.bd”>
 <img src=“C:\picture\Logo.jpg” width=“300px”
height=“300px”>
 </a>
 </body>
 </html>
Dhk 18
 A Website has been designed for "Chandana Model
College" using HTML only. The text "Welcome to
Chandana Model College" is displayed on the top of
the picture in blue color. There is a picture the home
page of the site. There have a link of facebook under
the picture.

 Write down the HTMI, Code to develop the Home

page as mentioned in stern.
 <html>
 <head>
 </head>
 <body>
 <font color=“blue” > welcome</font>
 <img src=“abrar.jpg”>
 <a href=“https://www.facebook.com”>click
</a>
 </body>
 </html>
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.
<html>
<head> </head>
<body>
<font color=“Blue”>Welcome to Chandana
Model College </font>
<img src=“ict.jpg” width=“200px” height=“300px”>
<br>
<a href=“Notice.html”>click here for notice </a>
</body>
</html>
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.


Opening Tag URL as Value

<a href=“http://www.moedu.gov.bd”> Click here

</a>

Link text as content

Closing Tag

Hyper reference as attribute

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.
 <html>
 <head> </head>
 <body>
 XYZ College, Dhaka.<br>
 Available Honor’s subject:

 <ol>
<li>Bangla</li>
<li>English</li>
<li>Mathematics</li>
<li>Accounting</li>
</ol>
 </body>
 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.
Convert row into column and vice
versa
table border="1">
<tr> <td colspan="3" align="center">
<a href="https://learnict.info">ICT</td> </a></tr>

<tr><td>Subjective</td><td>Objective</td><td>Total
</td></tr>

<tr><td>37</td><td>21</td><td>58</td></tr>
</table>
 <table border="1">
 <tr> <td rowspan="3>ICT</td>
<td>Subjective</td><td>37</td></tr>
 <tr> <td>Objective </td><td>21</td></tr>
 <tr> <td>Total</td><td>58</td></tr>
 </table>
 <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>Math</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
So the features can be:

 The user who asked the question can choose

the best answer.

 User can get point for asking good question

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
published:

 Server for hosting

 Register a domain name
Server:
 Sever must remain active(run) 24 hours in a
day
 Server must be connected to Internet
 Server must have an public IP address
Domain name purchase
 Domain Name need to registration

 Buying domain name form Internet is possible if

available unused.
Link between server and domain
name
 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
 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
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.